fix: fix checkbox group all selection

Adslot · Feb 27, 2024 · 2ace265 · 2ace265
1 parent 4711886
commit 2ace265
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 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
@@ -21,18 +21,37 @@ const CheckboxGroupProvider = ({
   const value = parentCtx.value || valueProp;
 
   const context = React.useMemo(() => {
+    const disabledComponents = [];
+    const findDisabledComponents = (c) => {
+      if (c.props?.children) {
+        findDisabledComponents(c.props.children);
+      } else if (Array.isArray(c)) {
+        _.forEach(c, (child) => {
+          findDisabledComponents(child);
+        });
+      } else {
+        if (c.props?.disabled) {
+          disabledComponents.push(c);
+        }
+      }
+    };
+
+    findDisabledComponents(children);
+
+    const disabledValues = _.map(disabledComponents, (dc) => dc.props?.value);
+
     const getIsItemChecked = (checkboxValue) => {
       if (getIsChecked) return getIsChecked(checkboxValue, value);
 
       return value.includes(checkboxValue);
     };
 
     const getIsAllChecked = (values) => {
+      if (_.isEmpty(values)) return false;
       const result = _(values)
         .map((item) => getIsItemChecked(item))
         .uniq()
         .value();
-
       return result.length === 1 ? result[0] : 'partial';
     };
 
@@ -64,6 +83,7 @@ const CheckboxGroupProvider = ({
       getIsAllChecked,
       onItemChange,
       onAllChange,
+      disabledValues,
     };
   }, [getIsChecked, value, name, onChange, variant]);
 

diff --git a/src/components/CheckboxGroup/index.jsx b/src/components/CheckboxGroup/index.jsx
@@ -36,17 +36,20 @@ 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) => !disabledValues.includes(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)}
     />
   );
 };