@hero-design/rn 8.96.0 → 8.97.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.96.0",
+  "version": "8.97.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -1,10 +1,8 @@
-import DateTimePicker from '@react-native-community/datetimepicker';
 import React, { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
-import { MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
-import { useTheme } from '../../theme';
 import TextInput from '../TextInput';
+import AndroidDatePickerDialog from './Dialog/AndroidDialog';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
 import type { DatePickerProps } from './types';
@@ -43,9 +41,6 @@ const DatePickerAndroid = ({
 
   useCalculateDate({ minDate, maxDate, onChange, value });
 
-  const pickerInitValue = value || new Date();
-  const theme = useTheme();
-
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="datePickerInputAndroid">
@@ -74,36 +69,15 @@ const DatePickerAndroid = ({
           }
         />
       </View>
-      {open && variant === 'month-year' ? (
-        <MonthYearPickerDialogueAndroid
-          themeVariant={theme.themeMode === 'dark' ? 'dark' : 'light'}
-          value={value}
-          minimumDate={minDate}
-          maximumDate={maxDate}
-          onChange={(action, date) => {
-            setOpen(false);
-            if (action === 'dateSetAction' && !!date) {
-              onChange(date);
-            }
-          }}
-        />
-      ) : null}
-      {open && variant === 'default' ? (
-        <DateTimePicker
-          testID="datePickerAndroid"
-          mode="date"
-          value={pickerInitValue}
-          minimumDate={minDate}
-          maximumDate={maxDate}
-          display="default"
-          onChange={(_: any, date: Date | undefined) => {
-            setOpen(false);
-            if (date) {
-              onChange(date);
-            }
-          }}
-        />
-      ) : null}
+      <AndroidDatePickerDialog
+        open={open}
+        onClose={() => setOpen(false)}
+        value={value}
+        minDate={minDate}
+        maxDate={maxDate}
+        onChange={onChange}
+        variant={variant}
+      />
     </TouchableOpacity>
   );
 };

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -1,16 +1,11 @@
-import DateTimePicker from '@react-native-community/datetimepicker';
 import React, { useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
-import { MonthYearPickerViewIOS } from '@hero-design/react-native-month-year-picker';
-import { useTheme } from '../../theme';
-import BottomSheet from '../BottomSheet';
-import Button from '../Button';
 import { useLocale } from '../LocaleProvider/hooks';
 import TextInput from '../TextInput';
-import useCalculateDate, { getDateValue } from './hooks/useCalculateDate';
+import IOSDatePickerDialog from './Dialog/IOSDialog';
+import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
-import { StyledPickerWrapper } from './StyledDatePicker';
 import type { DatePickerProps } from './types';
 
 type DatePickerIOSProps = Omit<
@@ -39,10 +34,6 @@ const DatePickerIOS = ({
   locale,
   renderSelectedValue,
 }: DatePickerIOSProps) => {
-  const theme = useTheme();
-  const [selectingDate, setSelectingDate] = useState<Date>(
-    getDateValue(value || new Date(), minDate, maxDate)
-  );
   const [open, setOpen] = useState(false);
   const { lang: defaultLocale } = useLocale();
   const { displayValue, format } = useFormatDate({
@@ -81,60 +72,19 @@ const DatePickerIOS = ({
           }
         />
       </View>
-      <BottomSheet
+      <IOSDatePickerDialog
+        value={value}
+        onChange={onChange}
         open={open}
-        onRequestClose={() => setOpen(false)}
-        header={label}
-        footer={
-          <Button
-            variant="text"
-            text={confirmLabel}
-            onPress={() => {
-              if (selectingDate) {
-                onChange(selectingDate);
-              }
-              setOpen(false);
-            }}
-          />
-        }
+        onClose={() => setOpen(false)}
+        confirmLabel={confirmLabel}
+        locale={locale || defaultLocale}
         supportedOrientations={supportedOrientations}
-      >
-        <StyledPickerWrapper>
-          {variant === 'month-year' ? (
-            <MonthYearPickerViewIOS
-              value={value}
-              locale={locale || defaultLocale}
-              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 || defaultLocale}
-              testID="datePickerIOS"
-              value={selectingDate}
-              minimumDate={minDate}
-              maximumDate={maxDate}
-              mode="date"
-              onChange={(_: any, date: Date | undefined) => {
-                if (date) {
-                  setSelectingDate(date);
-                }
-              }}
-              display="spinner"
-              style={{ flex: 1 }}
-              textColor={theme.colors.onDefaultGlobalSurface}
-            />
-          ) : null}
-        </StyledPickerWrapper>
-      </BottomSheet>
+        variant={variant}
+        label={label}
+        minDate={minDate}
+        maxDate={maxDate}
+      />
     </TouchableOpacity>
   );
 };

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

@@ -0,0 +1,68 @@
+import React from 'react';
+import DateTimePicker, {
+  DateTimePickerEvent,
+} from '@react-native-community/datetimepicker';
+import { MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
+import { DatePickerDialogProps } from './type';
+import { useTheme } from '../../../theme';
+import Box from '../../Box';
+
+export type AndroidDatePickerDialogProps = Omit<
+  DatePickerDialogProps,
+  'supportedOrientations' | 'confirmLabel' | 'label' | 'locale'
+>;
+
+const AndroidDatePickerDialog = ({
+  open,
+  onClose,
+  value,
+  minDate,
+  maxDate,
+  onChange,
+  testID,
+  variant = 'default',
+}: AndroidDatePickerDialogProps) => {
+  const theme = useTheme();
+  if (!open) return null;
+
+  const pickerInitValue = value || new Date();
+
+  return (
+    <Box testID={testID}>
+      {open && variant === 'month-year' ? (
+        <Box testID={testID}>
+          <MonthYearPickerDialogueAndroid
+            themeVariant={theme.themeMode === 'dark' ? 'dark' : 'light'}
+            value={value}
+            minimumDate={minDate}
+            maximumDate={maxDate}
+            onChange={(action, date) => {
+              onClose();
+              if (action === 'dateSetAction' && !!date) {
+                onChange(date);
+              }
+            }}
+          />
+        </Box>
+      ) : null}
+      {open && variant === 'default' ? (
+        <DateTimePicker
+          testID="datePickerAndroid"
+          mode="date"
+          value={pickerInitValue}
+          minimumDate={minDate}
+          maximumDate={maxDate}
+          display="default"
+          onChange={(_: DateTimePickerEvent, date: Date | undefined) => {
+            onClose();
+            if (date) {
+              onChange(date);
+            }
+          }}
+        />
+      ) : null}
+    </Box>
+  );
+};
+
+export default AndroidDatePickerDialog;

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__/__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/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 });