From 29073d430366914c396147e9a02b94de91df57f2 Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Sat, 17 Aug 2024 15:37:10 +0800
Subject: [PATCH] useHeroSignal: reset the signal after read

---
 src/material/BottomSheet.tsx |  4 +++-
 src/platform/anim.ts         | 10 ++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/material/BottomSheet.tsx b/src/material/BottomSheet.tsx
index 73d5b4a..d37a0e2 100644
--- a/src/material/BottomSheet.tsx
+++ b/src/material/BottomSheet.tsx
@@ -43,7 +43,7 @@ const MOVE_SPEED = 1400; // 1400px/s, bottom sheet is big and a bit heavier than
 const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   let element: HTMLDialogElement;
   let animation: Animation | undefined;
-  const hero = useHeroSignal(HERO);
+  const [hero, setHero] = useHeroSignal(HERO);
   const [cache, setCache] = createSignal<ResolvedChildren | undefined>();
   const ochildren = children(() => props.children);
 
@@ -70,11 +70,13 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
       const animation = animateHero(startRect, endRect, element, true);
       const onClose = () => {
         element.close();
+        setHero();
       };
       animation.addEventListener("finish", onClose);
       animation.addEventListener("cancel", onClose);
     } else {
       element.close();
+      setHero();
     }
   };
 
diff --git a/src/platform/anim.ts b/src/platform/anim.ts
index 0a937e2..7b87333 100644
--- a/src/platform/anim.ts
+++ b/src/platform/anim.ts
@@ -12,7 +12,9 @@ export type HeroSource = {
   [key: string | symbol | number]: DOMRect | undefined;
 };
 
-const HeroSourceContext = createContext<Signal<HeroSource>>(/* __@PURE__ */undefined);
+const HeroSourceContext = createContext<Signal<HeroSource>>(
+  /* __@PURE__ */ undefined,
+);
 
 export const HeroSourceProvider = HeroSourceContext.Provider;
 
@@ -25,7 +27,7 @@ function useHeroSource() {
  */
 export function useHeroSignal(
   key: string | symbol | number,
-): Accessor<DOMRect | undefined> {
+): Signal<DOMRect | undefined> {
   const source = useHeroSource();
   if (source) {
     const [get, set] = createSignal<DOMRect>();
@@ -42,8 +44,8 @@ export function useHeroSignal(
       }
     });
 
-    return get;
+    return [get, set];
   } else {
-    return () => undefined;
+    return [() => undefined, () => undefined];
   }
 }