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 isTravel?: boolean;
34 onPress?: (passengerId: string) => void;
35 onClick?: (passengerId: string) => void;
36}
37
38const PassengersList = (props: Props) => {
39 const {passengers, Button, onClick, onPress, isTravel} =
40 props;
41 const theme = useTheme();
42
43 let list = passengers;
44
45 return (
46 <Root sx={{padding: theme.spacing(0, 0, 1, 0)}}>
47 <List disablePadding>
48 {!!list &&
49 list.map((passenger, index) => (
50 <ListItem
51 sx={{paddingRight: theme.spacing(12)}}
52 key={index}
53 button={!!onPress}
54 onClick={() => !!onPress && onPress(passenger.id)}
55 >
56 <Passenger
57 key={index}
58 passenger={passenger}
59 isTravel={isTravel}
60 button={
61 <Button
62 onClick={() => onClick && onClick(passenger.id)}
63 />
64 }
65 />
66 </ListItem>
67 ))}
68 </List>
69 </Root>
70 );
71};
72
73export default PassengersList;