@hero-design/rn 8.94.0 → 8.97.0

package/src/components/DatePicker/types.ts

@@ -1,4 +1,8 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type {
+  TextInputProps as NativeTextInputProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 
 export interface DatePickerProps {
   /**
@@ -85,4 +89,14 @@ export interface DatePickerProps {
    * [Android only] autoTheme will automatically set the theme based on the device's light mode or dark mode.
    * */
   autoTheme?: boolean;
+  /**
+   * Custom renderer for the selected value. The function provides the current date object and the formatted date string for the current display format.
+   */
+  renderSelectedValue?: (
+    value: {
+      date: Date;
+      formattedDateString: string;
+    },
+    props?: NativeTextInputProps
+  ) => React.ReactNode;
 }

package/src/components/HeroDesignProvider/index.tsx

@@ -2,13 +2,26 @@ import React from 'react';
 import ThemeProvider, { ThemeProviderProps } from '../../theme/ThemeProvider';
 import Toast from '../Toast';
 import Portal from '../Portal';
+import LocaleProvider from '../LocaleProvider';
+import { LocaleValues } from '../../locales/types';
+import enAULocale from '../../locales/en_AU';
 
-const HeroDesignProvider = ({ theme, children }: ThemeProviderProps) => (
-  <ThemeProvider theme={theme}>
-    <Toast.Provider>
-      <Portal.Provider>{children}</Portal.Provider>
-    </Toast.Provider>
-  </ThemeProvider>
+interface HeroDesignProviderProps extends ThemeProviderProps {
+  locale?: LocaleValues;
+}
+
+const HeroDesignProvider = ({
+  theme,
+  locale = enAULocale,
+  children,
+}: HeroDesignProviderProps) => (
+  <LocaleProvider locale={locale}>
+    <ThemeProvider theme={theme}>
+      <Toast.Provider>
+        <Portal.Provider>{children}</Portal.Provider>
+      </Toast.Provider>
+    </ThemeProvider>
+  </LocaleProvider>
 );
 
 export default HeroDesignProvider;

package/src/components/LocaleProvider/__tests__/utils.specs.ts

@@ -0,0 +1,12 @@
+import enAU from 'date-fns/locale/en-AU';
+import enCA from 'date-fns/locale/en-CA';
+import { getDateFnsLocale } from '../utils';
+
+describe('getDateFnsLocale', () => {
+  it('should find en-AU', () => {
+    expect(getDateFnsLocale('en-AU')).toBe(enAU);
+  });
+  it('should find en-CA', () => {
+    expect(getDateFnsLocale('en-CA')).toBe(enCA);
+  });
+});

package/src/components/LocaleProvider/context.ts

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+import enAULocale from '../../locales/en_AU';
+import { LocaleValues } from '../../locales/types';
+
+const LocaleContext = createContext<LocaleValues>(enAULocale);
+
+export { LocaleContext };

package/src/components/LocaleProvider/hooks.ts

@@ -0,0 +1,19 @@
+import { useCallback, useContext } from 'react';
+import { LocaleContext } from './context';
+import enAUTranslations from '../../locales/en_AU';
+import type { DateTimeFormats } from '../../locales/types';
+
+export const useLocale = () => {
+  const context = useContext(LocaleContext);
+  if (!context) return enAUTranslations;
+  return context;
+};
+
+export const useDateTimeFormat = () => {
+  const { dateTimeFormats } = useLocale();
+  const localizeDateTime = useCallback(
+    (key: keyof DateTimeFormats) => dateTimeFormats?.[key],
+    [dateTimeFormats]
+  );
+  return { localizeDateTime };
+};

package/src/components/LocaleProvider/index.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import setDefaultOptions from 'date-fns/setDefaultOptions';
+import { LocaleContext } from './context';
+import { getDateFnsLocale } from './utils';
+import { LocaleValues } from '../../locales/types';
+
+interface LocaleProviderProps {
+  locale: LocaleValues;
+}
+
+const LocaleProvider = (
+  props: React.PropsWithChildren<LocaleProviderProps>
+) => {
+  const { locale, children } = props;
+  const code = locale?.['lang'] || 'en-AU';
+  // setDefaultOptions here instead of inside useEffect for first rendering
+  setDefaultOptions({ locale: getDateFnsLocale(code) });
+  useEffect(() => {
+    return () => setDefaultOptions({ locale: getDateFnsLocale('en-AU') });
+  }, []);
+
+  return (
+    <LocaleContext.Provider value={locale}>{children}</LocaleContext.Provider>
+  );
+};
+
+export default LocaleProvider;

package/src/components/LocaleProvider/utils.ts

@@ -0,0 +1,14 @@
+import enAU from 'date-fns/locale/en-AU';
+import enCA from 'date-fns/locale/en-CA';
+import type { Locale } from 'date-fns';
+import { LocaleCode } from '../../locales/types';
+
+const Locales = {
+  'en-AU': enAU,
+  'en-CA': enCA,
+} as const;
+
+export function getDateFnsLocale(locale: LocaleCode): Locale {
+  const fallbackLocale = Locales['en-AU'];
+  return Locales[locale] || fallbackLocale;
+}

package/src/index.ts

@@ -76,6 +76,7 @@ import {
 } from './components/AnimatedScroller';
 import Search from './components/Search';
 import FloatingIsland from './components/FloatingIsland';
+import LocaleProvider from './components/LocaleProvider';
 
 export {
   theme,
@@ -153,6 +154,7 @@ export {
   RefreshControl,
   RichTextEditor,
   FloatingIsland,
+  LocaleProvider,
 };
 
 export * from './types';

package/src/locales/en_AU.ts

@@ -0,0 +1,10 @@
+import { LocaleValues } from './types';
+
+const locale: LocaleValues = {
+  lang: 'en-AU',
+  dateTimeFormats: {
+    fullDate: 'dd/MM/yyyy',
+  },
+};
+
+export default locale;

package/src/locales/en_CA.ts

@@ -0,0 +1,10 @@
+import { LocaleValues } from './types';
+
+const locale: LocaleValues = {
+  lang: 'en-CA',
+  dateTimeFormats: {
+    fullDate: 'MMM dd, yyyy',
+  },
+};
+
+export default locale;

package/src/locales/index.ts

@@ -0,0 +1,7 @@
+import enAU from './en_AU';
+import enCA from './en_CA';
+
+export default {
+  'en-AU': enAU,
+  'en-CA': enCA,
+};

package/src/locales/types.ts

@@ -0,0 +1,12 @@
+const LOCALES = ['en-AU', 'en-CA'] as const;
+
+export type LocaleCode = typeof LOCALES[number];
+
+export type DateTimeFormats = {
+  fullDate: string;
+};
+
+export type LocaleValues = {
+  lang: LocaleCode;
+  dateTimeFormats: DateTimeFormats;
+};

package/src/testHelpers/renderWithTheme.tsx

@@ -3,8 +3,14 @@ import { render } from '@testing-library/react-native'; // eslint-disable-line i
 import type { RenderOptions } from '@testing-library/react-native';
 import { theme } from '../index';
 import HeroDesignProvider from '../components/HeroDesignProvider';
+import enAU from '../locales/en_AU';
 
 const renderWithTheme = (ui: JSX.Element, options?: RenderOptions) =>
-  render(<HeroDesignProvider theme={theme}>{ui}</HeroDesignProvider>, options);
+  render(
+    <HeroDesignProvider theme={theme} locale={enAU}>
+      {ui}
+    </HeroDesignProvider>,
+    options
+  );
 
 export default renderWithTheme;

package/src/types.ts

@@ -19,6 +19,7 @@ import { FABHandles } from './components/FAB/FAB';
 import { ActionGroupHandles } from './components/FAB/ActionGroup';
 import type { SliderRangeValue } from './components/Slider/RangeSlider';
 import type { CalendarDateRange } from './components/Calendar/CalendarRange';
+import { LocaleCode, LocaleValues, DateTimeFormats } from './locales/types';
 
 export type {
   BottomNavigationTabType,
@@ -40,4 +41,7 @@ export type {
   ActionGroupHandles,
   SliderRangeValue,
   CalendarDateRange,
+  LocaleCode,
+  LocaleValues,
+  DateTimeFormats,
 };