@hero-design/rn 7.12.0 → 7.13.0

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

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

@@ -0,0 +1,46 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { ModalProps } from 'react-native';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import DatePickerIOS from '../DatePickerIOS';
+
+jest.mock('react-native/Libraries/Modal/Modal', () => {
+  const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
+  return (props: ModalProps) => <Modal {...props} />;
+});
+
+describe('DatePickerIOS', () => {
+  it('renders correctly', () => {
+    const onChange = jest.fn();
+    const { getByText, queryByTestId, toJSON } = renderWithTheme(
+      <DatePickerIOS
+        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('datePickerIOS')).toBeNull();
+
+    // Open date picker
+    fireEvent.press(getByText('Start date'));
+    expect(queryByTestId('datePickerIOS')).toBeTruthy();
+
+    expect(toJSON()).toMatchSnapshot();
+
+    // Change date
+    fireEvent(
+      queryByTestId('datePickerIOS'),
+      'onChange',
+      null,
+      new Date('December 17, 1995')
+    );
+    fireEvent.press(getByText('Confirm'));
+
+    expect(onChange).toBeCalledWith(new Date('December 17, 1995'));
+  });
+});

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

@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DatePickerAndroid renders correctly 1`] = `
+<View
+  accessible={true}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "opacity": 1,
+    }
+  }
+>
+  <View
+    pointerEvents="none"
+    testID="datePickerInputAndroid"
+  >
+    <View
+      pointerEvents="auto"
+      style={
+        Array [
+          Object {
+            "marginVertical": 8,
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "padding": 16,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#292a2b",
+                "borderRadius": 8,
+                "borderWidth": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              undefined,
+            ]
+          }
+          themeVariant="filled"
+        />
+        <View
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#ffffff",
+                "flexDirection": "row",
+                "left": 16,
+                "paddingHorizontal": 4,
+                "position": "absolute",
+                "top": -10,
+                "zIndex": 1,
+              },
+              undefined,
+            ]
+          }
+        >
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#292a2b",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 12,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 20,
+                },
+                Array [
+                  Object {
+                    "color": "#292a2b",
+                  },
+                  undefined,
+                ],
+              ]
+            }
+            testID="input-label"
+            themeFontSize="small"
+            themeFontWeight="regular"
+            themeIntent="body"
+            themeVariant="filled"
+          >
+            Start date
+          </Text>
+        </View>
+        <View
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "alignSelf": "stretch",
+                "flexDirection": "row",
+                "flexGrow": 2,
+              },
+              undefined,
+            ]
+          }
+        >
+          <TextInput
+            accessibilityState={
+              Object {
+                "disabled": false,
+              }
+            }
+            editable={true}
+            onBlur={[Function]}
+            onChangeText={[Function]}
+            onFocus={[Function]}
+            style={
+              Array [
+                Object {
+                  "alignSelf": "stretch",
+                  "flexGrow": 2,
+                  "fontSize": 14,
+                  "marginHorizontal": 8,
+                  "textAlignVertical": "center",
+                },
+                Object {
+                  "color": "#292a2b",
+                },
+              ]
+            }
+            testID="text-input"
+            value="21/12/1995"
+          />
+        </View>
+        <HeroIcon
+          name="calendar-dates-outlined"
+          style={
+            Array [
+              Object {
+                "color": "#292a2b",
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="input-suffix"
+          themeIntent="text"
+          themeSize="xsmall"
+        />
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "paddingLeft": 16,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+                "justifyContent": "space-between",
+              },
+              undefined,
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>
+  <Picker
+    display="default"
+    mode="date"
+    onChange={[Function]}
+    testID="datePickerAndroid"
+    value={1995-12-21T00:00:00.000Z}
+  />
+</View>
+`;