47 lines
1.0 KiB
TypeScript
47 lines
1.0 KiB
TypeScript
import { ReactNode, useEffect } from "react";
|
|
import styles from "./styles.module.css";
|
|
|
|
interface ModalProps {
|
|
children: ReactNode;
|
|
open?: boolean;
|
|
isCloseButtonVisible?: boolean;
|
|
onClose?: () => void;
|
|
}
|
|
|
|
function Modal({
|
|
open,
|
|
children,
|
|
isCloseButtonVisible = true,
|
|
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) return <></>;
|
|
return (
|
|
<div className={styles.modal} onClick={handleClose}>
|
|
<div className={styles["modal-content"]}>
|
|
{isCloseButtonVisible && (
|
|
<button className={styles["modal-close-btn"]} onClick={handleClose} />
|
|
)}
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Modal;
|