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 passengers,
13 places,
14 addPassenger,
15 icon,
16 onClick,
17 onPress,
18 disabled,
19}) => {
20 const classes = useStyles();
21
22 let list = passengers;
23
24 if (!!places) {
25 const emptyList = [...Array(places)];
26 list = Array.isArray(passengers)
27 ? emptyList.map((u, index) => passengers[index])
28 : emptyList;
29 }
30
31 const button = index => {
32 return !!onClick ? (
33 <ListItemSecondaryAction>
34 <IconButton size="small" color="primary" onClick={() => onClick(index)}>
35 <Icon>{icon}</Icon>
36 </IconButton>
37 </ListItemSecondaryAction>
38 ) : (
39 <Icon color="primary">{icon}</Icon>
40 );
41 };
42
43 return (
44 <div className={classes.container}>
45 {(!!places
46 ? !!passengers
47 ? places - passengers.length > 0
48 : places > 0
49 : true) && <Input addPassenger={addPassenger} />}
50 <List disablePadding>
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;