Skip to content

Commit

Permalink
fix(time-picker): duplicate calls update
Browse files Browse the repository at this point in the history
  • Loading branch information
BeADre committed Mar 30, 2021
1 parent f1efd66 commit 2605384
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 33 deletions.
37 changes: 32 additions & 5 deletions packages/varlet-ui/src/time-picker/TimePicker.vue
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,12 @@
:format="format"
:rad="getRad"
:time="time"
:prevent-next-update="isPreventNextUpdate"
:use-seconds="useSeconds"
:max="max"
:min="min"
@update="update"
@change-prevent-update="changePreventUpdate"
/>
</transition>
</div>
Expand All @@ -91,19 +93,19 @@ import dayjs from 'dayjs'
import Clock from './clock.vue'
import { props, Time, AmPm, hoursAmpm, hours24 } from './props'
import { toNumber } from '../utils/shared'
import { nextTickFrame } from '../utils/elements'
import { getNumberTime, getIsDisableMinute, getIsDisableSecond } from './utils'
export default defineComponent({
name: 'VarTimePicker',
components: {
[Clock.name]: Clock,
Clock,
},
props,
setup(props) {
const container: Ref<HTMLDivElement | null> = ref(null)
const inner: Ref<DefineComponent | null> = ref(null)
const isInner: Ref<boolean> = ref(false)
const isPreventNextUpdate: Ref<boolean> = ref(false)
const isActualInner: Ref<boolean> = ref(false)
const isChosenUsableHour: Ref<boolean> = ref(false)
const isChosenUsableMinute: Ref<boolean> = ref(false)
Expand Down Expand Up @@ -150,8 +152,30 @@ export default defineComponent({
isDisableMinute.value = false
type.value = panelType
}
const findAvailableHour = (ampm: string): string | undefined => {
const { disableHour } = inner.value as DefineComponent
const index = hoursAmpm.findIndex((hour) => toNumber(hour) === toNumber(time.value.hour))
const hours = ampm === 'am' ? hoursAmpm : hours24
const realignmentHours = [...hours.slice(index), ...hours.slice(0, index)]
return realignmentHours.find((hour, index) => {
isPreventNextUpdate.value = index !== 0
return !disableHour.includes(hour)
})
}
const checkAmpm = (ampmType: AmPm) => {
ampm.value = ampmType
const newHour = findAvailableHour(ampmType)
if (!newHour) return
const second = props.useSeconds ? `:${time.value.second}` : ''
const newTime = `${newHour.padStart(2, '0')}:${time.value.minute}${second}`
update(newTime)
}
const getInner = (clientX: number, clientY: number): boolean => {
Expand Down Expand Up @@ -294,6 +318,10 @@ export default defineComponent({
}
})
const changePreventUpdate = () => {
isPreventNextUpdate.value = false
}
watch(
() => props.modelValue,
(value) => {
Expand All @@ -309,10 +337,7 @@ export default defineComponent({
minuteRad.value = toNumber(formatMinute) * 6
secondRad.value = toNumber(formatSecond) * 6
// nextTickFrame(() => {
time.value = getTime(value)
// console.log(time.value)
// })
if (props.format !== '24hr') {
ampm.value = `${hour}`.padStart(2, '0') === formatHour24 && hours24.includes(formatHour24) ? 'pm' : 'am'
Expand All @@ -332,11 +357,13 @@ export default defineComponent({
isInner,
type,
ampm,
isPreventNextUpdate,
moveHand,
checkPanel,
checkAmpm,
end,
update,
changePreventUpdate,
}
},
})
Expand Down
33 changes: 6 additions & 27 deletions packages/varlet-ui/src/time-picker/clock.vue
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
preventNextUpdate: {
type: Boolean,
default: false,
},
type: {
type: String as PropType<keyof Time>,
default: 'hour',
Expand All @@ -79,7 +83,6 @@ export default defineComponent({
},
setup(props, { emit }) {
const inner: Ref<HTMLDivElement | null> = ref(null)
const isPreventNextUpdate: Ref<boolean> = ref(false)
const disableHour: Ref<Array<string>> = ref([])
const disable24HourIndex: Ref<Array<number>> = ref([])
Expand Down Expand Up @@ -203,30 +206,6 @@ export default defineComponent({
return hours[activeItemIndex.value].padStart(2, '0')
}
const findAvailableHour = (ampm: string): string | undefined => {
const index = hoursAmpm.findIndex((hour) => toNumber(hour) === toNumber(props.time.hour))
const hours = ampm === 'am' ? hoursAmpm : hours24
const realignmentHours = [...hours.slice(index), ...hours.slice(0, index)]
return realignmentHours.find((hour, index) => {
isPreventNextUpdate.value = index !== 0
return !disableHour.value.includes(hour)
})
}
watch(
() => props.ampm,
(ampm) => {
const newHour = findAvailableHour(ampm)
if (!newHour) return
const second = props.useSeconds ? `:${props.time.second}` : ''
const newTime = `${newHour.padStart(2, '0')}:${props.time.minute}${second}`
emit('update', newTime)
}
)
watch([activeItemIndex, () => props.isInner], ([index, inner], [oldIndex, oldInner]) => {
const isSame = index === oldIndex && inner === oldInner
if (isSame || props.type !== 'hour' || activeItemIndex.value === undefined) return
Expand All @@ -235,9 +214,9 @@ export default defineComponent({
const second = props.useSeconds ? `:${props.time.second}` : ''
const newTime = `${newHour}:${props.time.minute}${second}`
if (!isPreventNextUpdate.value) emit('update', newTime)
if (!props.preventNextUpdate) emit('update', newTime)
isPreventNextUpdate.value = false
emit('change-prevent-update')
})
watch(
Expand Down
2 changes: 1 addition & 1 deletion packages/varlet-ui/src/time-picker/example/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default defineComponent({
[TimePicker.name]: TimePicker,
},
setup() {
const date = ref('')
const date = ref('23:46:25')
const change = (time) => {
console.log(time)
}
Expand Down

0 comments on commit 2605384

Please sign in to comment.