@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

package/src/components/Calendar/__tests__/index.spec.tsx

@@ -92,4 +92,80 @@ describe('Calendar', () => {
     fireEvent.press(getByText('26'));
     expect(onChange).toBeCalledWith(new Date(2022, 10, 26));
   });
+
+  it('disables onTitlePress when onMonthChange is passed', () => {
+    const onTitlePress = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <Calendar
+        value={new Date(2022, 10, 5)}
+        visibleDate={new Date(2022, 10, 5)}
+        onTitlePress={onTitlePress}
+        minDate={new Date(2022, 10, 3)}
+        maxDate={new Date(2022, 10, 27)}
+        onMonthChange={jest.fn()}
+      />
+    );
+
+    fireEvent.press(getByTestId('calendar-month-picker'));
+    expect(onTitlePress).toHaveBeenCalledTimes(0);
+  });
+
+  it.each`
+    platform
+    ${'ios'}
+    ${'android'}
+  `('renders correct picker on $platform', ({ platform: mockedPlatform }) => {
+    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+      OS: mockedPlatform,
+      select: () => null,
+    }));
+
+    const { getByTestId, queryByText } = renderWithTheme(
+      <Calendar
+        value={new Date(2022, 10, 5)}
+        visibleDate={new Date(2022, 10, 5)}
+        minDate={new Date(2022, 10, 3)}
+        maxDate={new Date(2022, 10, 27)}
+        onMonthChange={jest.fn()}
+      />
+    );
+
+    fireEvent.press(getByTestId('calendar-month-picker'));
+
+    // Pickers are mocked at packages/rn/testUtils/setup.tsx
+    if (mockedPlatform === 'ios') {
+      expect(queryByText('IOS picker')).toBeDefined();
+    } else {
+      expect(queryByText('Android picker')).toBeDefined();
+    }
+  });
+
+  it.each`
+    platform
+    ${'ios'}
+    ${'android'}
+  `(
+    'onToggleMonthPicker is called when toggling month year picker on $platform',
+    ({ platform: mockedPlatform }) => {
+      jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+        OS: mockedPlatform,
+        select: () => null,
+      }));
+
+      const onToggleMonthPicker = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <Calendar
+          value={new Date(2022, 10, 5)}
+          visibleDate={new Date(2022, 10, 5)}
+          minDate={new Date(2022, 10, 3)}
+          maxDate={new Date(2022, 10, 27)}
+          onMonthChange={jest.fn()}
+          onToggleMonthPicker={onToggleMonthPicker}
+        />
+      );
+
+      fireEvent.press(getByTestId('calendar-month-picker'));
+      expect(onToggleMonthPicker).toHaveBeenCalled();
+    }
+  );
 });

package/src/components/Calendar/index.tsx

@@ -1,7 +1,17 @@
-import React from 'react';
+import {
+  MonthYearPickerDialogueAndroid,
+  MonthYearPickerViewIOS,
+} from '@hero-design/react-native-month-year-picker';
 import format from 'date-fns/fp/format';
+import React from 'react';
+import { Platform, TouchableOpacity } from 'react-native';
+import { useTheme } from '../../theme';
+import { noop } from '../../utils/functions';
+import Box from '../Box';
 import ContentNavigator from '../ContentNavigator';
+import Icon from '../Icon';
 import Typography from '../Typography';
+import CalendarRowItem from './CalendarRowItem';
 import {
   StyledCalendarDayNameCell,
   StyledCalendarHeader,
@@ -10,9 +20,7 @@ import {
   StyledContainer,
   StyledDisabledCalendarRowItem,
 } from './StyledCalendar';
-import CalendarRowItem from './CalendarRowItem';
 import { getValidDate, initArray, isEqDate } from './helpers';
-import { noop } from '../../utils/functions';
 
 const DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
 // Sunday first column => 0
@@ -68,6 +76,22 @@ export interface CalendarProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Callback when header month is changed, passing this prop will disable onTitlePress.
+   */
+  onMonthChange?: (date: Date) => void;
+  /*
+   * Callback when month picker is toggled.
+   */
+  onToggleMonthPicker?: (visible: boolean) => void;
+  /**
+   * Label for the confirm button of the month picker, Android only.
+   */
+  monthPickerConfirmLabel?: string;
+  /**
+   * Label for the cancel button of the month picker, Android only.
+   */
+  monthPickerCancelLabel?: string;
 }
 
 const Calendar = ({
@@ -81,7 +105,12 @@ const Calendar = ({
   maxDate,
   markedDates = [],
   testID,
+  onMonthChange = noop,
+  onToggleMonthPicker = noop,
+  monthPickerConfirmLabel,
+  monthPickerCancelLabel,
 }: CalendarProps) => {
+  const theme = useTheme();
   const currentMonth = visibleDate.getMonth();
   const currentYear = visibleDate.getFullYear();
   const now = new Date();
@@ -92,6 +121,10 @@ const Calendar = ({
     }),
     {}
   );
+  const [monthPickerVisible, setMonthPickerVisible] = React.useState(false);
+  const [contentHeight, setContentHeight] = React.useState(0);
+
+  const useMonthPicker = onMonthChange !== noop;
 
   const firstDateOfMonth = new Date(currentYear, currentMonth, 1);
   const lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
@@ -152,70 +185,148 @@ const Calendar = ({
     <StyledContainer testID={testID}>
       <StyledCalendarHeader>
         <ContentNavigator
-          value={format('MMMM yyyy', visibleDate)}
+          value={
+            !useMonthPicker ? (
+              format('MMMM yyyy', visibleDate)
+            ) : (
+              <TouchableOpacity
+                testID="calendar-month-picker"
+                onPress={() => {
+                  onToggleMonthPicker?.(!monthPickerVisible);
+                  setMonthPickerVisible(!monthPickerVisible);
+                }}
+              >
+                <Box
+                  flexDirection="row"
+                  justifyContent="center"
+                  alignItems="center"
+                >
+                  <Typography.Title
+                    level="h5"
+                    style={{
+                      textAlign: 'center',
+                      marginRight:
+                        theme.__hd__.calendar.space.headerMarginRight,
+                    }}
+                  >
+                    {format('MMMM yyyy', visibleDate)}
+                  </Typography.Title>
+
+                  <Icon
+                    icon={monthPickerVisible ? 'arrow-up' : 'arrow-down'}
+                    size="small"
+                  />
+                </Box>
+              </TouchableOpacity>
+            )
+          }
           onPreviousPress={onPreviousPress}
           onNextPress={onNextPress}
-          onPress={onTitlePress}
+          onPress={useMonthPicker ? undefined : onTitlePress}
           previousDisabled={disablePrevButton}
           nextDisabled={disableNextButton}
           fontSize="large"
         />
       </StyledCalendarHeader>
-      <StyledCalendarRow>
-        {DAYS_OF_WEEK.map((day) => (
-          <StyledCalendarRowItem key={day}>
-            <StyledCalendarDayNameCell>
-              <Typography.Text>{day}</Typography.Text>
-            </StyledCalendarDayNameCell>
-          </StyledCalendarRowItem>
-        ))}
-      </StyledCalendarRow>
-      <StyledCalendarRow>
-        {daysOfPreviousMonth.map((date) =>
-          date ? (
-            <CalendarRowItem
-              key={date.toDateString()}
-              date={date}
-              isCurrent={isEqDate(now, date)}
-              isSelected={isEqDate(value, date)}
-              onPress={() => onChange?.(date)}
-              textIntent="subdued"
-              marked={parsedMaskedDate[date.toDateString()]}
-            />
-          ) : (
-            <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
-          )
-        )}
-        {daysOfCurrentMonth.map((date) =>
-          date ? (
-            <CalendarRowItem
-              key={date.toDateString()}
-              date={date}
-              isCurrent={isEqDate(now, date)}
-              isSelected={isEqDate(value, date)}
-              onPress={() => onChange?.(date)}
-              marked={parsedMaskedDate[date.toDateString()]}
-            />
-          ) : (
-            <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
-          )
-        )}
-        {daysOfNextMonth.map((date) =>
-          date ? (
-            <CalendarRowItem
-              key={date.toDateString()}
-              date={date}
-              isCurrent={isEqDate(now, date)}
-              isSelected={isEqDate(value, date)}
-              onPress={() => onChange?.(date)}
-              textIntent="subdued"
-              marked={parsedMaskedDate[date.toDateString()]}
+      {Platform.OS === 'ios' && monthPickerVisible ? (
+        <Box style={{ overflow: 'hidden' }}>
+          <MonthYearPickerViewIOS
+            value={value}
+            minimumDate={minDate}
+            maximumDate={maxDate}
+            onChange={onMonthChange}
+            style={{
+              height:
+                contentHeight +
+                theme.__hd__.calendar.space.iosPickerMarginVertical * 2,
+              marginVertical:
+                -theme.__hd__.calendar.space.iosPickerMarginVertical,
+            }}
+          />
+        </Box>
+      ) : (
+        <Box
+          onLayout={
+            Platform.OS === 'ios'
+              ? (e) => setContentHeight(e.nativeEvent.layout.height)
+              : undefined
+          }
+        >
+          <StyledCalendarRow>
+            {DAYS_OF_WEEK.map((day) => (
+              <StyledCalendarRowItem key={day}>
+                <StyledCalendarDayNameCell>
+                  <Typography.Body variant="small">{day}</Typography.Body>
+                </StyledCalendarDayNameCell>
+              </StyledCalendarRowItem>
+            ))}
+          </StyledCalendarRow>
+          <StyledCalendarRow>
+            {daysOfPreviousMonth.map((date) =>
+              date ? (
+                <CalendarRowItem
+                  key={date.toDateString()}
+                  date={date}
+                  isCurrent={isEqDate(now, date)}
+                  isSelected={isEqDate(value, date)}
+                  onPress={() => onChange?.(date)}
+                  textIntent="subdued"
+                  marked={parsedMaskedDate[date.toDateString()]}
+                />
+              ) : (
+                <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
+              )
+            )}
+            {daysOfCurrentMonth.map((date) =>
+              date ? (
+                <CalendarRowItem
+                  key={date.toDateString()}
+                  date={date}
+                  isCurrent={isEqDate(now, date)}
+                  isSelected={isEqDate(value, date)}
+                  onPress={() => onChange?.(date)}
+                  marked={parsedMaskedDate[date.toDateString()]}
+                />
+              ) : (
+                <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
+              )
+            )}
+            {daysOfNextMonth.map((date) =>
+              date ? (
+                <CalendarRowItem
+                  key={date.toDateString()}
+                  date={date}
+                  isCurrent={isEqDate(now, date)}
+                  isSelected={isEqDate(value, date)}
+                  onPress={() => onChange?.(date)}
+                  textIntent="subdued"
+                  marked={parsedMaskedDate[date.toDateString()]}
+                />
+              ) : (
+                <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
+              )
+            )}
+          </StyledCalendarRow>
+
+          {Platform.OS === 'android' && monthPickerVisible && (
+            <MonthYearPickerDialogueAndroid
+              doneButtonLabel={monthPickerConfirmLabel}
+              cancelButtonLabel={monthPickerCancelLabel}
+              value={value}
+              minimumDate={minDate}
+              maximumDate={maxDate}
+              onChange={(action, date) => {
+                setMonthPickerVisible(false);
+                onToggleMonthPicker?.(false);
+
+                if (action === 'dateSetAction' && !!date) {
+                  onMonthChange(date);
+                }
+              }}
             />
-          ) : (
-            <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
-          )
-        )}
-      </StyledCalendarRow>
+          )}
+        </Box>
+      )}
     </StyledContainer>
   );
 };