Skip to content

feat: add columnHeader and columnFooter api #4250

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HaixingOoO wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

feat: add columnHeader and columnFooter api #4250

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"typescript.preferences.importModuleSpecifier": "relative",
"js/ts.preferences.importModuleSpecifier": "relative",
"eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
"[html]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.formatOnSave": true,
Expand Down
13 changes: 11 additions & 2 deletions packages/components/cascader/Cascader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,8 +236,17 @@ const Cascader: React.FC<CascaderProps> = (originalProps) => {
{props.panelTopContent && parseTNode(props.panelTopContent)}
<Panel
cascaderContext={cascaderContext}
{...pick(props, ['trigger', 'onChange', 'empty', 'loading', 'loadingText', 'option'])}
></Panel>
{...pick(props, [
'trigger',
'onChange',
'empty',
'loading',
'loadingText',
'option',
'columnHeader',
'columnFooter',
])}
/>
{props.panelBottomContent && parseTNode(props.panelBottomContent)}
</>
}
Expand Down
228 changes: 228 additions & 0 deletions packages/components/cascader/_example/column-slot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,228 @@
import React from 'react';
import { Cascader, Input } from 'tdesign-react';

const options = [
{
label: '北京市',
value: '1',
children: [
{
label: '东城区',
value: '1.1',
children: [
{ label: '安定门街道', value: '1.1.1' },
{ label: '建国门街道', value: '1.1.2' },
{ label: '朝阳门街道', value: '1.1.3' },
{ label: '东直门街道', value: '1.1.4' },
{ label: '和平里街道', value: '1.1.5' },
{ label: '北新桥街道', value: '1.1.6' },
{ label: '交道口街道', value: '1.1.7' },
{ label: '景山街道', value: '1.1.8' },
],
},
{
label: '西城区',
value: '1.2',
children: [
{ label: '西长安街街道', value: '1.2.1' },
{ label: '新街口街道', value: '1.2.2' },
{ label: '月坛街道', value: '1.2.3' },
{ label: '展览路街道', value: '1.2.4' },
{ label: '德胜街道', value: '1.2.5' },
{ label: '金融街街道', value: '1.2.6' },
],
},
{
label: '朝阳区',
value: '1.3',
children: [
{ label: '三里屯街道', value: '1.3.1' },
{ label: '望京街道', value: '1.3.2' },
{ label: '呼家楼街道', value: '1.3.3' },
{ label: '双井街道', value: '1.3.4' },
{ label: '建外街道', value: '1.3.5' },
],
},
{
label: '海淀区',
value: '1.4',
children: [
{ label: '中关村街道', value: '1.4.1' },
{ label: '海淀街道', value: '1.4.2' },
{ label: '清河街道', value: '1.4.3' },
{ label: '上地街道', value: '1.4.4' },
],
},
{ label: '丰台区', value: '1.5' },
{ label: '石景山区', value: '1.6' },
{ label: '通州区', value: '1.7' },
{ label: '顺义区', value: '1.8' },
{ label: '大兴区', value: '1.9' },
{ label: '昌平区', value: '1.10' },
],
},
{
label: '上海市',
value: '2',
children: [
{
label: '黄浦区',
value: '2.1',
children: [
{ label: '南京东路街道', value: '2.1.1' },
{ label: '外滩街道', value: '2.1.2' },
{ label: '豫园街道', value: '2.1.3' },
{ label: '老西门街道', value: '2.1.4' },
],
},
{
label: '徐汇区',
value: '2.2',
children: [
{ label: '徐家汇街道', value: '2.2.1' },
{ label: '天平路街道', value: '2.2.2' },
{ label: '漕河泾街道', value: '2.2.3' },
],
},
{ label: '长宁区', value: '2.3' },
{ label: '静安区', value: '2.4' },
{ label: '普陀区', value: '2.5' },
{ label: '虹口区', value: '2.6' },
{ label: '杨浦区', value: '2.7' },
{ label: '浦东新区', value: '2.8' },
{ label: '闵行区', value: '2.9' },
],
},
{
label: '广东省',
value: '3',
children: [
{
label: '广州市',
value: '3.1',
children: [
{ label: '天河区', value: '3.1.1' },
{ label: '越秀区', value: '3.1.2' },
{ label: '海珠区', value: '3.1.3' },
{ label: '荔湾区', value: '3.1.4' },
{ label: '白云区', value: '3.1.5' },
{ label: '番禺区', value: '3.1.6' },
],
},
{
label: '深圳市',
value: '3.2',
children: [
{ label: '南山区', value: '3.2.1' },
{ label: '福田区', value: '3.2.2' },
{ label: '罗湖区', value: '3.2.3' },
{ label: '宝安区', value: '3.2.4' },
{ label: '龙岗区', value: '3.2.5' },
],
},
{ label: '珠海市', value: '3.3' },
{ label: '佛山市', value: '3.4' },
{ label: '东莞市', value: '3.5' },
{ label: '中山市', value: '3.6' },
],
},
{
label: '浙江省',
value: '4',
children: [
{ label: '杭州市', value: '4.1' },
{ label: '宁波市', value: '4.2' },
{ label: '温州市', value: '4.3' },
{ label: '嘉兴市', value: '4.4' },
],
},
{
label: '江苏省',
value: '5',
children: [
{ label: '南京市', value: '5.1' },
{ label: '苏州市', value: '5.2' },
{ label: '无锡市', value: '5.3' },
],
},
{
label: '四川省',
value: '6',
children: [
{ label: '成都市', value: '6.1' },
{ label: '绵阳市', value: '6.2' },
],
},
{
label: '湖北省',
value: '7',
children: [
{ label: '武汉市', value: '7.1' },
{ label: '宜昌市', value: '7.2' },
],
},
{
label: '福建省',
value: '8',
children: [
{ label: '福州市', value: '8.1' },
{ label: '厦门市', value: '8.2' },
],
},
{
label: '山东省',
value: '9',
children: [
{ label: '济南市', value: '9.1' },
{ label: '青岛市', value: '9.2' },
],
},
{
label: '河南省',
value: '10',
children: [
{ label: '郑州市', value: '10.1' },
{ label: '洛阳市', value: '10.2' },
],
},
];

const panelFooterStyle = {
padding: '4px 8px',
fontSize: '12px',
color: 'var(--td-text-color-placeholder)',
textAlign: 'center',
} as React.CSSProperties;

export default function Example() {
const [value, setValue] = React.useState('');
const [searchValues, setSearchValues] = React.useState<Record<number, string>>({});

return (
<Cascader
value={value}
options={options}
onChange={(val: string) => {
setValue(val);
}}
columnHeader={({ panelIndex, onFilter }) => (
<Input
value={searchValues[panelIndex]}
onChange={(val) => {
onFilter(val);
setSearchValues((prev) => ({
...prev,
[panelIndex]: val,
}));
}}
placeholder={`搜索第(${panelIndex + 1})级`}
/>
)}
columnFooter={({ filteredOptions, options: columnOptions }) => (
<div className="demo-panel-footer" style={panelFooterStyle}>
{filteredOptions.length} / {columnOptions.length} 项
</div>
)}
></Cascader>
);
}
2 changes: 2 additions & 0 deletions packages/components/cascader/cascader.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ 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/packages/components/common.ts) | N
columnFooter | TNode | - | Custom content at the bottom of each column. `panelIndex` indicates the current column index, `options` is the original option list, `filteredOptions` is the filtered option list (same as `options` when no filter is applied), `onFilter` is used to filter the current column options (built-in case-insensitive matching for strings; pass a filter function for custom matching). When the built-in search (filterable) has input, the panel switches to flat mode and `onFilter` becomes a noop。Typescript: `TNode<{ panelIndex: number; options: TreeOptionData[]; filteredOptions: TreeOptionData[]; onFilter: (filter: string \| ((node: TreeOptionData, panelIndex: number) => boolean)) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
columnHeader | TNode | - | Custom content at the top of each column. `panelIndex` indicates the current column index, `options` is the original option list, `filteredOptions` is the filtered option list (same as `options` when no filter is applied), `onFilter` is used to filter the current column options (built-in case-insensitive matching for strings; pass a filter function for custom matching). When the built-in search (filterable) has input, the panel switches to flat mode and `onFilter` becomes a noop。Typescript: `TNode<{ panelIndex: number; options: TreeOptionData[]; filteredOptions: TreeOptionData[]; onFilter: (filter: string \| ((node: TreeOptionData, panelIndex: number) => boolean)) => void }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
disabled | Boolean | undefined | \- | N
empty | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
filter | Function | - | Typescript: `(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N
Expand Down
2 changes: 2 additions & 0 deletions packages/components/cascader/cascader.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ 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/packages/components/common.ts) | N
columnFooter | TNode | - | 每一列的底部自定义内容。`panelIndex` 表示当前列索引，`options` 表示当前列原始选项，`filteredOptions` 表示当前列过滤后的选项（未过滤时与 options 相同），`onFilter` 用于过滤当前列选项（传入字符串时内置大小写不敏感匹配；如需自定义匹配逻辑请传入过滤函数）。当内置搜索（filterable）有输入时，面板切换为扁平模式，`onFilter` 为空操作。TS 类型：`TNode<{ panelIndex: number; options: TreeOptionData[]; filteredOptions: TreeOptionData[]; onFilter: (filter: string \| ((node: TreeOptionData, panelIndex: number) => boolean)) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
columnHeader | TNode | - | 每一列的顶部自定义内容。`panelIndex` 表示当前列索引，`options` 表示当前列原始选项，`filteredOptions` 表示当前列过滤后的选项（未过滤时与 options 相同），`onFilter` 用于过滤当前列选项（传入字符串时内置大小写不敏感匹配；如需自定义匹配逻辑请传入过滤函数）。当内置搜索（filterable）有输入时，面板切换为扁平模式，`onFilter` 为空操作。。TS 类型：`TNode<{ panelIndex: number; options: TreeOptionData[]; filteredOptions: TreeOptionData[]; onFilter: (filter: string \| ((node: TreeOptionData, panelIndex: number) => boolean)) => void }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
disabled | Boolean | undefined | 是否禁用组件 | N
empty | TNode | - | 无匹配选项时的内容，默认全局配置为 '暂无数据'。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N
filter | Function | - | 自定义过滤方法，用于对现有数据进行搜索过滤，判断是否过滤某一项数据。TS 类型：`(filterWords: string, node: TreeNodeModel) => boolean \| Promise<boolean>` | N
Expand Down
Loading
Loading