fix: input display

scaleway · Nov 26, 2024 · 71ad254 · 71ad254
1 parent 9942a90
commit 71ad254
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 52 deletions.
diff --git a/packages/form/src/components/DateField/__stories__/Required.stories.tsx b/packages/form/src/components/DateField/__stories__/Required.stories.tsx
@@ -14,4 +14,5 @@ export const Required: StoryFn<ComponentProps<typeof DateField>> = args => (
 Required.args = {
   name: 'date',
   required: true,
+  showMonthYearPicker: true,
 }
diff --git a/packages/form/src/components/DateField/index.tsx b/packages/form/src/components/DateField/index.tsx
@@ -97,7 +97,17 @@ export const DateField = <
       value={field.value}
       format={
         format ||
-        (value => (value ? parseDate(value).toLocaleDateString() : ''))
+        (value => {
+          if (!value) return ''
+          const date = parseDate(value)
+
+          return showMonthYearPicker
+            ? date.toLocaleDateString(undefined, {
+                year: 'numeric',
+                month: 'numeric',
+              })
+            : date.toLocaleDateString()
+        })
       }
       locale={locale}
       required={required}

diff --git a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap
@@ -6772,7 +6772,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
               <span
                 class="emotion-31 emotion-32 emotion-11"
               >
-                noviembre 2024
+                enero 2021
               </span>
               <button
                 class="emotion-27 emotion-28"
@@ -7248,10 +7248,9 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
               >
                 <div>
                   <span
-                    class="emotion-64 emotion-11"
-                    data-testid="dayNextMonth"
+                    class="emotion-84 emotion-11"
                   >
-                    1
+                    31
                   </span>
                 </div>
               </button>
@@ -7264,7 +7263,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    2
+                    1
                   </span>
                 </div>
               </button>
@@ -7277,7 +7276,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    3
+                    2
                   </span>
                 </div>
               </button>
@@ -7290,7 +7289,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    4
+                    3
                   </span>
                 </div>
               </button>
@@ -7303,7 +7302,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    5
+                    4
                   </span>
                 </div>
               </button>
@@ -7316,7 +7315,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    6
+                    5
                   </span>
                 </div>
               </button>
@@ -7329,7 +7328,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    7
+                    6
                   </span>
                 </div>
               </button>
@@ -7342,7 +7341,7 @@ exports[`DateInput > renders correctly with date-fns locale es 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    8
+                    7
                   </span>
                 </div>
               </button>
@@ -7986,7 +7985,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
               <span
                 class="emotion-31 emotion-32 emotion-11"
               >
-                novembre 2024
+                janvier 2021
               </span>
               <button
                 class="emotion-27 emotion-28"
@@ -8462,10 +8461,9 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
               >
                 <div>
                   <span
-                    class="emotion-64 emotion-11"
-                    data-testid="dayNextMonth"
+                    class="emotion-84 emotion-11"
                   >
-                    1
+                    31
                   </span>
                 </div>
               </button>
@@ -8478,7 +8476,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    2
+                    1
                   </span>
                 </div>
               </button>
@@ -8491,7 +8489,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    3
+                    2
                   </span>
                 </div>
               </button>
@@ -8504,7 +8502,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    4
+                    3
                   </span>
                 </div>
               </button>
@@ -8517,7 +8515,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    5
+                    4
                   </span>
                 </div>
               </button>
@@ -8530,7 +8528,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    6
+                    5
                   </span>
                 </div>
               </button>
@@ -8543,7 +8541,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    7
+                    6
                   </span>
                 </div>
               </button>
@@ -8556,7 +8554,7 @@ exports[`DateInput > renders correctly with date-fns locale fr 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    8
+                    7
                   </span>
                 </div>
               </button>
@@ -9200,7 +9198,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
               <span
                 class="emotion-31 emotion-32 emotion-11"
               >
-                ноябрь 2024
+                январь 2021
               </span>
               <button
                 class="emotion-27 emotion-28"
@@ -9676,10 +9674,9 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
               >
                 <div>
                   <span
-                    class="emotion-64 emotion-11"
-                    data-testid="dayNextMonth"
+                    class="emotion-84 emotion-11"
                   >
-                    1
+                    31
                   </span>
                 </div>
               </button>
@@ -9692,7 +9689,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    2
+                    1
                   </span>
                 </div>
               </button>
@@ -9705,7 +9702,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    3
+                    2
                   </span>
                 </div>
               </button>
@@ -9718,7 +9715,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    4
+                    3
                   </span>
                 </div>
               </button>
@@ -9731,7 +9728,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    5
+                    4
                   </span>
                 </div>
               </button>
@@ -9744,7 +9741,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    6
+                    5
                   </span>
                 </div>
               </button>
@@ -9757,7 +9754,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    7
+                    6
                   </span>
                 </div>
               </button>
@@ -9770,7 +9767,7 @@ exports[`DateInput > renders correctly with date-fns locale ru 1`] = `
                     class="emotion-64 emotion-11"
                     data-testid="dayNextMonth"
                   >
-                    8
+                    7
                   </span>
                 </div>
               </button>

diff --git a/packages/ui/src/components/DateInput/helpers.ts b/packages/ui/src/components/DateInput/helpers.ts
@@ -1,15 +1,4 @@
 import { CURRENT_MONTH, CURRENT_YEAR } from './constants'
-// Number days in a month for a given year
-export const getMonthDays = (month = CURRENT_MONTH, year = CURRENT_YEAR) => {
-  const months30 = [4, 6, 9, 11]
-  const leapYear = year % 4 === 0
-
-  if (month === 2) {
-    return leapYear ? 29 : 28
-  }
-
-  return months30.includes(month) ? 30 : 31
-}
 
 // First day of the month for a given year
 export const getMonthFirstDay = (
@@ -80,8 +69,8 @@ export const formatValue = (
 ) => {
   if (selectsRange && computedRange) {
     return format
-      ? `${format(computedRange.start ?? undefined)} - ${format(computedRange.end ?? undefined)}`
-      : `${getDateISO(showMonthYearPicker, computedRange.start ?? undefined)}${computedRange.start ? ' - ' : null}${getDateISO(showMonthYearPicker, computedRange.end ?? undefined)}`
+      ? `${format(computedRange.start ?? undefined) ? `${format(computedRange.start ?? undefined)} - ` : ''}${format(computedRange.end ?? undefined) ?? ''}`
+      : `${getDateISO(showMonthYearPicker, computedRange.start ?? undefined)}${computedRange.start ? ' - ' : ''}${getDateISO(showMonthYearPicker, computedRange.end ?? undefined)}`
   }
 
   if (computedValue && format) {

diff --git a/packages/ui/src/components/DateInput/index.tsx b/packages/ui/src/components/DateInput/index.tsx
@@ -6,7 +6,6 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { TextInputV2 } from '../TextInputV2'
 import { type ContextProps, DateInputContext } from './Context'
 import { CalendarPopup } from './components/Popup'
-import { CURRENT_MONTH, CURRENT_YEAR } from './constants'
 import { formatValue } from './helpers'
 import { getDays, getLocalizedMonths, getMonths } from './helpersLocale'
 
@@ -48,9 +47,9 @@ type DateInputProps<IsRange extends undefined | boolean = false> = {
   onChange?: IsRange extends true
     ? (
         date: Date[] | [Date | null, Date | null],
-        event: React.SyntheticEvent | undefined,
+        event?: React.SyntheticEvent,
       ) => void
-    : (date: Date | null, event: React.SyntheticEvent | undefined) => void
+    : (date: Date | null, event?: React.SyntheticEvent) => void
 }
 
 /**
@@ -92,15 +91,15 @@ export const DateInput = <IsRange extends undefined | boolean>({
     if (startDate && selectsRange) return startDate.getMonth() + 1
     if (endDate && selectsRange) return endDate.getMonth() + 1
 
-    return CURRENT_MONTH
+    return new Date().getMonth() + 1
   }, [endDate, selectsRange, startDate, value])
 
   const defaultYearToShow = useMemo(() => {
     if (value) return new Date(value).getFullYear()
     if (startDate && selectsRange) return startDate.getFullYear()
     if (endDate && selectsRange) return endDate.getFullYear()
 
-    return CURRENT_YEAR
+    return new Date().getFullYear()
   }, [endDate, selectsRange, startDate, value])
 
   const [computedValue, setValue] = useState(