export const ModalBlock: React.FC<ModalBlockProps> = ({
title,
onClose,
isOpen = false,
children,
}: ModalBlockProps): React.ReactElement | null => {
if (!isOpen) {
return null
}
return (
<Dialog TransitionComponent={Transition} open={isOpen} aria-labelledby='form-dialog-title'>
<DialogTitle id='form-dialog-title'>
<IconButton onClick={onClose} color='secondary' aria-label='close'>
<CloseIcon style={{ fontSize: 26 }} color='secondary' />
</IconButton>
{title}
</DialogTitle>
<DialogContent>{children}</DialogContent>
</Dialog>
)
}
export const ModalBlock: React.FC<ModalBlockProps> = ({
title,
onClose,
isOpen = false,
children,
}: ModalBlockProps): React.ReactElement | null => {
const [closing, setClosing] = useState(false);
const handleClose = () => setClosing(true);
useEffect(() => {
if (isOpen) {
setClosing(false);
}
}, [isOpen]);
if (!isOpen) {
return null;
}
return (
<Dialog TransitionComponent={Transition} open={!closing && isOpen} onExited={onClose} aria-labelledby='form-dialog-title'>
<DialogTitle id='form-dialog-title'>
<IconButton onClick={handleClose} color='secondary' aria-label='close'>
<CloseIcon style={{ fontSize: 26 }} color='secondary' />
</IconButton>
{title}
</DialogTitle>
<DialogContent>{children}</DialogContent>
</Dialog>
);
};