app/src/containers/PassengersList/index.js (view raw)
1import React from 'react';
2import List from '@material-ui/core/List';
3import ListItem from '@material-ui/core/ListItem';
4import IconButton from '@material-ui/core/IconButton';
5import Icon from '@material-ui/core/Icon';
6import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
7import {makeStyles} from '@material-ui/core/styles';
8import Input from './Input';
9import Passenger from './Passenger';
10
11const PassengersList = ({
12 hideEmpty,
13 passengers,
14 places = 0,
15 addPassenger,
16 icon,
17 onClick,
18 onPress,
19 disabled,
20}) => {
21 const classes = useStyles();
22
23 let list = passengers;
24
25 if (!hideEmpty) {
26 const emptyList = [...Array(places)];
27 list = Array.isArray(passengers)
28 ? emptyList.map((u, index) => passengers[index])
29 : emptyList;
30 }
31
32 const emptyPlaces = !!passengers ? places - passengers.length : places;
33
34 const button = index => {
35 return !!onClick ? (
36 <ListItemSecondaryAction>
37 <IconButton size="small" color="primary" onClick={() => onClick(index)}>
38 <Icon>{icon}</Icon>
39 </IconButton>
40 </ListItemSecondaryAction>
41 ) : (
42 <Icon color="primary">{icon}</Icon>
43 );
44 };
45
46 return (
47 <div className={classes.container}>
48 {emptyPlaces > 0 && <Input addPassenger={addPassenger} />}
49 <List disablePadding>
50 {!!places &&
51 !!list &&
52 list.map((passenger, index) => (
53 <ListItem
54 key={index}
55 disabled={disabled}
56 button={!!onPress}
57 onClick={() => !!onPress && onPress(index)}
58 >
59 <Passenger
60 key={index}
61 passenger={passenger}
62 button={button(index)}
63 />
64 </ListItem>
65 ))}
66 </List>
67 </div>
68 );
69};
70
71const useStyles = makeStyles(theme => ({
72 container: {
73 padding: theme.spacing(1, 0),
74 },
75}));
76
77export default PassengersList;