You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.0 KiB
45 lines
1.0 KiB
2 years ago
|
import clsx from "clsx";
|
||
|
import { FunctionComponent, useCallback, useState } from "react";
|
||
|
import { Modal } from "react-bootstrap";
|
||
|
import { useCurrentLayer, useModalControl, useModalData } from "./hooks";
|
||
|
|
||
|
interface Props {}
|
||
|
|
||
|
export const ModalWrapper: FunctionComponent<Props> = ({ children }) => {
|
||
|
const { size, closeable, key } = useModalData();
|
||
|
const [needExit, setExit] = useState(false);
|
||
|
|
||
|
const { hide: hideModal } = useModalControl();
|
||
|
|
||
|
const layer = useCurrentLayer();
|
||
|
const isShowed = layer !== -1;
|
||
|
|
||
|
const hide = useCallback(() => {
|
||
|
setExit(true);
|
||
|
}, []);
|
||
|
|
||
|
const exit = useCallback(() => {
|
||
|
if (isShowed) {
|
||
|
hideModal(key);
|
||
|
}
|
||
|
setExit(false);
|
||
|
}, [isShowed, hideModal, key]);
|
||
|
|
||
|
return (
|
||
|
<Modal
|
||
|
centered
|
||
|
size={size}
|
||
|
show={isShowed && !needExit}
|
||
|
onHide={hide}
|
||
|
onExited={exit}
|
||
|
backdrop={closeable ? undefined : "static"}
|
||
|
className={clsx(`index-${layer}`)}
|
||
|
backdropClassName={clsx(`index-${layer}`)}
|
||
|
>
|
||
|
{children}
|
||
|
</Modal>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default ModalWrapper;
|