94 lines
2.2 KiB
TypeScript
94 lines
2.2 KiB
TypeScript
import {
|
|
createEffect,
|
|
createRenderEffect,
|
|
onCleanup,
|
|
onMount,
|
|
type ParentComponent,
|
|
} from "solid-js";
|
|
import styles from "./BottomSheet.module.css";
|
|
import { useHeroSignal } from "../platform/anim";
|
|
|
|
export type BottomSheetProps = {
|
|
open?: boolean;
|
|
};
|
|
|
|
export const HERO = Symbol("BottomSheet Hero Symbol");
|
|
|
|
function composeAnimationFrame({
|
|
top,
|
|
left,
|
|
height,
|
|
width,
|
|
}: Record<"top" | "left" | "height" | "width", number>) {
|
|
return {
|
|
top: `${top}px`,
|
|
left: `${left}px`,
|
|
height: `${height}px`,
|
|
width: `${width}px`,
|
|
};
|
|
}
|
|
|
|
const MOVE_SPEED = 1400; // 1400px/s, bottom sheet is big and a bit heavier than small papers
|
|
|
|
const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
|
|
let element: HTMLDialogElement;
|
|
let animation: Animation | undefined;
|
|
const hero = useHeroSignal(HERO);
|
|
|
|
createEffect(() => {
|
|
if (props.open) {
|
|
if (!element.open) {
|
|
element.showModal();
|
|
animateOpen();
|
|
}
|
|
} else {
|
|
if (element.open) {
|
|
if (animation) {
|
|
animation.cancel();
|
|
}
|
|
element.close();
|
|
}
|
|
}
|
|
});
|
|
|
|
const animateOpen = () => {
|
|
// Do hero animation
|
|
const startRect = hero();
|
|
console.debug("capture hero source", startRect);
|
|
if (!startRect) return;
|
|
const endRect = element.getBoundingClientRect();
|
|
const easing = "ease-in-out";
|
|
console.debug("easing", easing);
|
|
element.classList.add(styles.animated);
|
|
const distance = Math.sqrt(
|
|
Math.pow(Math.abs(startRect.top - endRect.top), 2) +
|
|
Math.pow(Math.abs(startRect.left - startRect.top), 2),
|
|
);
|
|
const duration = (distance / MOVE_SPEED) * 1000;
|
|
animation = element.animate(
|
|
[composeAnimationFrame(startRect), composeAnimationFrame(endRect)],
|
|
{ easing, duration },
|
|
);
|
|
const onAnimationEnd = () => {
|
|
element.classList.remove(styles.animated);
|
|
animation = undefined;
|
|
};
|
|
animation.addEventListener("finish", onAnimationEnd);
|
|
animation.addEventListener("cancel", onAnimationEnd);
|
|
};
|
|
|
|
onCleanup(() => {
|
|
if (animation) {
|
|
animation.cancel();
|
|
}
|
|
});
|
|
|
|
return (
|
|
<dialog class={styles.bottomSheet} ref={element!}>
|
|
{props.children}
|
|
</dialog>
|
|
);
|
|
};
|
|
|
|
export default BottomSheet;
|