frontend/containers/WaitingList/TravelDialog.tsx (view raw)
1import {forwardRef} from 'react';
2import Slide from '@material-ui/core/Slide';
3import Dialog from '@material-ui/core/Dialog';
4import AppBar from '@material-ui/core/AppBar';
5import Toolbar from '@material-ui/core/Toolbar';
6import ListItemText from '@material-ui/core/ListItemText';
7import ListItem from '@material-ui/core/ListItem';
8import List from '@material-ui/core/List';
9import IconButton from '@material-ui/core/IconButton';
10import Icon from '@material-ui/core/Icon';
11import {makeStyles} from '@material-ui/core/styles';
12import {useTranslation} from 'react-i18next';
13
14const TravelDialog = ({travels, open, onClose, onSelect}) => {
15 const classes = useStyles();
16 const {t} = useTranslation();
17
18 return (
19 <Dialog
20 fullScreen
21 open={open}
22 onClose={onClose}
23 TransitionComponent={Transition}
24 >
25 <AppBar>
26 <Toolbar>
27 <IconButton onClick={onClose} color="inherit">
28 <Icon>arrow_back_ios</Icon>
29 </IconButton>
30 </Toolbar>
31 </AppBar>
32 <div className={classes.offset}>
33 <List disablePadding>
34 {travels?.map((travel, i) => {
35 const passengers = travel.passengers ? travel.passengers.length : 0;
36 const counter = `${passengers} / ${travel?.vehicle?.seats}`;
37 return (
38 <ListItem
39 key={i}
40 button
41 divider
42 disabled={passengers === travel.seats}
43 onClick={() => onSelect(travel)}
44 >
45 <ListItemText
46 primary={travel.vehicle?.name}
47 secondary={t('passenger.creation.seats', {seats: counter})}
48 />
49 </ListItem>
50 );
51 })}
52 </List>
53 </div>
54 </Dialog>
55 );
56};
57
58const Transition = forwardRef(function Transition(props, ref) {
59 return <Slide direction="up" ref={ref} {...props} />;
60});
61
62const useStyles = makeStyles(theme => ({
63 offset: {
64 paddingTop: theme.spacing(7),
65 },
66}));
67
68export default TravelDialog;