51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
|
|
import Box from '@mui/material/Box';
|
|
import Button from '@mui/material/Button';
|
|
import Modal from '@mui/material/Modal';
|
|
import Typography from '@mui/material/Typography';
|
|
import * as React from 'react';
|
|
import { useEffect } from 'react';
|
|
|
|
const style = {
|
|
// eslint-disable-next-line @typescript-eslint/prefer-as-const
|
|
position: 'absolute' as 'absolute',
|
|
top: '50%',
|
|
left: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
width: '80%',
|
|
height: '550px',
|
|
bgcolor: 'background.paper',
|
|
border: '2px solid #254F7F',
|
|
boxShadow: 24,
|
|
p: 4,
|
|
};
|
|
|
|
interface BasicModalInterface{
|
|
open: boolean,
|
|
handleIsClose: (value: any) => void,
|
|
children: React.ReactNode
|
|
}
|
|
|
|
export default function BasicModal({open, handleIsClose, children}: BasicModalInterface) {
|
|
const [openState, setOpenState] = React.useState(false);
|
|
const handleOpen = () => setOpenState(true);
|
|
const handleClose = () => {setOpenState(false); handleIsClose(false)}
|
|
|
|
useEffect(() => {
|
|
setOpenState(open)
|
|
}, [open, openState])
|
|
|
|
return (
|
|
<Modal
|
|
open={openState}
|
|
onClose={handleClose}
|
|
aria-labelledby="modal-modal-title"
|
|
aria-describedby="modal-modal-description"
|
|
>
|
|
<Box sx={style}>
|
|
{children}
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
}
|