1import React, {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';
 8
 9const Input = ({addPassenger, id}) => {
10  const [name, setName] = useState('');
11  const {t} = useTranslation();
12
13  const onSave = () => {
14    if (!!name) {
15      addPassenger(name);
16      setName('');
17    }
18  };
19
20  const onKeyDown = e => {
21    if (e.keyCode === 13) onSave();
22  };
23
24  return (
25    <Box pb={1}>
26      <Box display="flex" flexDirection="row" alignItems="center" px={2} pb={2}>
27        <TextField
28          value={name}
29          onChange={e => setName(e.target.value)}
30          onKeyDown={onKeyDown}
31          fullWidth
32          label={t('car.passengers.add')}
33          id={`NewPassenger-${id}`}
34          name={`passenger-${id}`}
35        />
36        <IconButton
37          color="primary"
38          edge="end"
39          size="small"
40          disabled={!name}
41          onClick={onSave}
42        >
43          <Icon>check</Icon>
44        </IconButton>
45      </Box>
46      <Divider />
47    </Box>
48  );
49};
50
51export default Input;