From 27e080e8aae6f812829ca4d22c9eebb36618f43b Mon Sep 17 00:00:00 2001 From: inottn Date: Wed, 1 May 2024 10:52:09 +0800 Subject: [PATCH] feat(Calendar): add switch-mode prop (#12836) --- packages/vant/src/calendar/Calendar.tsx | 197 +++++--- packages/vant/src/calendar/CalendarHeader.tsx | 115 ++++- packages/vant/src/calendar/CalendarMonth.tsx | 14 +- packages/vant/src/calendar/README.md | 22 +- packages/vant/src/calendar/README.zh-CN.md | 24 +- .../src/calendar/demo/SwicthModeField.vue | 58 +++ .../vant/src/calendar/demo/TiledDisplay.vue | 6 +- packages/vant/src/calendar/demo/index.vue | 12 +- packages/vant/src/calendar/index.less | 28 ++ .../test/__snapshots__/demo-ssr.spec.ts.snap | 476 ++++++++++++++++++ .../test/__snapshots__/demo.spec.ts.snap | 471 +++++++++++++++++ .../src/calendar/test/switch-mode.spec.ts | 205 ++++++++ packages/vant/src/calendar/types.ts | 5 + packages/vant/src/calendar/utils.ts | 16 + 14 files changed, 1560 insertions(+), 89 deletions(-) create mode 100644 packages/vant/src/calendar/demo/SwicthModeField.vue create mode 100644 packages/vant/src/calendar/test/switch-mode.spec.ts diff --git a/packages/vant/src/calendar/Calendar.tsx b/packages/vant/src/calendar/Calendar.tsx index 26a76e1f5..2da16a6a4 100644 --- a/packages/vant/src/calendar/Calendar.tsx +++ b/packages/vant/src/calendar/Calendar.tsx @@ -31,6 +31,7 @@ import { calcDateNum, compareMonth, getDayByOffset, + getMonthByOffset, } from './utils'; // Composables @@ -48,6 +49,7 @@ import CalendarHeader from './CalendarHeader'; // Types import type { CalendarType, + CalendarSwitchMode, CalendarExpose, CalendarDayItem, CalendarMonthInstance, @@ -56,6 +58,7 @@ import type { export const calendarProps = { show: Boolean, type: makeStringProp('single'), + switchMode: makeStringProp('none'), title: String, color: String, round: truthProp, @@ -84,15 +87,10 @@ export const calendarProps = { minDate: { type: Date, validator: isDate, - default: getToday, }, maxDate: { type: Date, validator: isDate, - default: () => { - const now = getToday(); - return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate()); - }, }, firstDayOfWeek: { type: numericProp, @@ -117,25 +115,44 @@ export default defineComponent({ 'update:show', 'clickSubtitle', 'clickDisabledDate', + 'panelChange', ], setup(props, { emit, slots }) { + const canSwitch = computed(() => props.switchMode !== 'none'); + + const minDate = computed(() => { + if (!props.minDate && !canSwitch.value) { + return getToday(); + } + + return props.minDate; + }); + + const maxDate = computed(() => { + if (!props.maxDate && !canSwitch.value) { + return getMonthByOffset(getToday(), 6); + } + + return props.maxDate; + }); + const limitDateRange = ( date: Date, - minDate = props.minDate, - maxDate = props.maxDate, + min = minDate.value, + max = maxDate.value, ) => { - if (compareDay(date, minDate) === -1) { - return minDate; + if (min && compareDay(date, min) === -1) { + return min; } - if (compareDay(date, maxDate) === 1) { - return maxDate; + if (max && compareDay(date, max) === 1) { + return max; } return date; }; const getInitialDate = (defaultDate = props.defaultDate) => { - const { type, minDate, maxDate, allowSameDay } = props; + const { type, allowSameDay } = props; if (defaultDate === null) { return defaultDate; @@ -147,15 +164,21 @@ export default defineComponent({ if (!Array.isArray(defaultDate)) { defaultDate = []; } + + const min = minDate.value; + const max = maxDate.value; + const start = limitDateRange( defaultDate[0] || now, - minDate, - allowSameDay ? maxDate : getPrevDay(maxDate), + min, + max ? (allowSameDay ? max : getPrevDay(max)) : undefined, ); + const end = limitDateRange( - defaultDate[1] || now, - allowSameDay ? minDate : getNextDay(minDate), + defaultDate[1] || (allowSameDay ? now : getNextDay(now)), + min ? (allowSameDay ? min : getNextDay(min)) : undefined, ); + return [start, end]; } @@ -172,16 +195,24 @@ export default defineComponent({ return limitDateRange(defaultDate); }; + const getInitialPanelDate = () => { + const date = Array.isArray(currentDate.value) + ? currentDate.value[0] + : currentDate.value; + + return date ? date : limitDateRange(getToday()); + }; + let bodyHeight: number; const bodyRef = ref(); - const subtitle = ref<{ textFn: () => string; date?: Date }>({ - textFn: () => '', - date: undefined, - }); const currentDate = ref(getInitialDate()); + const currentPanelDate = ref(getInitialPanelDate()); + + const currentMonthRef = ref(); + const [monthRefs, setMonthRefs] = useRefs(); const dayOffset = computed(() => @@ -190,14 +221,19 @@ export default defineComponent({ const months = computed(() => { const months: Date[] = []; - const cursor = new Date(props.minDate); + + if (!minDate.value || !maxDate.value) { + return months; + } + + const cursor = new Date(minDate.value); cursor.setDate(1); do { months.push(new Date(cursor)); cursor.setMonth(cursor.getMonth() + 1); - } while (compareMonth(cursor, props.maxDate) !== 1); + } while (compareMonth(cursor, maxDate.value) !== 1); return months; }); @@ -271,28 +307,29 @@ export default defineComponent({ /* istanbul ignore else */ if (currentMonth) { - subtitle.value = { - textFn: currentMonth.getTitle, - date: currentMonth.date, - }; + currentMonthRef.value = currentMonth; } }; const scrollToDate = (targetDate: Date) => { - raf(() => { - months.value.some((month, index) => { - if (compareMonth(month, targetDate) === 0) { - if (bodyRef.value) { - monthRefs.value[index].scrollToDate(bodyRef.value, targetDate); + if (canSwitch.value) { + currentPanelDate.value = targetDate; + } else { + raf(() => { + months.value.some((month, index) => { + if (compareMonth(month, targetDate) === 0) { + if (bodyRef.value) { + monthRefs.value[index].scrollToDate(bodyRef.value, targetDate); + } + return true; } - return true; - } - return false; + return false; + }); + + onScroll(); }); - - onScroll(); - }); + } }; const scrollToCurrentDate = () => { @@ -308,7 +345,7 @@ export default defineComponent({ if (isDate(targetDate)) { scrollToDate(targetDate); } - } else { + } else if (!canSwitch.value) { raf(onScroll); } }; @@ -318,11 +355,14 @@ export default defineComponent({ return; } - raf(() => { - // add Math.floor to avoid decimal height issues - // https://github.com/vant-ui/vant/issues/5640 - bodyHeight = Math.floor(useRect(bodyRef).height); - }); + if (!canSwitch.value) { + raf(() => { + // add Math.floor to avoid decimal height issues + // https://github.com/vant-ui/vant/issues/5640 + bodyHeight = Math.floor(useRect(bodyRef).height); + }); + } + scrollToCurrentDate(); }; @@ -345,6 +385,11 @@ export default defineComponent({ return true; }; + const onPanelChange = (date: Date) => { + currentPanelDate.value = date; + emit('panelChange', { date }); + }; + const onConfirm = () => emit('confirm', currentDate.value ?? cloneDates(currentDate.value!)); @@ -469,20 +514,20 @@ export default defineComponent({ return ( ); - const renderCalendar = () => { - const subTitle = subtitle.value.textFn(); - return ( -
- - emit('clickSubtitle', event) - } - /> -
- {months.value.map(renderMonth)} -
- {renderFooter()} + const renderCalendar = () => ( +
+ emit('clickSubtitle', event)} + onPanelChange={onPanelChange} + /> +
+ {canSwitch.value + ? renderMonth(currentPanelDate.value, 0) + : months.value.map(renderMonth)}
- ); - }; + {renderFooter()} +
+ ); watch(() => props.show, init); watch( - () => [props.type, props.minDate, props.maxDate], + () => [props.type, props.minDate, props.maxDate, props.switchMode], () => reset(getInitialDate(currentDate.value)), ); watch( diff --git a/packages/vant/src/calendar/CalendarHeader.tsx b/packages/vant/src/calendar/CalendarHeader.tsx index c7b3f8916..7f5363986 100644 --- a/packages/vant/src/calendar/CalendarHeader.tsx +++ b/packages/vant/src/calendar/CalendarHeader.tsx @@ -1,6 +1,21 @@ -import { defineComponent } from 'vue'; -import { createNamespace } from '../utils'; -import { t, bem } from './utils'; +import { computed, defineComponent } from 'vue'; + +// Utils +import { createNamespace, HAPTICS_FEEDBACK, makeStringProp } from '../utils'; +import { + t, + bem, + getPrevMonth, + getPrevYear, + getNextMonth, + getNextYear, +} from './utils'; + +// Components +import { Icon } from '../icon'; + +// Types +import type { CalendarSwitchMode } from './types'; const [name] = createNamespace('calendar-header'); @@ -9,16 +24,39 @@ export default defineComponent({ props: { date: Date, + minDate: Date, + maxDate: Date, title: String, subtitle: String, showTitle: Boolean, showSubtitle: Boolean, firstDayOfWeek: Number, + switchMode: makeStringProp('none'), }, - emits: ['clickSubtitle'], + emits: ['clickSubtitle', 'panelChange'], setup(props, { slots, emit }) { + const prevMonthDisabled = computed(() => { + const prevMonth = getPrevMonth(props.date!); + return props.minDate && prevMonth < props.minDate; + }); + + const prevYearDisabled = computed(() => { + const prevYear = getPrevYear(props.date!); + return props.minDate && prevYear < props.minDate; + }); + + const nextMonthDisabled = computed(() => { + const nextMonth = getNextMonth(props.date!); + return props.maxDate && nextMonth > props.maxDate; + }); + + const nextYearDisabled = computed(() => { + const nextYear = getNextYear(props.date!); + return props.maxDate && nextYear > props.maxDate; + }); + const renderTitle = () => { if (props.showTitle) { const text = props.title || t('title'); @@ -29,6 +67,60 @@ export default defineComponent({ const onClickSubtitle = (event: MouseEvent) => emit('clickSubtitle', event); + const onPanelChange = (date: Date) => emit('panelChange', date); + + const renderAction = (isNext?: boolean) => { + const showYearAction = props.switchMode === 'year-month'; + const monthSlot = slots[isNext ? 'next-month' : 'prev-month']; + const yearSlot = slots[isNext ? 'next-year' : 'prev-year']; + const monthDisabled = isNext + ? nextMonthDisabled.value + : prevMonthDisabled.value; + const yearDisabled = isNext + ? nextYearDisabled.value + : prevYearDisabled.value; + const monthIconName = isNext ? 'arrow' : 'arrow-left'; + const yearIconName = isNext ? 'arrow-double-right' : 'arrow-double-left'; + + const onMonthChange = () => + onPanelChange((isNext ? getNextMonth : getPrevMonth)(props.date!)); + const onYearChange = () => + onPanelChange((isNext ? getNextYear : getPrevYear)(props.date!)); + + const MonthAction = ( + + {monthSlot ? ( + monthSlot({ disabled: monthDisabled }) + ) : ( + + )} + + ); + const YearAction = showYearAction && ( + + {yearSlot ? ( + yearSlot({ disabled: yearDisabled }) + ) : ( + + )} + + ); + + return isNext ? [MonthAction, YearAction] : [YearAction, MonthAction]; + }; + const renderSubtitle = () => { if (props.showSubtitle) { const title = slots.subtitle @@ -37,9 +129,20 @@ export default defineComponent({ text: props.subtitle, }) : props.subtitle; + const canSwitch = props.switchMode !== 'none'; + return ( -
- {title} +
+ {canSwitch + ? [ + renderAction(), +
{title}
, + renderAction(true), + ] + : title}
); } diff --git a/packages/vant/src/calendar/CalendarMonth.tsx b/packages/vant/src/calendar/CalendarMonth.tsx index 332ec37dc..10e5ec10f 100644 --- a/packages/vant/src/calendar/CalendarMonth.tsx +++ b/packages/vant/src/calendar/CalendarMonth.tsx @@ -42,8 +42,8 @@ const calendarMonthProps = { date: makeRequiredProp(Date), type: String as PropType, color: String, - minDate: makeRequiredProp(Date), - maxDate: makeRequiredProp(Date), + minDate: Date, + maxDate: Date, showMark: Boolean, rowHeight: numericProp, formatter: Function as PropType<(item: CalendarDayItem) => CalendarDayItem>, @@ -73,11 +73,14 @@ export default defineComponent({ const title = computed(() => formatMonthTitle(props.date)); const rowHeight = computed(() => addUnit(props.rowHeight)); const offset = computed(() => { - const realDay = props.date.getDay(); + const date = props.date.getDate(); + const day = props.date.getDay(); + const realDay = (day - (date % 7) + 8) % 7; if (props.firstDayOfWeek) { return (realDay + 7 - props.firstDayOfWeek) % 7; } + return realDay; }); @@ -150,7 +153,10 @@ export default defineComponent({ const getDayType = (day: Date): CalendarDayType => { const { type, minDate, maxDate, currentDate } = props; - if (compareDay(day, minDate) < 0 || compareDay(day, maxDate) > 0) { + if ( + (minDate && compareDay(day, minDate) < 0) || + (maxDate && compareDay(day, maxDate) > 0) + ) { return 'disabled'; } diff --git a/packages/vant/src/calendar/README.md b/packages/vant/src/calendar/README.md index 46cd05182..0509b03b8 100644 --- a/packages/vant/src/calendar/README.md +++ b/packages/vant/src/calendar/README.md @@ -18,6 +18,14 @@ app.use(Calendar); ## Usage +### Select Switch Mode + +By default, all months will be displayed without showing the switch button. When there are too many months, it may affect the page's interactivity performance. You can display the year and month switching buttons by setting the `switch-mode` prop. + +```html + +``` + ### Select Single Date The `confirm` event will be emitted after the date selection is completed. @@ -250,10 +258,11 @@ Set `poppable` to `false`, the calendar will be displayed directly on the page i | Attribute | Description | Type | Default | | --- | --- | --- | --- | | type | Type, can be set to `range` `multiple` | _string_ | `single` | +| switch-mode | Switch mode:
`none` Display all months in a tiled format without switch buttons
`month` Support switching by month, displaying buttons for previous month/next month
`year-month` Support switching by year, as well as by month, displaying buttons for previous year/next year and previous month/next month | _string_ | `none` | | title | Title of calendar | _string_ | `Calendar` | | color | Color for the bottom button and selected date | _string_ | `#1989fa` | -| min-date | Min date | _Date_ | Today | -| max-date | Max date | _Date_ | Six months after the today | +| min-date | Min date | _Date_ | When `switch-mode` is set to `none`, the default value is the today | +| max-date | Max date | _Date_ | When `switch-mode` is set to `none`, the default value is six months after the today | | default-date | Default selected date | _Date \| Date[] \| null_ | Today | | row-height | Row height | _number \| string_ | `64` | | formatter | Day formatter | _(day: Day) => Day_ | - | @@ -329,6 +338,7 @@ Following props are supported when the type is multiple | over-range | Emitted when exceeded max range | - | | click-subtitle | Emitted when clicking the subtitle | _event: MouseEvent_ | | click-disabled-date `v4.7.0` | Emitted when clicking disabled date | _value: Date \| Date[]_ | +| panel-change | Emitted when switching calendar panel | _{ date: Date }_ | ### Slots @@ -341,6 +351,10 @@ Following props are supported when the type is multiple | confirm-text | Custom confirm text | _{ disabled: boolean }_ | | top-info | Custom top info of day | _day: Day_ | | bottom-info | Custom bottom info of day | _day: Day_ | +| prev-month | Custom previous month button | _{ disabled: boolean }_ | +| prev-year | Custom previous year button | _{ disabled: boolean }_ | +| next-month | Custom next month button | _{ disabled: boolean }_ | +| next-year | Custom next year button | _{ disabled: boolean }_ | ### Methods @@ -358,6 +372,7 @@ The component exports the following type definitions: ```ts import type { + CalendarSwitchMode, CalendarType, CalendarProps, CalendarDayItem, @@ -391,6 +406,9 @@ The component provides the following CSS variables, which can be used to customi | --van-calendar-header-title-height | _44px_ | - | | --van-calendar-header-title-font-size | _var(--van-font-size-lg)_ | - | | --van-calendar-header-subtitle-font-size | _var(--van-font-size-md)_ | - | +| --van-calendar-header-action-width | 28px | - | +| --van-calendar-header-action-color | _var(--van-text-color)_ | - | +| --van-calendar-header-action-disabled-color | _var(--van-text-color-3)_ | - | | --van-calendar-weekdays-height | _30px_ | - | | --van-calendar-weekdays-font-size | _var(--van-font-size-sm)_ | - | | --van-calendar-month-title-font-size | _var(--van-font-size-md)_ | - | diff --git a/packages/vant/src/calendar/README.zh-CN.md b/packages/vant/src/calendar/README.zh-CN.md index e2eb81e68..3ecf17fab 100644 --- a/packages/vant/src/calendar/README.zh-CN.md +++ b/packages/vant/src/calendar/README.zh-CN.md @@ -18,6 +18,14 @@ app.use(Calendar); ## 代码演示 +### 选择切换模式 + +默认所有月份将以平铺方式展示，不显示切换按钮，当月份过多时可能会影响页面交互性能。可以通过设置 `switch-mode` 属性，展示年月切换按钮。 + +```html + +``` + ### 选择单个日期 下面演示了结合单元格来使用日历组件的用法，日期选择完成后会触发 `confirm` 事件。 @@ -253,11 +261,12 @@ export default { | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| type | 选择类型:
`single` 表示选择单个日期，
`multiple` 表示选择多个日期，
`range` 表示选择日期区间 | _string_ | `single` | +| type | 选择类型：
`single` 表示选择单个日期，
`multiple` 表示选择多个日期，
`range` 表示选择日期区间 | _string_ | `single` | +| switch-mode | 切换模式：
`none` 平铺展示所有月份，不展示切换按钮，
`month` 支持按月切换，展示上个月/下个月按钮，
`year-month` 支持按年切换，也支持按月切换，展示上一年/下一年，上个月/下个月按钮 | _string_ | `none` | | title | 日历标题 | _string_ | `日期选择` | | color | 主题色，对底部按钮和选中日期生效 | _string_ | `#1989fa` | -| min-date | 可选择的最小日期 | _Date_ | 当前日期 | -| max-date | 可选择的最大日期 | _Date_ | 当前日期的六个月后 | +| min-date | 可选择的最小日期 | _Date_ | `switch-mode` 为 `none` 时为当前日期 | +| max-date | 可选择的最大日期 | _Date_ | `switch-mode` 为 `none` 时为当前日期的六个月后 | | default-date | 默认选中的日期，`type` 为 `multiple` 或 `range` 时为数组，传入 `null` 表示默认不选择 | _Date \| Date[] \| null_ | 今天 | | row-height | 日期行高 | _number \| string_ | `64` | | formatter | 日期格式化函数 | _(day: Day) => Day_ | - | @@ -335,6 +344,7 @@ export default { | over-range | 范围选择超过最多可选天数时触发 | - | | click-subtitle | 点击日历副标题时触发 | _event: MouseEvent_ | | click-disabled-date `v4.7.0` | 点击禁用日期时触发 | _value: Date \| Date[]_ | +| panel-change | 日历面板切换时触发 | _{ date: Date }_ | ### Slots @@ -347,6 +357,10 @@ export default { | confirm-text | 自定义确认按钮的内容 | _{ disabled: boolean }_ | | top-info | 自定义日期上方的提示信息 | _day: Day_ | | bottom-info | 自定义日期下方的提示信息 | _day: Day_ | +| prev-month | 自定义上个月按钮 | _{ disabled: boolean }_ | +| prev-year | 自定义上一年按钮 | _{ disabled: boolean }_ | +| next-month | 自定义下个月按钮 | _{ disabled: boolean }_ | +| next-year | 自定义下一年按钮 | _{ disabled: boolean }_ | ### 方法 @@ -364,6 +378,7 @@ export default { ```ts import type { + CalendarSwitchMode, CalendarType, CalendarProps, CalendarDayItem, @@ -397,6 +412,9 @@ calendarRef.value?.reset(); | --van-calendar-header-title-height | _44px_ | - | | --van-calendar-header-title-font-size | _var(--van-font-size-lg)_ | - | | --van-calendar-header-subtitle-font-size | _var(--van-font-size-md)_ | - | +| --van-calendar-header-action-width | 28px | - | +| --van-calendar-header-action-color | _var(--van-text-color)_ | - | +| --van-calendar-header-action-disabled-color | _var(--van-text-color-3)_ | - | | --van-calendar-weekdays-height | _30px_ | - | | --van-calendar-weekdays-font-size | _var(--van-font-size-sm)_ | - | | --van-calendar-month-title-font-size | _var(--van-font-size-md)_ | - | diff --git a/packages/vant/src/calendar/demo/SwicthModeField.vue b/packages/vant/src/calendar/demo/SwicthModeField.vue new file mode 100644 index 000000000..e8993c0b9 --- /dev/null +++ b/packages/vant/src/calendar/demo/SwicthModeField.vue @@ -0,0 +1,58 @@ + + + diff --git a/packages/vant/src/calendar/demo/TiledDisplay.vue b/packages/vant/src/calendar/demo/TiledDisplay.vue index e1481c88d..edbaa552b 100644 --- a/packages/vant/src/calendar/demo/TiledDisplay.vue +++ b/packages/vant/src/calendar/demo/TiledDisplay.vue @@ -2,8 +2,11 @@ import VanCalendar from '..'; import { useTranslate } from '../../../docs/site'; +const { switchMode } = defineProps({ + switchMode: String, +}); const minDate = new Date(2012, 0, 10); -const maxDate = new Date(2012, 2, 20); +const maxDate = new Date(2013, 2, 20); const t = useTranslate({ 'zh-CN': { @@ -26,6 +29,7 @@ const t = useTranslate({ :min-date="minDate" :max-date="maxDate" :default-date="minDate" + :switch-mode="switchMode" :style="{ height: '500px' }" /> diff --git a/packages/vant/src/calendar/demo/index.vue b/packages/vant/src/calendar/demo/index.vue index 3fc46540f..9b6d139ad 100644 --- a/packages/vant/src/calendar/demo/index.vue +++ b/packages/vant/src/calendar/demo/index.vue @@ -1,10 +1,11 @@