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