{
errorSpy.mockRestore();
});
+
+ it('should support showCheckedStrategy child', () => {
+ const multipleOptions = [
+ {
+ value: 'zhejiang',
+ label: 'Zhejiang',
+ children: [
+ {
+ value: 'hangzhou',
+ label: 'Hangzhou',
+ children: [
+ {
+ value: 'xihu',
+ label: 'West Lake',
+ },
+ {
+ value: 'donghu',
+ label: 'East Lake',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ value: 'jiangsu',
+ label: 'Jiangsu',
+ children: [
+ {
+ value: 'nanjing',
+ label: 'Nanjing',
+ children: [
+ {
+ value: 'zhonghuamen',
+ label: 'Zhong Hua Men',
+ },
+ ],
+ },
+ ],
+ },
+ ];
+
+ let selectedValue;
+ const onChange = function onChange(value) {
+ selectedValue = value;
+ };
+
+ const wrapper = mount(
+
,
+ );
+ toggleOpen(wrapper);
+ expect(wrapper.render()).toMatchSnapshot();
+
+ clickOption(wrapper, 0, 0);
+ clickOption(wrapper, 1, 0);
+ clickOption(wrapper, 2, 0);
+ clickOption(wrapper, 2, 1);
+ expect(selectedValue[0].join(',')).toBe('zhejiang,hangzhou,xihu');
+ expect(selectedValue[1].join(',')).toBe('zhejiang,hangzhou,donghu');
+ expect(selectedValue.join(',')).toBe('zhejiang,hangzhou,xihu,zhejiang,hangzhou,donghu');
+ });
+
+ it('should support showCheckedStrategy parent', () => {
+ const multipleOptions = [
+ {
+ value: 'zhejiang',
+ label: 'Zhejiang',
+ children: [
+ {
+ value: 'hangzhou',
+ label: 'Hangzhou',
+ children: [
+ {
+ value: 'xihu',
+ label: 'West Lake',
+ },
+ {
+ value: 'donghu',
+ label: 'East Lake',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ value: 'jiangsu',
+ label: 'Jiangsu',
+ children: [
+ {
+ value: 'nanjing',
+ label: 'Nanjing',
+ children: [
+ {
+ value: 'zhonghuamen',
+ label: 'Zhong Hua Men',
+ },
+ ],
+ },
+ ],
+ },
+ ];
+
+ let selectedValue;
+ const onChange = function onChange(value) {
+ selectedValue = value;
+ };
+
+ const wrapper = mount(
+
,
+ );
+ toggleOpen(wrapper);
+ expect(wrapper.render()).toMatchSnapshot();
+ clickOption(wrapper, 0, 0);
+ clickOption(wrapper, 1, 0);
+ clickOption(wrapper, 2, 0);
+ clickOption(wrapper, 2, 1);
+
+ expect(selectedValue.length).toBe(1);
+ expect(selectedValue.join(',')).toBe('zhejiang');
+ });
});
});
diff --git a/components/cascader/demo/showCheckedStrategy.md b/components/cascader/demo/showCheckedStrategy.md
new file mode 100644
index 0000000000..9e693d3328
--- /dev/null
+++ b/components/cascader/demo/showCheckedStrategy.md
@@ -0,0 +1,90 @@
+---
+order: 5.1
+version: 4.20.0
+title:
+ zh-CN: 自定义回填方式
+ en-US: ShowCheckedStrategy
+---
+
+## zh-CN
+
+通过设置 `ShowCheckedStrategy` 选择回填方式。
+
+## en-US
+
+The way show selected item in box using `ShowCheckedStrategy`.
+
+```jsx
+import { Cascader } from 'antd';
+
+const { SHOW_CHILD } = Cascader;
+
+const options = [
+ {
+ label: 'Light',
+ value: 'light',
+ children: new Array(20)
+ .fill(null)
+ .map((_, index) => ({ label: `Number ${index}`, value: index })),
+ },
+ {
+ label: 'Bamboo',
+ value: 'bamboo',
+ children: [
+ {
+ label: 'Little',
+ value: 'little',
+ children: [
+ {
+ label: 'Toy Fish',
+ value: 'fish',
+ },
+ {
+ label: 'Toy Cards',
+ value: 'cards',
+ },
+ {
+ label: 'Toy Bird',
+ value: 'bird',
+ },
+ ],
+ },
+ ],
+ },
+];
+
+const App = () => {
+ const onChange = value => {
+ console.log(value);
+ };
+ return (
+ <>
+
+
+
+
+
+ );
+};
+
+ReactDOM.render(
, mountNode);
+```
diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md
index 4113f5dffd..89a1df72e2 100644
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@@ -54,7 +54,8 @@ Cascade selection box.
| onChange | Callback when finishing cascader select | (value, selectedOptions) => void | - | |
| onDropdownVisibleChange | Callback when popup shown or hidden | (value) => void | - | 4.17.0 |
| multiple | Support multiple or not | boolean | - | 4.17.0 |
-| removeIcon | The custom remove icon | ReactNode | - | |
+| showCheckedStrategy | The way show selected item in box. ** `SHOW_CHILD`: ** just show child treeNode. **`Cascader.SHOW_PARENT`:** just show parent treeNode (when all child treeNode under the parent treeNode are checked) | `Cascader.SHOW_PARENT` \| `Cascader.SHOW_CHILD` | `Cascader.SHOW_PARENT` | 4.20.0 |
+| removeIcon | The custom remove icon | ReactNode | - | |
| searchValue | Set search value，Need work with `showSearch` | string | - | 4.17.0 |
| onSearch | The callback function triggered when input changed | (search: string) => void | - | 4.17.0 |
| dropdownMenuColumnStyle | The style of the drop-down menu column | CSSProperties | - | |
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 936940906f..2bf15611c7 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -34,6 +34,8 @@ export type FieldNamesType = FieldNames;
export type FilledFieldNamesType = Required
;
+const { SHOW_CHILD, SHOW_PARENT } = RcCascader;
+
function highlightKeyword(str: string, lowerKeyword: string, prefixCls: string | undefined) {
const cells = str
.toLowerCase()
@@ -290,12 +292,16 @@ const Cascader = React.forwardRef((props: CascaderProps, ref: React.Ref
);
-}) as ((
+}) as unknown as ((
props: React.PropsWithChildren> & { ref?: React.Ref },
) => React.ReactElement) & {
displayName: string;
+ SHOW_PARENT: typeof SHOW_PARENT;
+ SHOW_CHILD: typeof SHOW_CHILD;
};
Cascader.displayName = 'Cascader';
+Cascader.SHOW_PARENT = SHOW_PARENT;
+Cascader.SHOW_CHILD = SHOW_CHILD;
export default Cascader;
diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md
index 0b157bc07b..8a4e2d15b8 100644
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@@ -55,6 +55,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
| onChange | 选择完成后的回调 | (value, selectedOptions) => void | - | |
| onDropdownVisibleChange | 显示/隐藏浮层的回调 | (value) => void | - | 4.17.0 |
| multiple | 支持多选节点 | boolean | - | 4.17.0 |
+| showCheckedStrategy | 定义选中项回填的方式。`Cascader.SHOW_CHILD`: 只显示选中的子节点。`Cascader.SHOW_PARENT`: 只显示父节点（当父节点下所有子节点都选中时）。 | `Cascader.SHOW_PARENT` \| `Cascader.SHOW_CHILD` | `Cascader.SHOW_PARENT` | 4.20.0 |
| removeIcon | 自定义的多选框清除图标 | ReactNode | - | |
| searchValue | 设置搜索的值，需要与 `showSearch` 配合使用 | string | - | 4.17.0 |
| onSearch | 监听搜索，返回输入的值 | (search: string) => void | - | 4.17.0 |