Add checkbox list component (#433)

Signed-off-by: Seddik Yengui <[email protected]>

Author: YenguiSeddik

demo/src/app.jsx

@@ -15,13 +15,15 @@ import {
     FormControlLabel,
     FormGroup,
     Grid,
+    IconButton,
     StyledEngineProvider,
     Tab,
     Tabs,
     TextField,
     ThemeProvider,
     Typography,
 } from '@mui/material';
+import CommentIcon from '@mui/icons-material/Comment';
 import { styled } from '@mui/system';
 import { useMatch } from 'react-router';
 import { IntlProvider, useIntl } from 'react-intl';
@@ -102,6 +104,7 @@ import inputs_en from '../../src/components/translations/inputs-en';
 import inputs_fr from '../../src/components/translations/inputs-fr';
 import { EquipmentSearchDialog } from './equipment-search';
 import { InlineSearch } from './inline-search';
+import MultipleSelectionDialog from '../../src/components/MultipleSelectionDialog/MultipleSelectionDialog';
 
 const messages = {
     en: {
@@ -311,6 +314,10 @@ function AppContent({ language, onLanguageClick }) {
     const [equipmentLabelling, setEquipmentLabelling] = useState(false);
 
     const [openReportViewer, setOpenReportViewer] = useState(false);
+
+    const [openMultiChoiceDialog, setOpenMultiChoiceDialog] = useState(false);
+    const [openDraggableMultiChoiceDialog, setOpenDraggableMultiChoiceDialog] = useState(false);
+
     const [openTreeViewFinderDialog, setOpenTreeViewFinderDialog] = useState(false);
     const [openTreeViewFinderDialogCustomDialog, setOpenTreeViewFinderDialogCustomDialog] = useState(false);
 
@@ -540,6 +547,22 @@ function AppContent({ language, onLanguageClick }) {
         );
     }
 
+    const [checkBoxListOption, setCheckBoxListOption] = useState([
+        { id: 'kiki', label: 'Kylian Mbappe' },
+        { id: 'ney', label: 'Neymar' },
+        { id: 'lapulga', label: 'Lionel Messi' },
+        { id: 'ibra', label: 'Zlatan Ibrahimovic' },
+        {
+            id: 'john',
+            label: 'Johannes Vennegoor of Hesselink is the football player with the longest name in history',
+        },
+    ]);
+
+    const secondaryAction = () => (
+        <IconButton aria-label="comment">
+            <CommentIcon />
+        </IconButton>
+    );
     const defaultTab = (
         <div>
             <Box mt={3}>
@@ -557,6 +580,65 @@ function AppContent({ language, onLanguageClick }) {
             <SnackWarningButton />
             <SnackInfoButton />
 
+            <Button
+                variant="contained"
+                style={{
+                    float: 'left',
+                    margin: '5px',
+                }}
+                onClick={() => setOpenMultiChoiceDialog(true)}
+            >
+                Checkbox list
+            </Button>
+            <MultipleSelectionDialog
+                items={checkBoxListOption}
+                selectedItems={[]}
+                open={openMultiChoiceDialog}
+                getItemLabel={(o) => o.label}
+                getItemId={(o) => o.id}
+                handleClose={() => setOpenMultiChoiceDialog(false)}
+                handleValidate={() => setOpenMultiChoiceDialog(false)}
+                titleId="Checkbox list"
+                divider
+                secondaryAction={secondaryAction}
+                addSelectAllCheckbox
+                isCheckboxClickableOnly
+                enableSecondaryActionOnHover
+            />
+
+            <Button
+                variant="contained"
+                style={{
+                    float: 'left',
+                    margin: '5px',
+                }}
+                onClick={() => setOpenDraggableMultiChoiceDialog(true)}
+            >
+                Draggable checkbox list
+            </Button>
+            <MultipleSelectionDialog
+                items={checkBoxListOption}
+                selectedItems={[]}
+                open={openDraggableMultiChoiceDialog}
+                getItemLabel={(o) => o.label}
+                getItemId={(o) => o.id}
+                handleClose={() => setOpenDraggableMultiChoiceDialog(false)}
+                handleValidate={() => setOpenDraggableMultiChoiceDialog(false)}
+                titleId="Draggable checkbox list"
+                divider
+                secondaryAction={secondaryAction}
+                isDndDragAndDropActive
+                enableSecondaryActionOnHover
+                onDragEnd={({ source, destination }) => {
+                    if (destination !== null && source.index !== destination.index) {
+                        const res = [...checkBoxListOption];
+                        const [item] = res.splice(source.index, 1);
+                        res.splice(destination ? destination.index : checkBoxListOption.length, 0, item);
+                        setCheckBoxListOption(res);
+                    }
+                }}
+            />
+
             <Button
                 variant="contained"
                 style={{

package-lock.json

@@ -37,6 +37,7 @@
         "memoize-one": "^6.0.0",
         "oidc-client": "^1.11.5",
         "prop-types": "^15.8.1",
+        "react-beautiful-dnd": "^13.1.1",
         "react-csv-downloader": "^3.1.0",
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
@@ -89,6 +90,7 @@
         "@types/node": "^18.19.31",
         "@types/prop-types": "^15.7.12",
         "@types/react": "^18.2.75",
+        "@types/react-beautiful-dnd": "^13.1.8",
         "@types/react-dom": "^18.2.24",
         "@types/react-resizable": "^3.0.7",
         "@types/react-virtualized": "^9.21.29",

package.json

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { useState } from 'react';
+import { ListItem } from '@mui/material';
+import { CheckBoxListItemProps } from './check-box-list-type';
+import { ClickableCheckBoxItem } from './clickable-check-box-item';
+import { ClickableRowItem } from './clickable-row-item';
+
+export function CheckBoxListItem<T>({
+    item,
+    sx,
+    secondaryAction,
+    getItemId,
+    divider,
+    isCheckboxClickableOnly,
+    ...props
+}: CheckBoxListItemProps<T>) {
+    const [hover, setHover] = useState<string>('');
+    return (
+        <ListItem
+            secondaryAction={secondaryAction?.(item, hover)}
+            sx={{ minWidth: 0, ...sx?.checkboxList }}
+            onMouseEnter={() => setHover(getItemId(item))}
+            onMouseLeave={() => setHover('')}
+            disablePadding={!isCheckboxClickableOnly}
+            disableGutters
+            divider={divider}
+        >
+            {isCheckboxClickableOnly ? <ClickableCheckBoxItem {...props} /> : <ClickableRowItem {...props} />}
+        </ListItem>
+    );
+}
+
+export default CheckBoxListItem;