64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import { useEffect, useRef } from "react";
|
|
import useModalStore from "../store/modalStore";
|
|
import clsx from "clsx";
|
|
|
|
function ModalContainer() {
|
|
const { modal, setModal, position } = useModalStore();
|
|
const divRef = useRef<HTMLDivElement>(null);
|
|
const backdropRef = useRef<HTMLDivElement>(null);
|
|
const modalRef = useRef<HTMLDivElement>(null);
|
|
|
|
function handleResize() {
|
|
if (!modalRef.current) return;
|
|
|
|
if (divRef.current!.clientHeight > modalRef.current!.clientHeight) {
|
|
backdropRef.current!.style.height = `${divRef.current!.clientHeight}px`;
|
|
} else {
|
|
backdropRef.current!.style.height = `100%`;
|
|
}
|
|
}
|
|
|
|
function handleKeydown(e: KeyboardEvent) {
|
|
if (e.key !== "Escape") return;
|
|
setModal(null);
|
|
}
|
|
|
|
useEffect(() => {
|
|
window.addEventListener("resize", handleResize);
|
|
window.addEventListener("keydown", handleKeydown);
|
|
|
|
return () => {
|
|
window.removeEventListener("resize", handleResize);
|
|
window.removeEventListener("keydown", handleKeydown);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
modal && (
|
|
<div className="h-full">
|
|
<div
|
|
ref={modalRef}
|
|
className={clsx(
|
|
"bg-black/70 max-md:top-14 flex overflow-y-auto fixed inset-0 z-10 items-center",
|
|
position === "center" ? "justify-center" : "justify-end"
|
|
)}
|
|
>
|
|
<div className="max-h-full">
|
|
<div ref={divRef} className="2xl:p-[1.111vw]">
|
|
<div
|
|
ref={backdropRef}
|
|
className="absolute inset-0 cursor-pointer"
|
|
onClick={() => setModal(null)}
|
|
/>
|
|
{modal}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
);
|
|
}
|
|
|
|
export default ModalContainer;
|