1import List from '@mui/material/List';
 2import {styled, useTheme} from '@mui/material/styles';
 3import ListItem from '@mui/material/ListItem';
 4import Passenger from './Passenger';
 5import {PassengerEntity} from '../../generated/graphql';
 6
 7const PREFIX = 'PassengersList';
 8
 9const classes = {
10  container: `${PREFIX}-container`,
11  passenger: `${PREFIX}-passenger`,
12};
13
14const Root = styled('div')(({theme}) => ({
15  [`&.${classes.container}`]: {
16    padding: theme.spacing(0, 0, 1, 0),
17  },
18
19  [`& .${classes.passenger}`]: {
20    paddingRight: theme.spacing(12),
21  },
22}));
23
24interface Props {
25  passengers: PassengerEntity[];
26  Button: ({
27    onClick,
28    disabled,
29  }: {
30    onClick: () => void;
31    disabled?: boolean;
32  }) => JSX.Element;
33  disabled?: boolean;
34  isTravel?: boolean;
35  onPress?: (passengerId: string) => void;
36  onClick?: (passengerId: string) => void;
37}
38
39const PassengersList = (props: Props) => {
40  const {passengers, Button, onClick, onPress, disabled, isTravel} =
41    props;
42  const theme = useTheme();
43
44  let list = passengers;
45
46  return (
47    <Root sx={{padding: theme.spacing(0, 0, 1, 0)}}>
48      <List disablePadding>
49        {!!list &&
50          list.map((passenger, index) => (
51            <ListItem
52              sx={{paddingRight: theme.spacing(12)}}
53              key={index}
54              disabled={disabled}
55              button={!!onPress}
56              onClick={() => !!onPress && onPress(passenger.id)}
57            >
58              <Passenger
59                key={index}
60                passenger={passenger}
61                isTravel={isTravel}
62                button={
63                  <Button
64                    onClick={() => onClick && onClick(passenger.id)}
65                    disabled={disabled}
66                  />
67                }
68              />
69            </ListItem>
70          ))}
71      </List>
72    </Root>
73  );
74};
75
76export default PassengersList;