@hero-design/rn 8.44.0-alpha.0 → 8.45.0-test.0

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

@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal renders correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "#000000",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0.4,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 1,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Modal content
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Modal renders correctly with transparent 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "transparent",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0.4,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />
+  <View
+    collapsable={false}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 1,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Modal content
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;

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

@@ -0,0 +1,99 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { BackHandler } from 'react-native';
+import Modal from '..';
+import { Button } from '../../..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Portal from '../../Portal';
+import Typography from '../../Typography';
+
+describe('Modal', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <Portal.Provider>
+        <Modal visible>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with transparent', () => {
+    const wrapper = renderWithTheme(
+      <Portal.Provider>
+        <Modal visible transparent>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('trigger onShow callback correctly', () => {
+    const onShow = jest.fn();
+    renderWithTheme(
+      <Portal.Provider>
+        <Modal visible onShow={onShow}>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    expect(onShow).toBeCalledTimes(1);
+  });
+
+  it('trigger onRequestClose callback correctly', () => {
+    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+      OS: 'android',
+      select: () => null,
+    }));
+
+    const onRequestClose = jest.fn();
+    renderWithTheme(
+      <Portal.Provider>
+        <Modal visible onRequestClose={onRequestClose}>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    // @ts-expect-error: BackHandler mock
+    BackHandler.mockPressBack();
+    expect(onRequestClose).toBeCalled();
+  });
+
+  it('trigger onDismiss callback correctly', async () => {
+    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+      OS: 'ios',
+      select: () => null,
+    }));
+
+    const onDismiss = jest.fn();
+
+    const ModalExample = () => {
+      const [modalVisible, setModalVisible] = React.useState(true);
+
+      return (
+        <Portal.Provider>
+          <Modal
+            animationType="none"
+            visible={modalVisible}
+            onDismiss={onDismiss}
+            transparent
+          >
+            <Typography.Body>Modal content</Typography.Body>
+            <Button text="Close modal" onPress={() => setModalVisible(false)} />
+          </Modal>
+        </Portal.Provider>
+      );
+    };
+
+    const { getByText } = renderWithTheme(<ModalExample />);
+
+    fireEvent.press(getByText('Close modal'));
+    expect(onDismiss).toBeCalled();
+  });
+});

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/PageControl/__tests__/__snapshots__/index.spec.tsx.snap

@@ -3,56 +3,99 @@
 exports[`RefreshControl renders correctly 1`] = `
 <View
   style={
-    [
-      {
-        "alignItems": "center",
-        "flexDirection": "row",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
   <View
-    collapsable={false}
     style={
-      {
-        "backgroundColor": "#401960",
-        "borderRadius": 999,
-        "height": 8,
-        "marginHorizontal": 8,
-        "opacity": 0.5,
-        "width": 8,
-      }
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
     }
-    testID="page-control-indicator0"
-  />
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "#401960",
-        "borderRadius": 999,
-        "height": 8,
-        "marginHorizontal": 8,
-        "opacity": 1,
-        "width": 24,
+  >
+    <View
+      accessibilityState={
+        {
+          "selected": false,
+        }
       }
-    }
-    testID="page-control-indicator1"
-  />
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "height": 8,
+          "marginHorizontal": 8,
+          "opacity": 0.5,
+          "width": 8,
+        }
+      }
+      testID="page-control-indicator0"
+    />
+    <View
+      accessibilityState={
+        {
+          "selected": true,
+        }
+      }
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "height": 8,
+          "marginHorizontal": 8,
+          "opacity": 1,
+          "width": 24,
+        }
+      }
+      testID="page-control-indicator1"
+    />
+    <View
+      accessibilityState={
+        {
+          "selected": false,
+        }
+      }
+      collapsable={false}
+      style={
+        {
+          "backgroundColor": "#401960",
+          "borderRadius": 999,
+          "height": 8,
+          "marginHorizontal": 8,
+          "opacity": 0.5,
+          "width": 8,
+        }
+      }
+      testID="page-control-indicator2"
+    />
+  </View>
   <View
-    collapsable={false}
+    pointerEvents="box-none"
+    position="bottom"
     style={
-      {
-        "backgroundColor": "#401960",
-        "borderRadius": 999,
-        "height": 8,
-        "marginHorizontal": 8,
-        "opacity": 0.5,
-        "width": 8,
-      }
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
     }
-    testID="page-control-indicator2"
   />
 </View>
 `;

package/src/components/PageControl/index.tsx

@@ -61,6 +61,7 @@ const PageControl = ({
 
         return (
           <StyledPageControlAnimatedView
+            accessibilityState={{ selected: index === currentPage }}
             style={[{ width: indicatorWidth, opacity }]}
             key={index.toString()}
             testID={`page-control-indicator${index}`}