@hero-design/rn 8.94.0 → 8.97.0

package/src/components/DatePicker/Dialog/IOSDialog.tsx

@@ -0,0 +1,91 @@
+import { MonthYearPickerViewIOS } from '@hero-design/react-native-month-year-picker';
+import DateTimePicker, {
+  DateTimePickerEvent,
+} from '@react-native-community/datetimepicker';
+import React, { useState } from 'react';
+import BottomSheet from '../../BottomSheet';
+import Button from '../../Button';
+import { useTheme } from '../../../theme';
+import { StyledPickerWrapper } from '../StyledDatePicker';
+import { DatePickerDialogProps } from './type';
+import { getDateValue } from '../hooks/useCalculateDate';
+
+const IOSDatePickerDialog = ({
+  label,
+  open,
+  onClose,
+  confirmLabel,
+  locale,
+  value,
+  minDate,
+  maxDate,
+  onChange,
+  testID,
+  variant = 'default',
+  supportedOrientations = ['portrait'],
+}: DatePickerDialogProps) => {
+  const theme = useTheme();
+  const [selectingDate, setSelectingDate] = useState<Date>(
+    getDateValue(value || new Date(), minDate, maxDate)
+  );
+
+  return (
+    <BottomSheet
+      testID={testID}
+      open={open}
+      onRequestClose={onClose}
+      header={label}
+      footer={
+        <Button
+          variant="text"
+          text={confirmLabel}
+          onPress={() => {
+            if (selectingDate) {
+              onChange(selectingDate);
+            }
+            onClose();
+          }}
+        />
+      }
+      supportedOrientations={supportedOrientations}
+    >
+      <StyledPickerWrapper>
+        {variant === 'month-year' ? (
+          <MonthYearPickerViewIOS
+            value={selectingDate}
+            locale={locale}
+            minimumDate={minDate}
+            textColor={theme.colors.onDefaultGlobalSurface}
+            maximumDate={maxDate}
+            onChange={(date: Date | undefined) => {
+              if (date) {
+                setSelectingDate(date);
+              }
+            }}
+            style={{ flex: 1 }}
+          />
+        ) : null}
+        {variant === 'default' ? (
+          <DateTimePicker
+            locale={locale}
+            testID="datePickerIOS"
+            value={selectingDate}
+            minimumDate={minDate}
+            maximumDate={maxDate}
+            mode="date"
+            onChange={(_: DateTimePickerEvent, date: Date | undefined) => {
+              if (date) {
+                setSelectingDate(date);
+              }
+            }}
+            display="spinner"
+            style={{ flex: 1 }}
+            textColor={theme.colors.onDefaultGlobalSurface}
+          />
+        ) : null}
+      </StyledPickerWrapper>
+    </BottomSheet>
+  );
+};
+
+export default IOSDatePickerDialog;

package/src/components/DatePicker/Dialog/__tests__/AndroidDialog.spec.tsx

@@ -0,0 +1,70 @@
+import { fireEvent } from '@testing-library/react-native';
+import React, { useState } from 'react';
+import { Button } from '../../../..';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import AndroidDialog, { AndroidDatePickerDialogProps } from '../AndroidDialog';
+
+const AndroidDialogExample = (
+  props: Omit<AndroidDatePickerDialogProps, 'open' | 'onClose'>
+) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onPress={() => setOpen(true)} text="Open" />
+      <AndroidDialog open={open} onClose={() => setOpen(false)} {...props} />
+    </>
+  );
+};
+
+describe('AndroidDialog', () => {
+  it('renders correctly', () => {
+    const onChange = jest.fn();
+
+    const { getByText, queryByTestId } = renderWithTheme(
+      <AndroidDialogExample
+        value={new Date('December 21, 1995')}
+        minDate={new Date('December 17, 1994')}
+        maxDate={new Date('December 17, 1996')}
+        onChange={onChange}
+        testID="android-dialog"
+      />
+    );
+
+    expect(queryByTestId('android-dialog')).toBeNull();
+
+    // Open date picker
+    fireEvent.press(getByText('Open'));
+    expect(queryByTestId('datePickerAndroid')).toBeVisible();
+
+    // Change date
+    fireEvent(
+      queryByTestId('datePickerAndroid'),
+      'onChange',
+      null,
+      new Date('December 17, 1995')
+    );
+
+    expect(onChange).toBeCalledWith(new Date('December 17, 1995'));
+  });
+
+  it('renders month-year picker', () => {
+    const onChangeSpy = jest.fn();
+    const { queryByText, getByText } = renderWithTheme(
+      <AndroidDialogExample
+        value={new Date('December 21, 1995')}
+        variant="month-year"
+        onChange={onChangeSpy}
+        testID="android-dialog"
+      />
+    );
+
+    fireEvent.press(getByText('Open'));
+    expect(queryByText('Android month year picker')).toBeDefined();
+
+    // mock change date
+    fireEvent.press(getByText('Android month year picker'));
+    expect(queryByText('Android month year picker')).toBeNull();
+    expect(onChangeSpy).toBeCalledWith(new Date('2019-09-01'));
+  });
+});

package/src/components/DatePicker/Dialog/__tests__/IOSDialog.spec.tsx

@@ -0,0 +1,114 @@
+import { fireEvent } from '@testing-library/react-native';
+import React, { useState } from 'react';
+import type { ModalProps } from 'react-native';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import IOSDialog from '../IOSDialog';
+import { setOrientation } from '../../../../testHelpers/utils';
+import { Button } from '../../../..';
+import { DatePickerDialogProps } from '../type';
+
+jest.mock('react-native/Libraries/Modal/Modal', () => {
+  const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
+  return (props: ModalProps) => <Modal {...props} />;
+});
+
+const IOSDialogExample = (
+  props: Omit<DatePickerDialogProps, 'open' | 'onClose'>
+) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onPress={() => setOpen(true)} text="Open" />
+      <IOSDialog open={open} onClose={() => setOpen(false)} {...props} />
+    </>
+  );
+};
+
+describe('IOSDialog', () => {
+  it('renders correctly', () => {
+    const onChange = jest.fn();
+    const { getByText, queryByTestId } = renderWithTheme(
+      <IOSDialogExample
+        value={new Date('December 21, 1995')}
+        label="Start date"
+        confirmLabel="Confirm"
+        onChange={onChange}
+        testID="ios-dialog"
+      />
+    );
+
+    expect(queryByTestId('ios-dialog')).toBeNull();
+
+    // Open date picker
+    fireEvent.press(getByText('Open'));
+    expect(queryByTestId('datePickerIOS')).toBeTruthy();
+
+    // Change date
+    fireEvent(
+      queryByTestId('datePickerIOS'),
+      'onChange',
+      null,
+      new Date('December 17, 1995')
+    );
+    fireEvent.press(getByText('Confirm'));
+
+    expect(onChange).toBeCalledWith(new Date('December 17, 1995'));
+  });
+
+  it('renders correctly in landscape mode', () => {
+    const onChange = jest.fn();
+    setOrientation('landscape');
+    const { getByText, queryByTestId } = renderWithTheme(
+      <IOSDialogExample
+        value={new Date('December 21, 1995')}
+        label="Start date"
+        confirmLabel="Confirm"
+        onChange={onChange}
+        supportedOrientations={['landscape']}
+        testID="ios-dialog"
+      />
+    );
+
+    expect(queryByTestId('ios-dialog')).toBeNull();
+
+    // Open date picker
+    fireEvent.press(getByText('Open'));
+    expect(queryByTestId('datePickerIOS')).toBeTruthy();
+
+    // Change date
+    fireEvent(
+      queryByTestId('datePickerIOS'),
+      'onChange',
+      null,
+      new Date('December 17, 1995')
+    );
+    fireEvent.press(getByText('Confirm'));
+
+    expect(onChange).toBeCalledWith(new Date('December 17, 1995'));
+  });
+
+  it('renders month-year picker', () => {
+    const onChangeSpy = jest.fn();
+    const { queryByText, getByText } = renderWithTheme(
+      <IOSDialogExample
+        value={new Date('December 21, 1995')}
+        variant="month-year"
+        label="Start date"
+        confirmLabel="Confirm"
+        onChange={onChangeSpy}
+        testID="ios-dialog"
+      />
+    );
+
+    fireEvent.press(getByText('Open'));
+    expect(getByText('Confirm')).toBeDefined();
+    expect(getByText('IOS month year picker')).toBeDefined();
+
+    // mock change date
+    fireEvent.press(getByText('IOS month year picker'));
+    fireEvent.press(getByText('Confirm'));
+    expect(queryByText('iOS month year picker')).toBeNull();
+    expect(onChangeSpy).toBeCalledWith(new Date('2019-09-01'));
+  });
+});

package/src/components/DatePicker/Dialog/type.ts

@@ -0,0 +1,50 @@
+export interface DatePickerDialogProps {
+  /**
+   * The value of the date picker.
+   */
+  value?: Date;
+  /**
+   * The minimum date of the date picker.
+   */
+  minDate?: Date;
+  /**
+   * The maximum date of the date picker.
+   */
+  maxDate?: Date;
+  /**
+   * The function to call when the date is changed.
+   */
+  onChange: (date: Date) => void;
+  /**
+   * The test ID of the date picker.
+   */
+  testID?: string;
+  /**
+   * Whether the dialog is open
+   */
+  open: boolean;
+  /**
+   * The function to call when the dialog is closed.
+   */
+  onClose: () => void;
+  /**
+   * The variant of the date picker.
+   */
+  variant?: 'default' | 'month-year';
+  /**
+   * [iOS only] The label of the DatePicker bottom sheet.
+   */
+  label: string;
+  /**
+   * [iOS only] The confirm label of the date picker bottom sheet.
+   */
+  confirmLabel: string;
+  /**
+   * [iOS only] The supported orientations of the date picker.
+   */
+  supportedOrientations?: ('portrait' | 'landscape')[];
+  /**
+   * [iOS only] The locale of the date picker.
+   */
+  locale?: string;
+}

package/src/components/DatePicker/__tests__/DatePicker.spec.tsx

@@ -3,7 +3,7 @@ import { Platform } from 'react-native';
 import { fireEvent } from '@testing-library/react-native';
 import DatePicker from '..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { Button } from '../../..';
+import { Button, Typography } from '../../..';
 
 describe('DatePicker', () => {
   it('renders DatePickerIOS when OS is iOS', () => {
@@ -146,4 +146,33 @@ describe('DatePicker', () => {
     fireEvent.press(getByText('Change max date'));
     expect(queryByDisplayValue('21/12/1994')).toBeTruthy();
   });
+
+  it.each`
+    OS           | variant
+    ${'ios'}     | ${'default'}
+    ${'android'} | ${'default'}
+    ${'ios'}     | ${'calendar'}
+    ${'android'} | ${'calendar'}
+  `(
+    'renders correct with custom value with OS=$OS and variant=$variant',
+    ({ OS, variant }) => {
+      Platform.OS = OS;
+      const { getByTestId } = renderWithTheme(
+        <DatePicker
+          value={new Date('1995-12-17')}
+          label="Start date"
+          confirmLabel="Confirm"
+          onChange={jest.fn()}
+          variant={variant}
+          renderSelectedValue={({ date }) => (
+            <Typography.Body testID="custom-value">
+              {date.toLocaleDateString()}
+            </Typography.Body>
+          )}
+        />
+      );
+
+      expect(getByTestId('custom-value')).toBeVisible();
+    }
+  );
 });

package/src/components/DatePicker/__tests__/DatePickerAndroid.spec.tsx

@@ -2,6 +2,11 @@ import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import DatePickerAndroid from '../DatePickerAndroid';
+import HeroDesignProvider from '../../HeroDesignProvider';
+import { theme } from '../../..';
+
+import enAU from '../../../locales/en_AU';
+import enCA from '../../../locales/en_CA';
 
 describe('DatePickerAndroid', () => {
   it('renders correctly', () => {
@@ -79,4 +84,26 @@ describe('DatePickerAndroid', () => {
     expect(queryByText('Android month year picker')).toBeNull();
     expect(onChangeSpy).toBeCalledWith(new Date('2019-09-01'));
   });
+
+  it.each`
+    locale  | expected
+    ${enAU} | ${'21/12/1995'}
+    ${enCA} | ${'Dec 21, 1995'}
+  `(
+    'renders correct format for $locale.lang locale',
+    ({ locale, expected }) => {
+      const { getByDisplayValue } = renderWithTheme(
+        <HeroDesignProvider theme={theme} locale={locale}>
+          <DatePickerAndroid
+            value={new Date('December 21, 1995')}
+            label="Start date"
+            confirmLabel="Confirm"
+            onChange={jest.fn()}
+          />
+        </HeroDesignProvider>
+      );
+
+      expect(getByDisplayValue(expected)).toBeVisible();
+    }
+  );
 });

package/src/components/DatePicker/__tests__/DatePickerCalendar.spec.tsx

@@ -4,6 +4,11 @@ import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import DatePickerCalendar from '../DatePickerCalendar';
 import { setOrientation } from '../../../testHelpers/utils';
+import HeroDesignProvider from '../../HeroDesignProvider';
+import { theme } from '../../..';
+
+import enAU from '../../../locales/en_AU';
+import enCA from '../../../locales/en_CA';
 
 jest.mock('react-native/Libraries/Modal/Modal', () => {
   const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
@@ -137,4 +142,26 @@ describe('DatePickerCalendar', () => {
       expect(queryByText('January 1993')).toBeDefined();
     }
   );
+
+  it.each`
+    locale  | expected
+    ${enAU} | ${'21/12/1995'}
+    ${enCA} | ${'Dec 21, 1995'}
+  `(
+    'renders correct format for $locale.lang locale',
+    ({ locale, expected }) => {
+      const { getByDisplayValue } = renderWithTheme(
+        <HeroDesignProvider theme={theme} locale={locale}>
+          <DatePickerCalendar
+            value={new Date('December 21, 1995')}
+            label="Start date"
+            confirmLabel="Confirm"
+            onChange={jest.fn()}
+          />
+        </HeroDesignProvider>
+      );
+
+      expect(getByDisplayValue(expected)).toBeVisible();
+    }
+  );
 });

package/src/components/DatePicker/__tests__/DatePickerIOS.spec.tsx

@@ -3,8 +3,13 @@ import React from 'react';
 import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import DatePickerIOS from '../DatePickerIOS';
-import { getDateValue } from '../useCalculateDate';
+import { getDateValue } from '../hooks/useCalculateDate';
 import { setOrientation } from '../../../testHelpers/utils';
+import HeroDesignProvider from '../../HeroDesignProvider';
+import { theme } from '../../..';
+
+import enAU from '../../../locales/en_AU';
+import enCA from '../../../locales/en_CA';
 
 jest.mock('react-native/Libraries/Modal/Modal', () => {
   const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
@@ -178,4 +183,26 @@ describe('DatePickerIOS', () => {
     expect(queryByText('iOS month year picker')).toBeNull();
     expect(onChangeSpy).toBeCalledWith(new Date('2019-09-01'));
   });
+
+  it.each`
+    locale  | expected
+    ${enAU} | ${'21/12/1995'}
+    ${enCA} | ${'Dec 21, 1995'}
+  `(
+    'renders correct format for $locale.lang locale',
+    ({ locale, expected }) => {
+      const { getByDisplayValue } = renderWithTheme(
+        <HeroDesignProvider theme={theme} locale={locale}>
+          <DatePickerIOS
+            value={new Date('December 21, 1995')}
+            label="Start date"
+            confirmLabel="Confirm"
+            onChange={jest.fn()}
+          />
+        </HeroDesignProvider>
+      );
+
+      expect(getByDisplayValue(expected)).toBeVisible();
+    }
+  );
 });

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -278,15 +278,24 @@ exports[`DatePickerAndroid renders correctly 1`] = `
         </View>
       </View>
     </View>
-    <Picker
-      display="default"
-      maximumDate={1996-12-17T00:00:00.000Z}
-      minimumDate={1994-12-17T00:00:00.000Z}
-      mode="date"
-      onChange={[Function]}
-      testID="datePickerAndroid"
-      value={1995-12-21T00:00:00.000Z}
-    />
+    <View
+      style={
+        [
+          {},
+          undefined,
+        ]
+      }
+    >
+      <Picker
+        display="default"
+        maximumDate={1996-12-17T00:00:00.000Z}
+        minimumDate={1994-12-17T00:00:00.000Z}
+        mode="date"
+        onChange={[Function]}
+        testID="datePickerAndroid"
+        value={1995-12-21T00:00:00.000Z}
+      />
+    </View>
   </View>
   <View
     pointerEvents="box-none"

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -548,6 +548,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                   >
                     <Picker
                       display="spinner"
+                      locale="en-AU"
                       mode="date"
                       onChange={[Function]}
                       style={

package/src/components/DatePicker/hooks/__tests__/useFormatDate.spec.ts

@@ -0,0 +1,61 @@
+import { renderHook } from '@testing-library/react-hooks';
+import formatDate from 'date-fns/fp/format';
+import useFormatDate from '../useFormatDate';
+import { useDateTimeFormat } from '../../../LocaleProvider/hooks';
+
+// Mock dependencies
+jest.mock('../../../LocaleProvider/hooks', () => ({
+  useDateTimeFormat: jest.fn(),
+}));
+
+jest.mock('date-fns/fp/format', () => {
+  return jest.fn((format, date) => {
+    return `Formatted: ${format}, Date: ${date.toISOString()}`;
+  });
+});
+
+describe('useFormatDate', () => {
+  const testDate = new Date('2023-04-15');
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useDateTimeFormat as jest.Mock).mockReturnValue({
+      localizeDateTime: () => 'MM/dd/yyyy',
+    });
+  });
+
+  it('should return empty string when no date is provided', () => {
+    const { result } = renderHook(() => useFormatDate({}));
+    expect(result.current.displayValue).toBe('');
+  });
+
+  it('should format date with provided format', () => {
+    const { result } = renderHook(() =>
+      useFormatDate({
+        value: testDate,
+        displayFormat: 'yyyy-MM-dd',
+      })
+    );
+
+    expect(formatDate).toHaveBeenCalledWith('yyyy-MM-dd', testDate);
+    expect(result.current.format).toBe('yyyy-MM-dd');
+  });
+
+  it('should use locale format when no displayFormat provided', () => {
+    const { result } = renderHook(() =>
+      useFormatDate({
+        value: testDate,
+        locale: 'en-US',
+      })
+    );
+
+    expect(formatDate).toHaveBeenCalledWith('MM/dd/yyyy', testDate);
+    expect(result.current.format).toBe('MM/dd/yyyy');
+  });
+
+  it('should use default format when no displayFormat or locale provided', () => {
+    const { result } = renderHook(() => useFormatDate({ value: testDate }));
+    expect(formatDate).toHaveBeenCalledWith('MM/dd/yyyy', testDate);
+    expect(result.current.format).toBe('MM/dd/yyyy');
+  });
+});

package/src/components/DatePicker/{useCalculateDate.tsx → hooks/useCalculateDate.tsx}

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import { DatePickerProps } from './types';
+import { DatePickerProps } from '../types';
 
 export const getDateValue = (
   value: Date,

package/src/components/DatePicker/hooks/useFormatDate.ts

@@ -0,0 +1,25 @@
+import formatDate from 'date-fns/fp/format';
+import { useDateTimeFormat } from '../../LocaleProvider/hooks';
+import { getDateFormat } from './utils';
+
+type UseFormatDateProps = {
+  displayFormat?: string;
+  locale?: string;
+  value?: Date;
+};
+
+const useFormatDate = ({
+  displayFormat,
+  locale,
+  value,
+}: UseFormatDateProps) => {
+  const { localizeDateTime } = useDateTimeFormat();
+
+  const format = getDateFormat({ displayFormat, locale, localizeDateTime });
+
+  const displayValue = value ? formatDate(format, value) : '';
+
+  return { displayValue, format };
+};
+
+export default useFormatDate;

package/src/components/DatePicker/hooks/utils.ts

@@ -0,0 +1,30 @@
+import { DateTimeFormats, LocaleCode } from '../../../types';
+import locales from '../../../locales';
+
+// Function to get the date format based on the displayFormat and locale,
+// if no displayFormat or locale is provided, use the default fullDate format
+export const getDateFormat = ({
+  displayFormat,
+  locale,
+  localizeDateTime,
+}: {
+  displayFormat?: string;
+  locale?: string;
+  localizeDateTime: (key: keyof DateTimeFormats) => string;
+}) => {
+  // Prioritise displayFormat
+  if (displayFormat) {
+    return displayFormat;
+  }
+
+  // If locale is provided, find the corresponding locale in the locales object
+  if (locale && locales[locale as LocaleCode]) {
+    const localeObject = locales[locale as LocaleCode];
+    if (localeObject) {
+      return localeObject.dateTimeFormats.fullDate;
+    }
+  }
+
+  // If no displayFormat or locale is provided, use the default fullDate format
+  return localizeDateTime('fullDate');
+};

package/src/components/DatePicker/index.tsx

@@ -4,6 +4,9 @@ import DatePickerAndroid from './DatePickerAndroid';
 import DatePickerCalendar from './DatePickerCalendar';
 import DatePickerIOS from './DatePickerIOS';
 import type { DatePickerProps } from './types';
+import IOSDatePickerDialog from './Dialog/IOSDialog';
+import AndroidDatePickerDialog from './Dialog/AndroidDialog';
+import { DatePickerDialogProps } from './Dialog/type';
 
 const DatePicker = ({ variant = 'default', ...props }: DatePickerProps) => {
   if (variant === 'calendar') {
@@ -16,4 +19,12 @@ const DatePicker = ({ variant = 'default', ...props }: DatePickerProps) => {
   return <DatePickerAndroid {...props} variant={variant} />;
 };
 
-export default DatePicker;
+const Dialog = ({ ...props }: DatePickerDialogProps) => {
+  if (Platform.OS === 'ios') {
+    return <IOSDatePickerDialog {...props} />;
+  }
+
+  return <AndroidDatePickerDialog {...props} />;
+};
+
+export default Object.assign(DatePicker, { Dialog });