feat(Cascader): support panel content (#3096)

Co-authored-by: Heising <heising@travelconnect.cn>
Tencent · Sep 12, 2024 · 5c1e132 · 5c1e132
1 parent b153731
commit 5c1e132
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 6 deletions.
diff --git a/src/cascader/Cascader.tsx b/src/cascader/Cascader.tsx
@@ -175,10 +175,14 @@ const Cascader: React.FC<CascaderProps> = (originalProps) => {
         'onClear',
       ])}
       panel={
-        <Panel
-          cascaderContext={cascaderContext}
-          {...pick(props, ['trigger', 'onChange', 'empty', 'loading', 'loadingText'])}
-        ></Panel>
+        <>
+          {props.panelTopContent && parseTNode(props.panelTopContent)}
+          <Panel
+            cascaderContext={cascaderContext}
+            {...pick(props, ['trigger', 'onChange', 'empty', 'loading', 'loadingText'])}
+          ></Panel>
+          {props.panelBottomContent && parseTNode(props.panelBottomContent)}
+        </>
       }
     />
   );

diff --git 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(
+      <Cascader value={'1.1'} options={optionsData} panelTopContent={panelTopContent} clearable />,
+    );
+
+    await fireEvent.click(document.querySelector('input'));
+    expect(getByText(panelTopContent)).toBeInTheDocument();
+  });
+
+  test('render panelBottomContent', async () => {
+    const panelBottomContent = 'panelBottomContent';
+    const { getByText } = render(
+      <Cascader value={'1.1'} options={optionsData} panelBottomContent={panelBottomContent} clearable />,
+    );
+
+    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
@@ -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<boolean>` | 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<CascaderOption>` | 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
@@ -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<boolean>` | 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<CascaderOption>` | 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
@@ -119,6 +119,14 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
    * @default []
    */
   options?: Array<CascaderOption>;
+  /**
+   * 面板内的底部内容
+   */
+  panelBottomContent?: TNode;
+  /**
+   * 面板内的顶部内容
+   */
+  panelTopContent?: TNode;
   /**
    * 占位符
    */