frontend/containers/FormDialog/index.tsx (view raw)
1import {ReactElement} from 'react';
2import {useTranslation} from 'react-i18next';
3import Dialog from '@mui/material/Dialog';
4import DialogContent from '@mui/material/DialogContent';
5import DialogActions from '@mui/material/DialogActions';
6import DialogTitle from '@mui/material/DialogTitle';
7import Button from '@mui/material/Button';
8import Transition from './Transition';
9
10interface Props {
11 open: boolean;
12 cancel: () => void;
13 onSubmit: () => Promise<void>;
14 disabled: boolean;
15 title: string;
16 children: ReactElement<any, any>;
17}
18
19const FormDialog = ({
20 open,
21 cancel,
22 onSubmit,
23 disabled,
24 title,
25 children,
26}: Props) => {
27 const {t} = useTranslation();
28
29 return (
30 <Dialog
31 fullWidth
32 maxWidth="xs"
33 open={open}
34 onClose={cancel}
35 TransitionComponent={Transition}
36 >
37 <form
38 onSubmit={e => {
39 e.preventDefault();
40 onSubmit();
41 }}
42 >
43 <DialogTitle>{title}</DialogTitle>
44 <DialogContent>{children}</DialogContent>
45 <DialogActions>
46 <Button variant="text" onClick={cancel}>
47 {t('generic.cancel')}
48 </Button>
49 <Button type="submit" variant="contained" disabled={disabled}>
50 {t('generic.add')}
51 </Button>
52 </DialogActions>
53 </form>
54 </Dialog>
55 );
56};
57
58export default FormDialog;