@hero-design/rn 8.41.2 → 8.41.3-rc.0

package/src/components/Modal/index.tsx

@@ -1,41 +1,21 @@
-import React, {
-  ReactNode,
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-  useCallback,
-} from 'react';
-import {
-  Animated,
-  BackHandler,
-  Dimensions,
-  Easing,
-  Platform,
-  StyleSheet,
-} from 'react-native';
-import { useTheme } from '../../theme';
-import Portal from '../Portal';
-
-type ModalHandles = {
-  show: () => void;
-  hide: (callback: () => void) => void;
-};
-
-const DEFAULT_BACKDROP_OPACITY = 0.4;
-
-const DEFAULT_ANIMATION_CONFIG = {
-  easing: Easing.inOut(Easing.cubic),
-  useNativeDriver: Platform.OS !== 'web',
-  duration: 400,
+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: ReactNode;
+  children: React.ReactElement;
   /**
    * Visibility of the modal
    */
@@ -56,162 +36,86 @@ export interface ModalProps {
    * Animation type of the modal content.
    */
   animationType?: 'none' | 'slide' | 'fade';
-  /**
-   * Whether to show the modal backdrop
-   */
-  transparent?: boolean;
-  /**
-   * Callback when the modal is dismissed. iOS only.
-   */
-  onDismiss?: () => void;
 }
 
-const Modal = forwardRef<ModalHandles, Omit<ModalProps, 'visible'>>(
-  (
-    {
-      children,
-      onShow,
-      onRequestClose,
-      testID,
-      animationType = 'none',
-      transparent = false,
-      onDismiss,
-    },
-    ref
-  ) => {
-    const theme = useTheme();
-    const animatedBackdropValue = useRef(new Animated.Value(0)).current;
-    const animatedModalValue = useRef(new Animated.Value(0)).current;
-
-    // Show or hide the backdrop and modal content
-    const animateBackdropAndContent = useCallback(
-      ({ toValue, callback }: { toValue: number; callback?: () => void }) => {
-        if (animationType !== 'none') {
-          // Backdrop animation
-          if (!transparent) {
-            Animated.timing(animatedBackdropValue, {
-              toValue,
-              ...DEFAULT_ANIMATION_CONFIG,
-            }).start();
-          }
-
-          // Modal content animation
-          Animated.timing(animatedModalValue, {
-            toValue,
-            ...DEFAULT_ANIMATION_CONFIG,
-          }).start(callback);
-        } else {
-          callback?.();
-        }
-      },
-      [animationType, onShow, transparent]
-    );
-
-    const backdropOpacityAnimation = animatedBackdropValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, DEFAULT_BACKDROP_OPACITY],
-    });
-
-    const modalAnimation = animatedModalValue.interpolate({
-      inputRange: [0, 1],
-      outputRange:
-        animationType === 'slide'
-          ? [Dimensions.get('window').height, 0]
-          : [0, 1],
-    });
-
-    useImperativeHandle(
-      ref,
-      () => {
-        return {
-          show: () => {
-            animateBackdropAndContent({ toValue: 1, callback: onShow });
-          },
-
-          hide: (wrapperCallback) => {
-            animateBackdropAndContent({
-              toValue: 0,
-              callback: () => {
-                if (Platform.OS === 'ios') {
-                  onDismiss?.();
-                }
-
-                wrapperCallback();
-              },
-            });
-          },
-        };
-      },
-      [onDismiss, onShow, animateBackdropAndContent]
-    );
-
-    // Back button handler
-    useEffect(() => {
-      const backHandler = BackHandler.addEventListener(
-        'hardwareBackPress',
-        () => {
-          onRequestClose?.();
-          return true;
-        }
-      );
-
-      return () => backHandler.remove();
-    }, [onRequestClose]);
-
-    return (
-      <Portal>
-        <Animated.View
-          style={{
-            ...StyleSheet.absoluteFillObject,
-            backgroundColor: transparent
-              ? 'transparent'
-              : theme.colors.overlayGlobalSurface,
-            opacity:
-              animationType !== 'none'
-                ? backdropOpacityAnimation
-                : DEFAULT_BACKDROP_OPACITY,
-          }}
-        />
-
-        <Animated.View
+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}
-          style={{
-            ...StyleSheet.absoluteFillObject,
-            opacity: animationType === 'fade' ? modalAnimation : 1,
-            transform: [
-              {
-                translateY: animationType === 'slide' ? modalAnimation : 0,
-              },
-            ],
-          }}
+          onShow={onShow}
+          ref={modalContentWrapperRef}
+          animated={!isUpdate}
         >
           {children}
-        </Animated.View>
-      </Portal>
-    );
-  }
-);
-
-const ModalWrapper = ({ visible = true, ...props }: ModalProps) => {
-  const modalRef = useRef<ModalHandles>(null);
-  const [internalVisible, setInternalVisible] = useState(visible);
+        </ModalContentWrapper>
+      );
+    },
+    [visible, children, onShow, testID, animationType]
+  );
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (visible) {
-      setInternalVisible(true);
+      // 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 for animation to finish before hiding the modal
-      modalRef.current?.hide(() => setInternalVisible(false));
+      // Wait to finish animation before dismissing
+      modalContentWrapperRef.current?.hide(() => {
+        modalHandler?.dismiss();
+        setModalHandler(undefined);
+      });
     }
-  }, [visible]);
+  }, [getModalContent]);
 
-  useEffect(() => {
-    if (internalVisible) {
-      modalRef.current?.show();
-    }
-  }, [internalVisible]);
+  React.useEffect(() => {
+    const backHandler = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        onRequestClose?.();
+        return true;
+      }
+    );
+
+    return () => backHandler.remove();
+  }, [onRequestClose]);
 
-  return internalVisible ? <Modal ref={modalRef} {...props} /> : null;
+  return null;
 };
 
-export default ModalWrapper;
+export default Object.assign(Modal, {
+  Provider: ModalProvider,
+});

package/src/components/Success/StyledSuccess.tsx

@@ -1,9 +1,8 @@
 import styled from '@emotion/native';
-import { View } from 'react-native';
+import { Modal, View } from 'react-native';
 import Image from '../Image';
 import Typography from '../Typography';
 import Button from '../Button';
-import Modal from '../Modal';
 
 type SuccessVariant = 'full-screen' | 'in-page';
 

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

@@ -1,164 +1,144 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Success renders full screen success page correctly 1`] = `
-[
-  <View
-    collapsable={false}
-    style={
+<Modal
+  animationType="slide"
+  hardwareAccelerated={false}
+  style={
+    [
       {
-        "backgroundColor": "#000000",
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />,
+        "height": "100%",
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+  visible={true}
+>
   <View
-    collapsable={false}
     style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "opacity": 1,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "transform": [
-          {
-            "translateY": 1334,
-          },
-        ],
-      }
+      [
+        {
+          "backgroundColor": "#ccd2d3",
+          "display": "flex",
+          "flex": 1,
+          "flexDirection": "column",
+        },
+        undefined,
+      ]
     }
+    themeVariant="full-screen"
   >
     <View
       style={
         [
           {
-            "backgroundColor": "#ccd2d3",
+            "alignItems": "center",
             "display": "flex",
             "flex": 1,
             "flexDirection": "column",
+            "justifyContent": "center",
+            "padding": 24,
           },
           undefined,
         ]
       }
-      themeVariant="full-screen"
     >
       <View
         style={
           [
             {
-              "alignItems": "center",
-              "display": "flex",
-              "flex": 1,
-              "flexDirection": "column",
-              "justifyContent": "center",
-              "padding": 24,
+              "height": 176,
+              "marginBottom": 32,
+              "width": 176,
             },
             undefined,
           ]
         }
       >
-        <View
-          style={
-            [
-              {
-                "height": 176,
-                "marginBottom": 32,
-                "width": 176,
-              },
-              undefined,
-            ]
-          }
-        >
-          <Image
-            source={
-              {
-                "uri": "path_to_image",
-              }
-            }
-            style={
-              [
-                {
-                  "borderRadius": 0,
-                  "height": 72,
-                  "width": 72,
-                },
-                [
-                  {
-                    "height": 176,
-                    "marginBottom": 32,
-                    "resizeMode": "contain",
-                    "width": 176,
-                  },
-                  undefined,
-                ],
-              ]
+        <Image
+          source={
+            {
+              "uri": "path_to_image",
             }
-            testID="success-image"
-          />
-        </View>
-        <Text
-          allowFontScaling={false}
+          }
           style={
             [
               {
-                "color": "#001f23",
-                "fontFamily": "RebondGrotesque-SemiBold",
-                "fontSize": 24,
-                "letterSpacing": 0.24,
-                "lineHeight": 32,
+                "borderRadius": 0,
+                "height": 72,
+                "width": 72,
               },
               [
                 {
-                  "color": "#001f23",
-                  "marginBottom": 8,
-                  "textAlign": "center",
+                  "height": 176,
+                  "marginBottom": 32,
+                  "resizeMode": "contain",
+                  "width": 176,
                 },
                 undefined,
               ],
             ]
           }
-          themeIntent="body"
-          themeLevel="h4"
-          themeTypeface="playful"
-        >
-          We’re sorry, something went wrong
-        </Text>
-        <Text
-          allowFontScaling={false}
-          style={
+          testID="success-image"
+        />
+      </View>
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "RebondGrotesque-SemiBold",
+              "fontSize": 24,
+              "letterSpacing": 0.24,
+              "lineHeight": 32,
+            },
             [
               {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 16,
-                "letterSpacing": 0.48,
-                "lineHeight": 24,
+                "marginBottom": 8,
+                "textAlign": "center",
               },
-              [
-                {
-                  "color": "#4d6265",
-                  "textAlign": "center",
-                },
-                undefined,
-              ],
-            ]
-          }
-          themeIntent="body"
-          themeTypeface="neutral"
-          themeVariant="regular"
-        >
-          Please try again later
-        </Text>
-      </View>
+              undefined,
+            ],
+          ]
+        }
+        themeIntent="body"
+        themeLevel="h4"
+        themeTypeface="playful"
+      >
+        We’re sorry, something went wrong
+      </Text>
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            [
+              {
+                "color": "#4d6265",
+                "textAlign": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="regular"
+      >
+        Please try again later
+      </Text>
     </View>
-  </View>,
-]
+  </View>
+</Modal>
 `;
 
 exports[`Success renders succe screen with custom image element correctly 1`] = `

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

@@ -3,7 +3,6 @@ import { fireEvent } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Success from '..';
 import Image from '../../Image';
-import Portal from '../../Portal';
 
 const title = `We’re sorry, something went wrong`;
 const description = 'Please try again later';
@@ -47,14 +46,12 @@ describe('Success', () => {
   });
   it('renders full screen success page correctly', () => {
     const { toJSON, getByText, getByTestId } = renderWithTheme(
-      <Portal.Provider>
-        <Success
-          variant="full-screen"
-          title={title}
-          description={description}
-          image="path_to_image"
-        />
-      </Portal.Provider>
+      <Success
+        variant="full-screen"
+        title={title}
+        description={description}
+        image="path_to_image"
+      />
     );
 
     expect(getByText(title)).toBeTruthy();

package/src/index.ts

@@ -38,6 +38,7 @@ import HeroDesignProvider from './components/HeroDesignProvider';
 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';
@@ -102,6 +103,7 @@ export {
   Image,
   HeroDesignProvider,
   List,
+  Modal,
   PinInput,
   Progress,
   Portal,

package/testUtils/setup.tsx

@@ -132,4 +132,22 @@ jest.mock('react-native/Libraries/Utilities/BackHandler', () => {
   );
 });
 
+jest.mock('react-native-root-siblings', () => {
+  const React = jest.requireActual('react');
+
+  class RootSiblingsManager extends React.Component {
+    constructor(props) {
+      super(props);
+    }
+    render() {
+      return React.createElement('RootSiblingsManager', this.props, this.props.children);
+    }
+  }
+
+  return {
+    __esModule: true,
+    default: RootSiblingsManager,
+  };
+});
+
 export {};

package/types/components/Error/StyledError.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
-import { View } from 'react-native';
+import { Modal, View } from 'react-native';
 type ErrorVariant = 'full-screen' | 'in-page';
-declare const StyledErrorModal: import("@emotion/native").StyledComponent<import("../Modal").ModalProps & {
+declare const StyledErrorModal: import("@emotion/native").StyledComponent<import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
+}, {}, {
+    ref?: import("react").Ref<Modal> | undefined;
+}>;
 declare const StyledErrorContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Modal/ModalContentWrapper.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { 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;
+};
+declare const ModalContentWrapper: React.ForwardRefExoticComponent<ModalContentWrapperProps & React.RefAttributes<ModalContentWrapperHandler>>;
+export default ModalContentWrapper;