1import {useState} from 'react';
 2import Box from '@material-ui/core/Box';
 3import TextField from '@material-ui/core/TextField';
 4import IconButton from '@material-ui/core/IconButton';
 5import Divider from '@material-ui/core/Divider';
 6import Icon from '@material-ui/core/Icon';
 7import {useTranslation} from 'react-i18next';
 8import {EditComponentPassengerPassengerInput as PassengerInput} from '../../generated/graphql';
 9import {makeStyles} from '@material-ui/core';
10import {isValidEmail} from '../../lib/formValidation';
11
12interface Props {
13  addPassenger: (passenger: PassengerInput) => void;
14  id: number;
15  isCar?: boolean;
16}
17
18const Input = (props: Props) => {
19  const {addPassenger, id, isCar} = props;
20  const [name, setName] = useState('');
21  const [email, setEmail] = useState('');
22  const [error, setError] = useState<string>();
23  const classes = useStyles({showEmail: !!name});
24  const {t} = useTranslation();
25
26  const onSave = () => {
27    if (email && !isValidEmail(email)) setError('email');
28    else if (name) {
29      addPassenger({name, email});
30      setName('');
31      setEmail('');
32      setError(null);
33    }
34  };
35
36  const onKeyDown = e => {
37    if (e.keyCode === 13) onSave();
38  };
39
40  return (
41    <Box pb={1}>
42      <Box display="flex" flexDirection="row" alignItems="center" px={2}>
43        <TextField
44          value={name}
45          onChange={e => setName(e.target.value)}
46          onKeyDown={onKeyDown}
47          fullWidth
48          label={t('car.passengers.add')}
49          id={`NewPassenger-${id}-name`}
50          name={`passenger-${id}-name`}
51        />
52        <IconButton
53          color="primary"
54          edge="end"
55          size="small"
56          disabled={!name}
57          onClick={onSave}
58          tabIndex={-1}
59        >
60          <Icon>check</Icon>
61        </IconButton>
62      </Box>
63      <Box pl={2} pt={1} pr={5} mb={2} className={classes.emailBox}>
64        <TextField
65          value={email}
66          onChange={e => setEmail(e.target.value)}
67          onKeyDown={onKeyDown}
68          fullWidth
69          label={t`passenger.input.email`}
70          id={`NewPassenger-${id}-email`}
71          name={`passenger-${id}-email`}
72          helperText={
73            isCar
74              ? t`passenger.input.email_helper_car`
75              : t`passenger.input.email_helper`
76          }
77          error={error === 'email'}
78        />
79      </Box>
80      <Divider />
81    </Box>
82  );
83};
84
85const useStyles = makeStyles(theme => ({
86  emailBox: {
87    //We need this to prevent the placeholder to unexpectedly show when the element is selected with tab key
88    visibility: ({showEmail}) => (showEmail ? 'visible' : 'hidden'),
89    transition: 'all 0.3s ease',
90    maxHeight: ({showEmail}) => (showEmail ? '6rem' : 0),
91    overflow: 'hidden',
92  },
93}));
94
95export default Input;