@hero-design/rn 7.12.1 → 7.14.0

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

@@ -0,0 +1,99 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import Calendar from '..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+Date.now = jest.fn(() => new Date(2022, 10, 2).valueOf());
+
+describe('Calendar', () => {
+  it('renders correctly', () => {
+    const onChange = jest.fn();
+    const onTitlePress = jest.fn();
+    const onPreviousPress = jest.fn();
+    const onNextPress = jest.fn();
+    const { getByText, queryAllByTestId, queryByTestId } = renderWithTheme(
+      <Calendar
+        value={new Date(2022, 10, 5)}
+        visibleDate={new Date(2022, 10, 5)}
+        onChange={onChange}
+        onTitlePress={onTitlePress}
+        onPreviousPress={onPreviousPress}
+        onNextPress={onNextPress}
+        markedDates={[
+          new Date(2022, 10, 5),
+          new Date(2022, 10, 6),
+          new Date(2022, 10, 7),
+          new Date(2022, 10, 8),
+          new Date(2022, 10, 9),
+        ]}
+      />
+    );
+
+    expect(getByText('November 2022')).toBeTruthy();
+    expect(getByText('Mo')).toBeTruthy();
+    expect(getByText('Tu')).toBeTruthy();
+    expect(getByText('We')).toBeTruthy();
+    expect(getByText('Th')).toBeTruthy();
+    expect(getByText('Fr')).toBeTruthy();
+    expect(getByText('Sa')).toBeTruthy();
+    expect(getByText('Su')).toBeTruthy();
+
+    expect(queryAllByTestId('calendar-date-cell')).toHaveLength(42);
+    expect(queryAllByTestId('calendar-disabled-cell')).toHaveLength(0);
+    expect(queryAllByTestId('calendar-date-mark')).toHaveLength(5);
+
+    fireEvent.press(getByText('28'));
+    expect(onChange).toBeCalledWith(new Date(2022, 10, 28));
+
+    fireEvent.press(queryByTestId('previous-icon-button'));
+    expect(onPreviousPress).toBeCalled();
+
+    fireEvent.press(queryByTestId('next-icon-button'));
+    expect(onNextPress).toBeCalled();
+
+    fireEvent.press(getByText('November 2022'));
+    expect(onTitlePress).toBeCalled();
+  });
+
+  it('renders correctly with minDate and maxDate', () => {
+    const onChange = jest.fn();
+    const onTitlePress = jest.fn();
+    const onPreviousPress = jest.fn();
+    const onNextPress = jest.fn();
+    const {
+      getByText,
+      queryByText,
+      queryAllByTestId,
+      queryByTestId,
+    } = renderWithTheme(
+      <Calendar
+        value={new Date(2022, 10, 5)}
+        visibleDate={new Date(2022, 10, 5)}
+        onChange={onChange}
+        onTitlePress={onTitlePress}
+        onPreviousPress={onPreviousPress}
+        onNextPress={onNextPress}
+        minDate={new Date(2022, 10, 3)}
+        maxDate={new Date(2022, 10, 27)}
+      />
+    );
+
+    expect(queryAllByTestId('calendar-date-cell')).toHaveLength(25);
+    expect(queryAllByTestId('calendar-disabled-cell')).toHaveLength(17);
+
+    expect(queryByText('2')).toBeNull();
+    expect(queryByText('28')).toBeNull();
+
+    fireEvent.press(queryByTestId('previous-icon-button'));
+    expect(onPreviousPress).not.toBeCalled();
+
+    fireEvent.press(queryByTestId('next-icon-button'));
+    expect(onNextPress).not.toBeCalled();
+
+    fireEvent.press(queryAllByTestId('calendar-disabled-cell')[0]);
+    expect(onChange).not.toBeCalled();
+
+    fireEvent.press(getByText('26'));
+    expect(onChange).toBeCalledWith(new Date(2022, 10, 26));
+  });
+});

package/src/components/Calendar/helpers.ts

@@ -0,0 +1,29 @@
+export const initArray = <T>(length: number, func: (value: number) => T): T[] =>
+  Array.from(Array(length)).map((_, index) => func(index));
+
+export const isEqDate = (dateA?: Date, dateB?: Date) =>
+  dateA?.toDateString() === dateB?.toDateString();
+
+export const getValidDate = (
+  date: Date,
+  minDate?: Date,
+  maxDate?: Date
+): Date | undefined => {
+  if (minDate === undefined && maxDate === undefined) {
+    return date;
+  }
+
+  if (minDate !== undefined && maxDate === undefined) {
+    return date >= minDate ? date : undefined;
+  }
+
+  if (minDate === undefined && maxDate !== undefined) {
+    return date <= maxDate ? date : undefined;
+  }
+
+  if (minDate !== undefined && maxDate !== undefined) {
+    return date >= minDate && date <= maxDate ? date : undefined;
+  }
+
+  return undefined;
+};

package/src/components/Calendar/index.tsx

@@ -0,0 +1,217 @@
+import React from 'react';
+import format from 'date-fns/fp/format';
+import ContentNavigator from '../ContentNavigator';
+import Typography from '../Typography';
+import {
+  StyledCalendarDayNameCell,
+  StyledCalendarHeader,
+  StyledCalendarRow,
+  StyledCalendarRowItem,
+  StyledContainer,
+  StyledDisabledCalendarRowItem,
+} from './StyledCalendar';
+import CalendarRowItem from './CalendarRowItem';
+import { getValidDate, initArray, isEqDate } from './helpers';
+
+const DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+// Sunday first column => 0
+// Sunday last column  => 1
+const WEEK_INDEX_OFFSET = 1;
+const SUNDAY_INDEX = 6;
+
+// Always render 7 rows x 6 items for consistent layout
+const TOTAL_DATES_ITEMS = 7 * 6;
+
+type ParsedMaskedDate = {
+  [key: string]: boolean;
+};
+
+export interface CalendarProps {
+  /**
+   * Selected date value.
+   */
+  value?: Date;
+  /**
+   * Visible date of month that calendar opens to display. Default is now.
+   */
+  visibleDate: Date;
+  /**
+   * Mininum date. Restrict the range of possible date values.
+   */
+  minDate?: Date;
+  /**
+   * Maximum date. Restrict the range of possible date values.
+   */
+  maxDate?: Date;
+  /**
+   * Callback is called when selected date value is changed.
+   */
+  onChange?: (date: Date) => void;
+  /**
+   * Handler to be called when the user taps the previous button.
+   */
+  onPreviousPress?: () => void;
+  /**
+   * Handler to be called when the user taps the next button.
+   */
+  onNextPress?: () => void;
+  /**
+   * Handler to be called when the user taps the title.
+   */
+  onTitlePress?: () => void;
+  /**
+   * Mark dates to display on calendar..
+   */
+  markedDates?: Date[];
+}
+
+const Calendar = ({
+  value,
+  visibleDate,
+  onChange,
+  onPreviousPress = () => {},
+  onNextPress = () => {},
+  onTitlePress = () => {},
+  minDate,
+  maxDate,
+  markedDates = [],
+}: CalendarProps) => {
+  const currentMonth = visibleDate.getMonth();
+  const currentYear = visibleDate.getFullYear();
+  const now = new Date();
+  const parsedMaskedDate: ParsedMaskedDate = markedDates.reduce(
+    (current, markedDate) => ({
+      ...current,
+      [markedDate.toDateString()]: true,
+    }),
+    {}
+  );
+
+  const firstDateOfMonth = new Date(currentYear, currentMonth, 1);
+  const lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
+
+  const lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
+
+  // Index of day in week is shifted by 1 due to Sunday is the last column
+  const firstDayWeekIndexOfMonth =
+    firstDateOfMonth.getDay() === 0
+      ? SUNDAY_INDEX
+      : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET;
+
+  const lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
+  const lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
+
+  const daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, index => {
+    const reversedIndex = firstDayWeekIndexOfMonth - index - 1;
+    const count = lastDayIndexOfPreviousMonth - reversedIndex;
+    return getValidDate(
+      new Date(currentYear, currentMonth - 1, count),
+      minDate,
+      maxDate
+    );
+  });
+
+  const daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, index =>
+    getValidDate(
+      new Date(currentYear, currentMonth, index + 1),
+      minDate,
+      maxDate
+    )
+  );
+
+  const daysOfNextMonth = initArray(
+    TOTAL_DATES_ITEMS -
+      (daysOfPreviousMonth.length + daysOfCurrentMonth.length),
+    index =>
+      getValidDate(
+        new Date(currentYear, currentMonth + 1, index + 1),
+        minDate,
+        maxDate
+      )
+  );
+
+  const disablePrevButton =
+    minDate === undefined
+      ? false
+      : !daysOfPreviousMonth.some(date => date !== undefined) &&
+        minDate >= firstDateOfMonth;
+
+  const disableNextButton =
+    maxDate === undefined
+      ? false
+      : !daysOfNextMonth.some(date => date !== undefined) ||
+        maxDate <= lastDateOfMonth;
+
+  return (
+    <StyledContainer>
+      <StyledCalendarHeader>
+        <ContentNavigator
+          value={format('MMMM yyyy', visibleDate)}
+          onPreviousPress={onPreviousPress}
+          onNextPress={onNextPress}
+          onPress={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()]}
+            />
+          ) : (
+            <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
+          )
+        )}
+      </StyledCalendarRow>
+    </StyledContainer>
+  );
+};
+
+export default Calendar;

package/src/components/Collapse/index.tsx

@@ -13,7 +13,7 @@ import {
 } from './StyledCollapse';
 import { usePrevious } from '../../utils/hooks';
 
-interface CollapseProps extends ViewProps {
+export interface CollapseProps extends ViewProps {
   /*
    * The collapse's content.
    */
@@ -39,35 +39,33 @@ const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
   const previousOpenState = usePrevious(open);
 
   useEffect(() => {
-    if (open !== previousOpenState && previousOpenState !== undefined) {
+    if (
+      (open !== previousOpenState && previousOpenState !== undefined) ||
+      open
+    ) {
       Animated.timing(collapseAnim, {
         toValue: open ? contentHeight : 0,
-        easing: Easing.inOut(Easing.ease),
+        easing: Easing.inOut(Easing.cubic),
         useNativeDriver: false,
       }).start();
     }
   }, [open, previousOpenState, contentHeight]);
 
-  const fetchMaxHeight = useCallback(
-    ({ height }) => {
-      setContentHeight(height);
-    },
-    [contentHeight]
-  );
+  const fetchMaxHeight = useCallback(({ height }) => {
+    setContentHeight(height);
+  }, []);
 
   return (
     <StyledWrapper
-      style={[
-        style,
-        {
-          height: collapseAnim,
-        },
-      ]}
+      style={{
+        height: collapseAnim,
+      }}
       testID={testID}
     >
       <StyledHiddenWrapper>
         <StyledChildWrapper
           onLayout={event => fetchMaxHeight(event.nativeEvent.layout)}
+          style={style}
         >
           {children}
         </StyledChildWrapper>

package/src/components/ContentNavigator/index.tsx

@@ -28,6 +28,10 @@ interface ContentNavigatorProps {
    * Whether the next icon is disabled.
    */
   nextDisabled?: boolean;
+  /**
+   * Content font size.
+   */
+  fontSize?: 'medium' | 'large';
   /**
    * Additional style.
    */
@@ -45,6 +49,7 @@ function ContentNavigator({
   value,
   previousDisabled = false,
   nextDisabled = false,
+  fontSize = 'medium',
   testID,
   style,
 }: ContentNavigatorProps) {
@@ -58,6 +63,7 @@ function ContentNavigator({
       />
       <Value
         fontWeight="semi-bold"
+        fontSize={fontSize}
         onPress={onPress}
         testID="content-navigator-value"
       >

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -0,0 +1,59 @@
+import DateTimePicker from '@react-native-community/datetimepicker';
+import React, { useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import formatDate from 'date-fns/fp/format';
+
+import TextInput from '../TextInput';
+import { DatePickerProps } from './types';
+
+const DatePickerAndroid = ({
+  value,
+  label,
+  placeholder,
+  onChange,
+  displayFormat = 'dd/MM/yyyy',
+  disabled = false,
+  required,
+  error,
+  style,
+  testID,
+}: DatePickerProps) => {
+  const [open, setOpen] = useState(false);
+
+  const displayValue = value ? formatDate(displayFormat, value) : '';
+  const pickerInitValue = value || new Date();
+
+  return (
+    <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
+      <View pointerEvents="none" testID="datePickerInputAndroid">
+        <TextInput
+          label={label}
+          value={displayValue}
+          suffix="calendar-dates-outlined"
+          placeholder={placeholder || displayFormat}
+          disabled={disabled}
+          error={error}
+          required={required}
+          style={style}
+          testID={testID}
+        />
+      </View>
+      {open ? (
+        <DateTimePicker
+          testID="datePickerAndroid"
+          mode="date"
+          value={pickerInitValue}
+          display="default"
+          onChange={(_: any, date: Date | undefined) => {
+            setOpen(false);
+            if (date) {
+              onChange(date);
+            }
+          }}
+        />
+      ) : null}
+    </TouchableOpacity>
+  );
+};
+
+export default DatePickerAndroid;

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -0,0 +1,87 @@
+import DateTimePicker from '@react-native-community/datetimepicker';
+import React, { useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import formatDate from 'date-fns/fp/format';
+
+import BottomSheet from '../BottomSheet';
+import TextInput from '../TextInput';
+import Typography from '../Typography';
+import { StyledPickerWrapper } from './StyledDatePicker';
+import { DatePickerProps } from './types';
+
+const DatePickerIOS = ({
+  value,
+  label,
+  placeholder,
+  onChange,
+  confirmLabel,
+  displayFormat = 'dd/MM/yyyy',
+  disabled = false,
+  required,
+  error,
+  style,
+  testID,
+}: DatePickerProps) => {
+  const [selectingDate, setSelectingDate] = useState<Date | undefined>(value);
+  const [open, setOpen] = useState(false);
+
+  const displayValue = value ? formatDate(displayFormat, value) : '';
+
+  return (
+    <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
+      <View pointerEvents="none" testID="datePickerInputIOS">
+        <TextInput
+          label={label}
+          value={displayValue}
+          suffix="calendar-dates-outlined"
+          placeholder={placeholder || displayFormat}
+          disabled={disabled}
+          error={error}
+          required={required}
+          testID={testID}
+          style={style}
+        />
+      </View>
+      <BottomSheet
+        open={open}
+        onRequestClose={() => setOpen(false)}
+        header={label}
+        footer={
+          <TouchableOpacity
+            onPress={() => {
+              if (selectingDate) {
+                onChange(selectingDate);
+              }
+              setOpen(false);
+            }}
+          >
+            <Typography.Text
+              fontSize="large"
+              fontWeight="semi-bold"
+              intent="primary"
+            >
+              {confirmLabel}
+            </Typography.Text>
+          </TouchableOpacity>
+        }
+      >
+        <StyledPickerWrapper>
+          <DateTimePicker
+            testID="datePickerIOS"
+            value={selectingDate || new Date()}
+            mode="date"
+            onChange={(_: any, date: Date | undefined) => {
+              if (date) {
+                setSelectingDate(date);
+              }
+            }}
+            display="spinner"
+            style={{ flex: 1 }}
+          />
+        </StyledPickerWrapper>
+      </BottomSheet>
+    </TouchableOpacity>
+  );
+};
+
+export default DatePickerIOS;

package/src/components/DatePicker/StyledDatePicker.tsx

@@ -0,0 +1,8 @@
+import styled from '@emotion/native';
+import { View, ViewProps } from 'react-native';
+
+const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
+  height: theme.__hd__.datePicker.sizes.height,
+}));
+
+export { StyledPickerWrapper };

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import DatePicker from '..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+describe('DatePicker', () => {
+  it('renders DatePickerIOS when OS is iOS', () => {
+    Platform.OS = 'ios';
+    const { getByTestId } = renderWithTheme(
+      <DatePicker
+        label="Start date"
+        value={new Date('December 17, 1995')}
+        confirmLabel="Confirm"
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('datePickerInputIOS')).toBeDefined();
+  });
+
+  it('renders DatePickerAndroid when OS is android', () => {
+    Platform.OS = 'android';
+    const { getByTestId } = renderWithTheme(
+      <DatePicker
+        label="Start date"
+        value={new Date('December 17, 1995')}
+        confirmLabel="Confirm"
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('datePickerInputAndroid')).toBeDefined();
+  });
+});

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

@@ -0,0 +1,39 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import DatePickerAndroid from '../DatePickerAndroid';
+
+describe('DatePickerAndroid', () => {
+  it('renders correctly', () => {
+    const onChange = jest.fn();
+
+    const { getByText, queryByTestId, toJSON } = renderWithTheme(
+      <DatePickerAndroid
+        value={new Date('December 21, 1995')}
+        label="Start date"
+        confirmLabel="Confirm"
+        onChange={onChange}
+      />
+    );
+
+    expect(getByText('Start date')).toBeDefined();
+    expect(queryByTestId('text-input').props.value).toBe('21/12/1995');
+    expect(queryByTestId('datePickerAndroid')).toBeNull();
+
+    // Open date picker
+    fireEvent.press(getByText('Start date'));
+    expect(queryByTestId('datePickerAndroid')).toBeTruthy();
+
+    expect(toJSON()).toMatchSnapshot();
+
+    // Change date
+    fireEvent(
+      queryByTestId('datePickerAndroid'),
+      'onChange',
+      null,
+      new Date('December 17, 1995')
+    );
+
+    expect(onChange).toBeCalledWith(new Date('December 17, 1995'));
+  });
+});