frontend/containers/PassengersList/Input.tsx (view raw)
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}
16
17const Input = (props: Props) => {
18 const {addPassenger, id} = props;
19 const [name, setName] = useState('');
20 const [email, setEmail] = useState('');
21 const [error, setError] = useState<string>();
22 const classes = useStyles({showEmail: !!name});
23 const {t} = useTranslation();
24
25 const onSave = () => {
26 if (email && !isValidEmail(email)) setError('email');
27 else if (name) {
28 addPassenger({name, email});
29 setName('');
30 setEmail('');
31 setError(null);
32 }
33 };
34
35 const onKeyDown = e => {
36 if (e.keyCode === 13) onSave();
37 };
38
39 return (
40 <Box pb={1}>
41 <Box display="flex" flexDirection="row" alignItems="center" px={2}>
42 <TextField
43 value={name}
44 onChange={e => setName(e.target.value)}
45 onKeyDown={onKeyDown}
46 fullWidth
47 label={t('car.passengers.add')}
48 id={`NewPassenger-${id}-name`}
49 name={`passenger-${id}-name`}
50 />
51 <IconButton
52 color="primary"
53 edge="end"
54 size="small"
55 disabled={!name}
56 onClick={onSave}
57 >
58 <Icon>check</Icon>
59 </IconButton>
60 </Box>
61 <Box pl={2} pt={1} pr={5} mb={2} className={classes.emailBox}>
62 <TextField
63 value={email}
64 onChange={e => setEmail(e.target.value)}
65 onKeyDown={onKeyDown}
66 fullWidth
67 label={t`car.passengers.email`}
68 id={`NewPassenger-${id}-email`}
69 name={`passenger-${id}-email`}
70 helperText={t`car.passengers.emailHelper`}
71 error={error === 'email'}
72 />
73 </Box>
74 <Divider />
75 </Box>
76 );
77};
78
79const useStyles = makeStyles(theme => ({
80 emailBox: {
81 transition: 'all 0.3s ease',
82 maxHeight: ({showEmail}) => (showEmail ? '5rem' : 0),
83 overflow: 'hidden',
84 },
85}));
86
87export default Input;