91 lines
2.9 KiB
TypeScript
91 lines
2.9 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import { useEffect, useRef } from "react";
|
|
import useModalStore from "../stores/useModalStore";
|
|
import { AnimatePresence, motion } from "motion/react";
|
|
import CloseIcon from "./icons/CloseIcon";
|
|
import Button from "./ui/Button";
|
|
|
|
function ModalContainer() {
|
|
const { modal, setModal } = useModalStore();
|
|
const divRef = useRef<HTMLDivElement>(null);
|
|
const backdropRef = useRef<HTMLDivElement>(null);
|
|
const popoverRef = useRef<HTMLDivElement>(null);
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
function handleResize() {
|
|
if (!popoverRef.current) return;
|
|
|
|
if (divRef.current!.clientHeight > popoverRef.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);
|
|
}
|
|
|
|
const rootRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
window.addEventListener("resize", handleResize);
|
|
window.addEventListener("keydown", handleKeydown);
|
|
|
|
return () => {
|
|
window.removeEventListener("resize", handleResize);
|
|
window.removeEventListener("keydown", handleKeydown);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{modal && (
|
|
<div ref={rootRef} key={"modal"} className="h-full">
|
|
<div
|
|
ref={popoverRef}
|
|
className="bg-black/70 fixed inset-0 max-md:top-14 flex flex-col items-center justify-center overflow-y-auto z-10"
|
|
>
|
|
<div className="max-h-full">
|
|
<motion.div
|
|
ref={divRef}
|
|
className="md:p-[1.08vw]"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.3, bounce: 0 }}
|
|
>
|
|
<div
|
|
ref={backdropRef}
|
|
className="absolute inset-0 cursor-pointer"
|
|
onClick={() => setModal(null)}
|
|
/>
|
|
<div
|
|
ref={containerRef}
|
|
className="relative w-full max-md:border-t border-[#E2E2DC]"
|
|
>
|
|
{modal}
|
|
<Button
|
|
onlyIcon
|
|
variant="primary"
|
|
size="small"
|
|
className="absolute 2xl:top-[1.111vw] 2xl:right-[1.111vw] top-6 right-6 !bg-[#F3F3F2]"
|
|
onClick={() => setModal(null)}
|
|
>
|
|
<span className="2xl:size-[1.389vw] size-5 text-[#0D1922]">
|
|
<CloseIcon />
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|
|
|
|
export default ModalContainer;
|