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 isTravel?: boolean;
16}
17
18const Input = (props: Props) => {
19 const {addPassenger, id, isTravel} = 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('travel.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 isTravel
74 ? t`passenger.input.email_helper_travel`
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;