2022-12-30 23:35:02 +00:00
|
|
|
import "./Modal.css";
|
2023-05-04 10:36:21 +00:00
|
|
|
import { useEffect, MouseEventHandler, ReactNode } from "react";
|
2022-12-30 23:35:02 +00:00
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
export interface ModalProps {
|
2023-02-07 20:04:50 +00:00
|
|
|
className?: string;
|
2023-05-04 10:36:21 +00:00
|
|
|
onClose?: MouseEventHandler;
|
|
|
|
children: ReactNode;
|
2023-01-28 22:07:37 +00:00
|
|
|
}
|
|
|
|
|
2023-01-16 17:48:25 +00:00
|
|
|
export default function Modal(props: ModalProps) {
|
2023-02-07 19:47:57 +00:00
|
|
|
const onClose = props.onClose || (() => undefined);
|
2023-02-07 20:04:50 +00:00
|
|
|
const className = props.className || "";
|
2022-12-30 23:35:02 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
useEffect(() => {
|
|
|
|
document.body.classList.add("scroll-lock");
|
|
|
|
return () => document.body.classList.remove("scroll-lock");
|
|
|
|
}, []);
|
2022-12-30 23:35:02 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
return (
|
2023-05-04 10:36:21 +00:00
|
|
|
<div className={`modal ${className}`} onClick={onClose}>
|
2023-05-04 10:58:28 +00:00
|
|
|
<div className="modal-body" onClick={e => e.stopPropagation()}>
|
|
|
|
{props.children}
|
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
</div>
|
|
|
|
);
|
2023-01-25 18:08:53 +00:00
|
|
|
}
|