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

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

@@ -0,0 +1,89 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import SingleSelect 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(
+      <SingleSelect
+        label="Allow notifications"
+        options={options}
+        value="mon"
+        onConfirm={jest.fn()}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(queryAllByText('Allow notifications')).toHaveLength(2);
+    expect(getByTestId('text-input').props.value).toBe('Monday');
+  });
+
+  it('renders correctly when bottom sheet is visible', () => {
+    const { queryAllByText, getByText, toJSON, getByTestId } = renderWithTheme(
+      <SingleSelect
+        label="Allow notifications"
+        options={options}
+        value="mon"
+        onConfirm={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();
+  });
+});
+
+describe('behavior', () => {
+  it('calls onConfirm when pressing footer of bottom sheet', () => {
+    const onPress = jest.fn();
+    const { getByText, getByTestId } = renderWithTheme(
+      <SingleSelect
+        label="Allow notifications"
+        options={options}
+        value="mon"
+        onConfirm={onPress}
+        testID="single-select"
+      />
+    );
+    fireEvent.press(getByTestId('single-select'));
+    fireEvent.press(getByText('Monday'));
+
+    expect(onPress).toBeCalledTimes(1);
+  });
+
+  it('does NOT call onConfirm when pressing closing button of bottom sheet', () => {
+    const onPress = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <SingleSelect
+        label="Allow notifications"
+        options={options}
+        value="mon"
+        onConfirm={onPress}
+        testID="single-select"
+      />
+    );
+    fireEvent.press(getByTestId('single-select'));
+    fireEvent.press(getByTestId('bottom-sheet-close-icon'));
+
+    expect(onPress).toBeCalledTimes(0);
+  });
+});

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

@@ -0,0 +1,89 @@
+import { useTheme } from '@emotion/react';
+import React, { useState } from 'react';
+import { StyleProp, ViewStyle, TouchableOpacity } from 'react-native';
+
+import { OptionType } from '../types';
+import BottomSheet from '../../BottomSheet';
+import OptionList from './OptionList';
+import TextInput from '../../TextInput';
+
+export interface SingleSelectProps<T> {
+  /**
+   * An array of options to be selected.
+   */
+  options: OptionType<T>[];
+  /**
+   * Current selected value.
+   */
+  value: T | null;
+  /**
+   * event handler for confirm button
+   */
+  onConfirm: (value: T | null) => void;
+  /**
+   * Field label.
+   */
+  label: 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;
+}
+
+const SingleSelect = <T,>({
+  options,
+  value,
+  testID,
+  style,
+  label,
+  onConfirm,
+}: SingleSelectProps<T>) => {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const [selectingValue, setSelectingValue] = useState<T | null>(value);
+  const displayedValue = options.find(opt => value === opt.value)?.text;
+
+  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}
+      >
+        <OptionList
+          options={options}
+          value={selectingValue}
+          onPress={selectedValue => {
+            setOpen(false);
+            onConfirm(selectedValue);
+          }}
+        />
+      </BottomSheet>
+    </TouchableOpacity>
+  );
+};
+
+export default SingleSelect;

package/src/components/Select/{MultiSelect/StyledMultiSelect.tsx → StyledSelect.tsx}

@@ -1,6 +1,6 @@
 import { View, TouchableOpacity } from 'react-native';
 import styled from '@emotion/native';
-import Typography from '../../Typography';
+import Typography from '../Typography';
 
 const OptionWrapper = styled(TouchableOpacity)<{ themeSelected: boolean }>(
   ({ theme, themeSelected }) => ({

package/src/components/Select/{MultiSelect/__tests__/StyledMultiSelect.spec.tsx → __tests__/StyledSelect.spec.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
-import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import {
   OptionWrapper,
   OptionListWrapper,
   Spacer,
   FooterText,
-} from '../StyledMultiSelect';
+} from '../StyledSelect';
 
 describe('OptionWrapper', () => {
   it.each`

package/src/components/Select/helpers.tsx

@@ -0,0 +1,18 @@
+import { OptionType } from './types';
+
+export const getKey = <T,>(
+  option: OptionType<T>,
+  index: number,
+  keyExtractor?: (opt: OptionType<T>, i?: number) => string
+) => {
+  let key: React.Key = '';
+  if (keyExtractor !== undefined) {
+    key = keyExtractor(option, index);
+  } else if (option.key !== undefined) {
+    key = option.key;
+  } else {
+    key = index;
+  }
+
+  return key;
+};

package/src/components/Select/index.tsx

@@ -1,5 +1,6 @@
 import MultiSelect from './MultiSelect';
+import SingleSelect from './SingleSelect';
 
-const CompoundSelect = { Multi: MultiSelect } as const;
-
-export default CompoundSelect;
+export default Object.assign(SingleSelect, {
+  Multi: MultiSelect,
+});

package/src/components/Switch/index.tsx

@@ -34,7 +34,7 @@ export interface SwitchProps {
    */
   size?: 'small' | 'medium';
   /**
-   * Addditional style.
+   * Additional style.
    */
   style?: StyleProp<ViewStyle>;
   /**

package/src/components/Toast/StyledToast.tsx

@@ -0,0 +1,65 @@
+import styled from '@emotion/native';
+import { ComponentProps } from 'react';
+import {
+  Animated,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} from 'react-native';
+
+const ToastContainerWrapper = styled(View)<{ position: 'top' | 'bottom' }>(
+  ({ theme, position }) => ({
+    ...StyleSheet.absoluteFillObject,
+    paddingHorizontal: theme.__hd__.toast.space.largePadding,
+    paddingVertical: theme.__hd__.toast.space.mediumPadding,
+    flexDirection: position === 'bottom' ? 'column-reverse' : 'column',
+    elevation: 9999,
+  })
+);
+
+const Container = styled(Animated.View)<{
+  themeVariant: 'default' | 'round';
+  themeIntent: 'success' | 'info' | 'warning' | 'error';
+}>(({ theme, themeVariant, themeIntent }) => ({
+  borderRadius: themeVariant === 'round' ? theme.__hd__.toast.radii.default : 0,
+  backgroundColor: theme.__hd__.toast.colors[themeIntent],
+  minHeight: theme.__hd__.toast.sizes.height,
+  flexDirection: 'row',
+}));
+
+const IconContainer = styled(View)<ViewProps>(({ theme }) => ({
+  alignItems: 'center',
+  paddingLeft: theme.__hd__.toast.space.mediumPadding,
+}));
+
+const TextContainer = styled(View)<ViewProps>(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.toast.space.mediumPadding,
+  flex: 1,
+}));
+
+const ContentContainer = styled(View)<{ showDivider: boolean }>(
+  ({ theme, showDivider }) => ({
+    paddingVertical: theme.__hd__.toast.space.mediumPadding,
+    flex: 1,
+    borderRightWidth: showDivider ? theme.__hd__.toast.borderWidths.base : 0,
+    borderColor: theme.__hd__.toast.colors.divider,
+    flexDirection: 'row',
+  })
+);
+
+const CTAWrapper = styled(TouchableOpacity)<
+  ComponentProps<typeof TouchableOpacity>
+>(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.alert.space.padding,
+  justifyContent: 'center',
+}));
+
+export {
+  ToastContainerWrapper,
+  Container,
+  ContentContainer,
+  TextContainer,
+  IconContainer,
+  CTAWrapper,
+};

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useLayoutEffect, useRef } from 'react';
+import { Animated, LayoutAnimation } from 'react-native';
+import Icon, { IconName } from '../Icon';
+import Typography from '../Typography';
+import {
+  Container,
+  ContentContainer,
+  IconContainer,
+  CTAWrapper,
+  TextContainer,
+} from './StyledToast';
+import { useToastConfig } from './ToastContext';
+import { ToastProps } from './types';
+
+const getIntentIcon = (
+  intent: 'success' | 'info' | 'warning' | 'error'
+): IconName => {
+  switch (intent) {
+    case 'success':
+      return 'circle-ok';
+    case 'warning':
+      return 'warning';
+    case 'info':
+      return 'circle-info';
+    case 'error':
+      return 'circle-warning';
+  }
+};
+
+const Toast = ({
+  content,
+  icon,
+  variant = 'default',
+  intent = 'info',
+  style,
+  duration = 2000,
+  autoDismiss = true,
+  onAction,
+  actionLabel,
+  onDismiss,
+}: ToastProps): JSX.Element => {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const toastConfig = useToastConfig();
+
+  useEffect(() => {
+    if (autoDismiss && duration >= 0) {
+      const id = setTimeout(() => onDismiss?.(), duration);
+
+      return () => clearTimeout(id);
+    }
+
+    // Consistent return
+    return () => {};
+  }, []);
+
+  useEffect(() => {
+    const animation = Animated.timing(animatedValue, {
+      toValue: 1,
+      useNativeDriver: true,
+    });
+
+    animation.start();
+
+    return () => animation.stop();
+  }, []);
+
+  useLayoutEffect(() => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+  });
+
+  const interpolateY = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [toastConfig.position === 'top' ? -20 : 20, 0],
+  });
+
+  return (
+    <Container
+      themeVariant={variant}
+      themeIntent={intent}
+      style={[
+        style,
+        {
+          opacity: animatedValue,
+          transform: [{ translateY: interpolateY }],
+        },
+      ]}
+    >
+      <ContentContainer showDivider={!!actionLabel}>
+        {icon !== null ? (
+          <IconContainer testID="toast-left-icon">
+            <Icon icon={icon || getIntentIcon(intent)} size="small" />
+          </IconContainer>
+        ) : null}
+        <TextContainer>
+          {typeof content === 'string' ? (
+            <Typography.Text>{content}</Typography.Text>
+          ) : (
+            content
+          )}
+        </TextContainer>
+      </ContentContainer>
+      {actionLabel ? (
+        <CTAWrapper
+          testID="toast-action-button"
+          onPress={() => {
+            onAction?.();
+            onDismiss?.();
+          }}
+        >
+          {typeof actionLabel === 'string' ? (
+            <Typography.Text fontWeight="semi-bold">
+              {actionLabel}
+            </Typography.Text>
+          ) : (
+            actionLabel
+          )}
+        </CTAWrapper>
+      ) : null}
+    </Container>
+  );
+};
+
+export default Toast;

package/src/components/Toast/ToastContainer.tsx

@@ -0,0 +1,88 @@
+import React, { useImperativeHandle, useState } from 'react';
+import { useTheme } from '@emotion/react';
+
+import Toast from './Toast';
+import { ToastContainerWrapper } from './StyledToast';
+import { ToastContainerProps, ToastItemProps } from './types';
+import { ToastControllerContextType } from './ToastContext';
+
+const generateID = () =>
+  (performance.now().toString(36) + Math.random().toString(36)).replace(
+    /\./g,
+    ''
+  );
+
+const SingleToastDisplay = ({
+  toastList,
+  setToastList,
+}: {
+  toastList: ToastItemProps[];
+  setToastList: React.Dispatch<React.SetStateAction<ToastItemProps[]>>;
+}) => {
+  const theme = useTheme();
+  const toast = toastList[toastList.length - 1];
+
+  return toast ? (
+    <Toast
+      {...toast.props}
+      key={toast.id}
+      style={{ marginBottom: theme.space.small }}
+      onDismiss={() => {
+        setToastList(state => state.filter(item => item.id !== toast.id));
+        toast.props.onDismiss?.();
+      }}
+    />
+  ) : null;
+};
+
+const ToastContainer = React.forwardRef<
+  ToastControllerContextType,
+  ToastContainerProps
+>(({ displayType = 'single', position = 'top', style }, ref) => {
+  const theme = useTheme();
+  const [toastList, setToastList] = useState<ToastItemProps[]>([]);
+
+  useImperativeHandle(ref, () => ({
+    show: props => {
+      const item = {
+        id: generateID(),
+        props,
+      };
+
+      setToastList(state => [item, ...state]);
+      return item.id;
+    },
+    hide: id => {
+      setToastList(state => state.filter(item => item.id !== id));
+    },
+    clearAll: () => {
+      setToastList([]);
+    },
+  }));
+
+  return (
+    <ToastContainerWrapper
+      pointerEvents="box-none"
+      position={position}
+      style={style}
+    >
+      {displayType === 'single' ? (
+        <SingleToastDisplay toastList={toastList} setToastList={setToastList} />
+      ) : (
+        toastList.map(({ id, props }: ToastItemProps) => (
+          <Toast
+            {...props}
+            key={id}
+            style={{ marginBottom: theme.space.small }}
+            onDismiss={() => {
+              setToastList(state => state.filter(item => item.id !== id));
+              props.onDismiss?.();
+            }}
+          />
+        ))
+      )}
+    </ToastContainerWrapper>
+  );
+});
+
+export default ToastContainer;

package/src/components/Toast/ToastContext.ts

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react';
+import { ToastContainerProps, ToastProps } from './types';
+
+export type ToastControllerContextType = {
+  show: (props: Omit<ToastProps, 'position'>) => string;
+  hide: (id: string) => void;
+  clearAll: () => void;
+};
+
+export const ToastContext = createContext<ToastControllerContextType>(
+  {} as ToastControllerContextType
+);
+
+export type ToastConfigContextType = Pick<
+  ToastContainerProps,
+  'position' | 'displayType'
+>;
+
+export const ToastConfigContext = createContext<ToastConfigContextType>(
+  {} as ToastConfigContextType
+);
+
+export const useToastConfig = () => useContext(ToastConfigContext);
+
+export const useToast = () => useContext(ToastContext);

package/src/components/Toast/ToastProvider.tsx

@@ -0,0 +1,53 @@
+import React, { ReactNode, useEffect, useRef, useState, useMemo } from 'react';
+
+import ToastContainer from './ToastContainer';
+import {
+  ToastConfigContext,
+  ToastContext,
+  ToastControllerContextType,
+} from './ToastContext';
+import { ToastContainerProps } from './types';
+
+type ToastProviderProps = {
+  /**
+   * Content to be wrapped.
+   */
+  children?: ReactNode;
+} & ToastContainerProps;
+
+const ToastProvider = ({
+  children,
+  displayType = 'single',
+  position = 'top',
+}: ToastProviderProps) => {
+  const toastRef = useRef<ToastControllerContextType>(null);
+  const [refState, setRefState] = useState<ToastControllerContextType>(
+    {} as ToastControllerContextType
+  );
+
+  useEffect(() => {
+    if (toastRef.current) {
+      setRefState(toastRef.current);
+    }
+  }, []);
+
+  const config = useMemo(() => ({ displayType, position }), [
+    displayType,
+    position,
+  ]);
+
+  return (
+    <ToastContext.Provider value={refState}>
+      {children}
+      <ToastConfigContext.Provider value={config}>
+        <ToastContainer
+          ref={toastRef}
+          displayType={displayType}
+          position={position}
+        />
+      </ToastConfigContext.Provider>
+    </ToastContext.Provider>
+  );
+};
+
+export default ToastProvider;