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

BottomSheet: stop clicks propagation

Browse source
This commit is contained in:
thislight 2024-11-23 20:19:43 +08:00
parent 62aaaeee9a
commit f50ed8d907
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
1 changed files with 46 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/material/BottomSheet.tsx
View file

@ -1,19 +1,14 @@
import {
children,
createEffect,
createSignal,
onCleanup,
useTransition,
type JSX,
type ParentComponent,
type ResolvedChildren,
} from "solid-js";
import "./BottomSheet.css";
import material from "./material.module.css";
import {
ANIM_CURVE_ACELERATION,
ANIM_CURVE_DECELERATION,
} from "./theme";
import { ANIM_CURVE_ACELERATION, ANIM_CURVE_DECELERATION } from "./theme";
import {
animateSlideInFromRight,
animateSlideOutToRight,
@ -28,11 +23,36 @@ export type BottomSheetProps = {
const MOVE_SPEED = 1600;
function animateSlideInFromBottom(element: HTMLElement, reverse?: boolean) {
const rect = element.getBoundingClientRect();
const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
element.classList.add("animated");
const oldOverflow = document.body.style.overflow;
document.body.style.overflow = "hidden";
const distance = Math.abs(rect.top - window.innerHeight);
const duration = (distance / MOVE_SPEED) * 1000;
const animation = element.animate(
{
top: reverse
? [`${rect.top}px`, `${window.innerHeight}px`]
: [`${window.innerHeight}px`, `${rect.top}px`],
},
{ easing, duration },
);
const onAnimationEnd = () => {
element.classList.remove("animated");
document.body.style.overflow = oldOverflow;
};
animation.addEventListener("cancel", onAnimationEnd);
animation.addEventListener("finish", onAnimationEnd);
return animation;
}
const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
let element: HTMLDialogElement;
let animation: Animation | undefined;
const [cache, setCache] = createSignal<ResolvedChildren | undefined>();
const ochildren = children(() => props.children);
const child = children(() => props.children);
const [pending] = useTransition();
@ -40,12 +60,10 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
if (props.open) {
if (!element.open && !pending()) {
requestAnimationFrame(animatedOpen);
setCache(ochildren());
}
} else {
if (element.open) {
animatedClose();
setCache(undefined);
}
}
});
@ -55,13 +73,13 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
};
const animatedClose = () => {
if (window.innerWidth > 560 && !props.bottomUp) {
onClose();
return;
}
const onAnimationEnd = () => {
element.classList.remove("animated");
animation = undefined;
onClose();
};
element.classList.add("animated");
@ -70,7 +88,6 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
: animateSlideOutToRight(element, { easing: ANIM_CURVE_ACELERATION });
animation.addEventListener("finish", onAnimationEnd);
animation.addEventListener("cancel", onAnimationEnd);
};
const animatedOpen = () => {
@ -81,6 +98,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
element.classList.add("animated");
const onAnimationEnd = () => {
element.classList.remove("animated");
animation = undefined;
};
animation = animateSlideInFromRight(element, {
easing: ANIM_CURVE_DECELERATION,
@ -90,36 +108,6 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
}
};
const animateSlideInFromBottom = (
element: HTMLElement,
reserve?: boolean,
) => {
const rect = element.getBoundingClientRect();
const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
element.classList.add("animated");
const oldOverflow = document.body.style.overflow;
document.body.style.overflow = "hidden";
const distance = Math.abs(rect.top - window.innerHeight);
const duration = (distance / MOVE_SPEED) * 1000;
animation = element.animate(
{
top: reserve
? [`${rect.top}px`, `${window.innerHeight}px`]
: [`${window.innerHeight}px`, `${rect.top}px`],
},
{ easing, duration },
);
const onAnimationEnd = () => {
element.classList.remove("animated");
document.body.style.overflow = oldOverflow;
animation = undefined;
};
animation.addEventListener("cancel", onAnimationEnd);
animation.addEventListener("finish", onAnimationEnd);
return animation;
};
onCleanup(() => {
if (animation) {
animation.cancel();
@ -129,6 +117,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
const onDialogClick = (
event: MouseEvent & { currentTarget: HTMLDialogElement },
) => {
event.stopPropagation();
if (event.target !== event.currentTarget) return;
const rect = event.currentTarget.getBoundingClientRect();
const isNotInDialog =
@ -159,7 +148,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
tabIndex={-1}
role="presentation"
>
{ochildren() ?? cache()}
{child()}
</dialog>
);
};