frontend/containers/VehicleChoiceDialog/index.tsx (view raw)
1import {forwardRef} from 'react';
2import {makeStyles} from '@material-ui/core/styles';
3import Dialog from '@material-ui/core/Dialog';
4import DialogActions from '@material-ui/core/DialogActions';
5import DialogContent from '@material-ui/core/DialogContent';
6import DialogTitle from '@material-ui/core/DialogTitle';
7import Button from '@material-ui/core/Button';
8import Slide from '@material-ui/core/Slide';
9import {useTranslation} from 'react-i18next';
10
11const VehicleChoiceDialog = ({open, toggle, toggleNewTravel}) => {
12 const {t} = useTranslation();
13 const classes = useStyles();
14
15 return (
16 <Dialog
17 fullWidth
18 maxWidth="sm"
19 open={open}
20 onClose={toggle}
21 TransitionComponent={Transition}
22 >
23 <DialogTitle>{t('travel.vehicle.title')}</DialogTitle>
24 <DialogContent dividers></DialogContent>
25 <DialogActions className={classes.actions}>
26 <Button
27 color="primary"
28 variant="outlined"
29 fullWidth
30 onClick={() => {
31 toggleNewTravel();
32 toggle();
33 }}
34 >
35 {t('travel.vehicle.add')}
36 </Button>
37 </DialogActions>
38 </Dialog>
39 );
40};
41
42const Transition = forwardRef(function Transition(props, ref) {
43 return <Slide direction="up" ref={ref} {...props} />;
44});
45
46const useStyles = makeStyles(theme => ({
47 actions: {
48 padding: theme.spacing(2, 3),
49 },
50}));
51
52export default VehicleChoiceDialog;