frontend/containers/PassengersList/Input.js (view raw)
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;