Replace dateLib object with DateLib class

Include locale, weekStartsOn, firstWeekContainsDate, useAdditionalWeekYearTokens, useAdditionalDayOfYearTokens formatting props in DateLib class
gpbl · Oct 13, 2024 · ef6ca8b · ef6ca8b
1 parent c892660
commit ef6ca8b
Show file tree

Hide file tree

Showing 45 changed files with 479 additions and 310 deletions.
diff --git a/src/DayPicker.tsx b/src/DayPicker.tsx
@@ -11,16 +11,15 @@ import type { CalendarDay } from "./classes/CalendarDay.js";
 import { getClassNamesForModifiers } from "./helpers/getClassNamesForModifiers.js";
 import { getComponents } from "./helpers/getComponents.js";
 import { getDataAttributes } from "./helpers/getDataAttributes.js";
-import { getDateLib } from "./helpers/getDateLib.js";
 import { getDefaultClassNames } from "./helpers/getDefaultClassNames.js";
 import { getFormatters } from "./helpers/getFormatters.js";
 import { getMonthOptions } from "./helpers/getMonthOptions.js";
 import { getStyleForModifiers } from "./helpers/getStyleForModifiers.js";
 import { getWeekdays } from "./helpers/getWeekdays.js";
 import { getYearOptions } from "./helpers/getYearOptions.js";
 import * as defaultLabels from "./labels/index.js";
-import type { FormatOptions, LabelOptions } from "./lib/dateLib.js";
-import { enUS } from "./lib/locales.js";
+import { DateLib } from "./lib/dateLib.js";
+import { defaultLocale } from "./lib/locales.js";
 import type {
   DayPickerProps,
   Modifiers,
@@ -45,28 +44,43 @@ import { isDateRange } from "./utils/typeguards.js";
  */
 export function DayPicker(props: DayPickerProps) {
   const { components, formatters, labels, dateLib, locale, classNames } =
-    useMemo(
-      () => ({
-        dateLib: getDateLib(props.dateLib),
+    useMemo(() => {
+      const locale = { ...defaultLocale, ...props.locale };
+
+      const dateLib = new DateLib(
+        {
+          locale,
+          weekStartsOn: props.weekStartsOn,
+          firstWeekContainsDate: props.firstWeekContainsDate,
+          useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
+          useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
+        },
+        props.dateLib
+      );
+
+      return {
+        dateLib,
         components: getComponents(props.components),
         formatters: getFormatters(props.formatters),
         labels: { ...defaultLabels, ...props.labels },
-        locale: { ...enUS, ...props.locale },
+        locale,
         classNames: { ...getDefaultClassNames(), ...props.classNames }
-      }),
-      [
-        props.classNames,
-        props.components,
-        props.dateLib,
-        props.formatters,
-        props.labels,
-        props.locale
-      ]
-    );
+      };
+    }, [
+      props.classNames,
+      props.components,
+      props.dateLib,
+      props.firstWeekContainsDate,
+      props.formatters,
+      props.labels,
+      props.locale,
+      props.useAdditionalDayOfYearTokens,
+      props.useAdditionalWeekYearTokens,
+      props.weekStartsOn
+    ]);
 
   const {
     captionLayout,
-    firstWeekContainsDate,
     mode,
     onDayBlur,
     onDayClick,
@@ -77,22 +91,9 @@ export function DayPicker(props: DayPickerProps) {
     onNextClick,
     onPrevClick,
     showWeekNumber,
-    styles,
-    useAdditionalDayOfYearTokens,
-    useAdditionalWeekYearTokens,
-    weekStartsOn
+    styles
   } = props;
 
-  const formatOptions: FormatOptions = {
-    locale,
-    weekStartsOn,
-    firstWeekContainsDate,
-    useAdditionalWeekYearTokens,
-    useAdditionalDayOfYearTokens
-  };
-
-  const labelOptions: LabelOptions = formatOptions;
-
   const {
     formatCaption,
     formatDay,
@@ -144,15 +145,8 @@ export function DayPicker(props: DayPickerProps) {
   } = labels;
 
   const weekdays = useMemo(
-    () =>
-      getWeekdays(
-        locale,
-        props.weekStartsOn,
-        props.ISOWeek,
-        props.timeZone,
-        dateLib
-      ),
-    [dateLib, locale, props.ISOWeek, props.timeZone, props.weekStartsOn]
+    () => getWeekdays(dateLib, props.ISOWeek, props.timeZone),
+    [dateLib, props.ISOWeek, props.timeZone]
   );
 
   const isInteractive = mode !== undefined || onDayClick !== undefined;
@@ -317,7 +311,6 @@ export function DayPicker(props: DayPickerProps) {
               navStart,
               navEnd,
               formatters,
-              locale,
               dateLib
             );
 
@@ -373,7 +366,7 @@ export function DayPicker(props: DayPickerProps) {
                       captionLayout === "dropdown-years" ? (
                         <components.YearsDropdown
                           className={classNames[UI.YearsDropdown]}
-                          aria-label={labelYearDropdown(labelOptions)}
+                          aria-label={labelYearDropdown(dateLib.options)}
                           classNames={classNames}
                           components={components}
                           disabled={Boolean(props.disableNavigation)}
@@ -396,7 +389,7 @@ export function DayPicker(props: DayPickerProps) {
                     >
                       {formatCaption(
                         calendarMonth.date,
-                        formatOptions,
+                        dateLib.options,
                         dateLib
                       )}
                     </components.CaptionLabel>
@@ -406,7 +399,7 @@ export function DayPicker(props: DayPickerProps) {
                   role="grid"
                   aria-multiselectable={mode === "multiple" || mode === "range"}
                   aria-label={
-                    labelGrid(calendarMonth.date, labelOptions, dateLib) ||
+                    labelGrid(calendarMonth.date, dateLib.options, dateLib) ||
                     undefined
                   }
                   className={classNames[UI.MonthGrid]}
@@ -419,7 +412,7 @@ export function DayPicker(props: DayPickerProps) {
                     >
                       {showWeekNumber && (
                         <components.WeekNumberHeader
-                          aria-label={labelWeekNumberHeader(labelOptions)}
+                          aria-label={labelWeekNumberHeader(dateLib.options)}
                           className={classNames[UI.WeekNumberHeader]}
                           style={styles?.[UI.WeekNumberHeader]}
                           scope="col"
@@ -431,15 +424,15 @@ export function DayPicker(props: DayPickerProps) {
                         <components.Weekday
                           aria-label={labelWeekday(
                             weekday,
-                            labelOptions,
+                            dateLib.options,
                             dateLib
                           )}
                           className={classNames[UI.Weekday]}
                           key={i}
                           style={styles?.[UI.Weekday]}
                           scope="col"
                         >
-                          {formatWeekdayName(weekday, formatOptions, dateLib)}
+                          {formatWeekdayName(weekday, dateLib.options, dateLib)}
                         </components.Weekday>
                       ))}
                     </components.Weekdays>
@@ -515,7 +508,7 @@ export function DayPicker(props: DayPickerProps) {
                               ? labelGridcell(
                                   date,
                                   modifiers,
-                                  labelOptions,
+                                  dateLib.options,
                                   dateLib
                                 )
                               : undefined;
@@ -555,7 +548,7 @@ export function DayPicker(props: DayPickerProps) {
                                     aria-label={labelDayButton(
                                       date,
                                       modifiers,
-                                      labelOptions,
+                                      dateLib.options,
                                       dateLib
                                     )}
                                     onClick={handleDayClick(day, modifiers)}
@@ -571,10 +564,10 @@ export function DayPicker(props: DayPickerProps) {
                                       modifiers
                                     )}
                                   >
-                                    {formatDay(date, formatOptions, dateLib)}
+                                    {formatDay(date, dateLib.options, dateLib)}
                                   </components.DayButton>
                                 ) : (
-                                  formatDay(day.date, formatOptions, dateLib)
+                                  formatDay(day.date, dateLib.options, dateLib)
                                 )}
                               </components.Day>
                             );

diff --git a/src/classes/CalendarDay.ts b/src/classes/CalendarDay.ts
@@ -1,5 +1,4 @@
-import type { DateLib } from "../lib/index.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib } from "../lib/dateLib.js";
 
 /**
  * Represent the day displayed in the calendar.
@@ -13,7 +12,7 @@ export class CalendarDay {
     date: Date,
     displayMonth: Date,
     /** @ignore */
-    dateLib: DateLib = defaultDateLib
+    dateLib: DateLib = new DateLib()
   ) {
     this.date = date;
     this.displayMonth = displayMonth;

diff --git a/src/formatters/formatCaption.test.ts b/src/formatters/formatCaption.test.ts
@@ -1,18 +1,27 @@
 import { es } from "date-fns/locale/es";
 
-import { dateLib } from "../lib";
+import { DateLib } from "../lib";
+import { defaultLocale } from "../lib/locales.js";
 
 import { formatCaption } from "./formatCaption";
 
 const date = new Date(2022, 10, 21);
 
 test("should return the formatted caption", () => {
-  expect(formatCaption(date, {}, dateLib)).toEqual("November 2022");
+  expect(
+    formatCaption(date, {}, new DateLib({ locale: defaultLocale }))
+  ).toEqual("November 2022");
 });
 
 describe("when a locale is passed in", () => {
   test("should format using the locale", () => {
-    expect(formatCaption(date, { locale: es }, dateLib)).toEqual(
+    expect(formatCaption(date, { locale: es })).toEqual("noviembre 2022");
+  });
+});
+
+describe("when a locale is passed in through date lib", () => {
+  test("should format using the locale", () => {
+    expect(formatCaption(date, {}, new DateLib({ locale: es }))).toEqual(
       "noviembre 2022"
     );
   });

diff --git a/src/formatters/formatCaption.ts b/src/formatters/formatCaption.ts
@@ -1,8 +1,4 @@
-import {
-  FormatOptions,
-  dateLib as defaultDateLib,
-  type DateLib
-} from "../lib/index.js";
+import { DateLib, type FormatOptions } from "../lib/dateLib.js";
 
 /**
  * Format the caption of the month.
@@ -15,9 +11,9 @@ export function formatCaption(
   month: Date,
   options?: FormatOptions,
   /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  dateLib: DateLib = DateLib.fromOptionsDefaultLocale(options)
 ) {
-  return dateLib.format(month, "LLLL y", options);
+  return dateLib.format(month, "LLLL y");
 }
 
 /**

diff --git a/src/formatters/formatDay.ts b/src/formatters/formatDay.ts
@@ -1,5 +1,4 @@
-import type { FormatOptions, DateLib } from "../lib/dateLib.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib, type FormatOptions } from "../lib/dateLib.js";
 
 /**
  * Format the day date shown in the day cell.
@@ -12,7 +11,7 @@ export function formatDay(
   date: Date,
   options?: FormatOptions,
   /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  dateLib: DateLib = DateLib.fromOptionsDefaultLocale(options)
 ) {
-  return dateLib.format(date, "d", options);
+  return dateLib.format(date, "d");
 }
diff --git a/src/formatters/formatMonthDropdown.ts b/src/formatters/formatMonthDropdown.ts
@@ -1,5 +1,5 @@
 import type { DateFnsMonth } from "../lib/dateLib.js";
-import { enUS } from "../lib/locales.js";
+import { defaultLocale } from "../lib/locales.js";
 
 /**
  * Format the month number for the dropdown option label.
@@ -12,7 +12,7 @@ export function formatMonthDropdown(
   /** The month number to format. */
   monthNumber: number,
   /** The locale to use for formatting. */
-  locale = enUS
+  locale = defaultLocale
 ): string {
   return locale.localize?.month(monthNumber as DateFnsMonth);
 }
diff --git a/src/formatters/formatWeekdayName.ts b/src/formatters/formatWeekdayName.ts
@@ -1,5 +1,4 @@
-import type { FormatOptions, DateLib } from "../lib/dateLib.js";
-import { dateLib as defaultDateLib } from "../lib/index.js";
+import { DateLib, type FormatOptions } from "../lib/dateLib.js";
 
 /**
  * Format the weekday name to be displayed in the weekdays header.
@@ -12,7 +11,7 @@ export function formatWeekdayName(
   weekday: Date,
   options?: FormatOptions,
   /** @ignore */
-  dateLib: DateLib = defaultDateLib
+  dateLib: DateLib = DateLib.fromOptionsDefaultLocale(options)
 ) {
-  return dateLib.format(weekday, "cccccc", options);
+  return dateLib.format(weekday, "cccccc");
 }
diff --git a/src/helpers/getDateLib.ts b/src/helpers/getDateLib.ts