fix: slide issue

GeekyAnts · Jan 7, 2022 · 2224c95 · 2224c95
1 parent 5c2f35b
commit 2224c95
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 70 deletions.
diff --git a/src/components/composites/AlertDialog/AlertDialog.tsx b/src/components/composites/AlertDialog/AlertDialog.tsx
@@ -93,7 +93,7 @@ const AlertDialog = (
           )}
         </Fade>
         {animationPreset === 'slide' ? (
-          <Slide in={visible} duration={200}>
+          <Slide overlay={false} in={visible} duration={200}>
             <FocusScope
               contain={visible}
               autoFocus={visible && !initialFocusRef}

diff --git a/src/components/composites/Modal/Modal.tsx b/src/components/composites/Modal/Modal.tsx
@@ -98,7 +98,7 @@ const Modal = (
           )}
         </Fade>
         {animationPreset === 'slide' ? (
-          <Slide in={visible} duration={200}>
+          <Slide in={visible} overlay={false} duration={200}>
             <FocusScope
               contain={visible}
               autoFocus={visible && !initialFocusRef}

diff --git a/src/components/composites/Transitions/Slide.tsx b/src/components/composites/Transitions/Slide.tsx
@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { forwardRef, memo } from 'react';
 import Box from '../../primitives/Box';
 import { useThemeProps } from '../../../hooks/useThemeProps';
 import type { ISlideProps } from './types';
 import PresenceTransition from './PresenceTransition';
 import { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';
+import { Overlay } from '../../primitives';
 
 const holderStyle: any = {
   top: {
@@ -28,77 +29,72 @@ const holderStyle: any = {
   },
 };
 
-const Slide = ({ children, ...props }: ISlideProps, ref: any) => {
-  const { in: visible, placement, duration } = useThemeProps('Slide', props);
-  const [containerOpacity, setContainerOpacity] = React.useState(0);
-  const [size, setSize] = React.useState(0);
-  const provideSize = (layoutSize: any) => {
-    if (placement === 'right' || placement === 'left')
-      setSize(layoutSize.width);
-    else setSize(layoutSize.height);
-    setContainerOpacity(1);
-  };
+export const Slide = memo(
+  forwardRef(({ children, ...props }: ISlideProps, ref: any) => {
+    const { in: visible, placement, overlay, duration } = useThemeProps(
+      'Slide',
+      props
+    );
+    const [containerOpacity, setContainerOpacity] = React.useState(0);
+    const [size, setSize] = React.useState(0);
+    const provideSize = (layoutSize: any) => {
+      if (placement === 'right' || placement === 'left')
+        setSize(layoutSize.width);
+      else setSize(layoutSize.height);
+      setContainerOpacity(1);
+    };
 
-  const transition = { duration };
+    const transition = { duration };
 
-  const animationStyle: any = {
-    top: {
-      initial: {
-        translateY: -size,
+    const animationStyle: any = {
+      top: {
+        initial: {
+          translateY: -size,
+        },
+        animate: {
+          translateY: 0,
+          transition,
+        },
       },
-      animate: {
-        translateY: 0,
-        transition,
+      bottom: {
+        initial: {
+          translateY: size,
+        },
+        animate: {
+          translateY: 0,
+          transition,
+        },
+        exit: {
+          translateY: size,
+          transition,
+        },
       },
-    },
-    bottom: {
-      initial: {
-        translateY: size,
+      left: {
+        initial: {
+          translateX: -size,
+        },
+        animate: {
+          translateX: 0,
+          transition,
+        },
       },
-      animate: {
-        translateY: 0,
-        transition,
+      right: {
+        initial: {
+          translateX: size,
+        },
+        animate: {
+          translateX: 0,
+          transition,
+        },
       },
-      exit: {
-        translateY: size,
-        transition,
-      },
-    },
-    left: {
-      initial: {
-        translateX: -size,
-      },
-      animate: {
-        translateX: 0,
-        transition,
-      },
-    },
-    right: {
-      initial: {
-        translateX: size,
-      },
-      animate: {
-        translateX: 0,
-        transition,
-      },
-    },
-  };
+    };
 
-  //TODO: refactor for responsive prop
-  if (useHasResponsiveProps(props)) {
-    return null;
-  }
+    //TODO: refactor for responsive prop
+    if (useHasResponsiveProps(props)) {
+      return null;
+    }
 
-  return (
-    <Box
-      w="100%"
-      h="100%"
-      position="fixed"
-      left="0"
-      top="0"
-      pointerEvents="box-none"
-      overflow="hidden"
-    >
+    const slideComponent = (
       <PresenceTransition
         visible={visible}
         {...animationStyle[placement]}
@@ -119,8 +115,20 @@ const Slide = ({ children, ...props }: ISlideProps, ref: any) => {
           {children}
         </Box>
       </PresenceTransition>
-    </Box>
-  );
-};
+    );
+
+    if (overlay) {
+      return (
+        <Overlay isOpen={true}>
+          <Box w="100%" h="100%" pointerEvents="box-none" overflow="hidden">
+            {slideComponent}
+          </Box>
+        </Overlay>
+      );
+    } else {
+      return slideComponent;
+    }
+  })
+);
 
-export default React.memo(React.forwardRef(Slide));
+export default Slide;
diff --git a/src/components/composites/Transitions/types.tsx b/src/components/composites/Transitions/types.tsx
@@ -19,6 +19,7 @@ export type ISlideProps = IBoxProps<ISlideProps> & {
   duration?: number;
   delay?: number;
   placement?: 'top' | 'bottom' | 'right' | 'left';
+  overlay?: boolean;
 };
 export type ISlideFadeProps = IBoxProps<ISlideFadeProps> & {
   in?: boolean;

diff --git a/src/theme/components/transitions.ts b/src/theme/components/transitions.ts
@@ -22,6 +22,7 @@ export const ScaleFade = {
 const slideDefaultProps = {
   duration: 500,
   placement: 'bottom',
+  overlay: true,
 };
 
 export const Slide = {