move all view logic handling to useViews

dnbexperience · Nov 7, 2024 · 41bf2cc · 41bf2cc
1 parent 80d7a63
commit 41bf2cc
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 77 deletions.
diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerAddon.tsx b/packages/dnb-eufemia/src/components/date-picker/DatePickerAddon.tsx
@@ -27,6 +27,7 @@ export type DatePickerAddonProps = React.HTMLProps<HTMLElement> & {
 function DatePickerAddon(props: DatePickerAddonProps) {
   const {
     updateDates,
+    forceViewMonthChange,
     callOnChangeHandler,
     hidePicker,
     startDate,
@@ -54,14 +55,15 @@ function DatePickerAddon(props: DatePickerAddonProps) {
       endDate?: Date
       event?: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>
     } = {}) => {
-      updateDates({ startDate, endDate }, undefined, true)
+      updateDates({ startDate, endDate })
+      forceViewMonthChange()
       callOnChangeHandler({
         startDate,
         endDate: endDate || startDate,
         event,
       })
     },
-    [updateDates, callOnChangeHandler]
+    [updateDates, callOnChangeHandler, forceViewMonthChange]
   )
 
   const setDate = useCallback(

diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.tsx b/packages/dnb-eufemia/src/components/date-picker/DatePickerCalendar.tsx
@@ -160,6 +160,7 @@ function DatePickerCalendar(restOfProps: DatePickerCalendarProps) {
 
   const {
     updateDates,
+    forceViewMonthChange,
     startDate,
     endDate,
     hoverDate,
@@ -430,19 +431,17 @@ function DatePickerCalendar(restOfProps: DatePickerCalendarProps) {
         }
       }
 
-      updateDates(
-        dates,
-        () => {
-          // call after state update, so the input get's the latest state as well
-          callOnSelect({
-            event,
-            nr,
-            hidePicker: false,
-            ...dates,
-          })
-        },
-        true
-      )
+      updateDates(dates, () => {
+        // call after state update, so the input get's the latest state as well
+        callOnSelect({
+          event,
+          nr,
+          hidePicker: false,
+          ...dates,
+        })
+      })
+
+      forceViewMonthChange()
 
       // and set the focus back again
       if (listRef && listRef.current) {
@@ -464,6 +463,7 @@ function DatePickerCalendar(restOfProps: DatePickerCalendarProps) {
       onlyMonth,
       endMonth,
       startMonth,
+      forceViewMonthChange,
     ]
   )
 

diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerContext.ts b/packages/dnb-eufemia/src/components/date-picker/DatePickerContext.ts
@@ -23,11 +23,11 @@ export type DatePickerContextValues = ContextProps &
     hasHadValidDate: boolean
     updateDates: (
       dates: DatePickerDates,
-      callback?: (dates: DatePickerDates) => void,
-      isTriggeredByShortcut?: boolean
+      callback?: (dates: DatePickerDates) => void
     ) => void
     setState?: (state: DatePickerProviderState) => void
     setViews: (views: Array<CalendarView>, callback?: () => void) => void
+    forceViewMonthChange: () => void
     callOnChangeHandler: <E>(event: DatePickerChangeEvent<E>) => void
     hidePicker: (event: DisplayPickerEvent) => void
     previousDates: DatePickerDateProps

diff --git a/packages/dnb-eufemia/src/components/date-picker/DatePickerProvider.tsx b/packages/dnb-eufemia/src/components/date-picker/DatePickerProvider.tsx
@@ -18,7 +18,7 @@ import { correctV1Format, isDisabled } from './DatePickerCalc'
 import DatePickerContext, {
   DatePickerContextValues,
 } from './DatePickerContext'
-import { CalendarView } from './hooks/useViews'
+import useViews, { CalendarView } from './hooks/useViews'
 import useDates, { DatePickerDates } from './hooks/useDates'
 import useLastEventCallCache, {
   LastEventCallCache,
@@ -88,14 +88,7 @@ function DatePickerProvider(externalProps: DatePickerProviderProps) {
 
   const sharedContext = useContext(SharedContext)
 
-  const {
-    dates,
-    updateDates,
-    hasHadValidDate,
-    previousDates,
-    views,
-    setViews,
-  } = useDates(
+  const { dates, updateDates, hasHadValidDate, previousDates } = useDates(
     {
       date: date,
       startDate: start_date,
@@ -112,6 +105,12 @@ function DatePickerProvider(externalProps: DatePickerProviderProps) {
     }
   )
 
+  const { views, setViews, forceViewMonthChange } = useViews({
+    startMonth: dates.startMonth,
+    endMonth: dates.endMonth,
+    isRange: range,
+  })
+
   const [lastEventCallCache, setLastEventCallCache] =
     useLastEventCallCache({
       startDate: dates.startDate,
@@ -217,7 +216,6 @@ function DatePickerProvider(externalProps: DatePickerProviderProps) {
     <DatePickerContext.Provider
       value={{
         translation: sharedContext.translation,
-        setViews,
         updateDates,
         getReturnObject,
         callOnChangeHandler,
@@ -227,6 +225,8 @@ function DatePickerProvider(externalProps: DatePickerProviderProps) {
         previousDates,
         hasHadValidDate,
         views,
+        setViews,
+        forceViewMonthChange,
       }}
     >
       {children}

diff --git a/packages/dnb-eufemia/src/components/date-picker/hooks/useDates.ts b/packages/dnb-eufemia/src/components/date-picker/hooks/useDates.ts
@@ -3,7 +3,6 @@ import { convertStringToDate, isDisabled } from '../DatePickerCalc'
 import isValid from 'date-fns/isValid'
 import format from 'date-fns/format'
 import { addMonths } from 'date-fns'
-import useViews, { CalendarView } from './useViews'
 
 export type DatePickerDateProps = {
   date?: Date | string
@@ -82,25 +81,12 @@ export default function useDates(
     setPreviousDates(dateProps)
   }
 
-  // calling views here instead of DatePickerProvider, to able to sync start and end months up with calendar views
-  // TODO: Reduce to just use start/endDate or start/endMonth to reduce complexity,
-  // or only have startMonth and endMonth as props and not a state that changes
-  const [views, setViews] = useViews({
-    startMonth: dates.startMonth,
-    startDate: dates.startDate,
-    endDate: dates.endDate,
-    endMonth: dates.endMonth,
-    isRange,
-  })
-
   const hasHadValidDate = useRef<boolean>(false)
 
-  // TODO: Update parameter to be an object, to improve readability
   const updateDates = useCallback(
     (
       newDates: DatePickerDates,
-      callback?: (dates: DatePickerDates) => void,
-      forceMonthChange?: boolean
+      callback?: (dates: DatePickerDates) => void
     ) => {
       // Correct dates based on min and max date
       const correctedDates = shouldCorrectDate
@@ -117,9 +103,6 @@ export default function useDates(
       const months = updateMonths({
         newDates,
         currentDates: dates,
-        views,
-        isRange,
-        forceMonthChange,
       })
 
       setDates((currentDates) => {
@@ -138,7 +121,7 @@ export default function useDates(
         ...correctedDates,
       })
     },
-    [dates, shouldCorrectDate, isRange, views]
+    [dates, shouldCorrectDate, isRange]
   )
 
   // Updated input dates based on start and end dates, move to DatePickerInput
@@ -163,8 +146,6 @@ export default function useDates(
     updateDates,
     hasHadValidDate: hasHadValidDate.current,
     previousDates,
-    views,
-    setViews,
   } as const
 }
 
@@ -306,30 +287,18 @@ function correctDates({
 function updateMonths({
   newDates,
   currentDates,
-  views,
-  isRange,
-  forceMonthChange,
 }: {
   newDates: DatePickerDates
   currentDates: DatePickerDates
-  views: Array<CalendarView>
-  isRange: boolean
-  forceMonthChange: boolean
 }) {
-  let startMonth = newDates.startMonth ?? newDates.startDate
-  let endMonth = newDates.endMonth ?? newDates.endDate
-  const [startView, endView] = views
-
-  // Make sure start and end months are synced up with calendar in range mode, and prevent both pickers showing the same month if start and end date are selected to be the same
-  if (isRange && !forceMonthChange) {
-    // If start and end date is the same day, but changed from the previous selected months
-    startMonth = startView?.month
-    endMonth = endView?.month
-  }
+  const startMonth =
+    newDates.startMonth ?? newDates.startDate ?? currentDates.startMonth
+  const endMonth =
+    newDates.endMonth ?? newDates.endDate ?? currentDates.endMonth
 
   return {
-    startMonth: startMonth ?? currentDates.startMonth,
-    endMonth: endMonth ?? currentDates.endMonth,
+    startMonth,
+    endMonth,
   }
 }
 

diff --git a/packages/dnb-eufemia/src/components/date-picker/hooks/useViews.ts b/packages/dnb-eufemia/src/components/date-picker/hooks/useViews.ts
@@ -1,12 +1,10 @@
 import addMonths from 'date-fns/addMonths'
-import { useMemo, useState } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import { DatePickerDates } from './useDates'
 
 export type CalendarView = { nr: number; month?: Date }
 
 export type ViewDates = {
-  startDate?: DatePickerDates['startDate']
-  endDate?: DatePickerDates['endDate']
   startMonth?: DatePickerDates['startMonth']
   endMonth?: DatePickerDates['endMonth']
 }
@@ -21,6 +19,8 @@ export default function useViews({ isRange, ...dates }: UseViewsParams) {
     getViews({ views: undefined, ...dates, isRange })
   )
 
+  const forceViewChange = useRef(false)
+
   const hasDateChanges = useMemo(
     () =>
       Object.keys(dates).some(
@@ -35,7 +35,13 @@ export default function useViews({ isRange, ...dates }: UseViewsParams) {
         ? views
         : views[0]
       : views
-    setViews(getViews({ ...dates, views: currentViews, isRange }))
+
+    // Maintain range views unless forced to change by shortcut or keyboard navigation
+    if (forceViewChange.current || !isRange) {
+      setViews(getViews({ ...dates, views: currentViews, isRange }))
+      forceViewChange.current = false
+    }
+
     setPreviousDates(dates)
   }
 
@@ -47,7 +53,15 @@ export default function useViews({ isRange, ...dates }: UseViewsParams) {
     cb?.()
   }
 
-  return [views, updateViews] as const
+  function forceViewMonthChange() {
+    forceViewChange.current = true
+  }
+
+  return {
+    views,
+    setViews: updateViews,
+    forceViewMonthChange,
+  } as const
 }
 
 export function getViews({
@@ -74,18 +88,19 @@ export function getViews({
 }
 
 function getMonthView(
-  { startDate, endDate, startMonth, endMonth }: ViewDates,
+  { startMonth, endMonth }: ViewDates,
   nr: CalendarView['nr']
 ) {
-  if ((startMonth || startDate) && nr === 0) {
-    return startMonth || startDate
+  if (startMonth && nr === 0) {
+    return startMonth
   }
-  if ((endMonth || endDate) && nr === 1) {
-    return endMonth || endDate
+
+  if (endMonth && nr === 1) {
+    return endMonth
   }
 
   // Here we add that default offset to every new calendar added,
   // the first will get 0, the next one 1, and so forth
-  const fallbackMonth = startMonth || startDate || new Date()
+  const fallbackMonth = startMonth || new Date()
   return addMonths(fallbackMonth, nr)
 }