46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import React, { FC } from 'react';
|
|
import { Modal, IconButton, Box } from '@mui/material';
|
|
import { Clear } from "@mui/icons-material";
|
|
|
|
interface ModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
children?: JSX.Element;
|
|
modalStyle?: React.CSSProperties;
|
|
canBeClosed?: boolean;
|
|
}
|
|
|
|
export const GenericModal: FC<ModalProps> = (
|
|
{ isOpen, onClose, children, modalStyle, canBeClosed = true }) => {
|
|
|
|
return (
|
|
<Modal open={isOpen} onClose={canBeClosed ? onClose : () => { }} >
|
|
<Box sx={modalStyle ? { ...modalStyle, boxShadow: 24, position: 'absolute', } : defaultModalStyle}>
|
|
{canBeClosed ?
|
|
<IconButton onClick={onClose} sx={{ float: "right" }}>
|
|
<Clear sx={{ fontSize: 20 }} />
|
|
</IconButton>
|
|
: null
|
|
}
|
|
{children}
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
const defaultModalStyle = {
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
width: 500,
|
|
bgcolor: 'background.paper',
|
|
boxShadow: 24,
|
|
p: 4,
|
|
height: '60%',
|
|
display: 'block',
|
|
overflow: 'scroll',
|
|
padding: '5px 25px 10px 25px',
|
|
zIndex: 3147483647,
|
|
};
|