fix: sheet stack dismiss transition

Signed-off-by: Innei <tukon479@gmail.com>
RSSNext · Dec 4, 2024 · 6a30f23 · 6a30f23
1 parent 6f041f9
commit 6a30f23
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/apps/renderer/src/components/ui/modal/stacked/modal-stack.mobile.tsx b/apps/renderer/src/components/ui/modal/stacked/modal-stack.mobile.tsx
@@ -59,8 +59,9 @@ const ModalToSheet = (props: ModalProps & { index: number; id: string }) => {
   const ModalProps: ModalActionsInternal = useMemo(
     () => ({
       dismiss: () => {
-        sheetRef.current?.dismiss()
-        close()
+        sheetRef.current?.dismiss().then(() => {
+          close()
+        })
       },
       getIndex: () => props.index,
       setClickOutSideToDismiss: (v) => {
@@ -74,7 +75,7 @@ const ModalToSheet = (props: ModalProps & { index: number; id: string }) => {
         )
       },
     }),
-    [id, props.index, setStack],
+    [close, id, props.index, setStack],
   )
   const modalContentRef = useRef<HTMLDivElement>(null)
   const ModalContextProps = useMemo<CurrentModalContentProps>(

diff --git a/apps/renderer/src/components/ui/modal/stacked/overlay.tsx b/apps/renderer/src/components/ui/modal/stacked/overlay.tsx
@@ -21,7 +21,7 @@ export const ModalOverlay = forwardRef(
     },
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
-    <Dialog.Overlay asChild>
+    <Dialog.Overlay>
       <AnimatePresence>
         {!hidden && (
           <m.div

diff --git a/packages/components/src/ui/sheet/Sheet.tsx b/packages/components/src/ui/sheet/Sheet.tsx
@@ -25,7 +25,7 @@ export interface PresentSheetProps {
 }
 
 export type SheetRef = {
-  dismiss: () => void
+  dismiss: () => Promise<void>
 }
 const MODAL_STACK_Z_INDEX = 1001
 export const PresentSheet = forwardRef<SheetRef, PropsWithChildren<PresentSheetProps>>(
@@ -48,7 +48,12 @@ export const PresentSheet = forwardRef<SheetRef, PropsWithChildren<PresentSheetP
 
     useImperativeHandle(ref, () => ({
       dismiss: () => {
-        setIsOpen(false)
+        return new Promise<void>((resolve) => {
+          setIsOpen(false)
+          setTimeout(() => {
+            resolve()
+          }, 500)
+        })
       },
     }))
 
@@ -95,7 +100,7 @@ export const PresentSheet = forwardRef<SheetRef, PropsWithChildren<PresentSheetP
     useImperativeHandle(contentRef, () => contentInnerRef.current!)
 
     return (
-      <Drawer.Root nested dismissible={dismissible} {...nextRootProps}>
+      <Drawer.Root dismissible={dismissible} {...nextRootProps}>
         {!!children && <Drawer.Trigger asChild={triggerAsChild}>{children}</Drawer.Trigger>}
         <Drawer.Portal>
           <Drawer.Content