fix: overlay and improve pref of modal

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

src/components/universal/Modal/stack-context.tsx

@@ -11,12 +11,11 @@ import type {
 import React, {
   createContext,
   createElement,
-  useCallback,
   useContext,
-  useMemo,
   useRef,
   useState,
 } from 'react'
+import { useStateToRef } from 'react-shortcut-guide'
 
 import { useIsClient } from '~/hooks/use-is-client'
 import { useStore } from '~/store'
@@ -98,6 +97,8 @@ export const ModalStackProvider: FC<{
 }> = observer((props) => {
   const { children } = props
   const [modalStack, setModalStack] = useState<IModalStackStateType[]>([])
+  const modalStackRef = useStateToRef(modalStack)
+
   const [extraModalPropsMap, setExtraModalPropsMap] = useState<
     Map<
       string,
@@ -115,7 +116,7 @@ export const ModalStackProvider: FC<{
     new WeakMap<FunctionComponentElement<any>, () => any>(),
   )
 
-  const present = useCallback((comp: IModalStackComponent): Disposer => {
+  const present = useRef((comp: IModalStackComponent): Disposer => {
     const {
       component,
       props,
@@ -143,24 +144,6 @@ export const ModalStackProvider: FC<{
       return () => null
     }
 
-    const $modalElement: FunctionComponentElement<any> = createElement(
-      Modal,
-      {
-        ...modalProps,
-        modalId: id,
-        useBottomDrawerInMobile,
-        key: id,
-        ref: (ins) => {
-          modalRefMap.current.set($modalElement, ins!)
-        },
-        disposer: () => {
-          dismissFnMapRef.current.delete($modalElement)
-          setModalStack((prev) => prev.filter((item) => item.id !== id))
-        },
-      },
-      modalChildren,
-    )
-
     const disposer = (immediately = false) => {
       const immediatelyDisposer = () => {
         setModalStack((stack) => {
@@ -179,6 +162,21 @@ export const ModalStackProvider: FC<{
       }
     }
 
+    const $modalElement: FunctionComponentElement<any> = createElement(
+      Modal,
+      {
+        ...modalProps,
+        modalId: id,
+        useBottomDrawerInMobile,
+        key: id,
+        ref: (ins) => {
+          modalRefMap.current.set($modalElement, ins!)
+        },
+        disposer,
+      },
+      modalChildren,
+    )
+
     setModalStack((stack) => {
       return [
         ...stack,
@@ -198,39 +196,36 @@ export const ModalStackProvider: FC<{
       return new Map(map)
     })
     return disposer
-  }, [])
+  }).current
 
-  const findCurrentByName = useCallback(
-    (name: string) => {
-      return modalStack.find((item) => item.name === name || item.id === name)
-    },
-    [modalStack],
-  )
+  const findCurrentByName = useRef((name: string) => {
+    const modalStack = modalStackRef.current
+    return modalStack.find((item) => item.name === name || item.id === name)
+  }).current
 
-  const getStack = useCallback(() => {
+  const getStack = useRef(() => {
+    const modalStack = modalStackRef.current
     return modalStack.concat()
-  }, [modalStack])
+  }).current
 
-  const disposeAll = useCallback(
-    async (immediately = false) => {
-      const reversedStack = modalStack.concat().reverse()
-      if (immediately) {
-        reversedStack.forEach((current) => current.disposer())
-      } else {
-        for (const current of reversedStack) {
-          const instance = modalRefMap.current.get(current.component)
+  const disposeAll = useRef(async (immediately = false) => {
+    const modalStack = modalStackRef.current
+    const reversedStack = modalStack.concat().reverse()
+    if (immediately) {
+      reversedStack.forEach((current) => current.disposer())
+    } else {
+      for (const current of reversedStack) {
+        const instance = modalRefMap.current.get(current.component)
 
-          if (!instance) {
-            current.disposer()
-            continue
-          }
-          await instance.dismiss()
+        if (!instance) {
           current.disposer()
+          continue
         }
+        await instance.dismiss()
+        current.disposer()
       }
-    },
-    [modalStack],
-  )
+    }
+  }).current
 
   const isClient = useIsClient()
 
@@ -243,10 +238,9 @@ export const ModalStackProvider: FC<{
 
   return (
     <ModalStackContext.Provider
-      value={useMemo(
-        () => ({ present, findCurrentByName, getStack, disposeAll }),
-        [disposeAll, findCurrentByName, getStack, present],
-      )}
+      value={
+        useRef({ present, findCurrentByName, getStack, disposeAll }).current
+      }
     >
       {children}
 

src/components/universal/Overlay/index.tsx

@@ -54,6 +54,12 @@ const OverLay: FC<OverlayProps> = (props) => {
     document.documentElement.style.overflow = show ? 'hidden' : ''
   }, [show])
 
+  useEffect(() => {
+    return () => {
+      document.documentElement.style.overflow = ''
+    }
+  }, [])
+
   if (!isClient) {
     return null
   }

src/components/universal/Transition/bottom-up.tsx

@@ -6,25 +6,32 @@ import { genSpringKeyframes } from '~/utils/spring'
 import type { BaseTransitionViewProps } from './base'
 import { BaseTransitionView } from './base'
 
-const name = `bottom-up-spring`
+const up_name = `bottom-up-spring`
+const down_name = `bottom-down-spring`
 
 const defaultStyle = {
   opacity: 0,
 }
 
 const transitionStyles = {
   entering: { opacity: 0 },
-  entered: { animation: `${name} 1000ms linear both`, opacity: 1 },
-  exiting: { animation: `${name} 1000ms linear both reverse`, opacity: 1 },
+  entered: { animation: `${up_name} 1000ms linear both`, opacity: 1 },
+  exiting: { animation: `${down_name} 1000ms linear both`, opacity: 1 },
   exited: { opacity: 0 },
 }
 
 export const BottomUpTransitionView: FC<
   BaseTransitionViewProps & Partial<TransitionProps>
-> = BaseTransitionView(defaultStyle, transitionStyles, () =>
+> = BaseTransitionView(defaultStyle, transitionStyles, () => {
   genSpringKeyframes(
-    name,
+    up_name,
     { translateY: '3em', opacity: 0 },
     { translateY: '0em', opacity: 1 },
-  ),
-)
+  )
+
+  genSpringKeyframes(
+    down_name,
+    { translateY: '0em', opacity: 1 },
+    { translateY: '3em', opacity: 0 },
+  )
+})