45 lines
1.1 KiB
TypeScript
45 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',
|
|
};
|