Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

feat(timepicker): disabletime callback add ms params #2388

Merged
merged 1 commit into from
Jul 26, 2023
Merged

feat(timepicker): disabletime callback add ms params #2388

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

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions src/time-picker/panel/SinglePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -128,7 +129,12 @@ const SinglePanel: FC<SinglePanelProps> = (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));
}
Expand Down Expand Up @@ -157,7 +163,12 @@ const SinglePanel: FC<SinglePanelProps> = (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));
})
Expand Down Expand Up @@ -235,6 +246,7 @@ const SinglePanel: FC<SinglePanelProps> = (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) {
Expand Down
12 changes: 6 additions & 6 deletions src/time-picker/time-picker.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@ 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<number>, minute: Array<number>, second: Array<number> }>` | N
disableTime | Function | - | disable time config function。Typescript：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number>, millisecond: Array<number> }>` | N
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
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<string \| number>` | 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
Expand All @@ -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<number>, minute: Array<number>, second: Array<number> }>` `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<boolean>` | N
disabled | Boolean / Array | false | Typescript：`boolean \| Array<boolean>` | N
format | String | HH:mm:ss | \- | N
hideDisabledTime | Boolean | true | \- | N
placeholder | String / Array | undefined | Typescript：`string \| Array<string>` | 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<string \| number>` | 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<string>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N
Expand Down
13 changes: 7 additions & 6 deletions src/time-picker/time-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<number>, minute: Array<number>, second: Array<number> }>` | N
disableTime | Function | - | 禁用时间项的配置函数。TS 类型：`(h: number, m: number, s: number, ms: number) => Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number>, millisecond: Array<number> }>` | N
disabled | Boolean | false | 是否禁用组件 | N
format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N
hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N
Expand All @@ -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<string \| number>` | 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`<br/>当输入框失去焦点时触发，value 表示组件当前有效值 | N
onBlur | Function | | TS 类型：`(context: { value: TimePickerValue } & SelectInputBlurContext) => void`<br/>当输入框失去焦点时触发，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。<br/>`import { SelectInputBlurContext } from '@SelectInput'`<br/> | N
onChange | Function | | TS 类型：`(value: TimePickerValue) => void`<br/>选中值发生变化时触发 | N
onClose | Function | | TS 类型：`(context: { e: MouseEvent }) => void`<br/>面板关闭时触发 | N
onFocus | Function | | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/>输入框获得焦点时触发，value 表示组件当前有效值 | N
Expand All @@ -40,20 +40,21 @@ 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<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N
disabled | Boolean | false | 是否禁用组件。TS 类型：`boolean \| Array<boolean>` | N
disabled | Boolean / Array | false | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array<boolean>` | 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<string>` | 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
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<string \| number>` | 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<string>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts) | N
defaultValue | Array | - | 选中值。非受控属性。TS 类型：`TimeRangeValue` `type TimeRangeValue = Array<string>`。[详细类型定义](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`<br/>当输入框失去焦点时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
onBlur | Function | | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/>当
输入框失去焦点时触发，value 表示组件当前有效值 | N
onChange | Function | | TS 类型：`(value: TimeRangeValue) => void`<br/>选中值发生变化时触发 | N
onFocus | Function | | TS 类型：`(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) => void`<br/>范围输入框获得焦点时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
onInput | Function | | TS 类型：`(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial }) => void`<br/>当输入框内容发生变化时触发，参数 input 表示输入内容，value 表示组件当前有效值。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
Expand Down
18 changes: 10 additions & 8 deletions src/time-picker/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
/**
Expand All @@ -23,16 +23,16 @@ export interface TdTimePickerProps {
*/
clearable?: boolean;
/**
* 禁用时间项
* 禁用时间项的配置函数
*/
disableTime?: (
h: number,
m: number,
s: number,
) => Partial<{ hour: Array<number>; minute: Array<number>; second: Array<number> }>;
ms: number,
) => Partial<{ hour: Array<number>; minute: Array<number>; second: Array<number>; millisecond: Array<number> }>;
/**
* 是否禁用组件
* @default false
*/
disabled?: boolean;
/**
Expand Down Expand Up @@ -68,6 +68,7 @@ export interface TdTimePickerProps {
size?: 'small' | 'medium' | 'large';
/**
* 输入框状态
* @default default
*/
status?: 'default' | 'success' | 'warning' | 'error';
/**
Expand Down Expand Up @@ -108,7 +109,7 @@ export interface TdTimePickerProps {
/**
* 当输入框内容发生变化时触发，参数 value 表示组件当前有效值
*/
onInput?: (context: { value: TimePickerValue; e: FormEvent<HTMLDivElement> }) => void;
onInput?: (context: { value: TimePickerValue; e: FormEvent<HTMLInputElement> }) => void;
/**
* 面板打开时触发
*/
Expand Down Expand Up @@ -137,11 +138,11 @@ export interface TdTimeRangePickerProps {
h: number,
m: number,
s: number,
ms: number,
context: { partial: TimeRangePickerPartial },
) => Partial<{ hour: Array<number>; minute: Array<number>; second: Array<number> }>;
/**
* 是否禁用组件
* @default false
* 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用
*/
disabled?: boolean;
/**
Expand Down Expand Up @@ -177,6 +178,7 @@ export interface TdTimeRangePickerProps {
size?: 'small' | 'medium' | 'large';
/**
* 输入框状态
* @default default
*/
status?: 'default' | 'success' | 'warning' | 'error';
/**
Expand Down Expand Up @@ -221,7 +223,7 @@ export interface TdTimeRangePickerProps {
*/
onInput?: (context: {
value: TimeRangeValue;
e?: FormEvent<HTMLDivElement>;
e?: FormEvent<HTMLInputElement>;
position?: TimeRangePickerPartial;
}) => void;
/**
Expand Down
Loading