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;