feat(time-picker): add allowedTime

varletjs · Aug 13, 2021 · b86bd84 · b86bd84
1 parent b103fde
commit b86bd84
Show file tree

Hide file tree

Showing 9 changed files with 180 additions and 33 deletions.
diff --git a/packages/varlet-ui/src/time-picker/TimePicker.vue b/packages/varlet-ui/src/time-picker/TimePicker.vue
@@ -61,6 +61,7 @@
             :color="color"
             :is-inner="isInner"
             :format="format"
+            :allowed-time="allowedTime"
             :rad="getRad"
             :time="time"
             :prevent-next-update="isPreventNextUpdate"
@@ -244,6 +245,7 @@ export default defineComponent({
         max: props.max,
         min: props.min,
         disableHour,
+        allowedTime: props.allowedTime,
       }
       isDisableMinute.value = getIsDisableMinute(values)
 
@@ -266,6 +268,7 @@ export default defineComponent({
         max: props.max,
         min: props.min,
         disableHour,
+        allowedTime: props.allowedTime,
       }
 
       if (!getIsDisableSecond(values)) secondRad.value = rad

diff --git a/packages/varlet-ui/src/time-picker/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/time-picker/__tests__/__snapshots__/index.spec.js.snap
@@ -260,38 +260,37 @@ exports[`test timePicker example 1`] = `
     <div class=\\"var-time-picker-title\\">
       <div class=\\"var-time-picker-title__time\\">
         <div class=\\"var-time-picker-title__btn var-time-picker-title__btn--active\\">07</div><span>:</span>
-        <div class=\\"var-time-picker-title__btn\\">10</div>
-        <!--v-if-->
-        <!--v-if-->
+        <div class=\\"var-time-picker-title__btn\\">10</div><span>:</span>
+        <div class=\\"var-time-picker-title__btn\\">12</div>
       </div>
       <!--v-if-->
     </div>
     <div class=\\"var-time-picker-body\\">
       <div class=\\"var-time-picker-clock__container\\">
         <transition-stub>
           <div class=\\"var-time-picker-clock\\">
-            <div class=\\"var-time-picker-clock__hand\\" style=\\"transform: rotate(210deg); height: calc(50% - 4px);\\"></div>
+            <div class=\\"var-time-picker-clock__hand\\" style=\\"transform: rotate(210deg); height: calc(50% - 4px); background-color: rgb(189, 189, 189); border-color: #bdbdbd;\\"></div>
             <div class=\\"var-time-picker-clock__item\\" style=\\"left: 50%; top: 0%;\\">12</div>
             <div class=\\"var-time-picker-clock__item var-time-picker-clock__item--disable\\" style=\\"left: 75%; top: 6.698729810778064%;\\">1</div>
             <div class=\\"var-time-picker-clock__item\\" style=\\"left: 93.30127018922192%; top: 25%;\\">2</div>
-            <div class=\\"var-time-picker-clock__item\\" style=\\"left: 100%; top: 50%;\\">3</div>
+            <div class=\\"var-time-picker-clock__item var-time-picker-clock__item--disable\\" style=\\"left: 100%; top: 50%;\\">3</div>
             <div class=\\"var-time-picker-clock__item\\" style=\\"left: 93.30127018922194%; top: 74.99999999999999%;\\">4</div>
-            <div class=\\"var-time-picker-clock__item\\" style=\\"left: 75.00000000000003%; top: 93.30127018922192%;\\">5</div>
+            <div class=\\"var-time-picker-clock__item var-time-picker-clock__item--disable\\" style=\\"left: 75.00000000000003%; top: 93.30127018922192%;\\">5</div>
             <div class=\\"var-time-picker-clock__item\\" style=\\"left: 50%; top: 100%;\\">6</div>
-            <div class=\\"var-time-picker-clock__item var-time-picker-clock__item--active\\" style=\\"left: 25.00000000000001%; top: 93.30127018922194%;\\">7</div>
+            <div class=\\"var-time-picker-clock__item var-time-picker-clock__item--active var-time-picker-clock__item--disable\\" style=\\"left: 25.00000000000001%; top: 93.30127018922194%; background-color: rgb(189, 189, 189); color: rgb(255, 255, 255);\\">7</div>
             <div class=\\"var-time-picker-clock__item\\" style=\\"left: 6.698729810778076%; top: 75.00000000000003%;\\">8</div>
-            <div class=\\"var-time-picker-clock__item\\" style=\\"left: 0%; top: 50.000000000000014%;\\">9</div>
+            <div class=\\"var-time-picker-clock__item var-time-picker-clock__item--disable\\" style=\\"left: 0%; top: 50.000000000000014%;\\">9</div>
             <div class=\\"var-time-picker-clock__item\\" style=\\"left: 6.6987298107780475%; top: 25.000000000000032%;\\">10</div>
-            <div class=\\"var-time-picker-clock__item\\" style=\\"left: 24.99999999999998%; top: 6.698729810778076%;\\">11</div>
+            <div class=\\"var-time-picker-clock__item var-time-picker-clock__item--disable\\" style=\\"left: 24.99999999999998%; top: 6.698729810778076%;\\">11</div>
             <div class=\\"var-time-picker-clock__inner\\">
               <div class=\\"var-time-picker-clock__item var-time-picker-clock__item--disable\\" style=\\"left: 50%; top: 0%;\\">00</div>
-              <div class=\\"var-time-picker-clock__item\\" style=\\"left: 75%; top: 6.698729810778064%;\\">13</div>
+              <div class=\\"var-time-picker-clock__item var-time-picker-clock__item--disable\\" style=\\"left: 75%; top: 6.698729810778064%;\\">13</div>
               <div class=\\"var-time-picker-clock__item\\" style=\\"left: 93.30127018922192%; top: 25%;\\">14</div>
-              <div class=\\"var-time-picker-clock__item\\" style=\\"left: 100%; top: 50%;\\">15</div>
+              <div class=\\"var-time-picker-clock__item var-time-picker-clock__item--disable\\" style=\\"left: 100%; top: 50%;\\">15</div>
               <div class=\\"var-time-picker-clock__item\\" style=\\"left: 93.30127018922194%; top: 74.99999999999999%;\\">16</div>
-              <div class=\\"var-time-picker-clock__item\\" style=\\"left: 75.00000000000003%; top: 93.30127018922192%;\\">17</div>
+              <div class=\\"var-time-picker-clock__item var-time-picker-clock__item--disable\\" style=\\"left: 75.00000000000003%; top: 93.30127018922192%;\\">17</div>
               <div class=\\"var-time-picker-clock__item\\" style=\\"left: 50%; top: 100%;\\">18</div>
-              <div class=\\"var-time-picker-clock__item\\" style=\\"left: 25.00000000000001%; top: 93.30127018922194%;\\">19</div>
+              <div class=\\"var-time-picker-clock__item var-time-picker-clock__item--disable\\" style=\\"left: 25.00000000000001%; top: 93.30127018922194%;\\">19</div>
               <div class=\\"var-time-picker-clock__item var-time-picker-clock__item--disable\\" style=\\"left: 6.698729810778076%; top: 75.00000000000003%;\\">20</div>
               <div class=\\"var-time-picker-clock__item var-time-picker-clock__item--disable\\" style=\\"left: 0%; top: 50.000000000000014%;\\">21</div>
               <div class=\\"var-time-picker-clock__item var-time-picker-clock__item--disable\\" style=\\"left: 6.6987298107780475%; top: 25.000000000000032%;\\">22</div>

diff --git a/packages/varlet-ui/src/time-picker/clock.vue b/packages/varlet-ui/src/time-picker/clock.vue
@@ -37,7 +37,7 @@ import { hoursAmpm, hours24, minSec } from './props'
 import { notConvert, convertHour, getIsDisableMinute, getIsDisableSecond, getNumberTime } from './utils'
 import { toNumber } from '../utils/shared'
 import type { ComputedRef, Ref, PropType } from 'vue'
-import type { Time, AmPm, Format } from './props'
+import type { Time, AmPm, Format, AllowedTime } from './props'
 
 export default defineComponent({
   name: 'Clock',
@@ -53,6 +53,9 @@ export default defineComponent({
       type: String as PropType<Format>,
       default: 'ampm',
     },
+    allowedTime: {
+      type: Object as PropType<AllowedTime>,
+    },
     time: {
       type: Object as PropType<Time>,
       required: true,
@@ -125,6 +128,7 @@ export default defineComponent({
           hour: props.time.hour,
           max: props.max,
           min: props.min,
+          allowedTime: props.allowedTime,
           disableHour: disableHour.value,
         }
 
@@ -156,6 +160,7 @@ export default defineComponent({
           hour: props.time.hour,
           max: props.max,
           min: props.min,
+          allowedTime: props.allowedTime,
           disableHour: disableHour.value,
         }
 
@@ -171,6 +176,7 @@ export default defineComponent({
           minute: toNumber(props.time.minute),
           max: props.max,
           min: props.min,
+          allowedTime: props.allowedTime,
           disableHour: disableHour.value,
         }
 
@@ -274,8 +280,8 @@ export default defineComponent({
     )
 
     watch(
-      [() => props.max, () => props.min],
-      ([max, min]) => {
+      [() => props.max, () => props.min, () => props.allowedTime],
+      ([max, min, allowedTime]) => {
         disableHour.value = []
         if (max && !min) {
           const { hour: maxHour } = getNumberTime(max)
@@ -302,6 +308,14 @@ export default defineComponent({
           disableHour.value = [...disableAmpmHours, ...disable24Hours]
         }
 
+        if (allowedTime?.hours) {
+          const { hours } = allowedTime
+
+          const disableAmpmHours = hoursAmpm.filter((hour) => !hours(toNumber(hour)))
+          const disable24Hours = hours24.filter((hour) => !hours(toNumber(hour)))
+          disableHour.value = [...new Set([...disableHour.value, ...disableAmpmHours, ...disable24Hours])]
+        }
+
         disable24HourIndex.value = disableHour.value
           .map((hour) => hours24.findIndex((hour24) => hour === hour24))
           .filter((hour) => hour >= 0)

diff --git a/packages/varlet-ui/src/time-picker/docs/en-US.md b/packages/varlet-ui/src/time-picker/docs/en-US.md
@@ -54,12 +54,45 @@ use `use-seconds` prop to show seconds
 ```
 
 ### Time Limit
-
-Use `min` and `max` prop to allow the maximum and minimum time.
+Use `min`, `max` and `allowed-time` prop to allow the maximum and minimum time.
 
 ```html
-<var-time-picker v-model="date" format="24hr" min="2:28:38" max="19:40:22" />
+<var-time-picker
+  v-model="date"
+  format="24hr"
+  use-seconds
+  min="2:28:38"
+  max="19:40:22"
+  :allowed-time="allowedTime"
+/>
+```
+```javascript
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const date = ref('07:10:12')
+
+    const allowedTime = {
+      hours(hour) {
+        return hour % 2 === 0
+      },
+      minutes(minute) {
+        return minute % 15 !== 0
+      },
+      seconds(second) {
+        return second % 2 !== 0
+      },
+    }
+
+    return {
+      date,
+      allowedTime
+    }
+  }
+}
 ```
+
 ### Custom
 
 ```html
@@ -105,9 +138,18 @@ export default {
 | `shadow` | Whether to add a shadow | _boolean_ | `false` |
 | `min` | Minimum allowed time (ISO 8601 format) | _string_ | `-` |
 | `max` | Maximum allowed time (ISO 8601 format) | _string_ | `-` |
+| `allowed-time` | Restricts which time can be selected | _AllowedTime_ | `-` |
 | `readonly` | Readonly | _boolean_ | `false` |
 | `use-seconds` | Whether to display seconds | _boolean_ | `false` |
 
+### TimePicker AllowedTime
+
+| prop | Description | Type | Default |
+| ----- | -------------- | -------- | ---------- |
+| `hours` | Limit the optional `hour` | _Function: hour => boolean_ | `-` |
+| `minutes` | Limit the optional `minute` | _Function: minute => boolean_ | `-` |
+| `seconds` | Limit the optional `second` | _Function: second => boolean_ | `-` |
+
 ### Events
 
 | Event | Description | arguments |

diff --git a/packages/varlet-ui/src/time-picker/docs/zh-CN.md b/packages/varlet-ui/src/time-picker/docs/zh-CN.md
@@ -56,11 +56,45 @@ export default {
 
 ### 时间限制
 
-通过 `min` 和 `max` 属性来控制可选择的时间范围。
+通过 `min`、`max` 和 `allowed-time` 属性来控制可选择的时间范围。
 
 ```html
-<var-time-picker v-model="date" format="24hr" min="2:28:38" max="19:40:22" />
+<var-time-picker
+  v-model="date"
+  format="24hr"
+  use-seconds
+  min="2:28:38"
+  max="19:40:22"
+  :allowed-time="allowedTime"
+/>
 ```
+```javascript
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const date = ref('07:10:12')
+
+    const allowedTime = {
+      hours(hour) {
+        return hour % 2 === 0
+      },
+      minutes(minute) {
+        return minute % 15 !== 0
+      },
+      seconds(second) {
+        return second % 2 !== 0
+      },
+    }
+
+    return {
+      date,
+      allowedTime
+    }
+  }
+}
+```
+
 ### 自定义
 
 ```html
@@ -106,9 +140,18 @@ export default {
 | `shadow` | 是否添加阴影 | _boolean_ | `false` |
 | `min` | 允许的最小时间（ISO 8601格式） | _string_ | `-` |
 | `max` | 允许的最大时间（ISO 8601格式） | _string_ | `-` |
+| `allowed-time` | 限制可以选择的时间 | _AllowedTime_ | `-` |
 | `readonly` | 是否只读 | _boolean_ | `false` |
 | `use-seconds` | 是否显示秒 | _boolean_ | `false` |
 
+### TimePicker AllowedTime
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ----- | -------------- | -------- | ---------- |
+| `hours` | 限制可选的 `hour` | _Function: hour => boolean_ | `-` |
+| `minutes` | 限制可选的 `minute` | _Function: minute => boolean_ | `-` |
+| `seconds` | 限制可选的 `second` | _Function: second => boolean_ | `-` |
+
 ### 事件
 
 | 事件名 | 说明 | 回调参数 |

diff --git a/packages/varlet-ui/src/time-picker/example/index.vue b/packages/varlet-ui/src/time-picker/example/index.vue
@@ -17,7 +17,14 @@
   </div>
   <div>
     <app-type>{{ pack.timeLimit }}</app-type>
-    <var-time-picker v-model="date3" format="24hr" min="2:28:38" max="19:40:22" />
+    <var-time-picker
+      v-model="date3"
+      format="24hr"
+      use-seconds
+      min="2:28:38"
+      max="19:40:22"
+      :allowed-time="allowedTime"
+    />
   </div>
   <div style="padding-bottom: 20px">
     <app-type>{{ pack.custom }}</app-type>
@@ -51,11 +58,23 @@ export default {
       date: '11:20',
       date1: '15:10',
       date2: '07:10',
-      date3: '07:10',
+      date3: '07:10:12',
       date4: '05:10',
       date5: '17:36:22',
     })
 
+    const allowedTime = {
+      hours(hour) {
+        return hour % 2 === 0
+      },
+      minutes(minute) {
+        return minute % 15 !== 0
+      },
+      seconds(second) {
+        return second % 2 !== 0
+      },
+    }
+
     const change = (time) => {
       console.log(time)
     }
@@ -66,6 +85,7 @@ export default {
       ...toRefs(dates),
       change,
       pack,
+      allowedTime,
     }
   },
 }

diff --git a/packages/varlet-ui/src/time-picker/props.ts b/packages/varlet-ui/src/time-picker/props.ts
@@ -8,6 +8,12 @@ export type Time = {
   second?: string
 }
 
+export type AllowedTime = {
+  hours?: (hour: number) => boolean
+  minutes?: (minute: number) => boolean
+  seconds?: (second: number) => boolean
+}
+
 export const hoursAmpm = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
 export const hours24 = ['00', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
 export const minSec = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55']
@@ -35,6 +41,9 @@ export const props = {
     default: 'ampm',
     validator: formatValidator,
   },
+  allowedTime: {
+    type: Object as PropType<AllowedTime>,
+  },
   min: {
     type: String,
   },