From 5c1e1325239b2ec6aeb87ee09709e2eff9cf8fa0 Mon Sep 17 00:00:00 2001 From: Haixing <65376724+HaixingOoO@users.noreply.github.com> Date: Thu, 12 Sep 2024 15:22:33 +0800 Subject: [PATCH] feat(Cascader): support panel content (#3096) Co-authored-by: Heising --- src/cascader/Cascader.tsx | 12 ++++++++---- src/cascader/__tests__/cascader.test.tsx | 20 ++++++++++++++++++++ src/cascader/cascader.en-US.md | 4 +++- src/cascader/cascader.md | 4 +++- src/cascader/type.ts | 8 ++++++++ 5 files changed, 42 insertions(+), 6 deletions(-) diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx index 076bc0bc2..1d907e57f 100644 --- a/src/cascader/Cascader.tsx +++ b/src/cascader/Cascader.tsx @@ -175,10 +175,14 @@ const Cascader: React.FC = (originalProps) => { 'onClear', ])} panel={ - + <> + {props.panelTopContent && parseTNode(props.panelTopContent)} + + {props.panelBottomContent && parseTNode(props.panelBottomContent)} + } /> ); diff --git a/src/cascader/__tests__/cascader.test.tsx b/src/cascader/__tests__/cascader.test.tsx index a9399447a..ec647569f 100644 --- a/src/cascader/__tests__/cascader.test.tsx +++ b/src/cascader/__tests__/cascader.test.tsx @@ -376,6 +376,26 @@ describe('Cascader 组件测试', () => { expect(document.querySelectorAll('.t-is-checked')).toHaveLength(2); expect(document.querySelectorAll('.t-is-checked')[1].children[0]).toHaveAttribute('checked'); }); + + test('render panelTopContent', async () => { + const panelTopContent = 'panelTopContent'; + const { getByText } = render( + , + ); + + await fireEvent.click(document.querySelector('input')); + expect(getByText(panelTopContent)).toBeInTheDocument(); + }); + + test('render panelBottomContent', async () => { + const panelBottomContent = 'panelBottomContent'; + const { getByText } = render( + , + ); + + await fireEvent.click(document.querySelector('input')); + expect(getByText(panelBottomContent)).toBeInTheDocument(); + }); }); describe('Cascader Panel 组件测试', () => { diff --git a/src/cascader/cascader.en-US.md b/src/cascader/cascader.en-US.md index 32e469d44..b10c27265 100644 --- a/src/cascader/cascader.en-US.md +++ b/src/cascader/cascader.en-US.md @@ -14,7 +14,7 @@ checkProps | Object | - | Typescript：`CheckboxProps`，[Checkbox API Documents checkStrictly | Boolean | false | \- | N clearable | Boolean | false | \- | N collapsedItems | TElement | - | Typescript：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -disabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | N empty | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N filter | Function | - | Typescript：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise` | N filterable | Boolean | false | \- | N @@ -30,6 +30,8 @@ minCollapsedNum | Number | 0 | \- | N multiple | Boolean | false | \- | N option | TElement | - | customize one option。Typescript：`TNode<{ item: CascaderOption; index: number }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N options | Array | [] | Typescript：`Array` | N +panelBottomContent | TNode | - | bottom content of the cascader panel。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +panelTopContent | TNode | - | top content of the cascader panel。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N placeholder | String | undefined | \- | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N popupVisible | Boolean | - | \- | N diff --git a/src/cascader/cascader.md b/src/cascader/cascader.md index 5d5f31f90..88dedb903 100644 --- a/src/cascader/cascader.md +++ b/src/cascader/cascader.md @@ -14,7 +14,7 @@ checkProps | Object | - | 参考 checkbox 组件 API。TS 类型：`CheckboxProp checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N clearable | Boolean | false | 是否支持清空选项 | N collapsedItems | TElement | - | 多选情况下，用于设置折叠项内容，默认为 `+N`。如果需要悬浮就显示其他内容，可以使用 collapsedItems 自定义。`value` 表示当前存在的所有标签，`collapsedSelectedItems` 表示折叠的标签，`count` 表示折叠的数量，`onClose` 表示移除标签的事件回调。TS 类型：`TNode<{ value: CascaderOption[]; collapsedSelectedItems: CascaderOption[]; count: number; onClose: (context: { index: number, e?: MouseEvent }) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N -disabled | Boolean | - | 是否禁用组件 | N +disabled | Boolean | undefined | 是否禁用组件 | N empty | TNode | - | 无匹配选项时的内容，默认全局配置为 '暂无数据'。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N filter | Function | - | 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise` | N filterable | Boolean | false | 是否可搜索 | N @@ -30,6 +30,8 @@ minCollapsedNum | Number | 0 | 最小折叠数量，用于多选情况下折叠 multiple | Boolean | false | 是否允许多选 | N option | TElement | - | 自定义单个级联选项。TS 类型：`TNode<{ item: CascaderOption; index: number }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N options | Array | [] | 可选项数据源。TS 类型：`Array` | N +panelBottomContent | TNode | - | 面板内的底部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +panelTopContent | TNode | - | 面板内的顶部内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N placeholder | String | undefined | 占位符 | N popupProps | Object | - | 参考 popup 组件 API。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/cascader/type.ts) | N popupVisible | Boolean | - | 是否显示下拉框 | N diff --git a/src/cascader/type.ts b/src/cascader/type.ts index a097801bb..d878aa653 100644 --- a/src/cascader/type.ts +++ b/src/cascader/type.ts @@ -119,6 +119,14 @@ export interface TdCascaderProps; + /** + * 面板内的底部内容 + */ + panelBottomContent?: TNode; + /** + * 面板内的顶部内容 + */ + panelTopContent?: TNode; /** * 占位符 */