@hero-design/rn 8.41.0 → 8.41.2

package/src/components/Modal/index.tsx

@@ -1,21 +1,41 @@
-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,
+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,
 };
 
 export interface ModalProps {
   /**
    * Content of the modal.
    */
-  children: React.ReactElement;
+  children: ReactNode;
   /**
    * Visibility of the modal
    */
@@ -36,86 +56,162 @@ 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 = ({
-  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}
+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
           testID={testID}
-          onShow={onShow}
-          ref={modalContentWrapperRef}
-          animated={!isUpdate}
+          style={{
+            ...StyleSheet.absoluteFillObject,
+            opacity: animationType === 'fade' ? modalAnimation : 1,
+            transform: [
+              {
+                translateY: animationType === 'slide' ? modalAnimation : 0,
+              },
+            ],
+          }}
         >
           {children}
-        </ModalContentWrapper>
-      );
-    },
-    [visible, children, onShow, testID, animationType]
-  );
+        </Animated.View>
+      </Portal>
+    );
+  }
+);
 
-  React.useEffect(() => {
+const ModalWrapper = ({ visible = true, ...props }: ModalProps) => {
+  const modalRef = useRef<ModalHandles>(null);
+  const [internalVisible, setInternalVisible] = useState(visible);
+
+  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);
+      setInternalVisible(true);
     } else {
-      // Wait to finish animation before dismissing
-      modalContentWrapperRef.current?.hide(() => {
-        modalHandler?.dismiss();
-        setModalHandler(undefined);
-      });
+      // Wait for animation to finish before hiding the modal
+      modalRef.current?.hide(() => setInternalVisible(false));
     }
-  }, [getModalContent]);
+  }, [visible]);
 
-  React.useEffect(() => {
-    const backHandler = BackHandler.addEventListener(
-      'hardwareBackPress',
-      () => {
-        onRequestClose?.();
-        return true;
-      }
-    );
-
-    return () => backHandler.remove();
-  }, [onRequestClose]);
+  useEffect(() => {
+    if (internalVisible) {
+      modalRef.current?.show();
+    }
+  }, [internalVisible]);
 
-  return null;
+  return internalVisible ? <Modal ref={modalRef} {...props} /> : null;
 };
 
-export default Object.assign(Modal, {
-  Provider: ModalProvider,
-});
+export default ModalWrapper;

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Portal allows rendering children with custom theme 1`] = `
+<View
+  testID="portal-wrapper"
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 16,
+          "letterSpacing": 0.48,
+          "lineHeight": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="body"
+    themeTypeface="neutral"
+    themeVariant="regular"
+  >
+    portal
+  </Text>
+  ;
+</View>
+`;

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

@@ -6,6 +6,8 @@ import { PortalHost } from '../PortalHost';
 import { PortalProvider } from '../PortalProvider';
 import Typography from '../../Typography';
 import Portal from '..';
+import { getTheme } from '../../../theme';
+import { defaultScale, walletSystemPalette } from '../../../theme/global';
 
 describe('Portal', () => {
   it('should render Typography inside Portal.Host', async () => {
@@ -26,4 +28,21 @@ describe('Portal', () => {
       ).toBeDefined()
     );
   });
+
+  it('allows rendering children with custom theme', () => {
+    const customTheme = getTheme(defaultScale, walletSystemPalette);
+
+    const wrapper = renderWithTheme(
+      <PortalProvider>
+        <View testID="portal-wrapper">
+          <PortalHost name="host" />
+        </View>
+        <Portal theme={customTheme} hostName="host">
+          <Typography.Body>portal</Typography.Body>;
+        </Portal>
+      </PortalProvider>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
 });

package/src/components/Portal/index.tsx

@@ -1,10 +1,11 @@
-import { ReactNode, memo, useLayoutEffect, useMemo } from 'react';
+import React, { ReactNode, memo, useLayoutEffect, useMemo } from 'react';
 // Fix issue no crypto in react-native
 // https://stackoverflow.com/a/66852908
 import { customAlphabet } from 'nanoid/non-secure';
 import { usePortal } from './usePortal';
 import { PortalProvider } from './PortalProvider';
 import { PortalHost } from './PortalHost';
+import { Theme, ThemeProvider, useTheme } from '../../theme';
 
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
 
@@ -23,23 +24,35 @@ export interface PortalProps {
    * Content of the portal.
    */
   children?: ReactNode | ReactNode[];
+  /**
+   * Theme for portal children.
+   */
+  theme?: Theme;
 }
 
-const PortalComponent = ({ name, hostName, children }: PortalProps) => {
+const PortalComponent = ({ name, hostName, children, theme }: PortalProps) => {
+  const defaultTheme = useTheme();
   const { addPortal: addUpdatePortal, removePortal } = usePortal(hostName);
 
   const nameOrRandom = useMemo(() => name || nanoid(), [name]);
 
+  const ChildrenComponent = useMemo(
+    () => (
+      <ThemeProvider theme={theme || defaultTheme}>{children}</ThemeProvider>
+    ),
+    [theme, children, defaultTheme]
+  );
+
   useLayoutEffect(() => {
-    addUpdatePortal(nameOrRandom, children);
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
     return () => {
       removePortal(nameOrRandom);
     };
   }, [addUpdatePortal]);
 
   useLayoutEffect(() => {
-    addUpdatePortal(nameOrRandom, children);
-  }, [children]);
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
+  }, [ChildrenComponent]);
 
   return null;
 };

package/src/components/Success/StyledSuccess.tsx

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