frontend/containers/PassengersList/index.tsx (view raw)
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 places?: number;
36 onPress?: (passengerId: string) => void;
37 onClick?: (passengerId: string) => void;
38}
39
40const PassengersList = (props: Props) => {
41 const {passengers, places, Button, onClick, onPress, disabled, isTravel} =
42 props;
43 const theme = useTheme();
44
45 let list = passengers;
46
47 if (places) {
48 const emptyList = [...Array(places)];
49 list = Array.isArray(passengers)
50 ? emptyList.map((u, index) => passengers[index])
51 : emptyList;
52 }
53
54 return (
55 <Root sx={{padding: theme.spacing(0, 0, 1, 0)}}>
56 <List disablePadding>
57 {!!list &&
58 list.map((passenger, index) => (
59 <ListItem
60 sx={{paddingRight: theme.spacing(12)}}
61 key={index}
62 disabled={disabled}
63 button={!!onPress}
64 onClick={() => !!onPress && onPress(passenger.id)}
65 >
66 <Passenger
67 key={index}
68 passenger={passenger}
69 isTravel={isTravel}
70 button={
71 <Button
72 onClick={() => onClick && onClick(passenger.id)}
73 disabled={disabled}
74 />
75 }
76 />
77 </ListItem>
78 ))}
79 </List>
80 </Root>
81 );
82};
83
84export default PassengersList;