feat(TimePicker): support autoswap API (#3363)

* feat(timepicker): support autoswap API * feat(timepicker): support autoswap API * chore: live demo
Tencent · Oct 18, 2024 · 5d0db30 · 5d0db30
1 parent fc9b43b
commit 5d0db30
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 38 deletions.
diff --git a/src/time-picker/_usage/time-range-picker-props.json b/src/time-picker/_usage/time-range-picker-props.json
@@ -4,6 +4,12 @@
     "type": "Boolean",
     "defaultValue": false,
     "options": []
+  },
+   {
+    "name": "autoSwap",
+    "type": "Boolean",
+    "defaultValue": true,
+    "options": []
   },
   {
     "name": "borderless",

diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md
@@ -50,6 +50,7 @@ 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, 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

diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md
@@ -50,6 +50,7 @@ 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, 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

diff --git a/src/time-picker/time-range-picker-props.ts b/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/src/time-picker/time-range-picker.tsx b/src/time-picker/time-range-picker.tsx
@@ -42,7 +42,6 @@ export default defineComponent({
     const currentPanelIdx = ref(undefined);
     const currentValue = ref<Array<string>>(TIME_PICKER_EMPTY);
     const isShowPanel = ref(false);
-    let openedPanels: number[] = [];
 
     const inputClasses = computed(() => [
       `${componentName.value}__group`,
@@ -73,7 +72,6 @@ export default defineComponent({
 
     const handleClick = ({ position }: { position: 'first' | 'second' }) => {
       currentPanelIdx.value = position === 'first' ? 0 : 1;
-      openedPanels.push(currentPanelIdx.value);
     };
 
     const handleTimeChange = (newValue: string) => {
@@ -84,18 +82,6 @@ export default defineComponent({
       }
     };
 
-    const setCurrentValue2InnerValue = () => {
-      const [startTime, endTime] = currentValue.value;
-      const startDayjs = dayjs(startTime, props.format);
-      const endDayjs = dayjs(endTime, props.format);
-
-      if (startDayjs.isAfter(endDayjs, 'second')) {
-        setInnerValue([currentValue.value[1], currentValue.value[0]]);
-      } else {
-        setInnerValue([currentValue.value[0], currentValue.value[1]]);
-      }
-    };
-
     const handleInputBlur = (value: TimeRangeValue, { e }: { e: FocusEvent }) => {
       if (props.allowInput) {
         const isValidTime = validateInputValue(currentValue.value[currentPanelIdx.value], format.value);
@@ -104,7 +90,6 @@ export default defineComponent({
           currentPanelIdx.value === 0
             ? (currentValue.value = [formattedVal, currentValue.value[1] ?? formattedVal])
             : (currentValue.value = [currentValue.value[0] ?? formattedVal, formattedVal]);
-          setCurrentValue2InnerValue();
         }
       }
       props.onBlur?.({ value, e });
@@ -120,33 +105,29 @@ export default defineComponent({
     };
 
     const handleClickConfirm = () => {
-      if (openedPanels.length < 2) {
-        currentPanelIdx.value = currentPanelIdx.value === 1 ? 0 : 1;
-        openedPanels.push(currentPanelIdx.value);
-        return;
-      }
-
-      const noValidIndex = currentValue.value.findIndex((v) => !validateInputValue(v, format.value));
-      if (noValidIndex !== -1) {
-        currentPanelIdx.value = noValidIndex;
-        openedPanels.push(currentPanelIdx.value);
-        return;
-      }
-
-      setCurrentValue2InnerValue();
+      const isValidTime = !currentValue.value.find((v) => !validateInputValue(v, format.value));
+      if (isValidTime) setInnerValue(currentValue.value);
+      if (props.autoSwap) autoSwapTime();
       isShowPanel.value = false;
     };
 
     const handleFocus = (value: TimeRangeValue, { e, position }: { e: FocusEvent; position: RangeInputPosition }) => {
-      const panelIndex = position === 'first' ? 0 : 1;
-      if (isShowPanel.value && currentPanelIdx.value !== panelIndex) {
-        currentPanelIdx.value = panelIndex;
-        openedPanels.push(currentPanelIdx.value);
-      }
       props.onFocus?.({ value, e, position: position === 'first' ? 'start' : 'end' });
       ctx.emit('focus', { value, e, position: position === 'first' ? 'start' : 'end' });
     };
 
+    const autoSwapTime = () => {
+      const [startTime, endTime] = currentValue.value;
+      const startDayjs = dayjs(startTime, props.format);
+      const endDayjs = dayjs(endTime, props.format);
+
+      if (startDayjs.isAfter(endDayjs, 'second')) {
+        setInnerValue([currentValue.value[1], currentValue.value[0]]);
+      } else {
+        setInnerValue([currentValue.value[0], currentValue.value[1]]);
+      }
+    };
+
     const handleOnPick = (pickValue: string, e: MouseEvent) => {
       let pickedRangeValue = [];
       let context: { e: MouseEvent; position?: TimeRangePickerPartial } = { e };
@@ -165,10 +146,7 @@ export default defineComponent({
       () => isShowPanel.value,
       () => {
         currentValue.value = isShowPanel.value ? innerValue.value ?? TIME_PICKER_EMPTY : TIME_PICKER_EMPTY;
-        if (!isShowPanel.value) {
-          currentPanelIdx.value = undefined;
-          openedPanels = [];
-        }
+        if (!isShowPanel.value) currentPanelIdx.value = undefined;
       },
     );
     return {

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