From 7cc9753d3026c0f16e7786e180b92ab5467b49f7 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Tue, 13 Aug 2024 15:01:06 +0800
Subject: [PATCH] BottomSheet: fix jumpy animation

---
 src/material/BottomSheet.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/material/BottomSheet.tsx b/src/material/BottomSheet.tsx
index b5b93cc..73d5b4a 100644
--- a/src/material/BottomSheet.tsx
+++ b/src/material/BottomSheet.tsx
@@ -1,11 +1,15 @@
 import {
+  children,
   createEffect,
   createRenderEffect,
+  createSignal,
   onCleanup,
   onMount,
   startTransition,
   useTransition,
+  type ChildrenReturn,
   type ParentComponent,
+  type ResolvedChildren,
 } from "solid-js";
 import styles from "./BottomSheet.module.css";
 import { useHeroSignal } from "../platform/anim";
@@ -40,17 +44,21 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   let element: HTMLDialogElement;
   let animation: Animation | undefined;
   const hero = useHeroSignal(HERO);
+  const [cache, setCache] = createSignal<ResolvedChildren | undefined>();
+  const ochildren = children(() => props.children);
 
-  const [pending] = useTransition()
+  const [pending] = useTransition();
 
   createEffect(() => {
     if (props.open) {
       if (!element.open && !pending()) {
         animatedOpen();
+        setCache(ochildren());
       }
     } else {
       if (element.open) {
         animatedClose();
+        setCache(undefined);
       }
     }
   });
@@ -115,7 +123,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
 
   return (
     <dialog class={styles.bottomSheet} ref={element!}>
-      {props.children}
+      {ochildren() ?? cache()}
     </dialog>
   );
 };