From 549b525ed776f3df443f78701881c7b323cb3d92 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, 30 Jul 2024 15:14:26 +0800 Subject: [PATCH 1/5] feat(rangeInput&datePicker&timePicker): sync api --- package.json | 1 + src/date-picker/DatePicker.tsx | 11 +++++++++++ src/date-picker/DateRangePicker.tsx | 2 ++ src/date-picker/__tests__/date-picker.test.tsx | 8 ++++++++ .../__tests__/date-range-picker.test.tsx | 8 ++++++++ src/date-picker/date-picker.en-US.md | 11 ++++++++--- src/date-picker/date-picker.md | 11 ++++++++--- src/date-picker/defaultProps.ts | 3 +++ src/date-picker/type.ts | 18 ++++++++++++++++++ src/range-input/RangeInputPopup.tsx | 2 ++ src/range-input/range-input.en-US.md | 4 +++- src/range-input/range-input.md | 4 +++- src/range-input/type.ts | 4 ++++ src/time-picker/TimePicker.tsx | 11 +++++++++++ src/time-picker/TimeRangePicker.tsx | 2 ++ src/time-picker/__tests__/time-picker.test.tsx | 16 ++++++++++++++++ src/time-picker/defaultProps.ts | 6 ++++++ src/time-picker/time-picker.en-US.md | 12 ++++++++---- src/time-picker/time-picker.md | 13 ++++++++----- src/time-picker/type.ts | 17 +++++++++++++++++ 20 files changed, 147 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 43e0608b90..1a226e6849 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "test:ui": "vitest --ui", "test:snap": "cross-env NODE_ENV=test-snap vitest run", "test:snap-update": "cross-env NODE_ENV=test-snap vitest run -u", + "test:unit": "vitest run", "test:update": "vitest run -u && npm run test:snap-update", "test:coverage": "vitest run --coverage", "prebuild": "rimraf es/* lib/* dist/* esm/*", diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index 6de9652de3..f9a6f5430b 100644 --- a/src/date-picker/DatePicker.tsx +++ b/src/date-picker/DatePicker.tsx @@ -14,6 +14,7 @@ import { datePickerDefaultProps } from './defaultProps'; import useDefaultProps from '../hooks/useDefaultProps'; import useLatest from '../hooks/useLatest'; import useUpdateEffect from '../hooks/useUpdateEffect'; +import { parseContentTNode } from '../_util/parseTNode'; export interface DatePickerProps extends TdDatePickerProps, StyledProps {} @@ -35,6 +36,8 @@ const DatePicker = forwardRef((originalProps, r timePickerProps, presetsPlacement, needConfirm, + selectInputProps, + label, onPick, } = props; @@ -83,6 +86,11 @@ const DatePicker = forwardRef((originalProps, r } } }); + // render valueDisplay + const renderValueDisplay = () => { + const valueDisplayParams = { value, displayValue: inputValue }; + return parseContentTNode(props.valueDisplay, valueDisplayParams); + }; useUpdateEffect(() => { // 日期时间选择器不需要点击确认按钮完成的操作 @@ -256,12 +264,15 @@ const DatePicker = forwardRef((originalProps, r } /> diff --git a/src/date-picker/DateRangePicker.tsx b/src/date-picker/DateRangePicker.tsx index 6d691e92cd..24d809d5be 100644 --- a/src/date-picker/DateRangePicker.tsx +++ b/src/date-picker/DateRangePicker.tsx @@ -40,6 +40,7 @@ const DateRangePicker = forwardRef((origin timePickerProps, presetsPlacement, panelPreselection, + label, onPick, cancelRangeSelectLimit, } = props; @@ -375,6 +376,7 @@ const DateRangePicker = forwardRef((origin disabled={disabled} status={props.status} tips={props.tips} + label={label} inputValue={inputValue} popupProps={popupProps} rangeInputProps={rangeInputProps} diff --git a/src/date-picker/__tests__/date-picker.test.tsx b/src/date-picker/__tests__/date-picker.test.tsx index a5cddfd65a..865ecb02a1 100644 --- a/src/date-picker/__tests__/date-picker.test.tsx +++ b/src/date-picker/__tests__/date-picker.test.tsx @@ -177,6 +177,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 6f04422abe..17d798ca57 100644 --- a/src/date-picker/__tests__/date-range-picker.test.tsx +++ b/src/date-picker/__tests__/date-range-picker.test.tsx @@ -35,6 +35,14 @@ describe('DateRangePicker', () => { expect((inputElement as HTMLInputElement).disabled).toBe(true); }); + test('label', async () => { + const label = 'test-label'; + const { container } = render(); + const prefix = container.querySelector('.t-input__prefix'); + expect(prefix).toBeTruthy(); + expect(prefix).toHaveTextContent(label); + }); + it('enableTimePicker', async () => { const { container } = render(); act(() => { diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md index 57ac517180..c020d94448 100644 --- a/src/date-picker/date-picker.en-US.md +++ b/src/date-picker/date-picker.en-US.md @@ -13,11 +13,12 @@ borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N defaultTime | String | '00:00:00' | Time selector default value | N disableDate | Object / Array / Function | - | Typescript：`DisableDate` `type DisableDate = Array \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -disabled | Boolean | - | make DatePicker to be disabled | N +disabled | Boolean | undefined | make DatePicker to be disabled | N 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 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 placeholder | String / Array | undefined | Typescript：`string` | N @@ -25,6 +26,7 @@ popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./po prefixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N presets | Object | - | Typescript：`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | options: left/top/right/bottom | N +selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N status | String | default | options: default/success/warning/error | N suffixIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N @@ -32,6 +34,7 @@ timePickerProps | Object | - | Typescript：`TimePickerProps`，[TimePicker API tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N value | String / Number / Array / Date | '' | Typescript：`DateValue` `type DateValue = string \| number \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N defaultValue | String / Number / Array / Date | '' | uncontrolled property。Typescript：`DateValue` `type DateValue = string \| number \| Date`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +valueDisplay | TNode | - | `MouseEvent`。Typescript：`string \| TNode<{ value: DateValue; displayValue?: DateValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N valueType | String | - | Typescript：`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N onBlur | Function | | Typescript：`(context: { value: DateValue; e: FocusEvent }) => void`
| N onChange | Function | | Typescript：`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`

`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`
| N @@ -53,11 +56,13 @@ cancelRangeSelectLimit | Boolean | false | The default date selection interactio clearable | Boolean | false | \- | N defaultTime | Array | ["00:00:00", "23:59:59"] | Time selector default value。Typescript：`string[]` | N disableDate | Object / Array / Function | - | Typescript：`DisableRangeDate` `type DisableRangeDate = Array \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -disabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | 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 placeholder | String / Array | - | 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/date-picker/type.ts) | N @@ -90,7 +95,7 @@ name | type | default | description | required className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N defaultTime | String | '00:00:00' | Time selector default value | N -`Pick` | \- | - | extends `Pick` | N +`Pick` | \- | - | extends `Pick` | N onCellClick | Function | | Typescript：`(context: { date: Date, e: MouseEvent }) => void`
| N onChange | Function | | Typescript：`(value: DateValue, context: { dayjsValue?: Dayjs, e?: MouseEvent, trigger?: DatePickerTriggerSource }) => void`
| N onConfirm | Function | | Typescript：`(context: { date: Date, e: MouseEvent }) => void`
| N diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md index 6dca90d4fb..0e31fecdc3 100644 --- a/src/date-picker/date-picker.md +++ b/src/date-picker/date-picker.md @@ -13,11 +13,12 @@ borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否显示清除按钮 | N defaultTime | String | '00:00:00' | 时间选择器默认值，当 value/defaultValue 未设置值时有效 | N disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。`{ from: 'A', to: 'B' }` 表示在 A 到 B 之间的日期会被禁用。`{ before: 'A', after: 'B' }` 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型：`DisableDate` `type DisableDate = Array \| DisableDateObj \| ((date: DateValue) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -disabled | Boolean | - | 是否禁用组件 | N +disabled | Boolean | undefined | 是否禁用组件 | N 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 needConfirm | Boolean | true | 决定在日期时间选择器的场景下是否需要点击确认按钮才完成选择动作，默认为`true` | N placeholder | String / Array | undefined | 占位符。TS 类型：`string` | N @@ -25,6 +26,7 @@ popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupPr prefixIcon | TElement | - | 用于自定义组件前置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N presets | Object | - | 预设快捷日期选择，示例：`{ '元旦': '2021-01-01', '昨天': dayjs().subtract(1, 'day').format('YYYY-MM-DD'), '特定日期': () => ['2021-02-01'] }`。TS 类型：`PresetDate` `interface PresetDate { [name: string]: DateValue \| (() => DateValue) }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N presetsPlacement | String | bottom | 预设面板展示区域（包含确定按钮）。可选项：left/top/right/bottom | N +selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N size | String | medium | 输入框尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N status | String | default | 输入框状态。可选项：default/success/warning/error | N suffixIcon | TElement | - | 用于自定义组件后置图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N @@ -32,6 +34,7 @@ timePickerProps | Object | - | 透传 TimePicker 组件属性。TS 类型：`Tim tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N value | String / Number / Array / Date | '' | 选中值。TS 类型：`DateValue` `type DateValue = string \| number \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N defaultValue | String / Number / Array / Date | '' | 选中值。非受控属性。TS 类型：`DateValue` `type DateValue = string \| number \| Date`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N +valueDisplay | TNode | - | 自定义选中项呈现的内容。TS 类型：`string \| TNode<{ value: DateValue; displayValue?: DateValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N valueType | String | - | 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。`ValueTypeEnum` 即将废弃，请更为使用 `DatePickerValueType`。TS 类型：`DatePickerValueType` `type DatePickerValueType = 'time-stamp' \| 'Date' \| 'YYYY' \| 'YYYY-MM' \| 'YYYY-MM-DD' \| 'YYYY-MM-DD HH' \| 'YYYY-MM-DD HH:mm' \| 'YYYY-MM-DD HH:mm:ss' \| 'YYYY-MM-DD HH:mm:ss:SSS'` `type ValueTypeEnum = DatePickerValueType`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N onBlur | Function | | TS 类型：`(context: { value: DateValue; e: FocusEvent }) => void`
当输入框失去焦点时触发 | N onChange | Function | | TS 类型：`(value: DateValue, context: { dayjsValue?: Dayjs, trigger?: DatePickerTriggerSource }) => void`
选中值发生变化时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts)。
`import { Dayjs } from 'dayjs'`

`type DatePickerTriggerSource = 'confirm' \| 'pick' \| 'enter' \| 'preset' \| 'clear'`
| N @@ -53,11 +56,13 @@ cancelRangeSelectLimit | Boolean | false | 默认的日期选择交互是根据 clearable | Boolean | false | 是否显示清除按钮 | N defaultTime | Array | ["00:00:00", "23:59:59"] | 时间选择器默认值，当 value/defaultValue 未设置值时有效。TS 类型：`string[]` | N disableDate | Object / Array / Function | - | 禁用日期，示例：['A', 'B'] 表示日期 A 和日期 B 会被禁用。{ from: 'A', to: 'B' } 表示在 A 到 B 之间的日期会被禁用。{ before: 'A', after: 'B' } 表示在 A 之前和在 B 之后的日期都会被禁用。其中 A = '2021-01-01'，B = '2021-02-01'。值类型为 Function 则表示返回值为 true 的日期会被禁用。TS 类型：`DisableRangeDate` `type DisableRangeDate = Array \| DisableDateObj \| ((context: { date: DateRangeValue; partial: DateRangePickerPartial }) => boolean)` `interface DisableDateObj { from?: string; to?: string; before?: string; after?: string }` `type DateRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N -disabled | Boolean | - | 是否禁用组件 | N +disabled | Boolean | undefined | 是否禁用组件 | 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 placeholder | String / Array | - | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：`string \| Array` | N popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/date-picker/type.ts) | N @@ -90,7 +95,7 @@ onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: Mo className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N defaultTime | String | '00:00:00' | 时间选择器默认值，当 value/defaultValue 未设置值时有效 | N -`Pick` | \- | - | 继承 `Pick` 中的全部属性 | N +`Pick` | \- | - | 继承 `Pick` 中的全部属性 | N onCellClick | Function | | TS 类型：`(context: { date: Date, e: MouseEvent }) => void`
点击日期单元格时触发 | N onChange | Function | | TS 类型：`(value: DateValue, context: { dayjsValue?: Dayjs, e?: MouseEvent, trigger?: DatePickerTriggerSource }) => void`
选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同 | N onConfirm | Function | | TS 类型：`(context: { date: Date, e: MouseEvent }) => void`
如果存在“确定”按钮，则点击“确定”按钮时触发 | N diff --git a/src/date-picker/defaultProps.ts b/src/date-picker/defaultProps.ts index bb653c3c90..6a6991aa40 100644 --- a/src/date-picker/defaultProps.ts +++ b/src/date-picker/defaultProps.ts @@ -9,6 +9,7 @@ export const datePickerDefaultProps: TdDatePickerProps = { borderless: false, clearable: false, defaultTime: '00:00:00', + disabled: undefined, enableTimePicker: false, format: undefined, mode: 'date', @@ -26,8 +27,10 @@ export const dateRangePickerDefaultProps: TdDateRangePickerProps = { cancelRangeSelectLimit: false, clearable: false, defaultTime: ['00:00:00', '23:59:59'], + disabled: undefined, enableTimePicker: false, mode: 'date', + needConfirm: true, panelPreselection: true, presetsPlacement: 'bottom', size: 'medium', diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts index 9e2dd90eed..f2c5477bed 100644 --- a/src/date-picker/type.ts +++ b/src/date-picker/type.ts @@ -6,6 +6,7 @@ import { InputProps } from '../input'; import { PopupProps } from '../popup'; +import { SelectInputProps } from '../select-input'; import { TimePickerProps } from '../time-picker'; import { Dayjs } from 'dayjs'; import { RangeInputProps } from '../range-input'; @@ -58,6 +59,10 @@ export interface TdDatePickerProps { * 透传给输入框（Input）组件的参数 */ inputProps?: InputProps; + /** + * 左侧文本 + */ + label?: TNode; /** * 选择器模式 * @default date @@ -89,6 +94,10 @@ export interface TdDatePickerProps { * @default bottom */ presetsPlacement?: 'left' | 'top' | 'right' | 'bottom'; + /** + * 透传 SelectInput 筛选器输入框组件的全部属性 + */ + selectInputProps?: SelectInputProps; /** * 输入框尺寸 * @default medium @@ -121,6 +130,10 @@ export interface TdDatePickerProps { * @default '' */ defaultValue?: DateValue; + /** + * 自定义选中项呈现的内容 + */ + valueDisplay?: string | TNode<{ value: DateValue; displayValue?: DateValue }>; /** * 用于格式化日期的值，仅支持部分格式，时间戳、日期等。⚠️ `YYYYMMDD` 这种格式不支持，请勿使用，如果希望支持可以给 `dayjs` 提个 PR。注意和 `format` 的区别，`format` 仅用于处理日期在页面中呈现的格式。`ValueTypeEnum` 即将废弃，请更为使用 `DatePickerValueType` * @default '' @@ -200,6 +213,10 @@ export interface TdDateRangePickerProps { * @default '' */ format?: string; + /** + * 左侧文本 + */ + label?: TNode; /** * 选择器模式 * @default date @@ -342,6 +359,7 @@ export interface TdDatePickerPanelProps | 'presets' | 'presetsPlacement' | 'timePickerProps' + | 'timePickerProps' | 'needConfirm' > { /** diff --git a/src/range-input/RangeInputPopup.tsx b/src/range-input/RangeInputPopup.tsx index b04974f3a3..accafc4368 100644 --- a/src/range-input/RangeInputPopup.tsx +++ b/src/range-input/RangeInputPopup.tsx @@ -25,6 +25,7 @@ const RangeInputPopup = React.forwardRef(( disabled, status, tips, + label, } = props; const { tOverlayInnerStyle, innerPopupVisible, onInnerPopupVisibleChange } = useOverlayInnerStyle(props); @@ -54,6 +55,7 @@ const RangeInputPopup = React.forwardRef(( status={status} tips={tips} value={inputValue} + label={label} onChange={onInputChange} {...rangeInputProps} /> diff --git a/src/range-input/range-input.en-US.md b/src/range-input/range-input.en-US.md index bd25a643ee..3ae2489b44 100644 --- a/src/range-input/range-input.en-US.md +++ b/src/range-input/range-input.en-US.md @@ -11,7 +11,7 @@ style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProper activeIndex | Number | - | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N -disabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | N format | Array / Function | - | Typescript：`InputFormatType \| Array` | N inputProps | Object / Array | - | Typescript：`InputProps \| Array`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/range-input/type.ts) | N label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N @@ -57,9 +57,11 @@ 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 +defaultPopupVisible | Boolean | - | uncontrolled property | N rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/range-input/type.ts) | N readonly | Boolean | false | \- | N status | String | default | options: default/success/warning/error | N diff --git a/src/range-input/range-input.md b/src/range-input/range-input.md index 0578042467..6425f6232c 100644 --- a/src/range-input/range-input.md +++ b/src/range-input/range-input.md @@ -11,7 +11,7 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N activeIndex | Number | - | 输入框高亮状态序号 | N borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否可清空 | N -disabled | Boolean | - | 是否禁用范围输入框 | N +disabled | Boolean | undefined | 是否禁用范围输入框 | N format | Array / Function | - | 指定输入框展示值的格式。TS 类型：`InputFormatType \| Array` | N inputProps | Object / Array | - | 透传 Input 输入框组件全部属性，数组第一项表示第一个输入框属性，第二项表示第二个输入框属性。示例：`[{ label: 'A', name: 'A-name' }, { label: 'B', name: 'B-name' }]`。TS 类型：`InputProps \| Array`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/range-input/type.ts) | N label | TNode | - | 左侧内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N @@ -57,9 +57,11 @@ 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 +defaultPopupVisible | Boolean | - | 是否显示下拉框。非受控属性 | N rangeInputProps | Object | - | 透传 RangeInput 组件全部属性。TS 类型：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/range-input/type.ts) | N readonly | Boolean | false | 只读状态，值为真会隐藏输入框，且无法打开下拉框 | N status | String | default | 输入框状态。可选项：default/success/warning/error | 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..02ba0da2d4 100644 --- a/src/time-picker/TimePicker.tsx +++ b/src/time-picker/TimePicker.tsx @@ -24,6 +24,7 @@ import { timePickerDefaultProps } from './defaultProps'; import type { StyledProps } from '../common'; import type { TdTimePickerProps } from './type'; import useDefaultProps from '../hooks/useDefaultProps'; +import { parseContentTNode } from '../_util/parseTNode'; // https://github.com/iamkun/dayjs/issues/1552 dayjs.extend(customParseFormat); @@ -41,6 +42,8 @@ const TimePicker = forwardRefWithStatics( clearable, disabled, style, + label, + selectInputProps, format = DEFAULT_FORMAT, hideDisabledTime = true, steps = DEFAULT_STEPS, @@ -73,6 +76,11 @@ const TimePicker = forwardRefWithStatics( setCurrentValue(visible ? value ?? '' : ''); }; + const renderValueDisplay = () => { + const valueDisplayParams = { value: isPanelShowed ? currentValue : value ?? undefined }; + return parseContentTNode(props.valueDisplay, valueDisplayParams); + }; + const handleShowPopup = (visible: boolean, context: { e: React.MouseEvent }) => { effectVisibleCurrentValue(visible); visible ? onOpen(context) : onClose(context); // trigger on-open and on-close @@ -135,6 +143,9 @@ const TimePicker = forwardRefWithStatics( popupProps={{ overlayInnerStyle: { width: 'auto', padding: 0 }, ...props.popupProps }} tips={props.tips} status={props.status} + valueDisplay={renderValueDisplay()} + label={label} + {...selectInputProps} panel={ = (originalProps) => { placeholder = TEXT_CONFIG.rangePlaceholder, size, steps, + label, disableTime, onBlur = noop, onFocus = noop, @@ -154,6 +155,7 @@ const TimeRangePicker: FC = (originalProps) => {
{ }); }); + 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('props.defaultValue for TimePicker works fine', async () => { const { container } = render(); expect(container.querySelectorAll('input').length).toBe(1); diff --git a/src/time-picker/defaultProps.ts b/src/time-picker/defaultProps.ts index 42e5f840b5..3542013693 100644 --- a/src/time-picker/defaultProps.ts +++ b/src/time-picker/defaultProps.ts @@ -8,9 +8,12 @@ export const timePickerDefaultProps: TdTimePickerProps = { allowInput: false, borderless: false, clearable: false, + disabled: undefined, format: 'HH:mm:ss', hideDisabledTime: true, + placeholder: undefined, size: 'medium', + status: 'default', steps: [1, 1, 1], }; @@ -18,8 +21,11 @@ export const timeRangePickerDefaultProps: TdTimeRangePickerProps = { allowInput: false, borderless: false, clearable: false, + disabled: undefined, format: 'HH:mm:ss', hideDisabledTime: true, + placeholder: undefined, size: 'medium', + status: 'default', steps: [1, 1, 1], }; diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md index 91f908422a..f737e3af10 100644 --- a/src/time-picker/time-picker.en-US.md +++ b/src/time-picker/time-picker.en-US.md @@ -12,20 +12,23 @@ allowInput | Boolean | false | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N disableTime | Function | - | disable time config function。Typescript：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array, minute: Array, second: Array, millisecond: Array }>` | N -disabled | Boolean | false | \- | N +disabled | Boolean | undefined | \- | 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 +selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N size | String | medium | options: small/medium/large | N status | String | default | options: default/success/warning/error | N steps | Array | [1, 1, 1] | Typescript：`Array` | N tips | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N value | String | - | Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N defaultValue | String | - | uncontrolled property。Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -onBlur | Function | | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
| N +valueDisplay | TNode | - | `MouseEvent`。Typescript：`string \| TNode<{ value: TimePickerValue }>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +onBlur | Function | | Typescript：`(context: { value: TimePickerValue } & SelectInputBlurContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。
`import { SelectInputBlurContext } from '@SelectInput'`
| N onChange | Function | | Typescript：`(value: TimePickerValue) => void`
| N onClose | Function | | Typescript：`(context: { e: MouseEvent }) => void`
| N onFocus | Function | | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
| N @@ -43,10 +46,11 @@ style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProper allowInput | Boolean | false | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N -disableTime | Function | - | Typescript：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -disabled | Boolean / Array | false | Typescript：`boolean \| Array` | N +disableTime | Function | - | Typescript：`(h: number, m: number, s: number, ms: number,context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N +disabled | Boolean / Array | undefined | 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 879a85ae11..f187f70ec2 100644 --- a/src/time-picker/time-picker.md +++ b/src/time-picker/time-picker.md @@ -12,19 +12,22 @@ allowInput | Boolean | false | 是否允许直接输入时间 | N borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否允许清除选中值 | N disableTime | Function | - | 禁用时间项的配置函数。TS 类型：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array, minute: Array, second: Array, millisecond: Array }>` | N -disabled | Boolean | false | 是否禁用组件 | N +disabled | Boolean | undefined | 是否禁用组件 | 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 +selectInputProps | Object | - | 透传 SelectInput 筛选器输入框组件的全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N size | String | medium | 尺寸。可选项：small/medium/large | N status | String | default | 输入框状态。可选项：default/success/warning/error | N steps | Array | [1, 1, 1] | 时间间隔步数，数组排列 [小时, 分钟, 秒]，示例：[2, 1, 1] 或者 ['2', '1', '1']。TS 类型：`Array` | N tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N value | String | - | 选中值。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N defaultValue | String | - | 选中值。非受控属性。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N +valueDisplay | TNode | - | 自定义选中项呈现的内容。TS 类型：`string \| TNode<{ value: TimePickerValue }>`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N onBlur | Function | | TS 类型：`(context: { value: TimePickerValue } & SelectInputBlurContext) => void`
当输入框失去焦点时触发，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。
`import { SelectInputBlurContext } from '@SelectInput'`
| N onChange | Function | | TS 类型：`(value: TimePickerValue) => void`
选中值发生变化时触发 | N onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
面板关闭时触发 | N @@ -43,10 +46,11 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N allowInput | Boolean | false | 是否允许直接输入时间 | N borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否允许清除选中值 | N -disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -disabled | Boolean / Array | false | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array` | N +disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, ms: number,context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N +disabled | Boolean / Array | undefined | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。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 @@ -57,8 +61,7 @@ steps | Array | [1, 1, 1] | 时间间隔步数，数组排列 [小时, 分钟, tips | TNode | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N value | Array | - | 选中值。TS 类型：`TimeRangeValue` `type TimeRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N defaultValue | Array | - | 选中值。非受控属性。TS 类型：`TimeRangeValue` `type TimeRangeValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N -onBlur | Function | | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
当 -输入框失去焦点时触发，value 表示组件当前有效值 | N +onBlur | Function | | TS 类型：`(context: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) => void`
当输入框失去焦点时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' \| 'end'`
| N onChange | Function | | TS 类型：`(value: TimeRangeValue) => void`
选中值发生变化时触发 | N onFocus | Function | | TS 类型：`(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) => void`
范围输入框获得焦点时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' \| 'end'`
| N onInput | Function | | TS 类型：`(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial }) => void`
当输入框内容发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' \| 'end'`
| N diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts index b91767f6f5..162c0f2e86 100644 --- a/src/time-picker/type.ts +++ b/src/time-picker/type.ts @@ -6,6 +6,7 @@ import { InputProps } from '../input'; import { PopupProps } from '../popup'; +import { SelectInputProps } from '../select-input'; import { SelectInputBlurContext } from '../select-input'; import { RangeInputProps } from '../range-input'; import { TNode } from '../common'; @@ -54,6 +55,10 @@ export interface TdTimePickerProps { * 透传给输入框（Input）组件的参数 */ inputProps?: InputProps; + /** + * 左侧文本 + */ + label?: TNode; /** * 占位符 */ @@ -66,6 +71,10 @@ export interface TdTimePickerProps { * 预设快捷时间选择，示例：`{ '前一小时': '11:00:00' }` */ presets?: PresetTime; + /** + * 透传 SelectInput 筛选器输入框组件的全部属性 + */ + selectInputProps?: SelectInputProps; /** * 尺寸 * @default medium @@ -95,6 +104,10 @@ export interface TdTimePickerProps { * @default '' */ defaultValue?: TimePickerValue; + /** + * 自定义选中项呈现的内容 + */ + valueDisplay?: string | TNode<{ value: TimePickerValue }>; /** * 当输入框失去焦点时触发，value 表示组件当前有效值 */ @@ -165,6 +178,10 @@ export interface TdTimeRangePickerProps { * @default true */ hideDisabledTime?: boolean; + /** + * 左侧文本 + */ + label?: TNode; /** * 占位符，值为数组表示可分别为开始日期和结束日期设置占位符 */ From b2fd54b14286ca06a8f9222a201f4021d555f054 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, 30 Jul 2024 15:18:08 +0800 Subject: [PATCH 2/5] fix: valueDisplay === 'string' --- src/date-picker/DatePicker.tsx | 2 ++ src/time-picker/TimePicker.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/src/date-picker/DatePicker.tsx b/src/date-picker/DatePicker.tsx index f9a6f5430b..789ccced4a 100644 --- a/src/date-picker/DatePicker.tsx +++ b/src/date-picker/DatePicker.tsx @@ -88,6 +88,8 @@ const DatePicker = forwardRef((originalProps, r }); // render valueDisplay const renderValueDisplay = () => { + if (typeof props.valueDisplay === 'string') return props.valueDisplay; + const valueDisplayParams = { value, displayValue: inputValue }; return parseContentTNode(props.valueDisplay, valueDisplayParams); }; diff --git a/src/time-picker/TimePicker.tsx b/src/time-picker/TimePicker.tsx index 02ba0da2d4..f6481f3410 100644 --- a/src/time-picker/TimePicker.tsx +++ b/src/time-picker/TimePicker.tsx @@ -77,6 +77,8 @@ const TimePicker = forwardRefWithStatics( }; const renderValueDisplay = () => { + if (typeof props.valueDisplay === 'string') return props.valueDisplay; + const valueDisplayParams = { value: isPanelShowed ? currentValue : value ?? undefined }; return parseContentTNode(props.valueDisplay, valueDisplayParams); }; From 564f494c7a87a1b247be1535e5919c3ab4ebb321 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, 30 Jul 2024 15:48:27 +0800 Subject: [PATCH 3/5] docs(date-piker): update doc --- src/date-picker/date-picker.en-US.md | 2 +- src/date-picker/date-picker.md | 2 +- src/date-picker/type.ts | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/date-picker/date-picker.en-US.md b/src/date-picker/date-picker.en-US.md index c020d94448..ea34cb0c3f 100644 --- a/src/date-picker/date-picker.en-US.md +++ b/src/date-picker/date-picker.en-US.md @@ -95,7 +95,7 @@ name | type | default | description | required className | String | - | className of component | N style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N defaultTime | String | '00:00:00' | Time selector default value | N -`Pick` | \- | - | extends `Pick` | N +`Pick` | \- | - | extends `Pick` | N onCellClick | Function | | Typescript：`(context: { date: Date, e: MouseEvent }) => void`
| N onChange | Function | | Typescript：`(value: DateValue, context: { dayjsValue?: Dayjs, e?: MouseEvent, trigger?: DatePickerTriggerSource }) => void`
| N onConfirm | Function | | Typescript：`(context: { date: Date, e: MouseEvent }) => void`
| N diff --git a/src/date-picker/date-picker.md b/src/date-picker/date-picker.md index 0e31fecdc3..db58d3505d 100644 --- a/src/date-picker/date-picker.md +++ b/src/date-picker/date-picker.md @@ -95,7 +95,7 @@ onPresetClick | Function | | TS 类型：`(context: { preset: PresetDate, e: Mo className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N defaultTime | String | '00:00:00' | 时间选择器默认值，当 value/defaultValue 未设置值时有效 | N -`Pick` | \- | - | 继承 `Pick` 中的全部属性 | N +`Pick` | \- | - | 继承 `Pick` 中的全部属性 | N onCellClick | Function | | TS 类型：`(context: { date: Date, e: MouseEvent }) => void`
点击日期单元格时触发 | N onChange | Function | | TS 类型：`(value: DateValue, context: { dayjsValue?: Dayjs, e?: MouseEvent, trigger?: DatePickerTriggerSource }) => void`
选中值发生变化时触发。参数 `context.trigger` 表示触发当前事件的来源，不同的模式触发来源也会不同 | N onConfirm | Function | | TS 类型：`(context: { date: Date, e: MouseEvent }) => void`
如果存在“确定”按钮，则点击“确定”按钮时触发 | N diff --git a/src/date-picker/type.ts b/src/date-picker/type.ts index f2c5477bed..a28754f7c3 100644 --- a/src/date-picker/type.ts +++ b/src/date-picker/type.ts @@ -359,7 +359,6 @@ export interface TdDatePickerPanelProps | 'presets' | 'presetsPlacement' | 'timePickerProps' - | 'timePickerProps' | 'needConfirm' > { /** From e05ab97310d7eb6240ebd2244cda3cdda00c5ab8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Thu, 1 Aug 2024 10:09:52 +0800 Subject: [PATCH 4/5] chore: sync api --- src/range-input/defaultProps.ts | 1 + src/time-picker/time-picker.en-US.md | 2 +- src/time-picker/time-picker.md | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/range-input/defaultProps.ts b/src/range-input/defaultProps.ts index 994e81e71a..621aeeca9f 100644 --- a/src/range-input/defaultProps.ts +++ b/src/range-input/defaultProps.ts @@ -7,6 +7,7 @@ import { TdRangeInputProps, TdRangeInputPopupProps } from './type'; export const rangeInputDefaultProps: TdRangeInputProps = { borderless: false, clearable: false, + disabled: undefined, readonly: false, separator: '-', showClearIconOnEmpty: false, diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md index f737e3af10..42799cd414 100644 --- a/src/time-picker/time-picker.en-US.md +++ b/src/time-picker/time-picker.en-US.md @@ -46,7 +46,7 @@ style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProper allowInput | Boolean | false | \- | N borderless | Boolean | false | \- | N clearable | Boolean | false | \- | N -disableTime | Function | - | Typescript：`(h: number, m: number, s: number, ms: number,context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N +disableTime | Function | - | Typescript：`(h: number, m: number, s: number, ms: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N disabled | Boolean / Array | undefined | Typescript：`boolean \| Array` | N format | String | HH:mm:ss | \- | N hideDisabledTime | Boolean | true | \- | N diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md index f187f70ec2..97eb1d2643 100644 --- a/src/time-picker/time-picker.md +++ b/src/time-picker/time-picker.md @@ -46,7 +46,7 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N allowInput | Boolean | false | 是否允许直接输入时间 | N borderless | Boolean | false | 无边框模式 | N clearable | Boolean | false | 是否允许清除选中值 | N -disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, ms: number,context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N +disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, ms: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array, minute: Array, second: Array }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N disabled | Boolean / Array | undefined | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array` | N format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N From 1f84e4515763f902bf253010a00308bdf2e3efcb 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, 6 Aug 2024 12:53:43 +0800 Subject: [PATCH 5/5] test: valueDisplay test case --- src/date-picker/__tests__/date-picker.test.tsx | 7 +++++++ src/time-picker/__tests__/time-picker.test.tsx | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/src/date-picker/__tests__/date-picker.test.tsx b/src/date-picker/__tests__/date-picker.test.tsx index 865ecb02a1..16885e88f3 100644 --- a/src/date-picker/__tests__/date-picker.test.tsx +++ b/src/date-picker/__tests__/date-picker.test.tsx @@ -185,6 +185,13 @@ describe('DatePicker', () => { expect(prefix).toHaveTextContent(label); }); + test('valueDisplay', async () => { + const value = '2022-09-14'; + const valueDisplay = `test-${value}`; + const { queryByText } = render(); + expect(queryByText(valueDisplay)).toBeTruthy(); + }); + test('onBlur onFocus', async () => { const blurFn = vi.fn(); const focusFn = vi.fn(); diff --git a/src/time-picker/__tests__/time-picker.test.tsx b/src/time-picker/__tests__/time-picker.test.tsx index 97d9e8983a..d740977150 100644 --- a/src/time-picker/__tests__/time-picker.test.tsx +++ b/src/time-picker/__tests__/time-picker.test.tsx @@ -36,6 +36,13 @@ describe('Timepicker 组件测试', () => { }); }); + test('props.valueDisplay works fine', async () => { + const value = '00:10:20'; + const valueDisplay = `test-${value}`; + const { queryByText } = render(); + expect(queryByText(valueDisplay)).toBeTruthy(); + }); + test('props.defaultValue works fine', async () => { const { container } = render(); expect(container.querySelectorAll('input').length).toBe(1);