app/src/containers/PassengersList/index.js (view raw)
1import React from 'react';
2import {makeStyles} from '@material-ui/core/styles';
3import Passenger from './Passenger';
4import Input from './Input';
5
6const PassengersList = ({
7 hideEmpty,
8 passengers,
9 places = 0,
10 addPassenger,
11 removePassenger,
12}) => {
13 const classes = useStyles();
14
15 let list = passengers;
16
17 if (!hideEmpty) {
18 const emptyList = [...Array(places)];
19 list = Array.isArray(passengers)
20 ? emptyList.map((u, index) => passengers[index])
21 : emptyList;
22 }
23
24 const emptyPlaces = !!passengers ? places - passengers.length : places;
25
26 return (
27 <div className={classes.container}>
28 {emptyPlaces > 0 && <Input addPassenger={addPassenger} />}
29 {!!places &&
30 !!list &&
31 list.map((passenger, index) => (
32 <Passenger
33 key={index}
34 passenger={passenger}
35 removePassenger={() => removePassenger(index)}
36 />
37 ))}
38 </div>
39 );
40};
41
42const useStyles = makeStyles(theme => ({
43 container: {padding: theme.spacing(1, 0)},
44}));
45
46export default PassengersList;