feat(timepicker): support autoswap API (#3146)

Tencent · Oct 17, 2024 · 4bf0af5 · 4bf0af5
1 parent cd26133
commit 4bf0af5
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 1 deletion.
diff --git a/src/time-picker/TimeRangePicker.tsx b/src/time-picker/TimeRangePicker.tsx
@@ -143,7 +143,7 @@ const TimeRangePicker: FC<TimeRangePickerProps> = (originalProps) => {
 
   const handleClickConfirm = () => {
     const isValidTime = !currentValue.find((v) => !validateInputValue(v, format));
-    if (isValidTime) onChange(autoSwapTime(currentValue));
+    if (isValidTime) onChange(props.autoSwap ? autoSwapTime(currentValue) : currentValue);
     setPanelShow(false);
   };
 

diff --git a/src/time-picker/defaultProps.ts b/src/time-picker/defaultProps.ts
@@ -16,6 +16,7 @@ export const timePickerDefaultProps: TdTimePickerProps = {
 
 export const timeRangePickerDefaultProps: TdTimeRangePickerProps = {
   allowInput: false,
+  autoSwap: true,
   borderless: false,
   clearable: false,
   format: 'HH:mm:ss',

diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md
@@ -41,6 +41,7 @@ name | type | default | description | required
 className | String | - | className of component | N
 style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 allowInput | Boolean | false | \- | N
+autoSwap | Boolean | true | \- | N
 borderless | 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

diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md
@@ -41,6 +41,7 @@ onPick | Function |  | TS 类型：`(value: TimePickerValue, context: { e: Mouse
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 allowInput | Boolean | false | 是否允许直接输入时间 | N
+autoSwap | Boolean | true | 是否自动调换左右区间的顺序，默认为 true；若需要支持跨天的场景，可以设置为 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<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

diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts
@@ -131,6 +131,11 @@ export interface TdTimeRangePickerProps {
    * @default false
    */
   allowInput?: boolean;
+  /**
+   * 是否自动调换左右区间的顺序，默认为 true；若需要支持跨天的场景，可以设置为 false
+   * @default true
+   */
+  autoSwap?: boolean;
   /**
    * 无边框模式
    * @default false