From 43b78002d378c1f13e66b974e7753620d9751337 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 31 Aug 2021 11:18:24 +0800 Subject: [PATCH] types(Calendar): improve default-date typing (#9358) --- src/calendar/Calendar.tsx | 80 +++++++++++++++------------------- src/calendar/CalendarMonth.tsx | 2 +- src/calendar/demo/index.vue | 4 +- 3 files changed, 38 insertions(+), 48 deletions(-) diff --git a/src/calendar/Calendar.tsx b/src/calendar/Calendar.tsx index 591742241..8c1ff7c61 100644 --- a/src/calendar/Calendar.tsx +++ b/src/calendar/Calendar.tsx @@ -1,7 +1,6 @@ import { ref, watch, - reactive, computed, PropType, TeleportProps, @@ -62,9 +61,7 @@ const props = { rangePrompt: String, lazyRender: truthProp, showConfirm: truthProp, - // TODO: remove any - // see: https://github.com/vuejs/vue-next/issues/2668 - defaultDate: [Date, Array] as any, + defaultDate: [Date, Array] as PropType, allowSameDay: Boolean, showSubtitle: truthProp, closeOnPopstate: truthProp, @@ -178,10 +175,8 @@ export default defineComponent({ const bodyRef = ref(); - const state = reactive({ - subtitle: '', - currentDate: getInitialDate(), - }); + const subtitle = ref(''); + const currentDate = ref(getInitialDate()); const [monthRefs, setMonthRefs] = useRefs(); @@ -204,18 +199,18 @@ export default defineComponent({ }); const buttonDisabled = computed(() => { - const { currentDate } = state; - - if (currentDate) { + if (currentDate.value) { if (props.type === 'range') { - return !(currentDate as Date[])[0] || !(currentDate as Date[])[1]; + return ( + !(currentDate.value as Date[])[0] || + !(currentDate.value as Date[])[1] + ); } if (props.type === 'multiple') { - return !(currentDate as Date[]).length; + return !(currentDate.value as Date[]).length; } } - - return !currentDate; + return !currentDate.value; }); // calculate the position of the elements @@ -270,7 +265,7 @@ export default defineComponent({ /* istanbul ignore else */ if (currentMonth) { - state.subtitle = currentMonth.getTitle(); + subtitle.value = currentMonth.getTitle(); } }; @@ -297,10 +292,11 @@ export default defineComponent({ return; } - const { currentDate } = state; - if (currentDate) { + if (currentDate.value) { const targetDate = - props.type === 'single' ? currentDate : (currentDate as Date[])[0]; + props.type === 'single' + ? (currentDate.value as Date) + : (currentDate.value as Date[])[0]; scrollToDate(targetDate); } else { raf(onScroll); @@ -321,7 +317,7 @@ export default defineComponent({ }; const reset = (date = getInitialDate()) => { - state.currentDate = date; + currentDate.value = date; scrollIntoView(); }; @@ -339,12 +335,13 @@ export default defineComponent({ return true; }; - const onConfirm = () => emit('confirm', cloneDates(state.currentDate)); + const onConfirm = () => + emit('confirm', currentDate.value ?? cloneDates(currentDate.value!)); const select = (date: Date | Date[], complete?: boolean) => { const setCurrentDate = (date: Date | Date[]) => { - state.currentDate = date; - emit('select', cloneDates(state.currentDate)); + currentDate.value = date; + emit('select', cloneDates(date)); }; if (complete && props.type === 'range') { @@ -378,15 +375,14 @@ export default defineComponent({ const { date } = item; const { type } = props; - const { currentDate } = state; if (type === 'range') { - if (!currentDate) { + if (!currentDate.value) { select([date]); return; } - const [startDay, endDay] = currentDate; + const [startDay, endDay] = currentDate.value as [Date, Date]; if (startDay && !endDay) { const compareToStart = compareDay(date, startDay); @@ -402,29 +398,23 @@ export default defineComponent({ select([date]); } } else if (type === 'multiple') { - if (!currentDate) { + if (!currentDate.value) { select([date]); return; } + const dates = currentDate.value as Date[]; - let selectedIndex; - const selected = state.currentDate.some( - (dateItem: Date, index: number) => { - const equal = compareDay(dateItem, date) === 0; - if (equal) { - selectedIndex = index; - } - return equal; - } + const selectedIndex = dates.findIndex( + (dateItem: Date) => compareDay(dateItem, date) === 0 ); - if (selected) { - const [unselectedDate] = currentDate.splice(selectedIndex, 1); + if (selectedIndex !== -1) { + const [unselectedDate] = dates.splice(selectedIndex, 1); emit('unselect', cloneDate(unselectedDate)); - } else if (props.maxRange && currentDate.length >= props.maxRange) { + } else if (props.maxRange && dates.length >= props.maxRange) { Toast(props.rangePrompt || t('rangePrompt', props.maxRange)); } else { - select([...currentDate, date]); + select([...dates, date]); } } else { select(date, true); @@ -440,7 +430,7 @@ export default defineComponent({ v-slots={pick(slots, ['top-info', 'bottom-info'])} ref={setMonthRefs(index)} date={date} - currentDate={state.currentDate} + currentDate={currentDate.value} showMonthTitle={showMonthTitle} firstDayOfWeek={dayOffset.value} {...pick(props, [ @@ -503,7 +493,7 @@ export default defineComponent({ [props.type, props.minDate, props.maxDate], () => { - reset(getInitialDate(state.currentDate)); + reset(getInitialDate(currentDate.value)); } ); watch( () => props.defaultDate, - (value) => { - state.currentDate = value; + (value = null) => { + currentDate.value = value; scrollIntoView(); } ); diff --git a/src/calendar/CalendarMonth.tsx b/src/calendar/CalendarMonth.tsx index 7ed078a5e..be7b3b7fb 100644 --- a/src/calendar/CalendarMonth.tsx +++ b/src/calendar/CalendarMonth.tsx @@ -38,7 +38,7 @@ const props = { rowHeight: [Number, String], formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>, lazyRender: Boolean, - currentDate: [Date, Array] as PropType, + currentDate: [Date, Array] as PropType, allowSameDay: Boolean, showSubtitle: Boolean, showMonthTitle: Boolean, diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue index 053dd4779..cf5316c69 100644 --- a/src/calendar/demo/index.vue +++ b/src/calendar/demo/index.vue @@ -162,13 +162,13 @@ const show = (type: string, id: string) => { const formatDate = (date: Date) => { if (date) { - return `${state.date.getMonth() + 1}/${state.date.getDate()}`; + return `${date.getMonth() + 1}/${date.getDate()}`; } }; const formatFullDate = (date: Date) => { if (date) { - return `${state.date.getFullYear()}/${formatDate(date)}`; + return `${date.getFullYear()}/${formatDate(date)}`; } };