@hero-design/rn 7.13.0 → 7.14.1

package/src/components/Calendar/__tests__/__snapshots__/CalendarRowItem.spec.tsx.snap

@@ -0,0 +1,411 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CalendarRowItem renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexBasis": "14%",
+        "height": 48,
+        "justifyContent": "center",
+        "width": 48,
+      },
+      undefined,
+    ]
+  }
+  testID="calendar-date-cell"
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": undefined,
+        "borderColor": "#292a2b",
+        "borderRadius": 999,
+        "borderWidth": 0,
+        "height": 44,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 44,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#292a2b",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      10
+    </Text>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "borderRadius": 999,
+            "bottom": "10%",
+            "height": 4,
+            "position": "absolute",
+            "width": 4,
+          },
+          undefined,
+        ]
+      }
+      testID="calendar-date-mark"
+      variant="primary"
+    />
+  </View>
+</View>
+`;
+
+exports[`CalendarRowItem renders correctly 2`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexBasis": "14%",
+        "height": 48,
+        "justifyContent": "center",
+        "width": 48,
+      },
+      undefined,
+    ]
+  }
+  testID="calendar-date-cell"
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": undefined,
+        "borderColor": "#292a2b",
+        "borderRadius": 999,
+        "borderWidth": 0,
+        "height": 44,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 44,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#8b8d92",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="subdued"
+    >
+      10
+    </Text>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "borderRadius": 999,
+            "bottom": "10%",
+            "height": 4,
+            "position": "absolute",
+            "width": 4,
+          },
+          undefined,
+        ]
+      }
+      testID="calendar-date-mark"
+      variant="primary"
+    />
+  </View>
+</View>
+`;
+
+exports[`CalendarRowItem renders correctly when is current date 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexBasis": "14%",
+        "height": 48,
+        "justifyContent": "center",
+        "width": 48,
+      },
+      undefined,
+    ]
+  }
+  testID="calendar-date-cell"
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#7622d7",
+        "borderColor": "#292a2b",
+        "borderRadius": 999,
+        "borderWidth": 0,
+        "height": 44,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 44,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="inverted"
+    >
+      10
+    </Text>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 999,
+            "bottom": "10%",
+            "height": 4,
+            "position": "absolute",
+            "width": 4,
+          },
+          undefined,
+        ]
+      }
+      testID="calendar-date-mark"
+      variant="inverted"
+    />
+  </View>
+</View>
+`;
+
+exports[`CalendarRowItem renders correctly when selected, and is current date equal to $current 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexBasis": "14%",
+        "height": 48,
+        "justifyContent": "center",
+        "width": 48,
+      },
+      undefined,
+    ]
+  }
+  testID="calendar-date-cell"
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#7622d7",
+        "borderColor": "#292a2b",
+        "borderRadius": 999,
+        "borderWidth": 0,
+        "height": 44,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 44,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="inverted"
+    >
+      10
+    </Text>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 999,
+            "bottom": "10%",
+            "height": 4,
+            "position": "absolute",
+            "width": 4,
+          },
+          undefined,
+        ]
+      }
+      testID="calendar-date-mark"
+      variant="inverted"
+    />
+  </View>
+</View>
+`;
+
+exports[`CalendarRowItem renders correctly when selected, and is current date equal to $current 2`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexBasis": "14%",
+        "height": 48,
+        "justifyContent": "center",
+        "width": 48,
+      },
+      undefined,
+    ]
+  }
+  testID="calendar-date-cell"
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#7622d7",
+        "borderColor": "#292a2b",
+        "borderRadius": 999,
+        "borderWidth": 0,
+        "height": 44,
+        "justifyContent": "center",
+        "opacity": 1,
+        "width": 44,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="inverted"
+    >
+      10
+    </Text>
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 999,
+            "bottom": "10%",
+            "height": 4,
+            "position": "absolute",
+            "width": 4,
+          },
+          undefined,
+        ]
+      }
+      testID="calendar-date-mark"
+      variant="inverted"
+    />
+  </View>
+</View>
+`;

package/src/components/Calendar/__tests__/helper.spec.ts

@@ -0,0 +1,50 @@
+import { getValidDate, initArray, isEqDate } from '../helpers';
+
+describe('initArray', () => {
+  it('returns correct value', () => {
+    const transform = (index: number) => `test ${index + 1}`;
+    const actual = initArray(5, transform);
+    const expected = ['test 1', 'test 2', 'test 3', 'test 4', 'test 5'];
+
+    expect(actual).toEqual(expected);
+  });
+});
+
+describe('isEqDate', () => {
+  it.each`
+    dateA                               | dateB                               | expected
+    ${undefined}                        | ${undefined}                        | ${true}
+    ${new Date(2022, 10, 10)}           | ${undefined}                        | ${false}
+    ${undefined}                        | ${new Date(2022, 10, 10)}           | ${false}
+    ${new Date(2022, 10, 11)}           | ${new Date(2022, 10, 10)}           | ${false}
+    ${new Date(2022, 10, 10)}           | ${new Date(2022, 10, 10)}           | ${true}
+    ${new Date(2022, 10, 10, 5, 12, 3)} | ${new Date(2022, 10, 10, 6, 12, 4)} | ${true}
+  `(
+    'returns correct when dateA is $dateA and dateB is $dateB',
+    ({ dateA, dateB, expected }) => {
+      const actual = isEqDate(dateA, dateB);
+      expect(actual).toEqual(expected);
+    }
+  );
+});
+
+describe('getValidDate', () => {
+  const date = new Date(2022, 10, 10);
+  it.each`
+    minDate                   | maxDate                   | expected
+    ${undefined}              | ${undefined}              | ${date}
+    ${new Date(2022, 10, 8)}  | ${undefined}              | ${date}
+    ${new Date(2022, 10, 15)} | ${undefined}              | ${undefined}
+    ${undefined}              | ${new Date(2022, 10, 11)} | ${date}
+    ${undefined}              | ${new Date(2022, 10, 8)}  | ${undefined}
+    ${new Date(2022, 10, 8)}  | ${new Date(2022, 10, 11)} | ${date}
+    ${new Date(2022, 10, 12)} | ${new Date(2022, 10, 11)} | ${undefined}
+    ${new Date(2022, 10, 8)}  | ${new Date(2022, 10, 9)}  | ${undefined}
+  `(
+    'returns correct value when minDate is $minDate and maxDate is $maxDate',
+    ({ minDate, maxDate, expected }) => {
+      const actual = getValidDate(date, minDate, maxDate);
+      expect(actual).toBe(expected);
+    }
+  );
+});

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;
+};