78 lines
1.9 KiB
TypeScript
78 lines
1.9 KiB
TypeScript
import { createPortal } from "react-dom";
|
|
import "./Modal.css";
|
|
import { ReactNode, useEffect } from "react";
|
|
|
|
export interface ModalProps {
|
|
id: string;
|
|
className?: string;
|
|
bodyClassName?: string;
|
|
onClose?: (e: React.MouseEvent | KeyboardEvent) => void;
|
|
onClick?: (e: React.MouseEvent) => void;
|
|
children: ReactNode;
|
|
}
|
|
|
|
let scrollbarWidth: number | null = null;
|
|
|
|
const getScrollbarWidth = () => {
|
|
if (scrollbarWidth !== null) {
|
|
return scrollbarWidth;
|
|
}
|
|
|
|
const outer = document.createElement("div");
|
|
outer.style.visibility = "hidden";
|
|
outer.style.width = "100px";
|
|
|
|
document.body.appendChild(outer);
|
|
|
|
const widthNoScroll = outer.offsetWidth;
|
|
outer.style.overflow = "scroll";
|
|
|
|
const inner = document.createElement("div");
|
|
inner.style.width = "100%";
|
|
outer.appendChild(inner);
|
|
|
|
const widthWithScroll = inner.offsetWidth;
|
|
|
|
outer.parentNode?.removeChild(outer);
|
|
|
|
scrollbarWidth = widthNoScroll - widthWithScroll;
|
|
return scrollbarWidth;
|
|
};
|
|
|
|
export default function Modal(props: ModalProps) {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape" && props.onClose) {
|
|
props.onClose(e);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
document.body.classList.add("scroll-lock");
|
|
document.body.style.paddingRight = `${getScrollbarWidth()}px`;
|
|
|
|
document.addEventListener("keydown", handleKeyDown);
|
|
|
|
return () => {
|
|
document.body.classList.remove("scroll-lock");
|
|
document.body.style.paddingRight = "";
|
|
document.removeEventListener("keydown", handleKeyDown);
|
|
};
|
|
}, []);
|
|
|
|
return createPortal(
|
|
<div
|
|
className={props.className === "hidden" ? props.className : `modal ${props.className || ""}`}
|
|
onClick={props.onClose}>
|
|
<div
|
|
className={props.bodyClassName || "modal-body"}
|
|
onClick={e => {
|
|
e.stopPropagation();
|
|
props.onClick?.(e);
|
|
}}>
|
|
{props.children}
|
|
</div>
|
|
</div>,
|
|
document.body,
|
|
);
|
|
}
|