Update index.tsx

aragon · Oct 27, 2023 · 9333b51 · 9333b51
1 parent 7b67a14
commit 9333b51
Showing 1 changed file with 24 additions and 5 deletions.
diff --git a/src/components/bottomSheet/index.tsx b/src/components/bottomSheet/index.tsx
@@ -1,8 +1,10 @@
-import React, {ReactNode} from 'react';
-import {motion, PanInfo} from 'framer-motion';
+import React, {useEffect, ReactNode} from 'react';
+import {motion, PanInfo, useAnimationControls} from 'framer-motion';
 import {Backdrop} from '@aragon/ods-old';
 import styled from 'styled-components';
 
+import usePrevious from 'hooks/usePrevious';
+
 export type BottomSheetProps = {
   children?: ReactNode;
   isOpen: boolean;
@@ -20,25 +22,42 @@ export default function BottomSheet({
   subtitle,
   closeOnDrag = true,
 }: BottomSheetProps) {
+  const prevIsOpen = usePrevious(isOpen);
+  const controls = useAnimationControls();
+
   // For adding drag on bottom sheet
   function onDragEnd(_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) {
     if (!closeOnDrag) {
+      controls.start('visible');
       return;
     }
 
-    if (info.velocity.y > 20 || (info.velocity.y >= 0 && info.point.y > 45)) {
+    const shouldClose =
+      info.velocity.y > 20 || (info.velocity.y >= 0 && info.point.y > 45);
+    if (shouldClose) {
+      controls.start('hidden');
       onClose?.();
+    } else {
+      controls.start('visible');
     }
   }
+  // For Run animation on each state change
+  useEffect(() => {
+    if (prevIsOpen && !isOpen) {
+      controls.start('hidden');
+    } else if (!prevIsOpen && isOpen) {
+      controls.start('visible');
+    }
+  }, [controls, isOpen, prevIsOpen]);
 
   return (
     <>
       <Backdrop visible={isOpen} onClose={onClose} />
       <StyledMotionContainer
         drag="y"
         onDragEnd={onDragEnd}
-        initial={isOpen ? 'visible' : 'hidden'}
-        animate={isOpen ? 'visible' : 'hidden'}
+        initial="hidden"
+        animate={controls}
         transition={{
           type: 'spring',
           damping: 40,