feat(timepicker): add autoSwap API

TDesignOteam · Oct 16, 2024 · 05659b4 · 05659b4
1 parent 378d3d9
commit 05659b4
Show file tree

Hide file tree

Showing 14 changed files with 79 additions and 6 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-react/src/time-picker/defaultProps.ts b/packages/products/tdesign-react/src/time-picker/defaultProps.ts
@@ -19,6 +19,7 @@ export const timePickerDefaultProps: TdTimePickerProps = {
 
 export const timeRangePickerDefaultProps: TdTimeRangePickerProps = {
   allowInput: false,
+  autoSwap: true,
   borderless: false,
   clearable: false,
   disabled: undefined,

diff --git a/packages/products/tdesign-react/src/time-picker/time-picker.en-US.md b/packages/products/tdesign-react/src/time-picker/time-picker.en-US.md
@@ -44,9 +44,10 @@ 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, ms: 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
+disableTime | Function | - | Typescript：`(h: number, m: number, s: number, ms: 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 / Array | undefined | Typescript：`boolean \| Array<boolean>` | N
 format | String | HH:mm:ss | \- | N
 hideDisabledTime | Boolean | true | \- | N

diff --git a/packages/products/tdesign-react/src/time-picker/time-picker.md b/packages/products/tdesign-react/src/time-picker/time-picker.md
@@ -44,9 +44,10 @@ 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, ms: 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
+disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, ms: 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 / Array | undefined | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array<boolean>` | N
 format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N
 hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N

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

diff --git a/packages/products/tdesign-vue-next/src/time-picker/time-picker.en-US.md b/packages/products/tdesign-vue-next/src/time-picker/time-picker.en-US.md
@@ -52,9 +52,10 @@ pick | `(value: TimePickerValue, context: { e: MouseEvent })` | \-
 name | type | default | description | required
 -- | -- | -- | -- | --
 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, ms: 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-vue-next/tree/develop/src/time-picker/type.ts) | N
+disableTime | Function | - | Typescript：`(h: number, m: number, s: number, ms: 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-vue-next/tree/develop/src/time-picker/type.ts) | N
 disabled | Boolean / Array | undefined | Typescript：`boolean \| Array<boolean>` | N
 format | String | HH:mm:ss | \- | N
 hideDisabledTime | Boolean | true | \- | N

diff --git a/packages/products/tdesign-vue-next/src/time-picker/time-picker.md b/packages/products/tdesign-vue-next/src/time-picker/time-picker.md
@@ -52,9 +52,10 @@ pick | `(value: TimePickerValue, context: { e: MouseEvent })` | 面板选中值
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 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, ms: number,context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
+disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, ms: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/time-picker/type.ts) | N
 disabled | Boolean / Array | undefined | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array<boolean>` | N
 format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N
 hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N

diff --git a/packages/products/tdesign-vue-next/src/time-picker/time-range-picker-props.ts b/packages/products/tdesign-vue-next/src/time-picker/time-range-picker-props.ts
@@ -10,6 +10,11 @@ import { PropType } from 'vue';
 export default {
   /** 是否允许直接输入时间 */
   allowInput: Boolean,
+  /** 是否自动调换左右区间的顺序，默认为 true；若需要支持跨天的场景，可以设置为 false */
+  autoSwap: {
+    type: Boolean,
+    default: true,
+  },
   /** 无边框模式 */
   borderless: Boolean,
   /** 是否允许清除选中值 */

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

diff --git a/packages/products/tdesign-vue/src/time-picker/time-picker.en-US.md b/packages/products/tdesign-vue/src/time-picker/time-picker.en-US.md
@@ -52,9 +52,10 @@ pick | `(value: TimePickerValue, context: { e: MouseEvent })` | \-
 name | type | default | description | required
 -- | -- | -- | -- | --
 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, ms: 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-vue/tree/develop/src/time-picker/type.ts) | N
+disableTime | Function | - | Typescript：`(h: number, m: number, s: number, ms: 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-vue/tree/develop/src/time-picker/type.ts) | N
 disabled | Boolean / Array | undefined | Typescript：`boolean \| Array<boolean>` | N
 format | String | HH:mm:ss | \- | N
 hideDisabledTime | Boolean | true | \- | N

diff --git a/packages/products/tdesign-vue/src/time-picker/time-picker.md b/packages/products/tdesign-vue/src/time-picker/time-picker.md
@@ -52,9 +52,10 @@ pick | `(value: TimePickerValue, context: { e: MouseEvent })` | 面板选中值
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 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, ms: number,context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
+disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number, ms: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 disabled | Boolean / Array | undefined | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean \| Array<boolean>` | N
 format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N
 hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N

diff --git a/packages/products/tdesign-vue/src/time-picker/time-range-picker-props.ts b/packages/products/tdesign-vue/src/time-picker/time-range-picker-props.ts
@@ -10,6 +10,11 @@ import { PropType } from 'vue';
 export default {
   /** 是否允许直接输入时间 */
   allowInput: Boolean,
+  /** 是否自动调换左右区间的顺序，默认为 true；若需要支持跨天的场景，可以设置为 false */
+  autoSwap: {
+    type: Boolean,
+    default: true,
+  },
   /** 无边框模式 */
   borderless: Boolean,
   /** 是否允许清除选中值 */

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

diff --git a/packages/scripts/api.json b/packages/scripts/api.json
@@ -122443,6 +122443,47 @@
         "Boolean"
       ]
     },
+    {
+      "id": 1729051739,
+      "platform_framework": [
+        "1",
+        "2",
+        "4"
+      ],
+      "component": "TimeRangePicker",
+      "field_category": 1,
+      "field_name": "autoSwap",
+      "field_type": [
+        "4"
+      ],
+      "field_default_value": "true",
+      "field_enum": "",
+      "field_desc_zh": "是否自动调换左右区间的顺序，默认为 true；若需要支持跨天的场景，可以设置为 false",
+      "field_desc_en": null,
+      "field_required": 0,
+      "event_input": "",
+      "create_time": "2024-10-16 04:08:59",
+      "update_time": "2024-10-16 04:08:59",
+      "event_output": null,
+      "custom_field_type": null,
+      "syntactic_sugar": null,
+      "readonly": 1,
+      "html_attribute": 0,
+      "trigger_elements": "",
+      "deprecated": 0,
+      "version": "",
+      "test_description": null,
+      "support_default_value": 0,
+      "field_category_text": "Props",
+      "platform_framework_text": [
+        "Vue(PC)",
+        "React(PC)",
+        "Angular(PC)"
+      ],
+      "field_type_text": [
+        "Boolean"
+      ]
+    },
     {
       "id": 1715162174,
       "platform_framework": [