45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import { Transition } from "react-transition-group";
|
|
import useModalStore from "../stores/useModalStore";
|
|
import { useEffect } from "react";
|
|
|
|
function ModalContainer() {
|
|
const [modal, setModal] = useModalStore((state) => [
|
|
state.modal,
|
|
state.setModal,
|
|
]);
|
|
|
|
useEffect(() => {
|
|
function handleKeyUp(e: KeyboardEvent) {
|
|
if (e.key === "Escape") {
|
|
setModal(null);
|
|
}
|
|
}
|
|
|
|
document.addEventListener("keyup", handleKeyUp);
|
|
|
|
return () => {
|
|
document.removeEventListener("keyup", handleKeyUp);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<Transition
|
|
in={modal ? true : false}
|
|
timeout={150}
|
|
mountOnEnter
|
|
unmountOnExit
|
|
>
|
|
{(state) => (
|
|
<div
|
|
className={`min-h-screen p-8 absolute z-20 top-0 left-0 w-full flex justify-center items-center bg-black bg-opacity-30 overflow-auto transition-opacity ${state}`}
|
|
>
|
|
{modal}
|
|
</div>
|
|
)}
|
|
</Transition>
|
|
);
|
|
}
|
|
|
|
export default ModalContainer;
|