58 lines
1.3 KiB
TypeScript
58 lines
1.3 KiB
TypeScript
import { ReactNode, useEffect } from "react";
|
|
import styles from "./styles.module.css";
|
|
|
|
interface ModalProps {
|
|
children: ReactNode;
|
|
open?: boolean;
|
|
isCloseButtonVisible?: boolean;
|
|
className?: string;
|
|
containerClassName?: string;
|
|
type?: "hidden" | "normal";
|
|
onClose?: () => void;
|
|
}
|
|
|
|
function Modal({
|
|
open,
|
|
children,
|
|
isCloseButtonVisible = true,
|
|
className = "",
|
|
containerClassName = "",
|
|
type = "normal",
|
|
onClose,
|
|
}: ModalProps): JSX.Element {
|
|
const handleClose = (event: React.MouseEvent) => {
|
|
if (event.target !== event.currentTarget) return;
|
|
document.body.classList.remove("no-scroll");
|
|
onClose?.();
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
document.body.classList.add("no-scroll");
|
|
}
|
|
|
|
return () => {
|
|
document.body.classList.remove("no-scroll");
|
|
};
|
|
}, [open]);
|
|
|
|
if (!open && type === "normal") return <></>;
|
|
return (
|
|
<div
|
|
className={`${styles.modal} ${className} ${
|
|
type === "hidden" && !open ? styles.hidden : ""
|
|
}`}
|
|
onClick={handleClose}
|
|
>
|
|
<div className={`${styles["modal-content"]} ${containerClassName}`}>
|
|
{isCloseButtonVisible && (
|
|
<button className={styles["modal-close-btn"]} onClick={handleClose} />
|
|
)}
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Modal;
|