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