fix(useCalendar): grid update condition in watcher (#827)

* fix(useCalendar): grid update condition in watcher * fix(useCalendar): make all props reactive * fix: revert story
radix-vue · Apr 7, 2024 · fc0f503 · fc0f503
1 parent b5113c3
commit fc0f503
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 43 deletions.
diff --git a/packages/radix-vue/src/Calendar/CalendarRoot.vue b/packages/radix-vue/src/Calendar/CalendarRoot.vue
@@ -204,17 +204,17 @@ const {
 } = useCalendar({
   locale,
   placeholder,
-  weekStartsOn: props.weekStartsOn,
-  fixedWeeks: props.fixedWeeks,
-  numberOfMonths: props.numberOfMonths,
+  weekStartsOn,
+  fixedWeeks,
+  numberOfMonths,
   minValue,
   maxValue,
   disabled,
-  weekdayFormat: props.weekdayFormat,
-  pagedNavigation: props.pagedNavigation,
+  weekdayFormat,
+  pagedNavigation,
   isDateDisabled: propsIsDateDisabled.value,
   isDateUnavailable: propsIsDateUnavailable.value,
-  calendarLabel: calendarLabel.value,
+  calendarLabel,
 })
 
 const {

diff --git a/packages/radix-vue/src/Calendar/story/CalendarDefault.story.vue b/packages/radix-vue/src/Calendar/story/CalendarDefault.story.vue
@@ -8,7 +8,6 @@ import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, Cale
     <Variant title="default">
       <CalendarRoot
         v-slot="{ weekDays, grid }"
-
         class="mt-6 rounded-xl border border-black bg-white p-4 shadow-md"
       >
         <CalendarHeader class="flex items-center justify-between">

diff --git a/packages/radix-vue/src/Calendar/useCalendar.ts b/packages/radix-vue/src/Calendar/useCalendar.ts
@@ -2,25 +2,25 @@
   * Adapted from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/builders/calendar/create.ts
 */
 
-import { type DateValue, isEqualDay, isSameDay, isSameMonth } from '@internationalized/date'
+import { type DateValue, isSameDay, isSameMonth } from '@internationalized/date'
 import { type Ref, computed, ref, watch } from 'vue'
 import { type Grid, type Matcher, type WeekDayFormat, createMonths, isAfter, isBefore, toDate } from '@/shared/date'
 import { useDateFormatter } from '@/shared'
 
 export type UseCalendarProps = {
   locale: Ref<string>
   placeholder: Ref<DateValue>
-  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6
-  fixedWeeks: boolean
-  numberOfMonths: number
+  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>
+  fixedWeeks: Ref<boolean>
+  numberOfMonths: Ref<number>
   minValue: Ref<DateValue | undefined>
   maxValue: Ref<DateValue | undefined>
   disabled: Ref<boolean>
-  weekdayFormat: WeekDayFormat
-  pagedNavigation: boolean
+  weekdayFormat: Ref<WeekDayFormat>
+  pagedNavigation: Ref<boolean>
   isDateDisabled?: Matcher
   isDateUnavailable?: Matcher
-  calendarLabel?: string
+  calendarLabel: Ref<string | undefined>
 }
 
 export type UseCalendarStateProps = {
@@ -76,10 +76,10 @@ export function useCalendar(props: UseCalendarProps) {
 
   const grid = ref<Grid<DateValue>[]>(createMonths({
     dateObj: props.placeholder.value,
-    weekStartsOn: props.weekStartsOn,
+    weekStartsOn: props.weekStartsOn.value,
     locale: props.locale.value,
-    fixedWeeks: props.fixedWeeks,
-    numberOfMonths: props.numberOfMonths,
+    fixedWeeks: props.fixedWeeks.value,
+    numberOfMonths: props.numberOfMonths.value,
   })) as Ref<Grid<DateValue>[]>
 
   const visibleView = computed(() => {
@@ -131,19 +131,19 @@ export function useCalendar(props: UseCalendarProps) {
     if (!grid.value.length)
       return []
     return grid.value[0].rows[0].map((date) => {
-      return formatter.dayOfWeek(toDate(date), props.weekdayFormat)
+      return formatter.dayOfWeek(toDate(date), props.weekdayFormat.value)
     })
   })
 
   const nextPage = () => {
     const firstDate = grid.value[0].value
 
     const newGrid = createMonths({
-      dateObj: firstDate.add({ months: props.pagedNavigation ? props.numberOfMonths : 1 }),
-      weekStartsOn: props.weekStartsOn,
+      dateObj: firstDate.add({ months: props.pagedNavigation.value ? props.numberOfMonths.value : 1 }),
+      weekStartsOn: props.weekStartsOn.value,
       locale: props.locale.value,
-      fixedWeeks: props.fixedWeeks,
-      numberOfMonths: props.numberOfMonths,
+      fixedWeeks: props.fixedWeeks.value,
+      numberOfMonths: props.numberOfMonths.value,
     })
 
     grid.value = newGrid
@@ -155,26 +155,36 @@ export function useCalendar(props: UseCalendarProps) {
     const firstDate = grid.value[0].value
 
     const newGrid = createMonths({
-      dateObj: firstDate.subtract({ months: props.pagedNavigation ? props.numberOfMonths : 1 }),
-      weekStartsOn: props.weekStartsOn,
+      dateObj: firstDate.subtract({ months: props.pagedNavigation.value ? props.numberOfMonths.value : 1 }),
+      weekStartsOn: props.weekStartsOn.value,
       locale: props.locale.value,
-      fixedWeeks: props.fixedWeeks,
-      numberOfMonths: props.numberOfMonths,
+      fixedWeeks: props.fixedWeeks.value,
+      numberOfMonths: props.numberOfMonths.value,
     })
 
     props.placeholder.value = newGrid[0].value.set({ day: 1 })
   }
 
-  watch(props.placeholder, (value, oldValue) => {
-    if (!isEqualDay(value, oldValue)) {
-      grid.value = createMonths({
-        dateObj: value,
-        weekStartsOn: props.weekStartsOn,
-        locale: props.locale.value,
-        fixedWeeks: props.fixedWeeks,
-        numberOfMonths: props.numberOfMonths,
-      })
-    }
+  watch(props.placeholder, (value) => {
+    if (visibleView.value.some(month => isSameMonth(month, value)))
+      return
+    grid.value = createMonths({
+      dateObj: value,
+      weekStartsOn: props.weekStartsOn.value,
+      locale: props.locale.value,
+      fixedWeeks: props.fixedWeeks.value,
+      numberOfMonths: props.numberOfMonths.value,
+    })
+  })
+
+  watch([props.locale, props.weekStartsOn, props.fixedWeeks, props.numberOfMonths], () => {
+    grid.value = createMonths({
+      dateObj: props.placeholder.value,
+      weekStartsOn: props.weekStartsOn.value,
+      locale: props.locale.value,
+      fixedWeeks: props.fixedWeeks.value,
+      numberOfMonths: props.numberOfMonths.value,
+    })
   })
 
   const headingValue = computed(() => {
@@ -205,7 +215,7 @@ export function useCalendar(props: UseCalendarProps) {
     return content
   })
 
-  const fullCalendarLabel = computed(() => `${props.calendarLabel ?? 'Event Date'}, ${headingValue.value}`)
+  const fullCalendarLabel = computed(() => `${props.calendarLabel.value ?? 'Event Date'}, ${headingValue.value}`)
 
   return {
     isDateDisabled,

diff --git a/packages/radix-vue/src/RangeCalendar/RangeCalendarRoot.vue b/packages/radix-vue/src/RangeCalendar/RangeCalendarRoot.vue
@@ -201,17 +201,17 @@ const {
 } = useCalendar({
   locale,
   placeholder,
-  weekStartsOn: props.weekStartsOn,
-  fixedWeeks: props.fixedWeeks,
-  numberOfMonths: props.numberOfMonths,
+  weekStartsOn,
+  fixedWeeks,
+  numberOfMonths,
   minValue,
   maxValue,
   disabled,
-  weekdayFormat: props.weekdayFormat,
-  pagedNavigation: props.pagedNavigation,
+  weekdayFormat,
+  pagedNavigation,
   isDateDisabled: propsIsDateDisabled.value,
   isDateUnavailable: propsIsDateUnavailable.value,
-  calendarLabel: calendarLabel.value,
+  calendarLabel,
 })
 
 const {