Implement localization functionality with <LocalizationProvider /> powered by date-io

Author: whitphx

src/LocalizationProvider/LocalizationProvider.tsx

@@ -0,0 +1,62 @@
+// Ref: https://github.com/mui/mui-x/blob/5dc5bd4b04eecf21c45cf6ea1169727ba5ab3be3/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx
+
+import * as React from "react";
+import { DateIOFormats } from "@date-io/core/IUtils";
+import { IUtils } from "@date-io/core/IUtils";
+
+type DateAdapter<TDate> = IUtils<TDate>;
+
+export interface DateAdapterContextValue<TDate> {
+  utils: DateAdapter<TDate>;
+}
+
+export const DateAdapterContext =
+  React.createContext<DateAdapterContextValue<unknown> | null>(null);
+if (process.env.NODE_ENV !== "production") {
+  DateAdapterContext.displayName = "DateAdapterContext";
+}
+
+export interface LocalizationProviderProps {
+  children?: React.ReactNode;
+  /** DateIO adapter class function */
+  dateAdapter: new (...args: any) => DateAdapter<unknown>;
+  /** Formats that are used for the child dropdown */
+  dateFormats?: Partial<DateIOFormats>;
+  /**
+   * Date library instance you are using, if it has some global overrides
+   * ```jsx
+   * dateLibInstance={momentTimeZone}
+   * ```
+   */
+  dateLibInstance?: any;
+  /** Locale for the date library you are using */
+  locale?: string | object;
+}
+
+/**
+ * @ignore - do not document.
+ */
+export function LocalizationProvider(props: LocalizationProviderProps) {
+  const {
+    children,
+    dateAdapter: Utils,
+    dateFormats,
+    dateLibInstance,
+    locale,
+  } = props;
+  const utils = React.useMemo(
+    () =>
+      new Utils({ locale, formats: dateFormats, instance: dateLibInstance }),
+    [Utils, locale, dateFormats, dateLibInstance]
+  );
+
+  const contextValue: DateAdapterContextValue<unknown> = React.useMemo(() => {
+    return { utils };
+  }, [utils]);
+
+  return (
+    <DateAdapterContext.Provider value={contextValue}>
+      {children}
+    </DateAdapterContext.Provider>
+  );
+}

src/LocalizationProvider/index.ts

@@ -0,0 +1 @@
+export * from "./LocalizationProvider";

src/LocalizationProvider/useUtils.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { DateAdapterContext } from "./LocalizationProvider";
+
+export const useUtils = () => {
+  const localization = React.useContext(DateAdapterContext);
+
+  if (localization == null) {
+    return null;
+  }
+
+  return localization.utils;
+};

src/adapters/date-fns-jalali.ts

@@ -0,0 +1 @@
+export { default } from "@date-io/date-fns-jalali";

src/adapters/date-fns.ts

@@ -0,0 +1 @@
+export { default } from "@date-io/date-fns";

src/adapters/dayjs.ts

@@ -0,0 +1 @@
+export { default } from "@date-io/dayjs";

src/adapters/jalaali.ts

@@ -0,0 +1 @@
+export { default } from "@date-io/jalaali";

src/adapters/luxon.ts

@@ -0,0 +1 @@
+export { default } from "@date-io/luxon";

src/index.ts

@@ -7,3 +7,4 @@ export {
 export * from "./use-date-select";
 export { getDateString } from "./date-string";
 export * from "./types";
+export * from "./LocalizationProvider";

src/use-date-select.ts

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { range } from "./range";
 import { compileDateString, parseDateString } from "./date-string";
 import { Option, Options } from "./types";
+import { useUtils } from "./LocalizationProvider/useUtils";
 
 const DEFAULT_MIN_YEAR = 1960;
 const DEFAULT_MAX_YEAR = new Date().getFullYear();
@@ -17,9 +18,6 @@ function compileOption(value: string): Option {
   return { value, label: value }; // TODO: Be customizable for localization
 }
 
-const monthOptions: Options = range(1, 12).map((i) =>
-  compileOption(convertToSelectValue(i))
-);
 const dayOptions: Options = range(1, 31).map((i) =>
   compileOption(convertToSelectValue(i))
 );
@@ -169,6 +167,8 @@ export const useDateSelect = (
     }
   }, [setDate, value]);
 
+  const utils = useUtils();
+
   const yearOptions = useMemo(() => {
     const minYear = opts.minYear != null ? opts.minYear : DEFAULT_MIN_YEAR;
     const maxYear = opts.maxYear != null ? opts.maxYear : DEFAULT_MAX_YEAR;
@@ -182,6 +182,15 @@ export const useDateSelect = (
     return raw;
   }, [opts.minYear, opts.maxYear, state.yearValue]);
 
+  const monthOptions: Options = useMemo(() => {
+    return range(1, 12).map((i) => {
+      const label = utils
+        ? utils.format(new Date(1960, i - 1, 1), "monthShort")
+        : convertToSelectValue(i);
+      return { value: convertToSelectValue(i), label };
+    });
+  }, [utils]);
+
   return {
     yearValue: state.yearValue,
     monthValue: state.monthValue,