feat(cascader): add disabled api for panel (#51272)

* feat: add disabled api for panel

* feat: improve demo

* test: update snapshot

* test: update snapshot

* test: update snapshot

components/cascader/Panel.tsx

@@ -6,6 +6,7 @@ import type { PickType } from 'rc-cascader/lib/Panel';
 
 import type { CascaderProps, DefaultOptionType } from '.';
 import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import DisabledContext from '../config-provider/DisabledContext';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import useBase from './hooks/useBase';
 import useCheckable from './hooks/useCheckable';
@@ -40,8 +41,12 @@ function CascaderPanel<
     notFoundContent,
     direction,
     expandIcon,
+    disabled: customDisabled,
   } = props;
 
+  const disabled = React.useContext(DisabledContext);
+  const mergedDisabled = customDisabled ?? disabled;
+
   const [prefixCls, cascaderPrefixCls, mergedDirection, renderEmpty] = useBase(
     customizePrefixCls,
     direction,
@@ -76,6 +81,7 @@ function CascaderPanel<
       direction={mergedDirection}
       expandIcon={mergedExpandIcon}
       loadingIcon={loadingIcon}
+      disabled={mergedDisabled}
     />,
   );
 }

components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1763,6 +1763,31 @@ exports[`renders components/cascader/demo/panel.tsx extend context correctly 1`]
 <div
   class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
 >
+  <button
+    aria-checked="false"
+    aria-label="disabled switch"
+    class="ant-switch"
+    role="switch"
+    type="button"
+  >
+    <div
+      class="ant-switch-handle"
+    />
+    <span
+      class="ant-switch-inner"
+    >
+      <span
+        class="ant-switch-inner-checked"
+      >
+        Enabled
+      </span>
+      <span
+        class="ant-switch-inner-unchecked"
+      >
+        Disabled
+      </span>
+    </span>
+  </button>
   <div
     class="ant-cascader-panel"
   >

components/cascader/__tests__/__snapshots__/demo.test.tsx.snap

@@ -744,6 +744,31 @@ exports[`renders components/cascader/demo/panel.tsx correctly 1`] = `
 <div
   class="ant-flex ant-flex-align-flex-start ant-flex-gap-small ant-flex-vertical"
 >
+  <button
+    aria-checked="false"
+    aria-label="disabled switch"
+    class="ant-switch"
+    role="switch"
+    type="button"
+  >
+    <div
+      class="ant-switch-handle"
+    />
+    <span
+      class="ant-switch-inner"
+    >
+      <span
+        class="ant-switch-inner-checked"
+      >
+        Enabled
+      </span>
+      <span
+        class="ant-switch-inner-unchecked"
+      >
+        Disabled
+      </span>
+    </span>
+  </button>
   <div
     class="ant-cascader-panel"
   >

components/cascader/demo/panel.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { CascaderProps } from 'antd';
-import { Cascader, Flex } from 'antd';
+import { Cascader, Flex, Switch } from 'antd';
 
 interface Option {
   value: string | number;
@@ -51,12 +51,23 @@ const onMultipleChange: CascaderProps<Option, 'value', true>['onChange'] = (valu
   console.log(value);
 };
 
-const App: React.FC = () => (
+const App: React.FC = () => {
-  <Flex vertical gap="small" align="flex-start">
+  const [disabled, setDisabled] = useState(false);
-    <Cascader.Panel options={options} onChange={onChange} />
+
-    <Cascader.Panel multiple options={options} onChange={onMultipleChange} />
+  return (
-    <Cascader.Panel />
+    <Flex vertical gap="small" align="flex-start">
-  </Flex>
+      <Switch
-);
+        checked={disabled}
+        checkedChildren="Enabled"
+        unCheckedChildren="Disabled"
+        onChange={setDisabled}
+        aria-label="disabled switch"
+      />
+      <Cascader.Panel options={options} onChange={onChange} disabled={disabled} />
+      <Cascader.Panel multiple options={options} onChange={onMultipleChange} disabled={disabled} />
+      <Cascader.Panel />
+    </Flex>
+  );
+};
 
 export default App;

components/form/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -2950,7 +2950,7 @@ Array [
                       >
                         <li
                           aria-checked="false"
-                          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+                          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-disabled"
                           data-path-key="zhejiang"
                           role="menuitemcheckbox"
                           title="Zhejiang"

package.json

@@ -120,7 +120,7 @@
     "classnames": "^2.5.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.11",
-    "rc-cascader": "~3.29.0",
+    "rc-cascader": "~3.30.0",
     "rc-checkbox": "~3.3.0",
     "rc-collapse": "~3.9.0",
     "rc-dialog": "~9.6.0",