@hero-design/rn 7.5.0 → 7.6.1-alpha.0

package/src/components/Select/MultiSelect/__tests__/index.spec.tsx

@@ -0,0 +1,94 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import MultiSelect from '..';
+
+const options = [
+  { text: 'Monday', value: 'mon' },
+  { text: 'Tuesday', value: 'tue' },
+  { text: 'Wednesday', value: 'wed' },
+  { text: 'Thursday', value: 'thu' },
+  { text: 'Friday', value: 'fri' },
+  { text: 'Saturday', value: 'sat' },
+  { text: 'Sunday', value: 'sun' },
+];
+
+describe('rendering', () => {
+  it('renders correctly when bottom sheet is NOT visible', () => {
+    const { queryAllByText, toJSON, getByTestId } = renderWithTheme(
+      <MultiSelect
+        label="Allow notifications"
+        footerLabel="Confirm"
+        options={options}
+        value={['mon', 'tue']}
+        onPress={jest.fn()}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(queryAllByText('Allow notifications')).toHaveLength(2);
+    expect(getByTestId('text-input').props.value).toBe('Monday, Tuesday');
+  });
+
+  it('renders correctly when bottom sheet is visible', () => {
+    const { queryAllByText, getByText, toJSON, getByTestId } = renderWithTheme(
+      <MultiSelect
+        label="Allow notifications"
+        footerLabel="Confirm"
+        options={options}
+        value={['mon', 'tue']}
+        onPress={jest.fn()}
+      />
+    );
+    fireEvent.press(getByTestId('text-input'));
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(queryAllByText('Allow notifications')).toHaveLength(2);
+    expect(getByText('Monday')).toBeDefined();
+    expect(getByText('Tuesday')).toBeDefined();
+    expect(getByText('Wednesday')).toBeDefined();
+    expect(getByText('Thursday')).toBeDefined();
+    expect(getByText('Friday')).toBeDefined();
+    expect(getByText('Saturday')).toBeDefined();
+    expect(getByText('Sunday')).toBeDefined();
+    expect(getByText('Confirm')).toBeDefined();
+  });
+});
+
+describe('behavior', () => {
+  it('calls onPress when pressing footer of bottom sheet', () => {
+    const onPress = jest.fn();
+    const { getByText, getByTestId } = renderWithTheme(
+      <MultiSelect
+        label="Allow notifications"
+        footerLabel="Confirm"
+        options={options}
+        value={['mon', 'tue']}
+        onPress={onPress}
+        testID="multi-select"
+      />
+    );
+    fireEvent.press(getByTestId('multi-select'));
+    fireEvent.press(getByText('Confirm'));
+
+    expect(onPress).toBeCalledTimes(1);
+  });
+
+  it('does NOT call onPress when pressing closing button of bottom sheet', () => {
+    const onPress = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <MultiSelect
+        label="Allow notifications"
+        footerLabel="Confirm"
+        options={options}
+        value={['mon', 'tue']}
+        onPress={onPress}
+        testID="multi-select"
+      />
+    );
+    fireEvent.press(getByTestId('multi-select'));
+    fireEvent.press(getByTestId('bottom-sheet-close-icon'));
+
+    expect(onPress).toBeCalledTimes(0);
+  });
+});

package/src/components/Select/MultiSelect/index.tsx

@@ -0,0 +1,103 @@
+import { useTheme } from '@emotion/react';
+import React, { useState } from 'react';
+import { StyleProp, ViewStyle, TouchableOpacity } from 'react-native';
+import BottomSheet from '../../BottomSheet';
+import TextInput from '../../TextInput';
+import Footer from './Footer';
+import OptionList from './OptionList';
+import { OptionType } from './types';
+
+export interface MultiSelectProps<T> {
+  /**
+   * An array of options to be selected.
+   */
+  options: OptionType<T>[];
+  /**
+   * Current selected value.
+   */
+  value: T[];
+  /**
+   * onPress event handler.
+   */
+  onPress: (value: T[]) => void;
+  /**
+   * Field label.
+   */
+  label: string;
+  /**
+   * Footer label.
+   */
+  footerLabel: string;
+  /**
+   * Used to extract a unique key for a given option at the specified index. Key is used for caching and as the react key to track item re-ordering.
+   * The default extractor checks option.key, and then falls back to using the index, like React does.
+   */
+  keyExtractor?: (option: OptionType<T>, index?: number) => string;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+function MultiSelect<T>({
+  options,
+  value,
+  testID,
+  style,
+  label,
+  footerLabel,
+  onPress,
+}: MultiSelectProps<T>) {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const [selectingValue, setSelectingValue] = useState(value);
+  const displayedValue = options
+    .filter(opt => value.includes(opt.value))
+    .map(opt => opt.text)
+    .join(', ');
+
+  return (
+    <TouchableOpacity onPress={() => setOpen(true)}>
+      <TextInput
+        label={label}
+        value={displayedValue}
+        onPressIn={() => setOpen(true)}
+        editable={false}
+        // when input is not editable on Android, the text color is gray
+        // hence, adding this to make the text color the same as iOS
+        textStyle={{ color: theme.colors.text }}
+        suffix="arrow-down"
+        multiline
+        style={style}
+        testID={testID}
+      />
+      <BottomSheet
+        open={open}
+        onRequestClose={() => setOpen(false)}
+        onDismiss={() => setSelectingValue(value)}
+        header={label}
+        footer={
+          <Footer
+            label={footerLabel}
+            onPress={() => {
+              setOpen(false);
+              onPress(selectingValue);
+            }}
+          />
+        }
+      >
+        <OptionList
+          options={options}
+          value={selectingValue}
+          onPress={setSelectingValue}
+        />
+      </BottomSheet>
+    </TouchableOpacity>
+  );
+}
+
+export default MultiSelect;

package/src/components/Select/MultiSelect/types.ts

@@ -0,0 +1 @@
+export type OptionType<T> = { value: T; text: string; key?: string };

package/src/components/Select/index.tsx

@@ -0,0 +1,5 @@
+import MultiSelect from './MultiSelect';
+
+const CompoundSelect = { Multi: MultiSelect } as const;
+
+export default CompoundSelect;

package/src/components/Switch/StyledSwitch.tsx

@@ -0,0 +1,50 @@
+import styled from '@emotion/native';
+import { Animated, View } from 'react-native';
+
+type ThemeSize = 'small' | 'medium';
+
+const StyledWrapper = styled(View)<{
+  themeChecked: boolean | undefined;
+  themeSize: ThemeSize;
+}>(({ theme, themeChecked, themeSize }) => ({
+  height: theme.__hd__.switch.heights[themeSize],
+  width: theme.__hd__.switch.widths[themeSize],
+  paddingHorizontal: theme.__hd__.switch.spaces[themeSize],
+  borderRadius: theme.__hd__.switch.radii.rounded,
+  backgroundColor: themeChecked
+    ? theme.__hd__.switch.colors.active
+    : theme.__hd__.switch.colors.inactive,
+}));
+
+const StyledDisabledWrapper = styled(View)<{
+  themeSize: ThemeSize;
+}>(({ theme, themeSize }) => ({
+  position: 'absolute',
+  height: theme.__hd__.switch.heights[themeSize],
+  width: theme.__hd__.switch.widths[themeSize],
+  borderRadius: theme.__hd__.switch.radii.rounded,
+  backgroundColor: theme.__hd__.switch.colors.thumb,
+  zIndex: 9999,
+  opacity: 0.8,
+}));
+
+const StyledThumbWrapper = styled(View)<{
+  themeSize: ThemeSize;
+}>(({ theme, themeSize }) => ({
+  height: theme.__hd__.switch.heights[themeSize],
+  width: theme.__hd__.switch.widths[themeSize],
+  borderRadius: theme.__hd__.switch.radii.rounded,
+  display: 'flex',
+  justifyContent: 'center',
+}));
+
+const StyledKnot = styled(Animated.View)<{
+  themeSize: ThemeSize;
+}>(({ theme, themeSize }) => ({
+  width: theme.__hd__.switch.thumbSizes[themeSize],
+  height: theme.__hd__.switch.thumbSizes[themeSize],
+  backgroundColor: theme.__hd__.switch.colors.thumb,
+  borderRadius: theme.__hd__.switch.radii.rounded,
+}));
+
+export { StyledWrapper, StyledDisabledWrapper, StyledThumbWrapper, StyledKnot };

package/src/components/Switch/__tests__/StyledHeading.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import {
+  StyledWrapper,
+  StyledDisabledWrapper,
+  StyledThumbWrapper,
+  StyledKnot,
+} from '../StyledSwitch';
+
+describe('StyledWrapper', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledWrapper themeChecked themeSize="medium" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledDisabledWrapper', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledDisabledWrapper themeSize="medium" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledThumbWrapper', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledThumbWrapper themeSize="medium" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledKnot', () => {
+  it('renders correct style', () => {
+    const { toJSON } = renderWithTheme(<StyledKnot themeSize="medium" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Switch/__tests__/__snapshots__/StyledHeading.spec.tsx.snap

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledDisabledWrapper renders correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 999,
+        "height": 28.799999999999997,
+        "opacity": 0.8,
+        "position": "absolute",
+        "width": 56,
+        "zIndex": 9999,
+      },
+      undefined,
+    ]
+  }
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledKnot renders correct style 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Object {
+      "backgroundColor": "#ffffff",
+      "borderRadius": 999,
+      "height": 20.8,
+      "width": 20.8,
+    }
+  }
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledThumbWrapper renders correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderRadius": 999,
+        "display": "flex",
+        "height": 28.799999999999997,
+        "justifyContent": "center",
+        "width": 56,
+      },
+      undefined,
+    ]
+  }
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledWrapper renders correct style 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#7622d7",
+        "borderRadius": 999,
+        "height": 28.799999999999997,
+        "paddingHorizontal": 4,
+        "width": 56,
+      },
+      undefined,
+    ]
+  }
+  themeChecked={true}
+  themeSize="medium"
+/>
+`;

package/src/components/Switch/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Switch renders correctly 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#727478",
+        "borderRadius": 999,
+        "height": 28.799999999999997,
+        "paddingHorizontal": 4,
+        "width": 56,
+      },
+      undefined,
+    ]
+  }
+  testID="switch"
+  themeSize="medium"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "borderRadius": 999,
+          "display": "flex",
+          "height": 28.799999999999997,
+          "justifyContent": "center",
+          "width": 56,
+        },
+        undefined,
+      ]
+    }
+    themeSize="medium"
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 999,
+          "height": 20.8,
+          "left": 0,
+          "width": 20.8,
+        }
+      }
+      themeSize="medium"
+    />
+  </View>
+</View>
+`;
+
+exports[`Switch trigger press function correctly 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  accessible={true}
+  focusable={true}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#727478",
+        "borderRadius": 999,
+        "height": 28.799999999999997,
+        "paddingHorizontal": 4,
+        "width": 56,
+      },
+      undefined,
+    ]
+  }
+  testID="switch"
+  themeSize="medium"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "borderRadius": 999,
+          "display": "flex",
+          "height": 28.799999999999997,
+          "justifyContent": "center",
+          "width": 56,
+        },
+        undefined,
+      ]
+    }
+    themeSize="medium"
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+          "borderRadius": 999,
+          "height": 20.8,
+          "left": 0,
+          "width": 20.8,
+        }
+      }
+      themeSize="medium"
+    />
+  </View>
+</View>
+`;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Switch from '..';
+
+describe('Switch', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(<Switch testID="switch" />);
+    expect(wrapper.queryAllByTestId('switch')).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('trigger press function correctly', () => {
+    const pressFn = jest.fn();
+    const wrapper = renderWithTheme(
+      <Switch testID="switch" onPress={pressFn} />
+    );
+    fireEvent.press(wrapper.getByTestId('switch'));
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(pressFn).toBeCalled();
+  });
+});

package/src/components/Switch/index.tsx

@@ -0,0 +1,87 @@
+import { useTheme } from '@emotion/react';
+import React, { ReactElement, useState, useEffect } from 'react';
+
+import {
+  StyleProp,
+  ViewStyle,
+  Animated,
+  Easing,
+  TouchableWithoutFeedback,
+} from 'react-native';
+
+import {
+  StyledDisabledWrapper,
+  StyledKnot,
+  StyledThumbWrapper,
+  StyledWrapper,
+} from './StyledSwitch';
+
+export interface SwitchProps {
+  /**
+   * Control whether the switch is checked
+   */
+  checked?: boolean;
+  /**
+   * Whether the switch is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Event handler.
+   */
+  onPress?: () => void;
+  /**
+   * Size of the switch
+   */
+  size?: 'small' | 'medium';
+  /**
+   * Addditional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Switch = ({
+  size = 'medium',
+  disabled = false,
+  checked,
+  onPress,
+  style,
+  testID,
+}: SwitchProps): ReactElement => {
+  const theme = useTheme();
+
+  const offset = checked
+    ? theme.__hd__.switch.widths[size] -
+      theme.__hd__.switch.thumbSizes[size] -
+      theme.__hd__.switch.spaces[size] * 2
+    : theme.__hd__.switch.spaces.inactive;
+
+  const [animatedOffset] = useState(() => new Animated.Value(offset));
+
+  useEffect(() => {
+    Animated.timing(animatedOffset, {
+      toValue: offset,
+      easing: Easing.inOut(Easing.cubic),
+      useNativeDriver: false,
+    }).start();
+  }, [checked]);
+  return (
+    <TouchableWithoutFeedback
+      testID={testID}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <StyledWrapper themeChecked={checked} themeSize={size} style={style}>
+        {disabled && <StyledDisabledWrapper themeSize={size} />}
+        <StyledThumbWrapper themeSize={size}>
+          <StyledKnot themeSize={size} style={{ left: animatedOffset }} />
+        </StyledThumbWrapper>
+      </StyledWrapper>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export default Switch;

package/src/components/TextInput/StyledTextInput.tsx

@@ -1,7 +1,6 @@
 import { TextInput, View } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
-import Icon from '../Icon';
 
 const Container = styled(View)(({ theme }) => ({
   position: 'relative',
@@ -22,13 +21,10 @@ const Label = styled(Typography.Text)(({ theme }) => ({
   paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding,
 }));
 
-const Prefix = styled(Icon)(({ theme }) => ({
-  marginRight: theme.__hd__.textInput.space.prefixMarginRight,
-}));
-
 const StyledTextInput = styled(TextInput)(({ theme }) => ({
   flex: 1,
   fontSize: theme.__hd__.textInput.fontSizes.text,
+  marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
 }));
 
-export { Container, Label, Prefix, StyledTextInput };
+export { Container, Label, StyledTextInput };

package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { Container, Label, Prefix, StyledTextInput } from '../StyledTextInput';
+import { Container, Label, StyledTextInput } from '../StyledTextInput';
 
 describe('Container', () => {
   it('renders correctly', () => {
@@ -17,13 +17,7 @@ describe('Label', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 });
-describe('Prefix', () => {
-  it('renders correctly', () => {
-    const { toJSON } = renderWithTheme(<Prefix icon="user" />);
 
-    expect(toJSON()).toMatchSnapshot();
-  });
-});
 describe('StyledTextInput', () => {
   it('renders correctly', () => {
     const { toJSON } = renderWithTheme(<StyledTextInput />);

package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap

@@ -51,28 +51,6 @@ exports[`Label renders correctly 1`] = `
 </Text>
 `;
 
-exports[`Prefix renders correctly 1`] = `
-<HeroIcon
-  name="user"
-  style={
-    Array [
-      Object {
-        "color": "#292a2b",
-        "fontSize": 24,
-      },
-      Array [
-        Object {
-          "marginRight": 8,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeIntent="text"
-  themeSize="medium"
-/>
-`;
-
 exports[`StyledTextInput renders correctly 1`] = `
 <TextInput
   style={
@@ -80,6 +58,7 @@ exports[`StyledTextInput renders correctly 1`] = `
       Object {
         "flex": 1,
         "fontSize": 16,
+        "marginHorizontal": 8,
       },
       undefined,
     ]