fix(fields): normalize calendar header title in DatePicker & DateRang…

…ePicker
MTES-MCT · Dec 21, 2022 · 611f811 · 611f811
1 parent ff877e9
commit 611f811
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 70 deletions.
diff --git a/src/fields/DatePicker/CalendarPicker.tsx b/src/fields/DatePicker/CalendarPicker.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react'
-import { DatePicker as RsuiteDatePicker } from 'rsuite'
+import { CustomProvider as RsuiteCustomProvider, DatePicker as RsuiteDatePicker } from 'rsuite'
+import rsuiteFrFr from 'rsuite/locales/fr_FR'
 import styled from 'styled-components'
 
 import { useForceUpdate } from '../../hooks/useForceUpdate'
@@ -46,22 +47,24 @@ export function CalendarPicker({ defaultValue, isHistorical, isOpen, onChange }:
   }, [forceUpdate])
 
   return (
-    <Box ref={boxRef as any} onClick={stopMouseEventPropagation}>
-      {boxRef.current && (
-        <RsuiteDatePicker
-          container={boxRef.current}
-          disabledDate={disabledDate}
-          format="yyyy-MM-dd"
-          locale={RSUITE_CALENDAR_LOCALE}
-          oneTap
-          onSelect={handleSelect}
-          open={isOpen}
-          // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
-          ranges={[]}
-          value={defaultValue}
-        />
-      )}
-    </Box>
+    <RsuiteCustomProvider locale={rsuiteFrFr}>
+      <Box ref={boxRef as any} onClick={stopMouseEventPropagation}>
+        {boxRef.current && (
+          <RsuiteDatePicker
+            container={boxRef.current}
+            disabledDate={disabledDate}
+            format="yyyy-MM-dd"
+            locale={RSUITE_CALENDAR_LOCALE}
+            oneTap
+            onSelect={handleSelect}
+            open={isOpen}
+            // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
+            ranges={[]}
+            value={defaultValue}
+          />
+        )}
+      </Box>
+    </RsuiteCustomProvider>
   )
 }
 

diff --git a/src/fields/DateRangePicker/RangeCalendarPicker.tsx b/src/fields/DateRangePicker/RangeCalendarPicker.tsx
@@ -1,10 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react'
-import { DateRangePicker as RsuiteDateRangePicker } from 'rsuite'
+import { CustomProvider as RsuiteCustomProvider, DateRangePicker as RsuiteDateRangePicker } from 'rsuite'
+import rsuiteFrFr from 'rsuite/locales/fr_FR'
 import styled from 'styled-components'
 
 import { useForceUpdate } from '../../hooks/useForceUpdate'
-import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter'
-import { dayjs } from '../../utils/dayjs'
 import { getUtcDayjs } from '../../utils/getUtcDayjs'
 import { getUtcizedDayjs } from '../../utils/getUtcizedDayjs'
 import { sortDates } from '../../utils/sortDates'
@@ -57,31 +56,30 @@ export function RangeCalendarPicker({ defaultValue, isHistorical, isOpen, onChan
     [onChange]
   )
 
-  const renderTitle = useCallback((date: Date) => capitalizeFirstLetter(dayjs(date).format('MMMM YYYY')), [])
-
   useEffect(() => {
     // We wait for the <Box /> to render so that `boxRef` is defined
     // and can be used as a container for <RsuiteDateRangePicker />
     forceUpdate()
   }, [forceUpdate])
 
   return (
-    <Box ref={boxRef as any} onClick={stopMouseEventPropagation}>
-      {boxRef.current && (
-        <RsuiteDateRangePicker
-          container={boxRef.current}
-          disabledDate={disabledDate}
-          format="yyyy-MM-dd"
-          locale={RSUITE_CALENDAR_LOCALE}
-          onSelect={handleSelect}
-          open={isOpen}
-          ranges={[]}
-          renderTitle={renderTitle}
-          // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
-          value={controlledValue}
-        />
-      )}
-    </Box>
+    <RsuiteCustomProvider locale={rsuiteFrFr}>
+      <Box ref={boxRef as any} onClick={stopMouseEventPropagation}>
+        {boxRef.current && (
+          <RsuiteDateRangePicker
+            container={boxRef.current}
+            disabledDate={disabledDate}
+            format="yyyy-MM-dd"
+            locale={RSUITE_CALENDAR_LOCALE}
+            onSelect={handleSelect}
+            open={isOpen}
+            ranges={[]}
+            // `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
+            value={controlledValue}
+          />
+        )}
+      </Box>
+    </RsuiteCustomProvider>
   )
 }
 

diff --git a/src/fields/DateRangePicker/constants.ts b/src/fields/DateRangePicker/constants.ts
@@ -1,5 +1,3 @@
-import fr from 'date-fns/locale/fr'
-
 import type { DateRangePickerLocale } from 'rsuite'
 
 export const HOURS_AS_OPTIONS = new Array(24).fill(undefined).map((_, index) => ({
@@ -8,10 +6,8 @@ export const HOURS_AS_OPTIONS = new Array(24).fill(undefined).map((_, index) =>
 }))
 
 export const RSUITE_CALENDAR_LOCALE: DateRangePickerLocale = {
-  // TODO Why this doesn't work?
-  dateLocale: fr,
   formattedDayPattern: 'dd/MM/yyyy',
-  formattedMonthPattern: 'MM/yyyy',
+  formattedMonthPattern: 'MMMM yyyy',
   friday: 'V',
   hours: 'Heures',
   minutes: 'Minutes',

diff --git a/src/utils/__tests__/capitalizeFirstLetter.test.ts b/src/utils/__tests__/capitalizeFirstLetter.test.ts
diff --git a/src/utils/capitalizeFirstLetter.ts b/src/utils/capitalizeFirstLetter.ts