t1c.dev
1import { ComponentProps, onCleanup, onMount, Show } from "solid-js";
2
3export interface ModalProps extends Pick<ComponentProps<"svg">, "children"> {
4 open?: boolean;
5 onClose?: () => void;
6 closeOnClick?: boolean;
7}
8
9export const Modal = (props: ModalProps) => {
10 return (
11 <Show when={props.open}>
12 <dialog
13 ref={(node) => {
14 onMount(() => {
15 document.body.style.overflow = "hidden";
16 node.showModal();
17 (document.activeElement as any).blur();
18 });
19 onCleanup(() => node.close());
20 }}
21 onClick={(ev) => {
22 if ((props.closeOnClick ?? true) && ev.target === ev.currentTarget) {
23 if (props.onClose) props.onClose();
24 }
25 }}
26 onClose={() => {
27 document.body.style.overflow = "auto";
28 if (props.onClose) props.onClose();
29 }}
30 class="h-full max-h-none w-full max-w-none bg-transparent text-neutral-900 backdrop:bg-transparent dark:text-neutral-200"
31 >
32 {props.children}
33 </dialog>
34 </Show>
35 );
36};