better opening and closing

Author: sclebal

src/hooks/use-sheet-state.ts

@@ -5,56 +5,42 @@ type SheetState = 'closed' | 'opening' | 'open' | 'closing';
 
 type UseSheetStatesProps = {
   isOpen: boolean;
-  onClosed?: () => Promise<void> | void;
   onOpening?: () => Promise<void> | void;
-  onOpen?: () => Promise<void> | void;
   onClosing?: () => Promise<void> | void;
 };
 
 export function useSheetState({
   isOpen,
-  onClosed: _onClosed,
   onOpening: _onOpening,
-  onOpen: _onOpen,
   onClosing: _onClosing,
 }: UseSheetStatesProps) {
   const [state, setState] = useState<SheetState>(isOpen ? 'opening' : 'closed');
   const abortControllerRef = useRef<AbortController | null>(null);
-  const onClosed = useStableCallback(() => _onClosed?.());
   const onOpening = useStableCallback(() => _onOpening?.());
-  const onOpen = useStableCallback(() => _onOpen?.());
   const onClosing = useStableCallback(() => _onClosing?.());
 
   useEffect(() => {
     abortControllerRef.current?.abort();
-    setState(isOpen ? 'opening' : 'closing');
-  }, [isOpen]);
 
-  useEffect(() => {
     const abortController = new AbortController();
     abortControllerRef.current = abortController;
 
     async function handle() {
-      switch (state) {
-        case 'closed':
-          await onClosed?.();
-          break;
-
-        case 'opening':
+      switch (isOpen) {
+        case true:
+          setState('opening');
           await onOpening?.();
           if (!abortController.signal.aborted) setState('open');
           break;
 
-        case 'open':
-          await onOpen?.();
-          break;
-
-        case 'closing':
+        case false:
+          setState('closing');
           await onClosing?.();
           if (!abortController.signal.aborted) setState('closed');
           break;
       }
     }
+
     handle().catch((error) => {
       if (error instanceof Error) {
         console.error('Internal sheet state error:', error);
@@ -64,7 +50,7 @@ export function useSheetState({
     return () => {
       abortController.abort();
     };
-  }, [state]);
+  }, [isOpen]);
 
   return state;
 }

src/sheet.tsx

@@ -507,14 +507,19 @@ export const Sheet = forwardRef<any, SheetProps>(
             const initialSnapPoint =
               initialSnap !== undefined ? getSnapPoint(initialSnap) : null;
 
+            const onAnimationComplete = makeCallableSingleTime(() => {
+              clearYListeners();
+              handleOpenEnd();
+              resolve();
+            });
+
             if (!initialSnapPoint) {
               console.warn(
                 'No initial snap point found',
                 initialSnap,
                 snapPoints
               );
-              handleOpenEnd();
-              resolve();
+              onAnimationComplete();
               return;
             }
 
@@ -527,20 +532,17 @@ export const Sheet = forwardRef<any, SheetProps>(
                 y.on('animationCancel', () => {
                   clearYListeners();
                   if (openStateRef.current === 'opening') {
-                    handleOpenEnd();
-                    resolve();
+                    onAnimationComplete();
                   } else {
                     reject('stopped opening');
                   }
                 }),
-                y.on('animationComplete', () => {
-                  clearYListeners();
-                  handleOpenEnd();
-                  resolve();
-                })
+                y.on('animationComplete', onAnimationComplete)
               );
 
-              animate(y, initialSnapPoint.snapValueY, animationOptions);
+              animate(y, initialSnapPoint.snapValueY, animationOptions).then(
+                onAnimationComplete
+              );
             }
           };
 
@@ -575,30 +577,36 @@ export const Sheet = forwardRef<any, SheetProps>(
             openStateRef.current = 'closed';
           };
 
+          const onAnimationComplete = makeCallableSingleTime(() => {
+            clearYListeners();
+            handleCloseEnd();
+            resolve();
+          });
+
           yListenersRef.current.push(
             y.on('animationCancel', () => {
               clearYListeners();
 
               if (openStateRef.current === 'closing') {
-                handleCloseEnd();
-                resolve();
+                onAnimationComplete();
               } else {
                 reject('stopped closing');
               }
             }),
             y.on('animationComplete', () => {
-              clearYListeners();
-
-              handleCloseEnd();
-              resolve();
+              onAnimationComplete();
             })
           );
 
-          animate(y, closedY, animationOptions);
+          animate(y, closedY, animationOptions).then(() => {
+            onAnimationComplete();
+          });
         });
       },
     });
 
+    console.log(rest.id, 'isOpen', isOpen, 'state', state);
+
     const dragProps: SheetContextType['dragProps'] = {
       drag: 'y',
       dragElastic: 0,
@@ -668,3 +676,12 @@ function linear(
   );
   return outputMin + (outputMax - outputMin) * t;
 }
+
+function makeCallableSingleTime<T>(fn: () => T) {
+  let called = false;
+  return () => {
+    if (called) return;
+    called = true;
+    fn();
+  };
+}