Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

useHeroSignal: reset the signal after read

Browse source
This commit is contained in:
thislight 2024-08-17 15:37:10 +08:00
parent 5c150a6aa3
commit 29073d4303
No known key found for this signature in database
GPG key ID: A50F9451AC56A63E
2 changed files with 9 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/material/BottomSheet.tsx
View file

@ -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();
}
};

10
src/platform/anim.ts
View file

@ -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];
}
}