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

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;

package/src/components/Toast/__tests__/Toast.spec.tsx

@@ -0,0 +1,125 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Typography from '../../Typography';
+import Toast from '../Toast';
+
+describe('Toast', () => {
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it.each`
+    intent
+    ${'success'}
+    ${'warning'}
+    ${'info'}
+    ${'error'}
+  `('renders correctly when intent is $intent', ({ intent }) => {
+    const { getByText, getByTestId, toJSON } = renderWithTheme(
+      <Toast content="Toast Content" actionLabel="Action" intent={intent} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('Toast Content')).toBeDefined();
+    expect(getByText('Action')).toBeDefined();
+    expect(getByTestId('toast-left-icon')).toBeDefined();
+  });
+
+  describe('Icon', () => {
+    it('not render icon when icon prop is null', () => {
+      const { queryByTestId } = renderWithTheme(
+        <Toast icon={null} content="Toast Content" />
+      );
+
+      expect(queryByTestId('alert-left-icon')).toBeNull();
+    });
+
+    it('render custom icon correctly', () => {
+      const { toJSON } = renderWithTheme(
+        <Toast icon="home" content="Content" />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+
+  describe('Content', () => {
+    it('renders custom content correctly', () => {
+      const { getByText } = renderWithTheme(
+        <Toast content={<Typography.Text>Custom Content</Typography.Text>} />
+      );
+
+      expect(getByText('Custom Content')).toBeDefined();
+    });
+  });
+
+  describe('Action Button', () => {
+    it('renders action button if actionLabel is available', () => {
+      const onAction = jest.fn();
+      const onDismiss = jest.fn();
+      const { getByTestId, getByText } = renderWithTheme(
+        <Toast
+          content="Toast Content"
+          actionLabel="UNDO"
+          onDismiss={onDismiss}
+          onAction={onAction}
+        />
+      );
+
+      expect(getByTestId('toast-action-button')).toBeDefined();
+      expect(getByText('UNDO')).toBeDefined();
+
+      fireEvent.press(getByText('UNDO'));
+      expect(onAction).toBeCalled();
+      expect(onDismiss).toBeCalled();
+    });
+
+    it('not renders action button if actionLabel is undefined', () => {
+      const { queryByTestId } = renderWithTheme(
+        <Toast content="Toast Content" />
+      );
+
+      expect(queryByTestId('toast-action-button')).toBeNull();
+    });
+  });
+
+  describe('Auto Dimiss', () => {
+    it('auto call onDismiss when duration expired', () => {
+      jest.useFakeTimers();
+      const onDismiss = jest.fn();
+      const duration = 3000;
+
+      renderWithTheme(
+        <Toast
+          content="Toast Content"
+          onDismiss={onDismiss}
+          duration={duration}
+        />
+      );
+
+      expect(onDismiss).not.toBeCalled();
+      jest.advanceTimersByTime(duration);
+      expect(onDismiss).toBeCalled();
+    });
+
+    it('not auto call onDismiss when duration expired if autoDismiss is false', () => {
+      jest.useFakeTimers();
+      const onDismiss = jest.fn();
+      const duration = 3000;
+
+      renderWithTheme(
+        <Toast
+          content="Toast Content"
+          onDismiss={onDismiss}
+          duration={duration}
+          autoDismiss={false}
+        />
+      );
+
+      expect(onDismiss).not.toBeCalled();
+      jest.advanceTimersByTime(duration);
+      expect(onDismiss).not.toBeCalled();
+    });
+  });
+});

package/src/components/Toast/__tests__/ToastContainer.spec.tsx

@@ -0,0 +1,107 @@
+import { act } from '@testing-library/react-native';
+import React, { createRef } from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import ToastContainer from '../ToastContainer';
+import { ToastControllerContextType } from '../ToastContext';
+
+describe('ToastContainer', () => {
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it.each`
+    displayType      | position
+    ${'single'}      | ${'top'}
+    ${'displayType'} | ${'top'}
+    ${'single'}      | ${'bottom'}
+    ${'displayType'} | ${'bottom'}
+  `(
+    'renders correctly with displayType: $displayType, position: $position',
+    ({ displayType, position }) => {
+      const { toJSON } = renderWithTheme(
+        <ToastContainer displayType={displayType} position={position} />
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
+
+  it('show multiple toasts correctly when displayType is stack', () => {
+    const toastRef = createRef<ToastControllerContextType>();
+    const { getByText } = renderWithTheme(
+      <ToastContainer displayType="stack" ref={toastRef} />
+    );
+
+    act(() => {
+      toastRef.current?.show({ content: 'Toast Message 1' });
+    });
+    act(() => {
+      toastRef.current?.show({ content: 'Toast Message 2' });
+    });
+    act(() => {
+      toastRef.current?.show({ content: 'Toast Message 3' });
+    });
+
+    expect(getByText('Toast Message 1')).toBeDefined();
+    expect(getByText('Toast Message 2')).toBeDefined();
+    expect(getByText('Toast Message 3')).toBeDefined();
+  });
+
+  it('show list of toast one by one when displayType is single', () => {
+    jest.useFakeTimers();
+    const duration = 2000;
+    const toastRef = createRef<ToastControllerContextType>();
+    const { queryByText } = renderWithTheme(
+      <ToastContainer displayType="single" ref={toastRef} />
+    );
+
+    act(() => {
+      toastRef.current?.show({ content: 'Toast Message 1', duration });
+    });
+    act(() => {
+      toastRef.current?.show({ content: 'Toast Message 2', duration });
+    });
+
+    expect(queryByText('Toast Message 1')).toBeDefined();
+    expect(queryByText('Toast Message 2')).toBeNull();
+
+    jest.advanceTimersByTime(duration);
+    expect(queryByText('Toast Message 1')).toBeNull();
+    expect(queryByText('Toast Message 2')).toBeDefined();
+  });
+
+  it('hide toast functionality works correctly', () => {
+    const toastRef = createRef<ToastControllerContextType>();
+    const { queryByText } = renderWithTheme(<ToastContainer ref={toastRef} />);
+
+    const id = toastRef.current?.show({ content: 'Toast Message' });
+    expect(queryByText('Toast Message')).toBeDefined();
+
+    act(() => toastRef.current?.hide(id as string));
+    expect(queryByText('Toast Message')).toBeNull();
+  });
+
+  it('clearAll toast functionality works correctly', () => {
+    const toastRef = createRef<ToastControllerContextType>();
+    const { queryByText } = renderWithTheme(<ToastContainer ref={toastRef} />);
+
+    act(() => {
+      toastRef.current?.show({ content: 'Toast Message 1' });
+    });
+    act(() => {
+      toastRef.current?.show({ content: 'Toast Message 2' });
+    });
+    act(() => {
+      toastRef.current?.show({ content: 'Toast Message 3' });
+    });
+
+    expect(queryByText('Toast Message 1')).toBeDefined();
+    expect(queryByText('Toast Message 2')).toBeDefined();
+    expect(queryByText('Toast Message 3')).toBeDefined();
+
+    act(() => toastRef.current?.clearAll());
+    expect(queryByText('Toast Message 1')).toBeNull();
+    expect(queryByText('Toast Message 2')).toBeNull();
+    expect(queryByText('Toast Message 3')).toBeNull();
+  });
+});