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 {Passenger as PassengerType} from '../../generated/graphql';
 6
 7interface Props {
 8  passengers: PassengerType[];
 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;