feat(*): refactor animations and modal

Author: minheq

jest.config.snapshot.js

@@ -19,7 +19,6 @@ module.exports = {
     'tsx',
     ...defaults.moduleFileExtensions,
   ],
-  transformIgnorePatterns: ['/node_modules/(?!@expo/vector-icons).+\\.js$'],
   testRegex: './tests/snapshot.test.js',
   setupFiles: ['jest-canvas-mock'],
 };

src/components/Dialog/Dialog.tsx

@@ -20,6 +20,8 @@ export interface DialogProps {
   useHistory?: boolean;
   /** To show dialog or not */
   isVisible?: boolean;
+  /** WWhether body can scroll while dialog is opened */
+  isBackgroundScrollable?: boolean;
   /** Called when clicking on overlay or pressing Esc, or using back button (requires useHistory to be true) */
   onRequestClose?: () => void;
   /** In ConfirmDialog, you can pass null to render nothing. If it is undefined, it will use default value */
@@ -37,6 +39,7 @@ export const Dialog = (props: DialogProps) => {
     children,
     footer,
     header,
+    isBackgroundScrollable = false,
     isVisible,
     onRequestClose = () => null,
     getStyles,
@@ -55,6 +58,7 @@ export const Dialog = (props: DialogProps) => {
       visible={isVisible}
       transparent
       onRequestClose={onRequestClose}
+      isBackgroundScrollable={isBackgroundScrollable}
     >
       <View style={modalContainerStyle}>
         <View style={containerStyle}>

src/components/Drawer/Drawer.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Animated, View } from 'react-native';
+import { View } from 'react-native';
+import { animated, useSpring } from 'react-spring/native.cjs';
 import { DeepPartial } from 'ts-essentials';
 
 import { useTheme } from '../../theme';
@@ -13,6 +14,7 @@ import {
 } from './Drawer.styles';
 
 type Position = 'bottom' | 'top' | 'right' | 'left';
+const AnimatedView = animated(View);
 
 export interface DrawerProps {
   children: React.ReactNode;
@@ -47,23 +49,21 @@ export const Drawer = (props: DrawerProps) => {
     getStyles,
   )(theme);
 
-  if (!isVisible) return null;
-
-  const value = new Animated.Value(-500);
-
-  Animated.spring(value, {
-    bounciness: 0,
-    speed: 70,
-    toValue: offset,
-  }).start();
+  const animation = useSpring({
+    [position]: offset,
+    from: { [position]: -600 },
+    reset: true,
+  });
 
   return (
-    <Modal visible transparent onRequestClose={onClose}>
+    <Modal visible={isVisible} transparent onRequestClose={onClose}>
       <View style={modalContainerStyle}>
-        <Animated.View
+        {/*
+        // @ts-ignore */}
+        <AnimatedView
           style={{
             ...containerStyle,
-            [position]: value,
+            [position]: animation[position],
             ...((position === 'left' || position === 'right') &&
               space && {
                 height: '100%',
@@ -77,7 +77,7 @@ export const Drawer = (props: DrawerProps) => {
           }}
         >
           {children}
-        </Animated.View>
+        </AnimatedView>
         <Overlay onPress={onClose} />
       </View>
     </Modal>

src/components/Helpers/index.ts

@@ -1,3 +1,5 @@
 export * from './ViewMeasure';
 export * from './Responsive';
 export * from './useMeasure';
+export * from './useElement';
+export * from './useFreezeBody';

src/components/Helpers/useElement.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+
+// ported from https://www.jayfreestone.com/writing/react-portals-with-hooks/
+
+const createRootElement = (id: string) => {
+  const rootContainer = document.createElement('div');
+  rootContainer.setAttribute('id', id);
+  return rootContainer;
+};
+
+const addRootElement = (rootElem: Element) => {
+  if (document.body.lastElementChild) {
+    document.body.insertBefore(
+      rootElem,
+      document.body.lastElementChild.nextElementSibling,
+    );
+  }
+};
+
+export const useElement = (id: string) => {
+  const rootElemRef = React.useRef<Element>(null);
+
+  React.useEffect(() => {
+    const existingParent = document.querySelector(`#${id}`);
+    const parentElem = existingParent || createRootElement(id);
+
+    // If there is no existing DOM element, add a new one.
+    if (!existingParent) {
+      addRootElement(parentElem);
+    }
+
+    if (rootElemRef.current) {
+      parentElem.appendChild(rootElemRef.current);
+    }
+
+    return () => {
+      if (rootElemRef.current) rootElemRef.current.remove();
+      if (parentElem.childNodes.length === -1) {
+        parentElem.remove();
+      }
+    };
+  }, []);
+
+  const getRootElem = () => {
+    if (!rootElemRef.current) {
+      // @ts-ignore
+      rootElemRef.current = document.createElement('div');
+    }
+    return rootElemRef.current;
+  };
+
+  return getRootElem();
+};

src/components/Helpers/useFreezeBody.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export const useFreezeBody = ({ isFrozen }: { isFrozen: boolean }) => {
+  React.useEffect(() => {
+    const freeze = () => {
+      document.body.style.overflow = 'hidden';
+      document.body.style.height = '100vh';
+    };
+
+    const unfreeze = () => {
+      document.body.style.overflow = '';
+      document.body.style.height = '';
+    };
+
+    if (isFrozen) freeze();
+    else unfreeze();
+
+    return () => unfreeze();
+  }, [isFrozen]);
+};

src/components/Helpers/useMeasure.tsx src/components/Helpers/useMeasure.tssrc/components/Helpers/useMeasure.tsx renamed to src/components/Helpers/useMeasure.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View } from 'react-native';
-import { animated, useTrail } from 'react-spring/native';
+import { animated, useTrail } from 'react-spring/native.cjs';
 
 const AnimatedView = animated(View);
 

src/components/Loading/LoadingDots.tsx

@@ -12,7 +12,7 @@ let modalId = 0;
  * 3. Manually closed from within the modal (e.g. Close button)
  * Each of them should properly restore the page user was at
  */
-class HistoryModalBase extends React.PureComponent<HistoryModalProps> {
+class HistoryModalBase extends React.Component<HistoryModalProps> {
   public modalId = ++modalId;
 
   public componentDidUpdate = (previousProps: HistoryModalProps) => {

src/components/Modal/HistoryModal.web.tsx

@@ -4,6 +4,7 @@ import { Modal, ModalProps } from 'react-native';
 export interface ModalBaseProps extends ModalProps {
   /** (Web) Whether should scroll when user initiates non-touch scroll (mouse wheel, keyboard down/up) */
   isBackgroundScrollable?: boolean;
+  children?: React.ReactNode;
 }
 
 export const ModalBase = (props: ModalBaseProps) => <Modal {...props} />;