From a931f94cde08cd48ae7dfdfaecdd77da0294ea33 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Wed, 26 Jul 2023 12:08:23 +0800 Subject: [PATCH] feat(timepicker): disabletime callback add ms params --- src/time-picker/panel/SinglePanel.tsx | 16 ++++++++++++++-- src/time-picker/time-picker.en-US.md | 12 ++++++------ src/time-picker/time-picker.md | 13 +++++++------ src/time-picker/type.ts | 18 ++++++++++-------- 4 files changed, 37 insertions(+), 22 deletions(-) diff --git a/src/time-picker/panel/SinglePanel.tsx b/src/time-picker/panel/SinglePanel.tsx index 2ce5040c7..cf2e8d263 100644 --- a/src/time-picker/panel/SinglePanel.tsx +++ b/src/time-picker/panel/SinglePanel.tsx @@ -45,6 +45,7 @@ export interface SinglePanelProps h: number, m: number, s: number, + ms: number, context?: { partial: TimeRangePickerPartial }, ) => Partial<{ hour: number[]; minute: number[]; second: number[] }>; position?: TimeRangePickerPartial; @@ -128,7 +129,12 @@ const SinglePanel: FC = (props) => { (col: EPickerCols, el: string | number) => { const colIdx = timeArr.indexOf(col); if (colIdx !== -1) { - const params: [number, number, number] = [dayjsValue.hour(), dayjsValue.minute(), dayjsValue.second()]; + const params: [number, number, number, number] = [ + dayjsValue.hour(), + dayjsValue.minute(), + dayjsValue.second(), + dayjsValue.millisecond(), + ]; params[colIdx] = Number(el); return !(disableTime && disableTime?.(...params, { partial: position }))?.[col]?.includes(Number(el)); } @@ -157,7 +163,12 @@ const SinglePanel: FC = (props) => { return hideDisabledTime && !!disableTime ? colList.filter((t) => { - const params: [number, number, number] = [dayjsValue.hour(), dayjsValue.minute(), dayjsValue.second()]; + const params: [number, number, number, number] = [ + dayjsValue.hour(), + dayjsValue.minute(), + dayjsValue.second(), + dayjsValue.millisecond(), + ]; params[colIdx] = Number(t); return !disableTime?.(...params, { partial: position })?.[col]?.includes(Number(t)); }) @@ -235,6 +246,7 @@ const SinglePanel: FC = (props) => { } if (timeArr.includes(col)) { if (timeItemCanUsed(col, val)) formattedVal = dayjsValue[col]?.(val).format(format); + else formattedVal = dayjsValue.format(format); } else { const currentHour = dayjsValue.hour(); if (meridiem === AM && currentHour >= 12) { diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md index 779c98e30..82a077cd1 100644 --- a/src/time-picker/time-picker.en-US.md +++ b/src/time-picker/time-picker.en-US.md @@ -9,7 +9,7 @@ className | String | - | 类名 | N style | Object | - | 样式，Typescript：`React.CSSProperties` | N allowInput | Boolean | false | \- | N clearable | Boolean | false | \- | N -disableTime | Function | - | Typescript：`(h: number, m: number, s: number) => Partial<{ hour: Array, minute: Array, second: Array }>` | 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 format | String | HH:mm:ss | \- | N hideDisabledTime | Boolean | true | \- | N @@ -17,8 +17,8 @@ inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./in 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 -size | String | medium | options：small/medium/large | N -status | String | - | options：default/success/warning/error | 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 @@ -40,15 +40,15 @@ style | Object | - | 样式，Typescript：`React.CSSProperties` | N allowInput | 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 | false | Typescript：`boolean \| Array` | N +disabled | Boolean / Array | false | Typescript：`boolean \| Array` | N format | String | HH:mm:ss | \- | N hideDisabledTime | Boolean | true | \- | 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 rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-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 | - | options：default/success/warning/error | 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 | Array | - | Typescript：`TimeRangeValue` `type TimeRangeValue = Array`。[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 313edb2e5..8243b106c 100644 --- a/src/time-picker/time-picker.md +++ b/src/time-picker/time-picker.md @@ -9,7 +9,7 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N allowInput | Boolean | false | 是否允许直接输入时间 | N clearable | Boolean | false | 是否允许清除选中值 | N -disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number) => Partial<{ hour: Array, minute: Array, second: Array }>` | 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 format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N @@ -18,12 +18,12 @@ 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 size | String | medium | 尺寸。可选项：small/medium/large | N -status | String | - | 输入框状态。可选项：default/success/warning/error | 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 -onBlur | Function | | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
当输入框失去焦点时触发，value 表示组件当前有效值 | 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 onFocus | Function | | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
输入框获得焦点时触发，value 表示组件当前有效值 | N @@ -40,7 +40,7 @@ style | Object | - | 样式，TS 类型：`React.CSSProperties` | N allowInput | 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 | false | 是否禁用组件。TS 类型：`boolean \| Array` | N +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 placeholder | String / Array | undefined | 占位符，值为数组表示可分别为开始日期和结束日期设置占位符。TS 类型：`string \| Array` | N @@ -48,12 +48,13 @@ popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupPr 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 rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型：`RangeInputProps`，[RangeInput API Documents](./range-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/success/warning/error | 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 | 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: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) => void`
当输入框失去焦点时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。
`type TimeRangePickerPartial = 'start' \| 'end'`
| N +onBlur | Function | | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`
当 +输入框失去焦点时触发，value 表示组件当前有效值 | 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 4170b5a71..49e65cc39 100644 --- a/src/time-picker/type.ts +++ b/src/time-picker/type.ts @@ -6,10 +6,10 @@ import { InputProps } from '../input'; import { PopupProps } from '../popup'; +import { SelectInputBlurContext } from '../select-input'; import { RangeInputProps } from '../range-input'; import { TNode } from '../common'; import { MouseEvent, FocusEvent, FormEvent } from 'react'; -import { SelectInputBlurContext } from '../select-input'; export interface TdTimePickerProps { /** @@ -23,16 +23,16 @@ export interface TdTimePickerProps { */ clearable?: boolean; /** - * 禁用时间项 + * 禁用时间项的配置函数 */ disableTime?: ( h: number, m: number, s: number, - ) => Partial<{ hour: Array; minute: Array; second: Array }>; + ms: number, + ) => Partial<{ hour: Array; minute: Array; second: Array; millisecond: Array }>; /** * 是否禁用组件 - * @default false */ disabled?: boolean; /** @@ -68,6 +68,7 @@ export interface TdTimePickerProps { size?: 'small' | 'medium' | 'large'; /** * 输入框状态 + * @default default */ status?: 'default' | 'success' | 'warning' | 'error'; /** @@ -108,7 +109,7 @@ export interface TdTimePickerProps { /** * 当输入框内容发生变化时触发，参数 value 表示组件当前有效值 */ - onInput?: (context: { value: TimePickerValue; e: FormEvent }) => void; + onInput?: (context: { value: TimePickerValue; e: FormEvent }) => void; /** * 面板打开时触发 */ @@ -137,11 +138,11 @@ export interface TdTimeRangePickerProps { h: number, m: number, s: number, + ms: number, context: { partial: TimeRangePickerPartial }, ) => Partial<{ hour: Array; minute: Array; second: Array }>; /** - * 是否禁用组件 - * @default false + * 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用 */ disabled?: boolean; /** @@ -177,6 +178,7 @@ export interface TdTimeRangePickerProps { size?: 'small' | 'medium' | 'large'; /** * 输入框状态 + * @default default */ status?: 'default' | 'success' | 'warning' | 'error'; /** @@ -221,7 +223,7 @@ export interface TdTimeRangePickerProps { */ onInput?: (context: { value: TimeRangeValue; - e?: FormEvent; + e?: FormEvent; position?: TimeRangePickerPartial; }) => void; /**