Skip to content

Commit a365c07

Browse files
anlyyaoanlyyao
committed
feat(Cascader): support header and middleContent props
1 parent 96c5142 commit a365c07

File tree

5 files changed

+57
-21
lines changed

5 files changed

+57
-21
lines changed

‎src/cascader/Cascader.tsx‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,13 @@ const Cascader: React.FC<CascaderProps> = (props) => {
2626
defaultValue,
2727
visible,
2828
title,
29+
header,
30+
middleContent,
2931
placeholder,
3032
theme,
3133
subTitles,
3234
options: inputOptions,
35+
overlayProps,
3336
keys,
3437
checkStrictly,
3538
closeBtn,
@@ -45,13 +48,14 @@ const Cascader: React.FC<CascaderProps> = (props) => {
4548

4649
// 根据 inputOptions 和 key 重新构建 options
4750
const options = useMemo(() => {
48-
const { label = 'label', value = 'value', children = 'children' } = keys || {};
51+
const { label = 'label', value = 'value', children = 'children', disabled = 'disabled' } = keys || {};
4952

5053
const convert = (options: TreeOptionData[]) =>
5154
options.map((item) => ({
5255
label: item[label],
5356
value: item[value],
5457
children: Array.isArray(item[children]) ? convert(item[children]) : false,
58+
disabled: item[disabled],
5559
}));
5660

5761
return convert(inputOptions);
@@ -168,6 +172,7 @@ const Cascader: React.FC<CascaderProps> = (props) => {
168172
<Popup
169173
visible={internalVisible}
170174
placement="bottom"
175+
overlayProps={overlayProps}
171176
onVisibleChange={(visible, trigger) => {
172177
setInternalVisible(visible);
173178
onClose?.(trigger);
@@ -189,6 +194,7 @@ const Cascader: React.FC<CascaderProps> = (props) => {
189194
>
190195
{closeBtn === true ? <CloseIcon size={24} /> : parseTNode(closeBtn)}
191196
</div>
197+
{parseTNode(header)}
192198
<div className={`${cascaderClass}__content`}>
193199
{labelList.length && (
194200
<div>
@@ -235,6 +241,7 @@ const Cascader: React.FC<CascaderProps> = (props) => {
235241
) : null}
236242
</div>
237243
)}
244+
{parseTNode(middleContent)}
238245
{subTitles[stepIndex] ? (
239246
<div className={`${cascaderClass}__options-title`}>{subTitles[stepIndex]}</div>
240247
) : null}
@@ -255,16 +262,23 @@ const Cascader: React.FC<CascaderProps> = (props) => {
255262
value={internalSelectedValues[index]}
256263
options={curOptions}
257264
onChange={(value: string | number) => {
265+
const targetIndex = curOptions.findIndex((item) => item.value === value);
266+
const target = curOptions[targetIndex];
267+
258268
const selectedValues = [...internalSelectedValues].slice(0, index);
259269
selectedValues.push(value);
260270
setInternalSelectedValues(selectedValues);
261271

262272
setStepIndex(index + 1);
263273

264-
onPick?.(value, index);
274+
onPick?.({
275+
value,
276+
label: String(target?.label || ''),
277+
index: targetIndex,
278+
level: index,
279+
});
265280

266-
const next = curOptions.find((item) => item.value === value);
267-
if (Array.isArray(next?.children)) {
281+
if (Array.isArray(target?.children)) {
268282
return;
269283
}
270284

‎src/cascader/cascader.en-US.md‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,26 @@
77
name | type | default | description | required
88
-- | -- | -- | -- | --
99
className | String | - | className of component | N
10-
style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
10+
style | Object | - | CSS(Cascading Style Sheets)，Typescript: `React.CSSProperties` | N
1111
checkStrictly | Boolean | false | \- | N
12-
closeBtn | TNode | true | Typescript：`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
13-
keys | Object | - | Typescript：`CascaderKeysType` `type CascaderKeysType = TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/cascader/type.ts) | N
12+
closeBtn | TNode | true | Typescript: `boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
13+
header | TElement | - | `0.21.2`。Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
14+
keys | Object | - | Typescript: `CascaderKeysType` `type CascaderKeysType = TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/cascader/type.ts) | N
1415
lazy | Boolean | false | \- | N
1516
loadCompleted | Boolean | false | \- | N
16-
options | Array | [] | Typescript：`Array<CascaderOption>` | N
17+
middleContent | TElement | - | `0.21.2`。Typescript: `TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
18+
options | Array | [] | Typescript: `Array<CascaderOption>` | N
19+
overlayProps | Object | {} | `0.21.2`。Typescript: `OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/cascader/type.ts) | N
1720
placeholder | String | 选择选项 | \- | N
18-
subTitles | Array | [] | Typescript：`Array<string>` | N
21+
subTitles | Array | [] | Typescript: `Array<string>` | N
1922
theme | String | step | options: step/tab | N
20-
title | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
23+
title | TNode | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
2124
value | String / Number | - | \- | N
2225
defaultValue | String / Number | - | uncontrolled property | N
2326
visible | Boolean | false | \- | N
24-
onChange | Function | | Typescript：`(value: string \| number, selectedOptions: CascaderOption[]) => void`<br/> | N
25-
onClose | Function | | Typescript：`(trigger: TriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
26-
onPick | Function | | Typescript：`(value: string \| number, index: number) => void`<br/> | N
27+
onChange | Function | | Typescript: `(value: string \| number, selectedOptions: CascaderOption[]) => void`<br/> | N
28+
onClose | Function | | Typescript: `(trigger: CascaderTriggerSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
29+
onPick | Function | | Typescript: `(context: { value: string \| number, label: string, index: number, level: number }) => void`<br/> | N
2730

2831
### CSS Variables
2932

‎src/cascader/cascader.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,10 +51,13 @@ className | String | - | 类名 | N
5151
style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
5252
checkStrictly | Boolean | false | 父子节点选中状态不再关联，可各自选中或取消 | N
5353
closeBtn | TNode | true | 关闭按钮。TS 类型：`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
54-
keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `type CascaderKeysType = TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/cascader/type.ts) | N
54+
header | TElement | - | `0.21.2`。头部。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
55+
keys | Object | - | 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名。TS 类型：`CascaderKeysType` `type CascaderKeysType = TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/cascader/type.ts) | N
5556
lazy | Boolean | false | 是否异步加载 | N
5657
loadCompleted | Boolean | false | 是否完成异步加载 | N
58+
middleContent | TElement | - | `0.21.2`。中间内容。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
5759
options | Array | [] | 可选项数据源。TS 类型：`Array<CascaderOption>` | N
60+
overlayProps | Object | {} | `0.21.2`。遮罩层的属性，透传至 overlay。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/cascader/type.ts) | N
5861
placeholder | String | 选择选项 | 未选中时的提示文案 | N
5962
subTitles | Array | [] | 每级展示的次标题。TS 类型：`Array<string>` | N
6063
theme | String | step | 展示风格。可选项：step/tab | N
@@ -63,8 +66,8 @@ value | String / Number | - | 选项值 | N
6366
defaultValue | String / Number | - | 选项值。非受控属性 | N
6467
visible | Boolean | false | 是否展示 | N
6568
onChange | Function | | TS 类型：`(value: string \| number, selectedOptions: CascaderOption[]) => void`<br/>值发生变更时触发 | N
66-
onClose | Function | | TS 类型：`(trigger: TriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/cascader/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
67-
onPick | Function | | TS 类型：`(value: string \| number, index: number) => void`<br/>选择后触发 | N
69+
onClose | Function | | TS 类型：`(trigger: CascaderTriggerSource) => void`<br/>关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/cascader/type.ts)。<br/>`type CascaderTriggerSource = 'overlay' \| 'close-btn' \| 'finish'`<br/> | N
70+
onPick | Function | | TS 类型：`(context: { value: string \| number, label: string, index: number, level: number }) => void`<br/>选择后触发 | N
6871

6972
### CSS Variables
7073

‎src/cascader/defaultProps.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@
55
import { TdCascaderProps } from './type';
66

77
export const cascaderDefaultProps: TdCascaderProps = {
8+
checkStrictly: false,
89
closeBtn: true,
910
lazy: false,
1011
loadCompleted: false,
1112
options: [],
13+
overlayProps: {},
1214
placeholder: '选择选项',
1315
subTitles: [],
1416
theme: 'step',

‎src/cascader/type.ts‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
* 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
55
* */
66

7-
import { TNode, TreeKeysType, TreeOptionData } from '../common';
7+
import { OverlayProps } from '../overlay';
8+
import { TNode, TElement, TreeOptionData, TreeKeysType } from '../common';
89

910
export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOptionData> {
1011
/**
@@ -18,7 +19,11 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
1819
*/
1920
closeBtn?: TNode;
2021
/**
21-
* 用来定义 value / label 在 `options` 中对应的字段别名
22+
* 头部
23+
*/
24+
header?: TElement;
25+
/**
26+
* 用来定义 value / label / children / disabled 在 `options` 中对应的字段别名
2227
*/
2328
keys?: CascaderKeysType;
2429
/**
@@ -31,11 +36,20 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
3136
* @default false
3237
*/
3338
loadCompleted?: boolean;
39+
/**
40+
* 中间内容
41+
*/
42+
middleContent?: TElement;
3443
/**
3544
* 可选项数据源
3645
* @default []
3746
*/
3847
options?: Array<CascaderOption>;
48+
/**
49+
* 遮罩层的属性，透传至 overlay
50+
* @default {}
51+
*/
52+
overlayProps?: OverlayProps;
3953
/**
4054
* 未选中时的提示文案
4155
* @default 选择选项
@@ -75,13 +89,13 @@ export interface TdCascaderProps<CascaderOption extends TreeOptionData = TreeOpt
7589
/**
7690
* 关闭时触发
7791
*/
78-
onClose?: (trigger: TriggerSource) => void;
92+
onClose?: (trigger: CascaderTriggerSource) => void;
7993
/**
8094
* 选择后触发
8195
*/
82-
onPick?: (value: string | number, index: number) => void;
96+
onPick?: (context: { value: string | number; label: string; index: number; level: number }) => void;
8397
}
8498

8599
export type CascaderKeysType = TreeKeysType;
86100

87-
export type TriggerSource = 'overlay' | 'close-btn' | 'finish';
101+
export type CascaderTriggerSource = 'overlay' | 'close-btn' | 'finish';

0 commit comments

Comments
 (0)