feat(time-picker): disableTime callback add ms params (Tencent#2618)

* feat(timepicker): disabletime callback add ms params * chore: update snapshot
KMethod · Jul 25, 2023 · 3277486 · 3277486
1 parent 410a766
commit 3277486
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 16 deletions.
diff --git a/src/time-picker/_example/disabled.vue b/src/time-picker/_example/disabled.vue
@@ -4,6 +4,8 @@
     <t-time-picker v-model="time1" :disabled="true" />
     <h3>禁用指定时间</h3>
     <t-time-picker :disable-time="disableTime" />
+    <h3>禁用指定时间 同时展示禁用的时间选项</h3>
+    <t-time-picker :disable-time="disableTime" :hideDisabledTime="false" />
   </t-space>
 </template>
 

diff --git a/src/time-picker/panel/single-panel.tsx b/src/time-picker/panel/single-panel.tsx
@@ -53,7 +53,7 @@ export default defineComponent({
     const maskRef = ref(null);
 
     const dayjsValue = computed(() => {
-      const isStepsSet = !!steps.value.filter((v) => v > 1).length;
+      const isStepsSet = !!steps.value.filter((v: number) => v > 1).length;
 
       if (value.value) return dayjs(value.value, format.value);
 
@@ -148,10 +148,11 @@ export default defineComponent({
 
         return props.hideDisabledTime && !!props.disableTime
           ? colList.filter((t) => {
-            const params: [number, number, number] = [
+            const params: [number, number, number, number] = [
               dayjsValue.value.hour(),
               dayjsValue.value.minute(),
               dayjsValue.value.second(),
+              dayjsValue.value.millisecond(),
             ];
             params[colIdx] = Number(t);
             return !props
@@ -215,7 +216,11 @@ export default defineComponent({
       if (!dayjs(dayjsValue.value).isValid() || (value.value && !dayjs(value.value, format.value, true).isValid())) return;
 
       if (timeArr.includes(col)) {
-        if (timeItemCanUsed(col, val)) formattedVal = dayjsValue.value[col]?.(val).format(format.value);
+        if (timeItemCanUsed(col, val)) {
+          formattedVal = dayjsValue.value[col]?.(val).format(format.value);
+        } else {
+          formattedVal = dayjsValue.value.format(format.value);
+        }
       } else {
         const currentHour = dayjsValue.value.hour();
         if (meridiem === AM && currentHour >= 12) {

diff --git a/src/time-picker/panel/time-picker-panel.tsx b/src/time-picker/panel/time-picker-panel.tsx
@@ -27,7 +27,7 @@ export default defineComponent({
     const panelClassName = usePrefixClass('time-picker__panel');
     const triggerScroll = ref(false);
     const { global } = useConfig('timePicker');
-    const showNowTimeBtn = computed(() => !!props.steps.filter((v) => v > 1).length);
+    const showNowTimeBtn = computed(() => !!props.steps.filter((v: number) => v > 1).length);
     const defaultValue = computed(() => {
       const isStepsSet = showNowTimeBtn.value;
       const formattedValue = dayjs(props.value, props.format);
@@ -111,6 +111,7 @@ export default defineComponent({
                 disableTime: this.disableTime,
                 resetTriggerScroll: this.resetTriggerScroll,
                 isShowPanel: this.isShowPanel,
+                hideDisabledTime: this.hideDisabledTime,
               },
             }}
           />

diff --git a/src/time-picker/props.ts b/src/time-picker/props.ts
@@ -12,7 +12,7 @@ export default {
   allowInput: Boolean,
   /** 是否允许清除选中值 */
   clearable: Boolean,
-  /** 禁用时间项 */
+  /** 禁用时间项的配置函数 */
   disableTime: {
     type: Function as PropType<TdTimePickerProps['disableTime']>,
   },

diff --git a/src/time-picker/time-picker.en-US.md b/src/time-picker/time-picker.en-US.md
@@ -7,21 +7,21 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 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 | - | \- | 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
-status | String | default | 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 | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | 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 |  | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => 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
@@ -55,8 +55,8 @@ placeholder | String / Array | undefined | Typescript：`string \| Array<string>
 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
-status | String | default | 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 | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | 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

diff --git a/src/time-picker/time-picker.md b/src/time-picker/time-picker.md
@@ -7,7 +7,7 @@
 -- | -- | -- | -- | --
 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 | - | 是否禁用组件 | N
 format | String | HH:mm:ss | 用于格式化时间，[详细文档](https://day.js.org/docs/en/display/format) | N
 hideDisabledTime | Boolean | true | 是否隐藏禁用状态的时间项 | N
@@ -21,7 +21,7 @@ steps | Array | [1, 1, 1] | 时间间隔步数，数组排列 [小时, 分钟,
 tips | String / Slot / Function | - | 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 value | String | - | 选中值。支持语法糖 `v-model`。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 defaultValue | String | - | 选中值。非受控属性。TS 类型：`TimePickerValue` `type TimePickerValue = string`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/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; e: FocusEvent }) => void`<br/>当输入框失去焦点时触发，value 表示组件当前有效值 | 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

diff --git a/src/time-picker/type.ts b/src/time-picker/type.ts
@@ -22,13 +22,14 @@ 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> }>;
   /**
    * 是否禁用组件
    */

diff --git a/test/snap/__snapshots__/csr.test.js.snap b/test/snap/__snapshots__/csr.test.js.snap
@@ -134479,6 +134479,66 @@ exports[`csr snapshot test > csr test ./src/time-picker/_example/disabled.vue 1`
       </div>
     </div>
   </div>
+  <div
+    class="t-space-item"
+  >
+    <h3>
+      禁用指定时间 同时展示禁用的时间选项
+    </h3>
+  </div>
+  <div
+    class="t-space-item"
+  >
+    <div
+      class="t-time-picker"
+    >
+      <div
+        class="t-select-input t-select-input--empty"
+      >
+        <div
+          class="t-input__wrap"
+        >
+          <div
+            class="t-input t-is-readonly t-input--prefix t-input--suffix"
+          >
+            <div
+              class="t-input__prefix"
+            />
+            <input
+              autocomplete=""
+              class="t-input__inner"
+              placeholder="选择时间"
+              readonly="readonly"
+              type="text"
+              unselectable="on"
+            />
+            <span
+              class="t-input__suffix t-input__suffix-icon"
+            >
+              <svg
+                class="t-icon t-icon-time"
+                fill="none"
+                height="1em"
+                viewBox="0 0 16 16"
+                width="1em"
+              >
+                <path
+                  d="M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+                <path
+                  d="M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z"
+                  fill="currentColor"
+                  fill-opacity="0.9"
+                />
+              </svg>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 

diff --git a/test/snap/__snapshots__/ssr.test.js.snap b/test/snap/__snapshots__/ssr.test.js.snap
@@ -1105,7 +1105,7 @@ exports[`ssr snapshot test > renders ./src/time-picker/_example/base.vue correct
 
 exports[`ssr snapshot test > renders ./src/time-picker/_example/clearable.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><h3>具备清空按钮</h3></div><div class=\\"t-space-item\\"><div class=\\"t-time-picker\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"\\" type=\\"text\\" unselectable=\\"on\\" value=\\"11:12:10\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><h3>禁止清空按钮</h3></div><div class=\\"t-space-item\\"><div class=\\"t-time-picker\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"\\" type=\\"text\\" unselectable=\\"on\\" value=\\"11:12:10\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > renders ./src/time-picker/_example/disabled.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><h3>禁用整个选择器</h3></div><div class=\\"t-space-item\\"><div class=\\"t-time-picker\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-disabled t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input disabled=\\"disabled\\" readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"\\" type=\\"text\\" unselectable=\\"on\\" title=\\"11:12:10\\" value=\\"11:12:10\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><h3>禁用指定时间</h3></div><div class=\\"t-space-item\\"><div class=\\"t-time-picker\\"><div class=\\"t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"选择时间\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > renders ./src/time-picker/_example/disabled.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-space t-space-vertical\\" style=\\"gap:16px;\\"><div class=\\"t-space-item\\"><h3>禁用整个选择器</h3></div><div class=\\"t-space-item\\"><div class=\\"t-time-picker\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-disabled t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input disabled=\\"disabled\\" readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"\\" type=\\"text\\" unselectable=\\"on\\" title=\\"11:12:10\\" value=\\"11:12:10\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><h3>禁用指定时间</h3></div><div class=\\"t-space-item\\"><div class=\\"t-time-picker\\"><div class=\\"t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"选择时间\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div></div></div><div class=\\"t-space-item\\"><h3>禁用指定时间 同时展示禁用的时间选项</h3></div><div class=\\"t-space-item\\"><div class=\\"t-time-picker\\"><div class=\\"t-select-input t-select-input--empty\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"选择时间\\" type=\\"text\\" unselectable=\\"on\\" value=\\"\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > renders ./src/time-picker/_example/format.vue correctly 1`] = `"<div data-server-rendered=\\"true\\" class=\\"t-time-picker\\"><div class=\\"t-select-input\\"><div class=\\"t-input__wrap\\"><div class=\\"t-input t-is-readonly t-input--prefix t-input--suffix\\"><div class=\\"t-input__prefix\\"></div><input readonly=\\"readonly\\" autocomplete=\\"\\" placeholder=\\"\\" type=\\"text\\" unselectable=\\"on\\" value=\\"00:00:00 am\\" class=\\"t-input__inner\\"><span class=\\"t-input__suffix t-input__suffix-icon\\"><svg fill=\\"none\\" viewBox=\\"0 0 16 16\\" width=\\"1em\\" height=\\"1em\\" class=\\"t-icon t-icon-time\\"><path fill=\\"currentColor\\" d=\\"M7.5 4v4.39L10 11l.7-.7-2.2-2.33V4h-1z\\" fill-opacity=\\"0.9\\"></path><path fill=\\"currentColor\\" d=\\"M15 8A7 7 0 111 8a7 7 0 0114 0zm-1 0A6 6 0 102 8a6 6 0 0012 0z\\" fill-opacity=\\"0.9\\"></path></svg></span></div></div></div></div>"`;