refactor: modals

2023-01-26 22:08:12 +05:30
parent c772b5a854
commit d583311de7
39 changed files with 333 additions and 446 deletions
--- a/packages/web/src/javascripts/Components/Modal/useModalAnimation.ts
+++ b/packages/web/src/javascripts/Components/Modal/useModalAnimation.ts
@@ -0,0 +1,52 @@
+import { useLifecycleAnimation } from '@/Hooks/useLifecycleAnimation'
+import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
+
+export const useModalAnimation = (isOpen: boolean) => {
+  const isMobileScreen = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
+
+  return useLifecycleAnimation(
+    {
+      open: isOpen,
+      enter: {
+        keyframes: [
+          {
+            transform: 'translateY(100%)',
+          },
+          {
+            transform: 'translateY(0)',
+          },
+        ],
+        options: {
+          easing: 'cubic-bezier(.36,.66,.04,1)',
+          duration: 250,
+          fill: 'forwards',
+        },
+        initialStyle: {
+          transformOrigin: 'bottom',
+        },
+      },
+      enterCallback: (element) => {
+        element.scrollTop = 0
+      },
+      exit: {
+        keyframes: [
+          {
+            transform: 'translateY(0)',
+          },
+          {
+            transform: 'translateY(100%)',
+          },
+        ],
+        options: {
+          easing: 'cubic-bezier(.36,.66,.04,1)',
+          duration: 250,
+          fill: 'forwards',
+        },
+        initialStyle: {
+          transformOrigin: 'bottom',
+        },
+      },
+    },
+    !isMobileScreen,
+  )
+}