From 18967187d9a9a4cc30e0230fc7e223ceb57edf6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Tue, 10 Dec 2024 11:13:04 +0800 Subject: [PATCH] feat: support label --- src/date-picker/DatePicker.tsx | 4 +++- src/date-picker/__tests__/date-picker.test.tsx | 8 ++++++++ .../__tests__/date-range-picker.test.tsx | 8 ++++++++ src/date-picker/date-picker.en-US.md | 2 ++ src/date-picker/date-picker.md | 2 ++ src/date-picker/hooks/useRange.tsx | 1 + src/date-picker/type.ts | 9 +++++++++ src/range-input/range-input.en-US.md | 1 + src/range-input/range-input.md | 1 + src/range-input/type.ts | 4 ++++ src/time-picker/TimePicker.tsx | 1 + src/time-picker/TimeRangePicker.tsx | 2 ++ src/time-picker/__tests__/time-picker.test.tsx | 16 ++++++++++++++++ src/time-picker/time-picker.en-US.md | 2 ++ src/time-picker/time-picker.md | 2 ++ src/time-picker/type.ts | 8 ++++++++ 16 files changed, 70 insertions(+), 1 deletion(-) diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index f5208a8396..5c2f35cdd3 100644 --- a/src/date-picker/DatePicker.tsx +++ b/src/date-picker/DatePicker.tsx @@ -36,8 +36,9 @@ const DatePicker = forwardRef((originalProps, r timePickerProps, presetsPlacement, needConfirm, - disableTime, multiple, + label, + disableTime, onPick, } = props; @@ -308,6 +309,7 @@ const DatePicker = forwardRef((originalProps, r status={props.status} tips={props.tips} borderless={props.borderless} + label={label} popupProps={popupProps} inputProps={inputProps} popupVisible={popupVisible} diff --git a/src/date-picker/__tests__/date-picker.test.tsx b/src/date-picker/__tests__/date-picker.test.tsx index 274c6cc146..fbe9101042 100644 --- a/src/date-picker/__tests__/date-picker.test.tsx +++ b/src/date-picker/__tests__/date-picker.test.tsx @@ -184,6 +184,14 @@ describe('DatePicker', () => { expect(queryByText(tips)).toBeInTheDocument(); }); + test('label', async () => { + const label = 'test-label'; + const { container } = render(); + const prefix = container.querySelector('.t-input__prefix'); + expect(prefix).toBeTruthy(); + expect(prefix).toHaveTextContent(label); + }); + test('onBlur onFocus', async () => { const blurFn = vi.fn(); const focusFn = vi.fn(); diff --git a/src/date-picker/__tests__/date-range-picker.test.tsx b/src/date-picker/__tests__/date-range-picker.test.tsx index d06641b5bb..0a82dbeace 100644 --- a/src/date-picker/__tests__/date-range-picker.test.tsx +++ b/src/date-picker/__tests__/date-range-picker.test.tsx @@ -154,6 +154,14 @@ describe('DateRangePicker', () => { expect(queryByText(tips)).toBeInTheDocument(); }); + it('label', async () => { + const label = 'test-label'; + const { container } = render(); + const prefix = container.querySelector('.t-input__prefix'); + expect(prefix).toBeTruthy(); + expect(prefix).toHaveTextContent(label); + }); + it('onBlur onFocus', async () => { const blurFn = vi.fn(); const focusFn = vi.fn(); diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md index e461361fd9..791c6c54fd 100644 --- a/src/date-picker/date-picker.en-US.md +++ b/src/date-picker/date-picker.en-US.md @@ -19,6 +19,7 @@ enableTimePicker | Boolean | false | \- | N firstDayOfWeek | Number | 7 | options: 1/2/3/4/5/6/7 | N format | String | 'YYYY-MM-DD' | \- | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N mode | String | date | options: year/quarter/month/week/date | N multiple | Boolean | false | support multiple date，but not support being use together with range-picker、enableTimePicker and allowInput。Typescript：`boolean` | N needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time picker scenario, default is true | N @@ -62,6 +63,7 @@ disabled | Boolean | - | \- | N enableTimePicker | Boolean | false | \- | N firstDayOfWeek | Number | - | options: 1/2/3/4/5/6/7 | N format | String | - | \- | N +label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N mode | String | date | options: year/quarter/month/week/date | N needConfirm | Boolean | true | whether a confirmation button needs to be clicked to complete the action in the date-time range picker scenario, default is true | N panelPreselection | Boolean | true | \- | N diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md index caed403c8a..3ed50bf1e3 100644 --- a/src/date-picker/date-picker.md +++ b/src/date-picker/date-picker.md @@ -19,6 +19,7 @@ enableTimePicker | Boolean | false | 是否显示时间选择 | N firstDayOfWeek | Number | 7 | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N format | String | 'YYYY-MM-DD' | 仅用于格式化日期显示的格式，不影响日期值。注意和 `valueType` 的区别，`valueType`会直接决定日期值 `value` 的格式。全局配置默认为：'YYYY-MM-DD'，[详细文档](https://day.js.org/docs/en/display/format) | N inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N multiple | Boolean | false | 支持多选日期，但不支持在range-picker中，或与enableTimePicker、allowInput 一起使用。TS 类型：`boolean` | N needConfirm | Boolean | true | 决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为`true` | N @@ -61,6 +62,7 @@ disabled | Boolean | - | 是否禁用组件 | N enableTimePicker | Boolean | false | 是否显示时间选择 | N firstDayOfWeek | Number | - | 第一天从星期几开始。可选项：1/2/3/4/5/6/7 | N format | String | - | 用于格式化日期，[详细文档](https://day.js.org/docs/en/display/format) | N +label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N mode | String | date | 选择器模式。可选项：year/quarter/month/week/date | N needConfirm | Boolean | true | 决定在日期时间区间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为 `true` | N panelPreselection | Boolean | true | 在开始日期选中之前，面板是否显示预选状态，即是否高亮预选日期 | N diff --git a/src/date-picker/hooks/useRange.tsx b/src/date-picker/hooks/useRange.tsx index 95d74fa278..a24669cdc8 100644 --- a/src/date-picker/hooks/useRange.tsx +++ b/src/date-picker/hooks/useRange.tsx @@ -60,6 +60,7 @@ export default function useRange(props: TdDateRangePickerProps) { placeholder: props.placeholder ?? globalDatePickerConfig.placeholder[props.mode], activeIndex: popupVisible ? activeIndex : undefined, suffixIcon: props.suffixIcon ?? , + label: props.label, className: classNames({ [`${name}__input--placeholder`]: isHoverCell, }), diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts index eff8d2f6fa..5378e03eab 100644 --- a/src/date-picker/type.ts +++ b/src/date-picker/type.ts @@ -65,6 +65,10 @@ export interface TdDatePickerProps { * 透传给输入框（Input）组件的参数 */ inputProps?: InputProps; + /** + * 左侧文本 + */ + label?: TNode; /** * 选择器模式 * @default date @@ -222,6 +226,10 @@ export interface TdDateRangePickerProps { * @default '' */ format?: string; + /** + * 左侧文本 + */ + label?: TNode; /** * 选择器模式 * @default date @@ -518,6 +526,7 @@ export interface PresetDate { } export type DateValue = string | number | Date; + export type DateMultipleValue = Array; export type DatePickerValueType = diff --git a/src/range-input/range-input.en-US.md b/src/range-input/range-input.en-US.md index bd25a643ee..4031d81a73 100644 --- a/src/range-input/range-input.en-US.md +++ b/src/range-input/range-input.en-US.md @@ -57,6 +57,7 @@ autoWidth | Boolean | false | \- | N disabled | Boolean | - | \- | N inputValue | Array | - | Typescript：`RangeInputValue` | N defaultInputValue | Array | - | uncontrolled property。Typescript：`RangeInputValue` | N +label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N panel | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/range-input/type.ts) | N popupVisible | Boolean | - | \- | N diff --git a/src/range-input/range-input.md b/src/range-input/range-input.md index 0578042467..46540addea 100644 --- a/src/range-input/range-input.md +++ b/src/range-input/range-input.md @@ -57,6 +57,7 @@ autoWidth | Boolean | false | 宽度随内容自适应 | N disabled | Boolean | - | 是否禁用范围输入框，值为数组表示可分别控制某一个输入框是否禁用 | N inputValue | Array | - | 输入框的值。TS 类型：`RangeInputValue` | N defaultInputValue | Array | - | 输入框的值。非受控属性。TS 类型：`RangeInputValue` | N +label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N panel | TNode | - | 下拉框内容，可完全自定义。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N popupProps | Object | - | 透传 Popup 浮层组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/range-input/type.ts) | N popupVisible | Boolean | - | 是否显示下拉框 | N diff --git a/src/range-input/type.ts b/src/range-input/type.ts index 5e6b2f37b5..824add3982 100644 --- a/src/range-input/type.ts +++ b/src/range-input/type.ts @@ -181,6 +181,10 @@ export interface TdRangeInputPopupProps { * 输入框的值，非受控属性 */ defaultInputValue?: RangeInputValue; + /** + * 左侧文本 + */ + label?: TNode; /** * 下拉框内容，可完全自定义 */ diff --git a/src/time-picker/TimePicker.tsx b/src/time-picker/TimePicker.tsx index cbbec25f52..e319358073 100644 --- a/src/time-picker/TimePicker.tsx +++ b/src/time-picker/TimePicker.tsx @@ -135,6 +135,7 @@ const TimePicker = forwardRefWithStatics( popupProps={{ overlayInnerStyle: { width: 'auto', padding: 0 }, ...props.popupProps }} tips={props.tips} status={props.status} + label={props.label} panel={ = (originalProps) => { style, className, presets, + label, } = props; const [value, onChange] = useControlled(props, 'value', props.onChange); @@ -191,6 +192,7 @@ const TimeRangePicker: FC = (originalProps) => { onBlur: handleInputBlur, readonly: !allowInput, activeIndex: currentPanelIdx, + label, ...props.rangeInputProps, }} tips={props.tips} diff --git a/src/time-picker/__tests__/time-picker.test.tsx b/src/time-picker/__tests__/time-picker.test.tsx index 07a3444148..40a2f3c7fd 100644 --- a/src/time-picker/__tests__/time-picker.test.tsx +++ b/src/time-picker/__tests__/time-picker.test.tsx @@ -157,6 +157,22 @@ describe('Timepicker 组件测试', () => { expect(inputs.item(0).value).toBe(date); }); + test('props.label for TimePicker works fine', async () => { + const label = 'abc'; + const { container } = render(); + const prefix = container.querySelector('.t-input__prefix'); + expect(prefix).toBeTruthy(); + expect(prefix).toHaveTextContent(label); + }); + + test('props.label for TimeRangePicker works fine', async () => { + const label = 'abc'; + const { container } = render(); + const prefix = container.querySelector('.t-input__prefix'); + expect(prefix).toBeTruthy(); + expect(prefix).toHaveTextContent(label); + }); + test('TimeRangePick presets test', async () => { const date = ['11:00:00', '12:00:00']; const defaultValue = ['00:00:01', '00:00:02']; diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md index e86535f742..1850758a64 100644 --- a/src/time-picker/time-picker.en-US.md +++ b/src/time-picker/time-picker.en-US.md @@ -16,6 +16,7 @@ disabled | Boolean | false | \- | N format | String | HH:mm:ss | \- | N hideDisabledTime | Boolean | true | \- | N inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N +label | TNode | - | 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/time-picker/type.ts) | N presets | Object | - | Typescript：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N @@ -48,6 +49,7 @@ disableTime | Function | - | Typescript：`(h: number, m: number, s: number, con disabled | Boolean / Array | false | Typescript：`boolean \| Array` | N format | String | HH:mm:ss | \- | N hideDisabledTime | Boolean | true | \- | N +label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N placeholder | String / Array | undefined | Typescript：`string \| Array` | N popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N presets | Object | - | Typescript：`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md index 6a1555a2c5..4a23720f52 100644 --- a/src/time-picker/time-picker.md +++ b/src/time-picker/time-picker.md @@ -16,6 +16,7 @@ disabled | Boolean | false | 是否禁用组件 | N format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N +label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N placeholder | String | undefined | 占位符 | N popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N presets | Object | - | 预设快捷时间选择，示例：`{ '前一小时': '11:00:00' }`。TS 类型：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N @@ -48,6 +49,7 @@ disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: numbe disabled | Boolean / Array | false | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array` | N format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N +label | TNode | - | 左侧文本。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N placeholder | String / Array | undefined | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：`string \| Array` | N popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N presets | Object | - | 预设快捷时间范围选择，示例：{ '下午': ['13:00:00', '18:00:00'] }。TS 类型：`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts index 7d8169d4e1..e23855b478 100644 --- a/src/time-picker/type.ts +++ b/src/time-picker/type.ts @@ -54,6 +54,10 @@ export interface TdTimePickerProps { * 透传给输入框（Input）组件的参数 */ inputProps?: InputProps; + /** + * 左侧文本 + */ + label?: TNode; /** * 占位符 */ @@ -170,6 +174,10 @@ export interface TdTimeRangePickerProps { * @default true */ hideDisabledTime?: boolean; + /** + * 左侧文本 + */ + label?: TNode; /** * 占位符，值为数组表示可分别为开始日期和结束日期设置占位符 */