fix: fix checkbox group all selection

Adslot · Mar 5, 2024 · 5ba803c · 5ba803c
1 parent 4711886
commit 5ba803c
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/src/components/CheckboxGroup/CheckboxGroup.stories.tsx b/src/components/CheckboxGroup/CheckboxGroup.stories.tsx
@@ -103,13 +103,13 @@ export const NestedCheckboxes: Story = {
       <CheckboxGroup indent>
         <CheckboxGroup.All label="Sports" values={allHobbies.sports} />
         {allHobbies.sports.map((item) => (
-          <CheckboxGroup.Item key={item} value={item} label={_.capitalize(item)} />
+          <CheckboxGroup.Item key={item} value={item} label={_.capitalize(item)} disabled={item === 'swimming' }/>
         ))}
       </CheckboxGroup>
       <CheckboxGroup indent>
         <CheckboxGroup.All label="Other" values={allHobbies.other} />
         {allHobbies.other.map((item) => (
-          <CheckboxGroup.Item key={item} value={item} label={_.capitalize(item)} />
+          <CheckboxGroup.Item key={item} value={item} label={_.capitalize(item)} disabled/>
         ))}
       </CheckboxGroup>
     </CheckboxGroup>

diff --git a/src/components/CheckboxGroup/CheckboxGroupContext.jsx b/src/components/CheckboxGroup/CheckboxGroupContext.jsx
@@ -20,6 +20,8 @@ const CheckboxGroupProvider = ({
   const name = parentCtx.name || nameProp;
   const value = parentCtx.value || valueProp;
 
+  const [disabledValues, setDisabledValues] = React.useState([]);
+
   const context = React.useMemo(() => {
     const getIsItemChecked = (checkboxValue) => {
       if (getIsChecked) return getIsChecked(checkboxValue, value);
@@ -28,11 +30,11 @@ const CheckboxGroupProvider = ({
     };
 
     const getIsAllChecked = (values) => {
+      if (_.isEmpty(values)) return false;
       const result = _(values)
         .map((item) => getIsItemChecked(item))
         .uniq()
         .value();
-
       return result.length === 1 ? result[0] : 'partial';
     };
 
@@ -54,6 +56,12 @@ const CheckboxGroupProvider = ({
       }
     };
 
+    const registerDisabledValue = (disabledValue) => {
+      if (!_.includes(disabledValues, disabledValue)) {
+        setDisabledValues((prevValues) => [...prevValues, disabledValue]);
+      }
+    };
+
     return {
       variant,
       value,
@@ -64,8 +72,11 @@ const CheckboxGroupProvider = ({
       getIsAllChecked,
       onItemChange,
       onAllChange,
+
+      registerDisabledValue,
+      disabledValues,
     };
-  }, [getIsChecked, value, name, onChange, variant]);
+  }, [getIsChecked, value, name, onChange, variant, disabledValues]);
 
   return <CheckboxGroupContext.Provider value={context}>{children}</CheckboxGroupContext.Provider>;
 };

diff --git a/src/components/CheckboxGroup/index.jsx b/src/components/CheckboxGroup/index.jsx
@@ -9,14 +9,20 @@ import CheckboxGroupProvider, { useCheckboxGroup } from './CheckboxGroupContext'
 import '../RadioGroup/style.css';
 import './styles.css';
 
-const CheckboxGroupItem = ({ value, ...rest }) => {
+const CheckboxGroupItem = ({ value, disabled, ...rest }) => {
   const groupCtx = useCheckboxGroup();
   invariant(!_.isEmpty(groupCtx), 'CheckboxGroup.Item: must be used as children of CheckboxGroup');
   invariant(!rest.name, 'CheckboxGroup.Item: name will be overridden by CheckboxGroup name');
   invariant(!rest.variant, 'CheckboxGroup.Item: variant will be overridden by CheckboxGroup variant');
   invariant(!rest.onChange, 'CheckboxGroup.Item: onChange will be overridden by CheckboxGroup onChange');
 
-  const { onItemChange, getIsItemChecked, name, variant } = groupCtx;
+  const { onItemChange, getIsItemChecked, name, variant, registerDisabledValue } = groupCtx;
+
+  React.useEffect(() => {
+    if (disabled) {
+      registerDisabledValue(value);
+    }
+  }, [disabled, registerDisabledValue, value]);
 
   return (
     <Checkbox
@@ -26,6 +32,7 @@ const CheckboxGroupItem = ({ value, ...rest }) => {
       variant={variant}
       checked={getIsItemChecked(value)}
       onChange={() => onItemChange(value)}
+      disabled={disabled}
     />
   );
 };
@@ -36,17 +43,19 @@ const CheckboxGroupAll = ({ className, label = 'All', values, ...rest }) => {
   const groupCtx = useCheckboxGroup();
   invariant(!_.isEmpty(groupCtx), 'CheckboxGroup.All: must be used as children of CheckboxGroup');
 
-  const { onAllChange, getIsAllChecked, name, variant } = groupCtx;
+  const { onAllChange, getIsAllChecked, name, variant, disabledValues } = groupCtx;
+  const enabledValues = _.filter(values, (value) => !_.includes(disabledValues, value));
 
   return (
     <Checkbox
       {...rest}
       className={classnames(className, 'is-all')}
       name={name}
       label={label}
-      checked={getIsAllChecked(values)}
-      onChange={onAllChange(values)}
+      checked={getIsAllChecked(enabledValues)}
+      onChange={onAllChange(enabledValues)}
       variant={variant}
+      disabled={_.isEqual(values, disabledValues)}
     />
   );
 };