@hero-design/rn 8.33.2 → 8.34.1

package/src/components/Modal/ModalContentWrapper.tsx

@@ -0,0 +1,112 @@
+import React, { forwardRef } from 'react';
+import {
+  Animated,
+  Dimensions,
+  Easing,
+  Platform,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+type ModalContentWrapperProps = {
+  children: React.ReactElement;
+  visible?: boolean;
+  onShow?: () => void;
+  testID?: string;
+  animationType?: 'none' | 'slide' | 'fade';
+  style?: StyleProp<ViewStyle>;
+  animated?: boolean;
+};
+
+export type ModalContentWrapperHandler = {
+  hide: (callback?: () => void) => void;
+};
+
+const windowHeight = Dimensions.get('window').height;
+const defaultAnimationConfig = {
+  easing: Easing.inOut(Easing.cubic),
+  duration: 400,
+  useNativeDriver: Platform.OS !== 'web',
+};
+
+const ModalContentWrapper = forwardRef<
+  ModalContentWrapperHandler,
+  ModalContentWrapperProps
+>(
+  (
+    {
+      animationType,
+      children,
+      testID,
+      onShow,
+      style,
+      visible,
+      animated = true,
+    },
+    ref
+  ) => {
+    const animatedValue = React.useRef(new Animated.Value(0)).current;
+
+    const modalAnimation = animatedValue.interpolate(
+      animationType === 'fade'
+        ? {
+            inputRange: [0, 1],
+            outputRange: [0, 1],
+          }
+        : {
+            inputRange: [0, 1],
+            outputRange: [windowHeight, 0],
+          }
+    );
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        hide: (callback) => {
+          Animated.timing(animatedValue, {
+            toValue: 0,
+            ...defaultAnimationConfig,
+          }).start(callback);
+        },
+      }),
+      [animatedValue]
+    );
+
+    React.useEffect(() => {
+      // Hiding animation will be called from the modal component
+      if (visible) {
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          ...defaultAnimationConfig,
+          // Prevent animation when updating the modal content
+          duration: animated ? defaultAnimationConfig.duration : 0,
+        }).start(() => {
+          onShow?.();
+        });
+      }
+    }, [visible, animatedValue, onShow, animated]);
+
+    return (
+      <Animated.View
+        testID={testID}
+        style={[
+          style,
+          {
+            ...(animationType === 'fade' ? { opacity: modalAnimation } : {}),
+            ...(animationType === 'slide'
+              ? {
+                  transform: [{ translateY: modalAnimation }],
+                }
+              : {}),
+          },
+        ]}
+      >
+        {children}
+      </Animated.View>
+    );
+  }
+);
+
+ModalContentWrapper.displayName = 'ModalContentWrapper';
+
+export default ModalContentWrapper;

package/src/components/Modal/ModalPresenter/ModalPresenter.tsx

@@ -0,0 +1,135 @@
+import React, { forwardRef, useRef } from 'react';
+import { Animated, StyleSheet, ViewProps } from 'react-native';
+import RootSiblings from 'react-native-root-siblings';
+import { useTheme } from '../../../theme';
+import Box from '../../Box';
+
+export type ModalPresenterHandles = {
+  animatedOut: (completion?: () => void) => void;
+};
+export type ModalDismissFunc = (onDismiss?: () => void) => void;
+export type ModalUpdateFunc = (content: React.ReactNode) => void;
+
+/**
+ * Modal handler is returned by `showModal` function.
+ */
+export type ModalHandler = {
+  /**
+   * Same `dismiss` function as in `ModalContentProps`.
+   */
+  dismiss: ModalDismissFunc;
+  /**
+   * Same `update` function as in `ModalContentProps`.
+   */
+  update: ModalUpdateFunc;
+};
+
+const ModalPresenter = forwardRef<ModalPresenterHandles, ViewProps>(
+  ({ style, children, ...props }, ref) => {
+    const animatedOpacity = useRef(new Animated.Value(0));
+    const theme = useTheme();
+
+    React.useEffect(() => {
+      Animated.spring(animatedOpacity.current, {
+        toValue: 1,
+        useNativeDriver: true,
+      }).start();
+    }, []);
+
+    React.useImperativeHandle(ref, () => ({
+      animatedOut: (completion?: () => void) => {
+        Animated.spring(animatedOpacity.current, {
+          toValue: 0,
+          useNativeDriver: true,
+        }).start(() => {
+          completion?.();
+        });
+      },
+    }));
+
+    return (
+      <Box style={StyleSheet.absoluteFill}>
+        <Animated.View
+          style={[
+            {
+              width: '100%',
+              height: '100%',
+              backgroundColor: `${theme.colors.overlayGlobalSurface}66`, // 66 = 40% opacity as suggested by the mobile color guidelines
+              justifyContent: 'center',
+              alignItems: 'center',
+              opacity: animatedOpacity.current,
+            },
+            style,
+          ]}
+          {...props}
+        >
+          {children}
+        </Animated.View>
+      </Box>
+    );
+  }
+);
+
+/**
+ * Present a modal on screen immediately.
+ *
+ * The new presented modal will be on top of existing modals if there are any.
+ *
+ * @param Content A component to be presented as a modal on screen.
+ * This component will be centered horizontally and vertically on screen with
+ * a semitransparent black overlay underneath.
+ * @param contentProps Props for this modal component.
+ * @returns A `ModalHandler` you can use to dismiss the modal.
+ */
+
+export const showModal = (content: React.ReactNode): ModalHandler => {
+  let ref: ModalPresenterHandles | null = null;
+  let rootSiblings: RootSiblings | null = null;
+
+  const dismiss: ModalDismissFunc = (onDismiss) => {
+    if (rootSiblings) {
+      const cleanup = () => {
+        rootSiblings?.destroy();
+        rootSiblings = null;
+        ref = null;
+        onDismiss?.();
+      };
+
+      if (ref) {
+        ref.animatedOut(cleanup);
+      } else {
+        cleanup();
+      }
+    }
+  };
+
+  const update: ModalUpdateFunc = (newContent) => {
+    rootSiblings?.update(
+      <ModalPresenter
+        ref={(_ref) => {
+          ref = _ref;
+        }}
+      >
+        {newContent}
+      </ModalPresenter>
+    );
+  };
+
+  rootSiblings = new RootSiblings(
+    (
+      <ModalPresenter
+        ref={(_ref) => {
+          ref = _ref;
+        }}
+      >
+        {content}
+      </ModalPresenter>
+    )
+  );
+
+  return { dismiss, update };
+};
+
+ModalPresenter.displayName = 'ModalPresenter';
+
+export default ModalPresenter;

package/src/components/Modal/ModalPresenter/index.tsx

@@ -0,0 +1,9 @@
+import {
+  ModalDismissFunc,
+  ModalHandler,
+  showModal,
+  ModalPresenterHandles,
+} from './ModalPresenter';
+
+export type { ModalDismissFunc, ModalHandler, ModalPresenterHandles };
+export { showModal };

package/src/components/Modal/ModalProvider.tsx

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { RootSiblingParent } from 'react-native-root-siblings';
+
+const ModalProvider = ({ children }: { children: ReactNode }) => {
+  return <RootSiblingParent>{children}</RootSiblingParent>;
+};
+
+export default ModalProvider;

package/src/components/Modal/__tests__/ModalContentWrapper.spec.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import ModalContentWrapper from '../ModalContentWrapper';
+import Typography from '../../Typography';
+
+describe('ModalContentWrapper', () => {
+  it('should render correctly', () => {
+    const wrapper = renderWithTheme(
+      <ModalContentWrapper
+        testID="modal-content-wrapper"
+        style={{ backgroundColor: 'blue' }}
+        visible
+      >
+        <Typography.Text>Modal content</Typography.Text>
+      </ModalContentWrapper>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.getByText('Modal content')).toBeTruthy();
+    expect(wrapper.getByTestId('modal-content-wrapper')).toBeTruthy();
+    expect(wrapper.getByTestId('modal-content-wrapper')).toHaveStyle({
+      backgroundColor: 'blue',
+    });
+  });
+});

package/src/components/Modal/__tests__/ModalPresenter.spec.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import ModalPresenter, {
+  ModalPresenterHandles,
+} from '../ModalPresenter/ModalPresenter';
+import Typography from '../../Typography';
+
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+
+  const mockedAnimatedFunctions = {
+    start: (callback: () => void) => {
+      if (callback) {
+        callback();
+      }
+    },
+    _isUsingNativeDriver: () => jest.fn(),
+  };
+
+  RN.Animated.spring = () => mockedAnimatedFunctions;
+
+  return RN;
+});
+
+describe('ModalPresenter', () => {
+  it('should render correctly', () => {
+    const wrapper = renderWithTheme(
+      <ModalPresenter
+        testID="modal-presenter"
+        style={{ backgroundColor: 'blue' }}
+      >
+        <Typography.Text>Modal content</Typography.Text>
+      </ModalPresenter>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.getByText('Modal content')).toBeTruthy();
+    expect(wrapper.getByTestId('modal-presenter')).toBeTruthy();
+    expect(wrapper.getByTestId('modal-presenter')).toHaveStyle({
+      backgroundColor: 'blue',
+    });
+  });
+
+  it('allow using ref', () => {
+    const ref = React.createRef<ModalPresenterHandles>();
+    const completion = jest.fn();
+
+    renderWithTheme(
+      <ModalPresenter ref={ref}>
+        <Typography.Text>Modal content</Typography.Text>
+      </ModalPresenter>
+    );
+
+    ref.current?.animatedOut(completion);
+    expect(completion).toHaveBeenCalled();
+  });
+});

package/src/components/Modal/__tests__/__snapshots__/ModalContentWrapper.spec.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalContentWrapper should render correctly 1`] = `
+<View
+  collapsable={false}
+  style={
+    Object {
+      "backgroundColor": "blue",
+    }
+  }
+  testID="modal-content-wrapper"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        undefined,
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeTypeface="neutral"
+  >
+    Modal content
+  </Text>
+</View>
+`;

package/src/components/Modal/__tests__/__snapshots__/ModalPresenter.spec.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalPresenter should render correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {},
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      },
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "blue",
+        "height": "100%",
+        "justifyContent": "center",
+        "opacity": 0,
+        "width": "100%",
+      }
+    }
+    testID="modal-presenter"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      Modal content
+    </Text>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { BackHandler } from 'react-native';
+import Modal from '..';
+import Typography from '../../Typography';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+
+  const mockedAnimatedFunctions = {
+    start: (callback: () => void) => {
+      if (callback) {
+        callback();
+      }
+    },
+    _isUsingNativeDriver: () => jest.fn(),
+  };
+
+  RN.Animated.timing = () => mockedAnimatedFunctions;
+
+  return RN;
+});
+
+describe('Modal', () => {
+  it('onShow should be called correctly', () => {
+    const onShow = jest.fn();
+
+    renderWithTheme(
+      <Modal onShow={onShow} visible>
+        <Typography.Text>Modal content</Typography.Text>
+      </Modal>
+    );
+
+    expect(onShow).toHaveBeenCalled();
+  });
+
+  it('onRequestClose should be called correctly', () => {
+    const onRequestClose = jest.fn();
+
+    renderWithTheme(
+      <Modal onRequestClose={onRequestClose} visible>
+        <Typography.Text>Modal content</Typography.Text>
+      </Modal>
+    );
+    // @ts-expect-error: BackHandler mock
+    BackHandler.mockPressBack();
+
+    expect(onRequestClose).toHaveBeenCalled();
+  });
+});

package/src/components/Modal/index.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { BackHandler, Dimensions, View, ViewStyle } from 'react-native';
+import ModalContentWrapper, {
+  ModalContentWrapperHandler,
+} from './ModalContentWrapper';
+import ModalProvider from './ModalProvider';
+import { ModalHandler, showModal } from './ModalPresenter';
+
+const wrapperStyle: ViewStyle = {
+  width: Dimensions.get('window').width,
+  height: Dimensions.get('window').height,
+};
+
+export interface ModalProps {
+  /**
+   * Content of the modal.
+   */
+  children: React.ReactElement;
+  /**
+   * Visibility of the modal
+   */
+  visible?: boolean;
+  /**
+   * Callback when the modal is shown.
+   */
+  onShow?: () => void;
+  /**
+   * Callback when the user taps the hardware back button.
+   */
+  onRequestClose?: () => void;
+  /**
+   * TestID of the modal.
+   */
+  testID?: string;
+  /**
+   * Animation type of the modal content.
+   */
+  animationType?: 'none' | 'slide' | 'fade';
+}
+
+const Modal = ({
+  children,
+  onShow,
+  onRequestClose,
+  testID,
+  visible = true,
+  animationType = 'none',
+}: ModalProps) => {
+  const [modalHandler, setModalHandler] = React.useState<ModalHandler>();
+  const modalContentWrapperRef = React.useRef<ModalContentWrapperHandler>(null);
+
+  const getModalContent = React.useCallback(
+    (isUpdate = false) => {
+      return animationType === 'none' ? (
+        <View style={wrapperStyle} testID={testID}>
+          {children}
+        </View>
+      ) : (
+        <ModalContentWrapper
+          visible={visible}
+          style={wrapperStyle}
+          animationType={animationType}
+          testID={testID}
+          onShow={onShow}
+          ref={modalContentWrapperRef}
+          animated={!isUpdate}
+        >
+          {children}
+        </ModalContentWrapper>
+      );
+    },
+    [visible, children, onShow, testID, animationType]
+  );
+
+  React.useEffect(() => {
+    if (visible) {
+      // Modal does not exist, create a new one
+      if (!modalHandler) {
+        const newModalHandler = showModal(getModalContent(false));
+        setModalHandler(newModalHandler);
+
+        // If animationType is slide for fade, onShow would be run after animation on ModalContentWrapper,
+        // else run on this component.
+        if (animationType === 'none') {
+          onShow?.();
+        }
+      }
+      // Modal already exists, update it
+      else {
+        modalHandler.update(getModalContent(true));
+      }
+    } else if (animationType === 'none') {
+      modalHandler?.dismiss();
+      setModalHandler(undefined);
+    } else {
+      // Wait to finish animation before dismissing
+      modalContentWrapperRef.current?.hide(() => {
+        modalHandler?.dismiss();
+        setModalHandler(undefined);
+      });
+    }
+  }, [getModalContent]);
+
+  React.useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        onRequestClose?.();
+        return true;
+      }
+    );
+
+    return () => backHandler.remove();
+  }, [onRequestClose]);
+
+  return null;
+};
+
+export default Object.assign(Modal, {
+  Provider: ModalProvider,
+});

package/src/components/PinInput/index.tsx

@@ -198,4 +198,6 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
   }
 );
 
+PinInput.displayName = 'PinInput';
+
 export default PinInput;

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -378,8 +378,11 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
     </StyledContainer>
   );
 };
-
-export default forwardRef<
+const RichTextEditorWithRef = forwardRef<
   RichTextEditorRef,
   Omit<RichTextEditorProps, 'forwardedRef'>
 >((props, ref) => <RichTextEditor {...props} forwardedRef={ref} />);
+
+RichTextEditorWithRef.displayName = 'RichTextEditor';
+
+export default RichTextEditorWithRef;

package/src/components/Toast/ToastContainer.tsx

@@ -85,4 +85,6 @@ const ToastContainer = React.forwardRef<
   );
 });
 
+ToastContainer.displayName = 'ToastContainer';
+
 export default ToastContainer;

package/src/index.ts

@@ -37,6 +37,7 @@ import FAB from './components/FAB';
 import Icon from './components/Icon';
 import Image from './components/Image';
 import List from './components/List';
+import Modal from './components/Modal';
 import PinInput from './components/PinInput';
 import Progress from './components/Progress';
 import Slider from './components/Slider';
@@ -99,6 +100,7 @@ export {
   Icon,
   Image,
   List,
+  Modal,
   PinInput,
   Progress,
   PageControl,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -262,7 +262,9 @@ Object {
       },
       "space": Object {
         "headerHorizontalPadding": 12,
+        "headerMarginRight": 8,
         "headerVerticalPadding": 16,
+        "iosPickerMarginVertical": 64,
         "rowVerticalPadding": 16,
       },
     },

package/src/theme/components/calendar.ts

@@ -24,6 +24,8 @@ const getCalendarTheme = (theme: GlobalTheme) => {
     rowVerticalPadding: theme.space.medium,
     headerVerticalPadding: theme.space.medium,
     headerHorizontalPadding: theme.space.smallMedium,
+    headerMarginRight: theme.space.small,
+    iosPickerMarginVertical: theme.space['5xlarge'],
   };
 
   const radii = {