From b86bd8420591a0bcffcae7442f5b9b7ab2546613 Mon Sep 17 00:00:00 2001 From: BeADre Date: Fri, 13 Aug 2021 20:44:27 +0800 Subject: [PATCH] feat(time-picker): add allowedTime --- .../varlet-ui/src/time-picker/TimePicker.vue | 3 ++ .../__snapshots__/index.spec.js.snap | 25 +++++----- packages/varlet-ui/src/time-picker/clock.vue | 20 ++++++-- .../varlet-ui/src/time-picker/docs/en-US.md | 48 +++++++++++++++++-- .../varlet-ui/src/time-picker/docs/zh-CN.md | 47 +++++++++++++++++- .../src/time-picker/example/index.vue | 24 +++++++++- packages/varlet-ui/src/time-picker/props.ts | 9 ++++ packages/varlet-ui/src/time-picker/utils.ts | 30 ++++++++---- packages/varlet-ui/types/timePicker.d.ts | 7 +++ 9 files changed, 180 insertions(+), 33 deletions(-) diff --git a/packages/varlet-ui/src/time-picker/TimePicker.vue b/packages/varlet-ui/src/time-picker/TimePicker.vue index 8cca668ad5f..66797d5e97d 100644 --- 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 index 167d8efd440..cefb5c459c9 100644 --- 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,9 +260,8 @@ exports[`test timePicker example 1`] = `
07
: -
10
- - +
10
: +
12
@@ -270,28 +269,28 @@ exports[`test timePicker example 1`] = `
-
+
12
1
2
-
3
+
3
4
-
5
+
5
6
-
7
+
7
8
-
9
+
9
10
-
11
+
11
00
-
13
+
13
14
-
15
+
15
16
-
17
+
17
18
-
19
+
19
20
21
22
diff --git a/packages/varlet-ui/src/time-picker/clock.vue b/packages/varlet-ui/src/time-picker/clock.vue index a937cd2c6df..c3acb5e067d 100644 --- 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, default: 'ampm', }, + allowedTime: { + type: Object as PropType, + }, time: { type: Object as PropType
{{ pack.timeLimit }} - +
{{ pack.custom }} @@ -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 index 87ce63e22d6..b08cf020a4b 100644 --- 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, + }, min: { type: String, }, diff --git a/packages/varlet-ui/src/time-picker/utils.ts b/packages/varlet-ui/src/time-picker/utils.ts index dcaa2cb47b8..29ee8cad270 100644 --- a/packages/varlet-ui/src/time-picker/utils.ts +++ b/packages/varlet-ui/src/time-picker/utils.ts @@ -1,5 +1,5 @@ import { hours24, hoursAmpm } from './props' -import type { AmPm } from './props' +import type { AmPm, AllowedTime } from './props' import { toNumber } from '../utils/shared' type DisableProps = { @@ -11,6 +11,7 @@ type DisableProps = { max: string | undefined min: string | undefined disableHour: Array + allowedTime: AllowedTime | undefined } export const notConvert = (format: string, ampm: AmPm | undefined): boolean => format === '24hr' || ampm === 'am' @@ -38,57 +39,66 @@ export const getNumberTime = (time: string) => { export const getIsDisableMinute = (values: Omit): boolean => { const { time, format, ampm, hour, max, min, disableHour } = values const { hourStr, hourNum } = convertHour(format, ampm, hour) + let isBetweenMinMax = false + let isAllow = false if (disableHour.includes(hourStr)) return true if (max && !min) { const { hour: maxHour, minute: maxMinute } = getNumberTime(max) - return maxHour === hourNum && time > maxMinute + isBetweenMinMax = maxHour === hourNum && time > maxMinute } if (!max && min) { const { hour: minHour, minute: minMinute } = getNumberTime(min) - return minHour === hourNum && time < minMinute + isBetweenMinMax = minHour === hourNum && time < minMinute } if (max && min) { const { hour: maxHour, minute: maxMinute } = getNumberTime(max) const { hour: minHour, minute: minMinute } = getNumberTime(min) - return (minHour === hourNum && time < minMinute) || (maxHour === hourNum && time > maxMinute) + isBetweenMinMax = (minHour === hourNum && time < minMinute) || (maxHour === hourNum && time > maxMinute) } - return false + + if (values.allowedTime?.minutes) isAllow = values.allowedTime?.minutes(time) + + return isBetweenMinMax || isAllow } export const getIsDisableSecond = (values: DisableProps): boolean => { const { time, format, ampm, hour, minute, max, min, disableHour } = values const { hourStr, hourNum } = convertHour(format, ampm, hour) + let isBetweenMinMax = false + let isAllow = false if (disableHour.includes(hourStr)) return true if (max && !min) { const { hour: maxHour, minute: maxMinute, second: maxSecond } = getNumberTime(max) - return (maxHour === hourNum && maxMinute < minute) || (maxMinute === minute && time > maxSecond) + isBetweenMinMax = (maxHour === hourNum && maxMinute < minute) || (maxMinute === minute && time > maxSecond) } if (!max && min) { const { hour: minHour, minute: minMinute, second: minSecond } = getNumberTime(min) - return (minHour === hourNum && minMinute > minute) || (minMinute === minute && time > minSecond) + isBetweenMinMax = (minHour === hourNum && minMinute > minute) || (minMinute === minute && time > minSecond) } if (max && min) { const { hour: maxHour, minute: maxMinute, second: maxSecond } = getNumberTime(max) const { hour: minHour, minute: minMinute, second: minSecond } = getNumberTime(min) - return ( + isBetweenMinMax = (maxHour === hourNum && maxMinute < minute) || (minHour === hourNum && minMinute > minute) || (maxHour === hourNum && maxMinute === minute && time > maxSecond) || (minHour === hourNum && minMinute === minute && time < minSecond) - ) } - return false + + if (values.allowedTime?.seconds) isAllow = values.allowedTime?.seconds(time) + + return isBetweenMinMax || isAllow } diff --git a/packages/varlet-ui/types/timePicker.d.ts b/packages/varlet-ui/types/timePicker.d.ts index 4bc95f3c808..64f46beb46a 100644 --- a/packages/varlet-ui/types/timePicker.d.ts +++ b/packages/varlet-ui/types/timePicker.d.ts @@ -1,10 +1,17 @@ import { VarComponent } from './varComponent' +export type AllowedTime = { + hours?: (hour: number) => boolean + minutes?: (minute: number) => boolean + seconds?: (second: number) => boolean +} + export interface TimePickerProps { modelValue?: string shadow?: boolean color?: string headerColor?: string + allowedTime?: AllowedTime format?: 'ampm' | '24hr' min?: string max?: string