frontend/containers/PassengersList/index.tsx (view raw)
1import List from '@material-ui/core/List';
2import ListItem from '@material-ui/core/ListItem';
3import {makeStyles} from '@material-ui/core/styles';
4import Passenger from './Passenger';
5import {PassengerEntity} from '../../generated/graphql';
6
7interface Props {
8 passengers: PassengerEntity[];
9 Button: ({
10 onClick,
11 disabled,
12 }: {
13 onClick: () => void;
14 disabled?: boolean;
15 }) => JSX.Element;
16 disabled?: boolean;
17 isVehicle?: boolean;
18 isTravel?: boolean;
19 places?: number;
20 onPress?: (passengerId: string) => void;
21 onClick?: (passengerId: string) => void;
22}
23
24const PassengersList = (props: Props) => {
25 const {passengers, places, Button, onClick, onPress, disabled, isVehicle} =
26 props;
27 const classes = useStyles();
28 let list = passengers;
29
30 if (places) {
31 const emptyList = [...Array(places)];
32 list = Array.isArray(passengers)
33 ? emptyList.map((u, index) => passengers[index])
34 : emptyList;
35 }
36
37 return (
38 <div className={classes.container}>
39 <List disablePadding>
40 {!!list &&
41 list.map((passenger, index) => (
42 <ListItem
43 className={classes.passenger}
44 key={index}
45 disabled={disabled}
46 button={!!onPress}
47 onClick={() => !!onPress && onPress(passenger.id)}
48 >
49 <Passenger
50 key={index}
51 passenger={passenger}
52 isVehicle={isVehicle}
53 button={
54 <Button
55 onClick={() => onClick && onClick(passenger.id)}
56 disabled={disabled}
57 />
58 }
59 />
60 </ListItem>
61 ))}
62 </List>
63 </div>
64 );
65};
66
67const useStyles = makeStyles(theme => ({
68 container: {
69 padding: theme.spacing(0, 0, 1, 0),
70 },
71 passenger: {
72 paddingRight: theme.spacing(12),
73 },
74}));
75
76export default PassengersList;