feat(time-picker): 带快捷标签的时间选择器 (#1407)

* feat(time-picker): 带快捷标签的时间选择器 * feat(time-picker): 更新timepicker ssr结果 * feat(time-picker): 根据修改cr意见进行修改
Tencent · Sep 2, 2022 · 1ceb434 · 1ceb434
1 parent d964978
commit 1ceb434
Show file tree

Hide file tree

Showing 10 changed files with 114 additions and 46 deletions.
diff --git a/src/time-picker/panel/props.ts b/src/time-picker/panel/props.ts
@@ -1,5 +1,6 @@
 import { PropType } from 'vue';
 
+import { TdTimePickerProps } from '../../time-picker';
 import * as Props from '../props';
 
 export const panelProps = () => ({
@@ -27,6 +28,12 @@ export const panelProps = () => ({
     type: Boolean,
     default: false,
   },
+  activeIndex: {
+    type: Number,
+  },
+  presets: {
+    type: Object as PropType<TdTimePickerProps['presets']>,
+  },
   hideDisabledTime: {
     ...Props.default.hideDisabledTime,
   },

diff --git a/src/time-picker/panel/time-picker-panel.tsx b/src/time-picker/panel/time-picker-panel.tsx
@@ -4,11 +4,13 @@ import {
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 
+import { TimePickerValue } from '@src/time-picker';
 import { DEFAULT_STEPS, DEFAULT_FORMAT } from '../../_common/js/time-picker/const';
 import { panelProps } from './props';
 import SinglePanel from './single-panel';
 import TButton from '../../button/button';
 import { useConfig, usePrefixClass } from '../../hooks/useConfig';
+import log from '../../_common/js/log';
 
 dayjs.extend(customParseFormat);
 
@@ -51,6 +53,18 @@ export default defineComponent({
       props.onChange?.(v);
       ctx.emit('change', v);
     };
+    const handlePresetClick = (presetValue: TimePickerValue | (() => TimePickerValue)) => {
+      const presetVal = typeof presetValue === 'function' ? presetValue() : presetValue;
+      if (typeof props.activeIndex === 'number') {
+        if (Array.isArray(presetVal)) {
+          props.onChange(presetVal[props.activeIndex]);
+        } else {
+          log.error('TimePicker', `preset: ${props.presets} 预设值必须是数组!`);
+        }
+      } else {
+        props.onChange(presetVal);
+      }
+    };
     // 渲染后执行update 使面板滚动至当前时间位置
     onMounted(() => {
       panelColUpdate();
@@ -71,6 +85,7 @@ export default defineComponent({
       defaultValue,
       global,
       handleChange,
+      handlePresetClick,
     };
   },
 
@@ -102,16 +117,30 @@ export default defineComponent({
             >
               {this.global.confirm}
             </TButton>
-            {!this.showNowTimeBtn ? (
-              <TButton
-                theme="primary"
-                variant="text"
-                size="small"
-                onClick={() => this.onChange(dayjs().format(this.format))}
-              >
-                {this.global.now}
-              </TButton>
-            ) : null}
+            <div>
+              {!this.showNowTimeBtn ? (
+                <TButton
+                  theme="primary"
+                  variant="text"
+                  size="small"
+                  onClick={() => this.onChange(dayjs().format(this.format))}
+                >
+                  {this.global.now}
+                </TButton>
+              ) : null}
+              {this.presets
+                && Object.keys(this.presets).map((key: string) => (
+                  <TButton
+                    key={key}
+                    theme="primary"
+                    size="small"
+                    variant="text"
+                    onClick={() => this.handlePresetClick?.(this.presets[key])}
+                  >
+                    {key}
+                  </TButton>
+                ))}
+            </div>
           </div>
         ) : null}
       </div>

diff --git a/src/time-picker/props.ts b/src/time-picker/props.ts
@@ -12,12 +12,12 @@ export default {
   allowInput: Boolean,
   /** 是否允许清除选中值 */
   clearable: Boolean,
-  /** 是否禁用组件 */
-  disabled: Boolean,
   /** 禁用时间项 */
   disableTime: {
     type: Function as PropType<TdTimePickerProps['disableTime']>,
   },
+  /** 是否禁用组件 */
+  disabled: Boolean,
   /** 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) */
   format: {
     type: String,
@@ -41,6 +41,10 @@ export default {
   popupProps: {
     type: Object as PropType<TdTimePickerProps['popupProps']>,
   },
+  /** 预设快捷时间选择，示例：`{ '前一小时': '11:00:00' }` */
+  presets: {
+    type: Object as PropType<TdTimePickerProps['presets']>,
+  },
   /** 尺寸 */
   size: {
     type: String as PropType<TdTimePickerProps['size']>,
@@ -58,10 +62,12 @@ export default {
   /** 选中值 */
   value: {
     type: String,
+    default: '',
   },
   /** 选中值，非受控属性 */
   defaultValue: {
     type: String,
+    default: '',
   },
   /** 当输入框失去焦点时触发，value 表示组件当前有效值 */
   onBlur: Function as PropType<TdTimePickerProps['onBlur']>,

diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md
@@ -1,30 +1,30 @@
 :: BASE_DOC ::
 
 ## API
-
 ### TimePicker Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
 allowInput | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-disabled | Boolean | false | \- | N
 disableTime | Function | - | Typescript：`(h: number, m: number, s: number) => Partial<{ hour: Array<number>, minute: Array<number>, second: 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-vue/tree/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-vue/tree/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-vue/tree/develop/src/time-picker/type.ts) | N
 size | String | medium | options：small/medium/large | N
 steps | Array | [1, 1, 1] | Typescript：`Array<string | number>` | N
 value | String | - | `v-model` is supported。Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 defaultValue | String | - | uncontrolled property。Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
-onBlur | Function |  | TS 类型：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<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/> | N
-onInput | Function |  | TS 类型：`(context: { value: TimePickerValue; e: InputEvent }) => void`<br/> | N
-onOpen | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/> | N
+onBlur | Function |  | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/> | N
+onChange | Function |  | Typescript：`(value: TimePickerValue) => void`<br/> | N
+onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+onFocus | Function |  | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/> | N
+onInput | Function |  | Typescript：`(context: { value: TimePickerValue; e: InputEvent }) => void`<br/> | N
+onOpen | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 
 ### TimePicker Events
 
@@ -43,21 +43,22 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 allowInput | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-disabled | Boolean / Array | false | Typescript：`boolean | Array<boolean>` | 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
+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-vue/tree/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-vue/tree/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-vue/tree/develop/src/time-picker/type.ts) | N
 size | String | medium | options：small/medium/large | N
 steps | Array | [1, 1, 1] | Typescript：`Array<string | number>` | N
 value | Array | - | `v-model` is supported。Typescript：`TimeRangeValue` `type TimeRangeValue = Array<string>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 defaultValue | Array | - | uncontrolled property。Typescript：`TimeRangeValue` `type TimeRangeValue = Array<string>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
-onBlur | Function |  | TS 类型：`(context: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' | 'end'`<br/> | N
-onChange | Function |  | TS 类型：`(value: TimeRangeValue) => void`<br/> | N
-onFocus | Function |  | TS 类型：`(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/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/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' | 'end'`<br/> | N
+onBlur | Function |  | Typescript：`(context: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' | 'end'`<br/> | N
+onChange | Function |  | Typescript：`(value: TimeRangeValue) => void`<br/> | N
+onFocus | Function |  | Typescript：`(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' | 'end'`<br/> | N
+onInput | Function |  | Typescript：`(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial  })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' | 'end'`<br/> | N
 
 ### TimeRangePicker Events
 

diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md
@@ -7,13 +7,14 @@
 -- | -- | -- | -- | --
 allowInput | Boolean | false | 是否允许直接输入时间 | N
 clearable | Boolean | false | 是否允许清除选中值 | N
-disabled | Boolean | false | 是否禁用组件 | N
 disableTime | Function | - | 禁用时间项。TS 类型：`(h: number, m: number, s: number) => Partial<{ hour: Array<number>, minute: Array<number>, second: 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
 inputProps | Object | - | 透传给输入框（Input）组件的参数。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 placeholder | String | undefined | 占位符 | N
 popupProps | Object | - | 透传给 popup 组件的参数。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/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-vue/tree/develop/src/time-picker/type.ts) | N
 size | String | medium | 尺寸。可选项：small/medium/large | N
 steps | Array | [1, 1, 1] | 时间间隔步数，数组排列 [小时, 分钟, 秒]，示例：[2, 1, 1] 或者 ['2', '1', '1']。TS 类型：`Array<string | number>` | N
 value | String | - | 选中值。支持语法糖 `v-model`。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
@@ -42,12 +43,13 @@ open | `(context: { e: MouseEvent })` | 面板打开时触发
 -- | -- | -- | -- | --
 allowInput | Boolean | false | 是否允许直接输入时间 | N
 clearable | Boolean | false | 是否允许清除选中值 | N
-disabled | Boolean / Array | false | 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用。TS 类型：`boolean | Array<boolean>` | 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
+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-vue/tree/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-vue/tree/develop/src/time-picker/type.ts) | N
 rangeInputProps | Object | - | 透传给范围输入框 RangeInput 组件的参数。TS 类型：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 size | String | medium | 尺寸。可选项：small/medium/large | N
 steps | Array | [1, 1, 1] | 时间间隔步数，数组排列 [小时, 分钟, 秒]，示例：[2, 1, 1] 或者 ['2', '1', '1']。TS 类型：`Array<string | number>` | N

diff --git a/src/time-picker/time-picker.tsx b/src/time-picker/time-picker.tsx
@@ -147,6 +147,7 @@ export default defineComponent({
                       onChange: this.handlePanelChange,
                       hideDisabledTime: this.hideDisabledTime,
                       handleConfirmClick: this.handleClickConfirm,
+                      presets: this.presets,
                     },
                   }}
                 />

diff --git a/src/time-picker/time-range-picker-props.ts b/src/time-picker/time-range-picker-props.ts
@@ -12,15 +12,15 @@ export default {
   allowInput: Boolean,
   /** 是否允许清除选中值 */
   clearable: Boolean,
+  /** 禁用时间项 */
+  disableTime: {
+    type: Function as PropType<TdTimeRangePickerProps['disableTime']>,
+  },
   /** 是否禁用组件，值为数组表示可分别控制开始日期和结束日期是否禁用 */
   disabled: {
     type: [Boolean, Array] as PropType<TdTimeRangePickerProps['disabled']>,
     default: false,
   },
-  /** 禁用时间项 */
-  disableTime: {
-    type: Function as PropType<TdTimeRangePickerProps['disableTime']>,
-  },
   /** 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) */
   format: {
     type: String,
@@ -40,6 +40,10 @@ export default {
   popupProps: {
     type: Object as PropType<TdTimeRangePickerProps['popupProps']>,
   },
+  /** 预设快捷时间范围选择，示例：{ '下午': ['13:00:00', '18:00:00'] } */
+  presets: {
+    type: Object as PropType<TdTimeRangePickerProps['presets']>,
+  },
   /** 透传给范围输入框 RangeInput 组件的参数 */
   rangeInputProps: {
     type: Object as PropType<TdTimeRangePickerProps['rangeInputProps']>,

diff --git a/src/time-picker/time-range-picker.tsx b/src/time-picker/time-range-picker.tsx
@@ -183,6 +183,8 @@ export default defineComponent({
                       onChange: this.handleTimeChange,
                       handleConfirmClick: this.handleClickConfirm,
                       position: this.currentPanelIdx === 0 ? 'start' : 'end',
+                      activeIndex: this.currentPanelIdx,
+                      presets: this.presets,
                     },
                   }}
                 />