feat: add disabled api for panel

examples/panel.tsx

@@ -61,6 +61,8 @@ export default () => {
 
   const [value2, setValue2] = React.useState<string[][]>([]);
 
+  const [disabled, setDisabled] = React.useState(false);
+
   return (
     <>
       <h1>Panel</h1>
@@ -71,13 +73,21 @@ export default () => {
       >
         Set Value
       </button>
+      <button
+        onClick={() => {
+          setDisabled(prev => !prev);
+        }}
+      >
+        {disabled ? 'enable panel' : 'disable panel'}
+      </button>
       <Cascader.Panel
         value={value}
         options={addressOptions}
         onChange={nextValue => {
           console.log('Change:', nextValue);
           setValue(nextValue);
         }}
+        disabled={disabled}
       />
 
       <Cascader.Panel
@@ -88,9 +98,10 @@ export default () => {
           console.log('Change:', nextValue);
           setValue2(nextValue);
         }}
+        disabled={disabled}
       />
 
-      <Cascader.Panel options={addressOptions} direction="rtl" />
+      <Cascader.Panel options={addressOptions} disabled={disabled} direction="rtl" />
 
       <Cascader.Panel notFoundContent="Empty!!!" />
     </>

src/OptionList/Column.tsx

@@ -23,6 +23,7 @@ export interface ColumnProps<OptionType extends DefaultOptionType = DefaultOptio
   halfCheckedSet: Set<React.Key>;
   loadingKeys: React.Key[];
   isSelectable: (option: DefaultOptionType) => boolean;
+  disabled?: boolean;
 }
 
 export default function Column<OptionType extends DefaultOptionType = DefaultOptionType>({
@@ -38,6 +39,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
   halfCheckedSet,
   loadingKeys,
   isSelectable,
+  disabled,
 }: ColumnProps<OptionType>) {
   const menuPrefixCls = `${prefixCls}-menu`;
   const menuItemPrefixCls = `${prefixCls}-menu-item`;
@@ -54,11 +56,13 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
 
   const hoverOpen = expandTrigger === 'hover';
 
+  const isOptionDisabled = (optionDisabled?: boolean) => disabled || optionDisabled;
+
   // ============================ Option ============================
   const optionInfoList = React.useMemo(
     () =>
       options.map(option => {
-        const { disabled, disableCheckbox } = option;
+        const { disabled: optionDisabled, disableCheckbox } = option;
         const searchOptions: Record<string, any>[] = option[SEARCH_MARK];
         const label = option[FIX_LABEL] ?? option[fieldNames.label];
         const value = option[fieldNames.value];
@@ -80,7 +84,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
         const halfChecked = halfCheckedSet.has(fullPathKey);
 
         return {
-          disabled,
+          disabled: optionDisabled,
           label,
           value,
           isLeaf: isMergedLeaf,
@@ -101,7 +105,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
     <ul className={menuPrefixCls} role="menu">
       {optionInfoList.map(
         ({
-          disabled,
+          disabled: optionDisabled,
           label,
           value,
           isLeaf: isMergedLeaf,
@@ -115,7 +119,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
         }) => {
           // >>>>> Open
           const triggerOpenPath = () => {
-            if (disabled) {
+            if (isOptionDisabled(optionDisabled)) {
               return;
             }
             const nextValueCells = [...fullPath];
@@ -127,7 +131,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
 
           // >>>>> Selection
           const triggerSelect = () => {
-            if (isSelectable(option)) {
+            if (isSelectable(option) && !isOptionDisabled(optionDisabled)) {
               onSelect(fullPath, isMergedLeaf);
             }
           };
@@ -148,7 +152,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
                 [`${menuItemPrefixCls}-expand`]: !isMergedLeaf,
                 [`${menuItemPrefixCls}-active`]:
                   activeValue === value || activeValue === fullPathKey,
-                [`${menuItemPrefixCls}-disabled`]: disabled,
+                [`${menuItemPrefixCls}-disabled`]: isOptionDisabled(optionDisabled),
                 [`${menuItemPrefixCls}-loading`]: isLoading,
               })}
               style={dropdownMenuColumnStyle}
@@ -185,7 +189,7 @@ export default function Column<OptionType extends DefaultOptionType = DefaultOpt
                   prefixCls={`${prefixCls}-checkbox`}
                   checked={checked}
                   halfChecked={halfChecked}
-                  disabled={disabled || disableCheckbox}
+                  disabled={isOptionDisabled(optionDisabled) || disableCheckbox}
                   disableCheckbox={disableCheckbox}
                   onClick={(e: React.MouseEvent<HTMLSpanElement>) => {
                     if (disableCheckbox) {

src/OptionList/List.tsx

@@ -21,11 +21,27 @@ import useKeyboard from './useKeyboard';
 
 export type RawOptionListProps = Pick<
   ReturnType<typeof useBaseProps>,
-  'prefixCls' | 'multiple' | 'searchValue' | 'toggleOpen' | 'notFoundContent' | 'direction' | 'open'
+  | 'prefixCls'
+  | 'multiple'
+  | 'searchValue'
+  | 'toggleOpen'
+  | 'notFoundContent'
+  | 'direction'
+  | 'open'
+  | 'disabled'
 >;
 
 const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((props, ref) => {
-  const { prefixCls, multiple, searchValue, toggleOpen, notFoundContent, direction, open } = props;
+  const {
+    prefixCls,
+    multiple,
+    searchValue,
+    toggleOpen,
+    notFoundContent,
+    direction,
+    open,
+    disabled,
+  } = props;
 
   const containerRef = React.useRef<HTMLDivElement>(null);
   const rtl = direction === 'rtl';
@@ -100,10 +116,12 @@ const RawOptionList = React.forwardRef<RefOptionListProps, RawOptionListProps>((
   };
 
   const isSelectable = (option: DefaultOptionType) => {
-    const { disabled } = option;
+    if (disabled) return false;
 
+    const { disabled: optionDisabled } = option;
     const isMergedLeaf = isLeaf(option, fieldNames);
-    return !disabled && (isMergedLeaf || changeOnSelect || multiple);
+
+    return !optionDisabled && (isMergedLeaf || changeOnSelect || multiple);
   };
 
   const onPathSelect = (valuePath: SingleValueType, leaf: boolean, fromKeyboard = false) => {

src/Panel.tsx

@@ -35,7 +35,8 @@ export type PickType =
   | 'className'
   | 'style'
   | 'direction'
-  | 'notFoundContent';
+  | 'notFoundContent'
+  | 'disabled';
 
 export type PanelProps<
   OptionType extends DefaultOptionType = DefaultOptionType,
@@ -68,6 +69,7 @@ export default function Panel<
     loadingIcon,
     direction,
     notFoundContent = 'Not Found',
+    disabled,
   } = props as Pick<InternalCascaderProps, PickType>;
 
   // ======================== Multiple ========================
@@ -200,6 +202,7 @@ export default function Panel<
             toggleOpen={noop}
             open
             direction={direction}
+            disabled={disabled}
           />
         )}
       </div>

tests/Panel.spec.tsx

@@ -97,4 +97,17 @@ describe('Cascader.Panel', () => {
     const checkedLi = container.querySelector('[aria-checked="true"]');
     expect(checkedLi?.textContent).toEqual('Little');
   });
+
+  it('disabled', () => {
+    const onChange = jest.fn();
+    const { container } = render(
+      <Cascader.Panel options={options} onChange={onChange} disabled={true} />,
+    );
+
+    expect(container.querySelector('.rc-cascader-menu-item-disabled')).toBeTruthy();
+
+    const selectOption = container.querySelector('.rc-cascader-menu-item')!;
+    fireEvent.click(selectOption);
+    expect(onChange).not.toHaveBeenCalled();
+  });
 });

tests/__snapshots__/search.spec.tsx.snap

@@ -8,30 +8,26 @@ exports[`Cascader.Search should correct render Cascader with same field name of
     class="rc-cascader-selector"
   >
     <span
-      class="rc-cascader-selection-wrap"
+      class="rc-cascader-selection-search"
     >
-      <span
-        class="rc-cascader-selection-search"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
-          aria-expanded="true"
-          aria-haspopup="listbox"
-          aria-owns="rc_select_TEST_OR_SSR_list"
-          autocomplete="off"
-          class="rc-cascader-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
-          role="combobox"
-          type="search"
-          value="z"
-        />
-      </span>
-      <span
-        class="rc-cascader-selection-placeholder"
-        style="visibility: hidden;"
+      <input
+        aria-autocomplete="list"
+        aria-controls="rc_select_TEST_OR_SSR_list"
+        aria-expanded="true"
+        aria-haspopup="listbox"
+        aria-owns="rc_select_TEST_OR_SSR_list"
+        autocomplete="off"
+        class="rc-cascader-selection-search-input"
+        id="rc_select_TEST_OR_SSR"
+        role="combobox"
+        type="search"
+        value="z"
       />
     </span>
+    <span
+      class="rc-cascader-selection-placeholder"
+      style="visibility: hidden;"
+    />
   </div>
   <div
     class="rc-cascader-dropdown rc-cascader-dropdown-placement-bottomLeft"