Improve checkbox list to make is easier to customize (#566)

Signed-off-by: LE SAULNIER Kevin <[email protected]>
gridsuite · Sep 18, 2024 · d6ab27b · d6ab27b
1 parent 615af38
commit d6ab27b
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 63 deletions.
diff --git a/demo/src/app.jsx b/demo/src/app.jsx
@@ -569,11 +569,12 @@ function AppContent({ language, onLanguageClick }) {
         },
     ]);
 
-    const secondaryAction = () => (
-        <IconButton aria-label="comment">
-            <CommentIcon />
-        </IconButton>
-    );
+    const secondaryAction = (item, isItemHovered) =>
+        isItemHovered && (
+            <IconButton aria-label="comment">
+                <CommentIcon />
+            </IconButton>
+        );
     const defaultTab = (
         <div>
             <Box mt={3}>
@@ -613,8 +614,6 @@ function AppContent({ language, onLanguageClick }) {
                 divider
                 secondaryAction={secondaryAction}
                 addSelectAllCheckbox
-                isCheckboxClickableOnly
-                enableSecondaryActionOnHover
             />
 
             <Button
@@ -639,7 +638,6 @@ function AppContent({ language, onLanguageClick }) {
                 divider
                 secondaryAction={secondaryAction}
                 isDndDragAndDropActive
-                enableSecondaryActionOnHover
                 onDragEnd={({ source, destination }) => {
                     if (destination !== null && source.index !== destination.index) {
                         const res = [...checkBoxListOption];
@@ -648,6 +646,15 @@ function AppContent({ language, onLanguageClick }) {
                         setCheckBoxListOption(res);
                     }
                 }}
+                onItemClick={(item) => console.log('clicked', item)}
+                isItemClickable={(item) => item.id.indexOf('i') >= 0}
+                sx={{
+                    items: (item) => ({
+                        label: {
+                            color: item.id.indexOf('i') >= 0 ? 'blue' : 'red',
+                        },
+                    }),
+                }}
             />
             <div
                 style={{

diff --git a/src/components/checkBoxList/CheckBoxListItem.tsx b/src/components/checkBoxList/CheckBoxListItem.tsx
@@ -17,21 +17,31 @@ export function CheckBoxListItem<T>({
     secondaryAction,
     getItemId,
     divider,
-    isCheckboxClickableOnly,
+    onItemClick,
+    isItemClickable,
     ...props
-}: CheckBoxListItemProps<T>) {
+}: Readonly<CheckBoxListItemProps<T>>) {
     const [hover, setHover] = useState<string>('');
     return (
         <ListItem
             secondaryAction={secondaryAction?.(item, hover)}
             sx={{ minWidth: 0, ...sx?.checkboxListItem }}
             onMouseEnter={() => setHover(getItemId(item))}
             onMouseLeave={() => setHover('')}
-            disablePadding={!isCheckboxClickableOnly}
+            disablePadding={!!onItemClick}
             disableGutters
             divider={divider}
         >
-            {isCheckboxClickableOnly ? <ClickableCheckBoxItem {...props} /> : <ClickableRowItem {...props} />}
+            {!onItemClick ? (
+                <ClickableCheckBoxItem sx={sx} {...props} />
+            ) : (
+                <ClickableRowItem
+                    isItemClickable={isItemClickable?.(item)}
+                    onItemClick={() => onItemClick(item)}
+                    sx={sx}
+                    {...props}
+                />
+            )}
         </ListItem>
     );
 }

diff --git a/src/components/checkBoxList/CheckBoxListItems.tsx b/src/components/checkBoxList/CheckBoxListItems.tsx
@@ -21,17 +21,17 @@ export function CheckBoxListItems<T>({
     getItemId,
     sx,
     secondaryAction,
-    enableSecondaryActionOnHover,
     addSelectAllCheckbox,
     selectAllCheckBoxLabel,
     getItemLabel,
     isDisabled,
     isDndDragAndDropActive,
     isDragDisable,
     divider,
-    isCheckboxClickableOnly,
+    onItemClick,
+    isItemClickable,
     ...props
-}: CheckBoxListItemsProps<T>) {
+}: Readonly<CheckBoxListItemsProps<T>>) {
     const handleOnchange = useCallback(
         (newValues: T[]) => {
             if (onSelectionChange) {
@@ -77,16 +77,8 @@ export function CheckBoxListItems<T>({
         if (!secondaryAction) {
             return null;
         }
-
-        if (!enableSecondaryActionOnHover) {
-            return secondaryAction(item);
-        }
-
-        if (hover === getItemId(item)) {
-            return secondaryAction(item);
-        }
-
-        return null;
+        const isItemHovered = hover === getItemId(item);
+        return secondaryAction(item, isItemHovered);
     };
 
     const selectAllLabel = useMemo(
@@ -126,6 +118,8 @@ export function CheckBoxListItems<T>({
                 const label = getItemLabel ? getItemLabel(item) : getItemId(item);
                 const disabled = isDisabled ? isDisabled(item) : false;
                 const addDivider = divider && index < items.length - 1;
+                // sx can be dependent on item or not
+                const calculatedItemSx = typeof sx?.items === 'function' ? sx?.items(item) : sx?.items;
 
                 if (isDndDragAndDropActive) {
                     return (
@@ -142,14 +136,15 @@ export function CheckBoxListItems<T>({
                                     checked={isChecked(item)}
                                     label={label}
                                     onClick={() => toggleSelection(getItemId(item))}
-                                    sx={sx}
+                                    sx={calculatedItemSx}
                                     disabled={disabled}
                                     getItemId={getItemId}
                                     secondaryAction={handleSecondaryAction}
                                     isDragDisable={isDragDisable}
                                     provided={provided}
                                     divider={addDivider}
-                                    isCheckboxClickableOnly={isCheckboxClickableOnly}
+                                    onItemClick={onItemClick}
+                                    isItemClickable={isItemClickable}
                                 />
                             )}
                         </Draggable>
@@ -164,10 +159,11 @@ export function CheckBoxListItems<T>({
                         onClick={() => toggleSelection(getItemId(item))}
                         disabled={disabled}
                         getItemId={getItemId}
-                        sx={sx}
+                        sx={calculatedItemSx}
                         secondaryAction={handleSecondaryAction}
                         divider={addDivider}
-                        isCheckboxClickableOnly={isCheckboxClickableOnly}
+                        onItemClick={onItemClick}
+                        isItemClickable={isItemClickable}
                     />
                 );
             })}

diff --git a/src/components/checkBoxList/ClickableCheckBoxItem.tsx b/src/components/checkBoxList/ClickableCheckBoxItem.tsx
@@ -6,9 +6,9 @@
  */
 import { Checkbox, ListItemIcon, ListItemText } from '@mui/material';
 import OverflowableText from '../overflowableText';
-import { ClickableItemProps } from './checkBoxList.type';
+import { ClickableCheckBoxItemProps } from './checkBoxList.type';
 
-export function ClickableCheckBoxItem({ sx, label, ...props }: ClickableItemProps) {
+export function ClickableCheckBoxItem({ sx, label, ...props }: ClickableCheckBoxItemProps) {
     return (
         <>
             <ListItemIcon sx={{ minWidth: 0, ...sx?.checkBoxIcon }}>

diff --git a/src/components/checkBoxList/ClickableRowItem.tsx b/src/components/checkBoxList/ClickableRowItem.tsx
@@ -5,14 +5,42 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { Checkbox, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import { ClickableRowItemProps } from './checkBoxList.type';
 import OverflowableText from '../overflowableText';
-import { ClickableItemProps } from './checkBoxList.type';
 
-export function ClickableRowItem({ sx, disabled, label, onClick, ...props }: ClickableItemProps) {
+const styles = {
+    unclickableItem: {
+        '&:hover': {
+            backgroundColor: 'transparent',
+        },
+        cursor: 'inherit',
+    },
+};
+
+export function ClickableRowItem({
+    sx,
+    disabled,
+    label,
+    onClick,
+    onItemClick,
+    isItemClickable = true,
+    ...props
+}: Readonly<ClickableRowItemProps>) {
+    const onCheckboxClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+        onClick();
+    };
+    const handleItemClick = () => isItemClickable && onItemClick();
+
     return (
-        <ListItemButton sx={{ paddingLeft: 0, ...sx?.checkboxButton }} disabled={disabled} onClick={onClick}>
+        <ListItemButton
+            disableTouchRipple={!isItemClickable}
+            sx={{ paddingLeft: 0, ...sx?.checkboxButton, ...(!isItemClickable && styles.unclickableItem) }}
+            disabled={disabled}
+            onClick={handleItemClick}
+        >
             <ListItemIcon sx={{ minWidth: 0, ...sx?.checkBoxIcon }}>
-                <Checkbox disableRipple sx={{ paddingLeft: 0, ...sx?.checkbox }} {...props} />
+                <Checkbox disableRipple sx={{ paddingLeft: 0, ...sx?.checkbox }} onClick={onCheckboxClick} {...props} />
             </ListItemIcon>
             <ListItemText
                 sx={{

diff --git a/src/components/checkBoxList/DraggableCheckBoxListItem.tsx b/src/components/checkBoxList/DraggableCheckBoxListItem.tsx
@@ -19,32 +19,37 @@ export function DraggableCheckBoxListItem<T>({
     isDragDisable,
     provided,
     divider,
-    isCheckboxClickableOnly,
+    onItemClick,
+    isItemClickable,
     ...props
-}: DraggableCheckBoxListItemProps<T>) {
+}: Readonly<DraggableCheckBoxListItemProps<T>>) {
     const [hover, setHover] = useState<string>('');
     return (
         <ListItem
             secondaryAction={secondaryAction?.(item, hover)}
             sx={{ minWidth: 0, ...sx?.checkboxListItem }}
             onMouseEnter={() => setHover(getItemId(item))}
             onMouseLeave={() => setHover('')}
-            disablePadding={!isCheckboxClickableOnly}
+            disablePadding={!!onItemClick}
             disableGutters
             divider={divider}
             ref={provided.innerRef}
             {...provided.draggableProps}
         >
-            {isCheckboxClickableOnly ? (
+            {!onItemClick ? (
                 <DraggableClickableCheckBoxItem
                     provided={provided}
                     isHighlighted={hover === getItemId(item) && !isDragDisable}
+                    sx={sx}
                     {...props}
                 />
             ) : (
                 <DraggableClickableRowItem
                     provided={provided}
                     isHighlighted={hover === getItemId(item) && !isDragDisable}
+                    onItemClick={() => onItemClick(item)}
+                    isItemClickable={isItemClickable?.(item)}
+                    sx={sx}
                     {...props}
                 />
             )}

diff --git a/src/components/checkBoxList/DraggableClickableCheckBoxItem.tsx b/src/components/checkBoxList/DraggableClickableCheckBoxItem.tsx
@@ -8,7 +8,7 @@
 import { Checkbox, IconButton, ListItemIcon, ListItemText } from '@mui/material';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
 import OverflowableText from '../overflowableText';
-import { DraggableClickableItemProps } from './checkBoxList.type';
+import { DraggableClickableCheckBoxItemProps } from './checkBoxList.type';
 
 const styles = {
     dragIcon: (theme: any) => ({
@@ -26,7 +26,7 @@ export function DraggableClickableCheckBoxItem({
     isHighlighted,
     label,
     ...props
-}: DraggableClickableItemProps) {
+}: Readonly<DraggableClickableCheckBoxItemProps>) {
     return (
         <>
             <IconButton

diff --git a/src/components/checkBoxList/DraggableClickableRowItem.tsx b/src/components/checkBoxList/DraggableClickableRowItem.tsx
@@ -7,8 +7,8 @@
 
 import { Checkbox, IconButton, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import { DraggableClickableRowItemProps } from './checkBoxList.type';
 import OverflowableText from '../overflowableText';
-import { DraggableClickableItemProps } from './checkBoxList.type';
 
 const styles = {
     dragIcon: (theme: any) => ({
@@ -17,6 +17,12 @@ const styles = {
         borderRadius: theme.spacing(0),
         zIndex: 90,
     }),
+    unclickableItem: {
+        '&:hover': {
+            backgroundColor: 'transparent',
+        },
+        cursor: 'inherit',
+    },
 };
 
 export function DraggableClickableRowItem({
@@ -26,10 +32,27 @@ export function DraggableClickableRowItem({
     provided,
     isHighlighted,
     label,
+    onItemClick,
+    isItemClickable = true,
     ...props
-}: DraggableClickableItemProps) {
+}: Readonly<DraggableClickableRowItemProps>) {
+    const onCheckboxClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation();
+        onClick();
+    };
+    const handleItemClick = () => isItemClickable && onItemClick();
+
     return (
-        <ListItemButton sx={{ paddingLeft: 0, ...sx?.checkboxButton }} disabled={disabled} onClick={onClick}>
+        <ListItemButton
+            disableTouchRipple={!isItemClickable}
+            sx={{
+                paddingLeft: 0,
+                ...sx?.checkboxButton,
+                ...(!isItemClickable && styles.unclickableItem),
+            }}
+            disabled={disabled}
+            onClick={handleItemClick}
+        >
             <IconButton
                 {...provided.dragHandleProps}
                 size="small"
@@ -42,7 +65,7 @@ export function DraggableClickableRowItem({
                 <DragIndicatorIcon spacing={0} />
             </IconButton>
             <ListItemIcon sx={{ minWidth: 0, ...sx?.checkBoxIcon }}>
-                <Checkbox disableRipple sx={{ paddingLeft: 0, ...sx?.checkbox }} {...props} />
+                <Checkbox disableRipple sx={{ paddingLeft: 0, ...sx?.checkbox }} onClick={onCheckboxClick} {...props} />
             </ListItemIcon>
             <ListItemText
                 sx={{