From d6ab27bc48b8664e43688d7dcf2ad3f072212d3f Mon Sep 17 00:00:00 2001
From: klesaulnier <42617371+klesaulnier@users.noreply.github.com>
Date: Wed, 18 Sep 2024 09:50:06 +0200
Subject: [PATCH] Improve checkbox list to make is easier to customize  (#566)

Signed-off-by: LE SAULNIER Kevin <kevin.lesaulnier@rte-france.com>
---
 demo/src/app.jsx                              | 23 +++++---
 .../checkBoxList/CheckBoxListItem.tsx         | 18 ++++--
 .../checkBoxList/CheckBoxListItems.tsx        | 30 +++++-----
 .../checkBoxList/ClickableCheckBoxItem.tsx    |  4 +-
 .../checkBoxList/ClickableRowItem.tsx         | 36 ++++++++++--
 .../DraggableCheckBoxListItem.tsx             | 13 +++--
 .../DraggableClickableCheckBoxItem.tsx        |  4 +-
 .../DraggableClickableRowItem.tsx             | 31 ++++++++--
 .../checkBoxList/checkBoxList.type.ts         | 56 +++++++++++++------
 9 files changed, 152 insertions(+), 63 deletions(-)

diff --git a/demo/src/app.jsx b/demo/src/app.jsx
index 77c70efa..6d355e66 100644
--- 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
index 0e4a2f9c..394659a6 100644
--- a/src/components/checkBoxList/CheckBoxListItem.tsx
+++ b/src/components/checkBoxList/CheckBoxListItem.tsx
@@ -17,9 +17,10 @@ export function CheckBoxListItem<T>({
     secondaryAction,
     getItemId,
     divider,
-    isCheckboxClickableOnly,
+    onItemClick,
+    isItemClickable,
     ...props
-}: CheckBoxListItemProps<T>) {
+}: Readonly<CheckBoxListItemProps<T>>) {
     const [hover, setHover] = useState<string>('');
     return (
         <ListItem
@@ -27,11 +28,20 @@ export function CheckBoxListItem<T>({
             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
index 2c85e6ec..cce01af0 100644
--- a/src/components/checkBoxList/CheckBoxListItems.tsx
+++ b/src/components/checkBoxList/CheckBoxListItems.tsx
@@ -21,7 +21,6 @@ export function CheckBoxListItems<T>({
     getItemId,
     sx,
     secondaryAction,
-    enableSecondaryActionOnHover,
     addSelectAllCheckbox,
     selectAllCheckBoxLabel,
     getItemLabel,
@@ -29,9 +28,10 @@ export function CheckBoxListItems<T>({
     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
index 66cd38c8..d53d590c 100644
--- 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
index 83275666..0d87e597 100644
--- 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
index d3700151..bb6d46a5 100644
--- a/src/components/checkBoxList/DraggableCheckBoxListItem.tsx
+++ b/src/components/checkBoxList/DraggableCheckBoxListItem.tsx
@@ -19,9 +19,10 @@ export function DraggableCheckBoxListItem<T>({
     isDragDisable,
     provided,
     divider,
-    isCheckboxClickableOnly,
+    onItemClick,
+    isItemClickable,
     ...props
-}: DraggableCheckBoxListItemProps<T>) {
+}: Readonly<DraggableCheckBoxListItemProps<T>>) {
     const [hover, setHover] = useState<string>('');
     return (
         <ListItem
@@ -29,22 +30,26 @@ export function DraggableCheckBoxListItem<T>({
             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
index ae035fd1..597645d0 100644
--- 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
index de559090..7e0ea6dd 100644
--- 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={{
diff --git a/src/components/checkBoxList/checkBoxList.type.ts b/src/components/checkBoxList/checkBoxList.type.ts
index 24b3e750..46b4d25d 100644
--- a/src/components/checkBoxList/checkBoxList.type.ts
+++ b/src/components/checkBoxList/checkBoxList.type.ts
@@ -8,20 +8,30 @@
 import React from 'react';
 import { DraggableProvided, DragStart, DropResult } from 'react-beautiful-dnd';
 import { SxProps } from '@mui/system';
+import { Theme } from '@mui/material';
 
-export interface CheckBoxListItemSxProps {
-    checkBoxIcon?: SxProps;
-    label?: SxProps;
-    checkboxListItem?: SxProps;
-    checkboxButton?: SxProps;
-    checkbox?: SxProps;
-    dragAndDropContainer?: SxProps;
-    checkboxList?: SxProps;
-}
+export type CheckBoxListItemSx = {
+    checkBoxIcon?: SxProps<Theme>;
+    label?: SxProps<Theme>;
+    checkboxListItem?: SxProps<Theme>;
+    checkboxButton?: SxProps<Theme>;
+    checkbox?: SxProps<Theme>;
+};
+
+export type CheckBoxListSx = {
+    dragAndDropContainer?: SxProps<Theme>;
+    checkboxList?: SxProps<Theme>;
+};
+
+export type CheckBoxListItemSxMethod<T> = (item: T) => CheckBoxListItemSx;
+
+type CheckBoxListItemSxProps<T> = CheckBoxListSx & {
+    items: CheckBoxListItemSx | CheckBoxListItemSxMethod<T>;
+};
 
 export interface CheckBoxListItemProps<T> {
     item: T;
-    sx?: CheckBoxListItemSxProps;
+    sx?: CheckBoxListItemSx;
     label: string;
     onClick: () => void;
     secondaryAction?: (item: T, hover: string) => React.ReactElement | null;
@@ -29,7 +39,8 @@ export interface CheckBoxListItemProps<T> {
     disabled?: boolean;
     divider?: boolean;
     checked: boolean;
-    isCheckboxClickableOnly?: boolean;
+    onItemClick?: (item: T) => void;
+    isItemClickable?: (item: T) => boolean;
 }
 
 export interface DraggableCheckBoxListItemProps<T> extends CheckBoxListItemProps<T> {
@@ -43,16 +54,16 @@ export interface CheckBoxListItemsProps<T> {
     onSelectionChange?: (selectedItems: T[]) => void;
     getItemId: (item: T) => string;
     getItemLabel?: (item: T) => string;
-    secondaryAction?: (item: T) => React.ReactElement | null;
-    enableSecondaryActionOnHover?: boolean;
+    secondaryAction?: (item: T, hover: boolean) => React.ReactElement | null;
     isDisabled?: (item: T) => boolean;
     addSelectAllCheckbox?: boolean;
     selectAllCheckBoxLabel?: string;
-    sx?: CheckBoxListItemSxProps;
+    sx?: CheckBoxListItemSxProps<T>;
     isDndDragAndDropActive?: boolean;
     isDragDisable?: boolean;
     divider?: boolean;
-    isCheckboxClickableOnly?: boolean;
+    onItemClick?: (item: T) => void;
+    isItemClickable?: (item: T) => boolean;
 }
 
 export interface CheckboxListProps<T> extends CheckBoxListItemsProps<T> {
@@ -60,15 +71,24 @@ export interface CheckboxListProps<T> extends CheckBoxListItemsProps<T> {
     onDragEnd?: (dropResult: DropResult) => void;
 }
 
-export interface ClickableItemProps {
-    sx?: CheckBoxListItemSxProps;
+export interface ClickableCheckBoxItemProps {
+    sx?: CheckBoxListItemSx;
     label: string;
     onClick: () => void;
     disabled?: boolean;
     checked: boolean;
 }
 
-export interface DraggableClickableItemProps extends ClickableItemProps {
+export interface DraggableClickableCheckBoxItemProps extends ClickableCheckBoxItemProps {
     provided: DraggableProvided;
     isHighlighted: boolean;
 }
+
+interface ClickableItem {
+    onItemClick: () => void;
+    isItemClickable?: boolean;
+}
+
+export interface ClickableRowItemProps extends ClickableCheckBoxItemProps, ClickableItem {}
+
+export interface DraggableClickableRowItemProps extends DraggableClickableCheckBoxItemProps, ClickableItem {}