all repos — caroster @ 0c64d45577dd8f55cda9a76bf6409d6ba1bcb0ea

[Octree] Group carpool to your event https://caroster.io

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;