@hero-design/rn 7.3.2 → 7.6.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/Spinner/AnimatedSpinner.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet } from 'react-native';
+
+import { StyledSpinnerDot, StyledSpinnerRow } from './StyledSpinner';
+
+const AnimatedRow = Animated.createAnimatedComponent(StyledSpinnerRow);
+
+const AnimatedDot = Animated.createAnimatedComponent(StyledSpinnerDot);
+
+const AnimatedSpinner = () => {
+  const rotateAnimation = useRef<Animated.Value>(new Animated.Value(0));
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.timing(rotateAnimation.current, {
+        toValue: 1,
+        duration: 1200,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    );
+
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, []);
+
+  const interpolatedRotateAnimation = rotateAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <Animated.View
+      style={StyleSheet.flatten([
+        {
+          transform: [{ rotate: interpolatedRotateAnimation }],
+        },
+      ])}
+    >
+      <AnimatedRow themePosition="top">
+        <AnimatedDot themePosition="topLeft" />
+        <AnimatedDot themePosition="topRight" />
+      </AnimatedRow>
+      <AnimatedRow themePosition="bottom">
+        <AnimatedDot themePosition="bottomLeft" />
+        <AnimatedDot themePosition="bottomRight" />
+      </AnimatedRow>
+    </Animated.View>
+  );
+};
+
+export { AnimatedSpinner };

package/src/components/Spinner/StyledSpinner.tsx

@@ -0,0 +1,59 @@
+import { View, ViewProps } from 'react-native';
+import styled from '@emotion/native';
+import { scale } from '../../utils/scale';
+
+const StyledView = styled(View)<ViewProps>();
+
+const StyledSpinnerContainer = styled(View)<ViewProps>({
+  height: '100%',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const StyledSpinnerRow = styled(View)<{ themePosition: 'top' | 'bottom' }>(
+  ({ themePosition, theme }) => ({
+    flexDirection: 'row',
+    marginBottom:
+      themePosition === 'top'
+        ? theme.__hd__.spinner.space.spinnerDotPadding
+        : 0,
+  })
+);
+
+const StyledSpinnerDot = styled(View)<{
+  themePosition: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+}>(({ themePosition, theme }) => {
+  const themeStyling = () => {
+    switch (themePosition) {
+      case 'topLeft':
+        return { opacity: 1 };
+      case 'topRight':
+        return {
+          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding,
+          opacity: 0.7,
+        };
+      case 'bottomLeft':
+        return { opacity: 0.5 };
+      case 'bottomRight':
+        return {
+          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding,
+          opacity: 0.3,
+        };
+    }
+  };
+
+  return {
+    height: scale(theme.__hd__.spinner.space.spinnerDot),
+    width: scale(theme.__hd__.spinner.space.spinnerDot),
+    borderRadius: theme.__hd__.spinner.radii.default,
+    backgroundColor: theme.__hd__.spinner.color.default,
+    ...themeStyling(),
+  };
+});
+
+export {
+  StyledView,
+  StyledSpinnerContainer,
+  StyledSpinnerRow,
+  StyledSpinnerDot,
+};

package/src/components/Spinner/__tests__/AnimatedSpinner.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { AnimatedSpinner } from '../AnimatedSpinner';
+
+describe('AnimatedSpinner', () => {
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(<AnimatedSpinner />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Spinner/__tests__/StyledSpinner.spec.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { AnimatedSpinner } from '../AnimatedSpinner';
+import {
+  StyledSpinnerContainer,
+  StyledSpinnerDot,
+  StyledSpinnerRow,
+} from '../StyledSpinner';
+
+describe('StyledSpinnerContainer', () => {
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(
+      <StyledSpinnerContainer>
+        <AnimatedSpinner />
+      </StyledSpinnerContainer>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledSpinnerRow', () => {
+  it.each`
+    themePosition
+    ${'top'}
+    ${'bottom'}
+  `(
+    'renders correctly when position is $themePosition',
+    ({ themePosition }) => {
+      const { toJSON } = renderWithTheme(
+        <StyledSpinnerRow themePosition={themePosition} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});
+
+describe('StyledSpinnerText', () => {
+  it.each`
+    themePosition
+    ${'topLeft'}
+    ${'topRight'}
+    ${'bottomLeft'}
+    ${'bottomRight'}
+  `(
+    'renders correctly when position is $themePosition',
+    ({ themePosition }) => {
+      const { toJSON } = renderWithTheme(
+        <StyledSpinnerDot themePosition={themePosition} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+});

package/src/components/Spinner/__tests__/__snapshots__/AnimatedSpinner.spec.tsx.snap

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnimatedSpinner renders correctly 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Object {
+      "transform": Array [
+        Object {
+          "rotate": "0deg",
+        },
+      ],
+    }
+  }
+>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Array [
+        Object {
+          "flexDirection": "row",
+          "marginBottom": 8,
+        },
+        Object {},
+      ]
+    }
+    themePosition="top"
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "borderRadius": 8,
+            "height": 16,
+            "opacity": 1,
+            "width": 16,
+          },
+          Object {},
+        ]
+      }
+      themePosition="topLeft"
+    />
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "borderRadius": 8,
+            "height": 16,
+            "marginLeft": 8,
+            "opacity": 0.7,
+            "width": 16,
+          },
+          Object {},
+        ]
+      }
+      themePosition="topRight"
+    />
+  </View>
+  <View
+    collapsable={false}
+    nativeID="animatedComponent"
+    style={
+      Array [
+        Object {
+          "flexDirection": "row",
+          "marginBottom": 0,
+        },
+        Object {},
+      ]
+    }
+    themePosition="bottom"
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "borderRadius": 8,
+            "height": 16,
+            "opacity": 0.5,
+            "width": 16,
+          },
+          Object {},
+        ]
+      }
+      themePosition="bottomLeft"
+    />
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#7622d7",
+            "borderRadius": 8,
+            "height": 16,
+            "marginLeft": 8,
+            "opacity": 0.3,
+            "width": 16,
+          },
+          Object {},
+        ]
+      }
+      themePosition="bottomRight"
+    />
+  </View>
+</View>
+`;