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