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;