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) && (
50 <Input addPassenger={addPassenger} id={!!places ? 'Car' : 'Waiting'} />
51 )}
52 <List disablePadding>
53 {!!list &&
54 list.map((passenger, index) => (
55 <ListItem
56 key={index}
57 disabled={disabled}
58 button={!!onPress}
59 onClick={() => !!onPress && onPress(index)}
60 >
61 <Passenger
62 key={index}
63 passenger={passenger}
64 button={button(index)}
65 />
66 </ListItem>
67 ))}
68 </List>
69 </div>
70 );
71};
72
73const useStyles = makeStyles(theme => ({
74 container: {
75 padding: theme.spacing(1, 0),
76 },
77}));
78
79export default PassengersList;