feat: add Option item disableCheckbox (#408)

* feat: add uncheckableItemValues props * feat: add Option item disableCheckbox * feat: change style with disable className * chore: remove useless * chore: remove init false * test: add disableCheckbox test * test: add check fet test --------- Co-authored-by: 洋 <[email protected]>
react-component · May 5, 2023 · e16918b · e16918b · vercel · May 5, 2023
1 parent 0babdea
commit e16918b
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 4 deletions.
diff --git a/examples/multiple.tsx b/examples/multiple.tsx
@@ -9,11 +9,13 @@ const optionLists = [
     value: 'zhejiang',
     label: 'Zhejiang',
     isLeaf: false,
+    disableCheckbox: true,
   },
   {
     value: 'jiangsu',
     label: 'Jiangsu',
     isLeaf: false,
+    disableCheckbox: false
   },
 ];
 
@@ -35,10 +37,12 @@ const Demo = () => {
         {
           label: `${targetOption.label} Dynamic 1`,
           value: 'dynamic1',
+          disableCheckbox: false,
         },
         {
           label: `${targetOption.label} Dynamic 2`,
           value: 'dynamic2',
+          disableCheckbox: true,
         },
       ];
       setOptions([...options]);

diff --git a/src/Cascader.tsx b/src/Cascader.tsx
@@ -54,6 +54,7 @@ export interface DefaultOptionType extends BaseOptionType {
   label: React.ReactNode;
   value?: string | number | null;
   children?: DefaultOptionType[];
+  disableCheckbox?: boolean;
 }
 
 interface BaseCascaderProps<OptionType extends BaseOptionType = DefaultOptionType>

diff --git a/src/OptionList/Checkbox.tsx b/src/OptionList/Checkbox.tsx
@@ -8,6 +8,7 @@ export interface CheckboxProps {
   halfChecked?: boolean;
   disabled?: boolean;
   onClick?: React.MouseEventHandler;
+  disableCheckbox: boolean;
 }
 
 export default function Checkbox({
@@ -16,6 +17,7 @@ export default function Checkbox({
   halfChecked,
   disabled,
   onClick,
+  disableCheckbox,
 }: CheckboxProps) {
   const { checkable } = React.useContext(CascaderContext);
 
@@ -26,7 +28,7 @@ export default function Checkbox({
       className={classNames(`${prefixCls}`, {
         [`${prefixCls}-checked`]: checked,
         [`${prefixCls}-indeterminate`]: !checked && halfChecked,
-        [`${prefixCls}-disabled`]: disabled,
+        [`${prefixCls}-disabled`]: disabled || disableCheckbox,
       })}
       onClick={onClick}
     >

diff --git a/src/OptionList/Column.tsx b/src/OptionList/Column.tsx
@@ -59,7 +59,7 @@ export default function Column({
   const optionInfoList = React.useMemo(
     () =>
       options.map(option => {
-        const { disabled } = option;
+        const { disabled, disableCheckbox } = option;
         const searchOptions = option[SEARCH_MARK];
         const label = option[FIX_LABEL] ?? option[fieldNames.label];
         const value = option[fieldNames.value];
@@ -89,6 +89,7 @@ export default function Column({
           checked,
           halfChecked,
           option,
+          disableCheckbox,
           fullPath,
           fullPathKey,
         };
@@ -111,6 +112,7 @@ export default function Column({
           option,
           fullPath,
           fullPathKey,
+          disableCheckbox,
         }) => {
           // >>>>> Open
           const triggerOpenPath = () => {
@@ -182,6 +184,7 @@ export default function Column({
                   checked={checked}
                   halfChecked={halfChecked}
                   disabled={disabled}
+                  disableCheckbox={disableCheckbox}
                   onClick={(e: React.MouseEvent<HTMLSpanElement>) => {
                     e.stopPropagation();
                     triggerSelect();

diff --git a/tests/checkable.spec.tsx b/tests/checkable.spec.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable react/jsx-no-bind */
 
 import React from 'react';
-import { mount } from './enzyme';
 import Cascader from '../src';
 import { addressOptions } from './demoOptions';
+import { mount } from './enzyme';
 
 describe('Cascader.Checkable', () => {
   const options = [
@@ -171,11 +171,48 @@ describe('Cascader.Checkable', () => {
   it('should work with custom checkable', () => {
     const wrapper = mount(
       <Cascader
-        checkable={<span className="my-custom-checkbox" >0</span>}
+        checkable={<span className="my-custom-checkbox">0</span>}
         open
         options={addressOptions}
       />,
     );
     expect(wrapper.find('.my-custom-checkbox')).toHaveLength(3);
   });
+
+  it('should be correct expression with disableCheckbox', () => {
+    const wrapper = mount(
+      <Cascader
+        checkable={true}
+        open
+        options={[
+          {
+            label: '台湾',
+            value: 'tw',
+
+            children: [
+              {
+                label: '福建',
+                value: 'fj',
+                disableCheckbox: true,
+              },
+              {
+                label: '兰州',
+                value: 'lz',
+              },
+              { label: '北京', value: 'bj' },
+            ],
+          },
+        ]}
+      />,
+    );
+
+    // disabled className
+    wrapper.find('.rc-cascader-menu-item').simulate('click');
+    expect(wrapper.find('.rc-cascader-checkbox-disabled')).toHaveLength(1);
+
+    // Check all children except disableCheckbox When the parent checkbox is checked
+    expect(wrapper.find('.rc-cascader-checkbox')).toHaveLength(4);
+    wrapper.find('.rc-cascader-checkbox').first().simulate('click');
+    expect(wrapper.find('.rc-cascader-checkbox-checked')).toHaveLength(3);
+  });
 });