-
Notifications
You must be signed in to change notification settings - Fork 12
/
LocaleForm.jsx
107 lines (104 loc) · 4.05 KB
/
LocaleForm.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import { TextField, Checkbox, IconButton, FormControlLabel } from '@mui/material';
import { Delete as DeleteIcon } from '@mui/icons-material';
import { find, get } from 'lodash'
import { ERROR_RED } from '../../common/constants';
import LocaleAutoComplete from '../common/LocaleAutoComplete';
const LocaleForm = ({
localeAttr, index, onTextFieldChange, onAutoCompleteChange, onCheckboxChange, types,
onDelete, error, locale
}) => {
const isName = localeAttr === 'fields.names';
const nameAttr = isName ? 'name' : 'description';
const typeAttr = `${nameAttr}_type`;
const localeType = get(locale, typeAttr);
const [selectedLocale, setSelectedLocale] = React.useState(
locale.locale ? {id: locale.locale, name: locale.locale} : null
)
let selectedLocaleType = localeType ? find(types, {id: locale[typeAttr]}) : null;
const idPrefix = `${localeAttr}.${index}`;
const borderColor = error ? ERROR_RED : 'lightgray'
let formattedTypes = types;
if(localeType && !selectedLocaleType) {
const _type = {id: localeType, name: localeType}
selectedLocaleType = _type
formattedTypes = [_type, ...types]
}
const onLocaleChange = (event, item) => {
setSelectedLocale(item)
onAutoCompleteChange(`${idPrefix}.locale`, item)
}
return (
<div className='col-md-12' style={{border: `1px solid ${borderColor}`, borderRadius: '4px', paddingBottom: '15px', width: '100%'}}>
<div className='col-md-12 no-side-padding' style={{marginTop: '15px', width: '100%'}}>
<div className='col-md-10 no-side-padding'>
<div className="col-md-6 no-left-padding">
<LocaleAutoComplete
id={`${idPrefix}.locale`}
selected={selectedLocale}
onChange={onLocaleChange}
required
label='Locale'
size='small'
/>
</div>
<div className="col-md-6 no-left-padding">
<Autocomplete
openOnFocus
value={selectedLocaleType}
id={`${idPrefix}.${typeAttr}`}
options={formattedTypes}
getOptionLabel={(option) => option.name}
fullWidth
required
renderInput={(params) => <TextField {...params} required size='small' label="Type" variant="outlined" fullWidth />}
onChange={(event, item) => onAutoCompleteChange(`${idPrefix}.${typeAttr}`, item)}
/>
</div>
<div className="col-md-6 no-left-padding" style={{marginTop: '15px'}}>
<TextField
id={`${idPrefix}.${nameAttr}`}
label={isName ? "Name" : "Description"}
variant="outlined"
fullWidth
required
onChange={onTextFieldChange}
size='small'
value={get(locale, nameAttr, '') || ''}
/>
</div>
<div className="col-md-6 no-left-padding" style={{marginTop: '15px'}}>
<TextField
id={`${idPrefix}.external_id`}
label="External ID"
variant="outlined"
fullWidth
onChange={onTextFieldChange}
size='small'
value={get(locale, 'external_id', '') || ''}
/>
</div>
</div>
<div className='col-md-2 no-side-padding' style={{textAlign: 'right'}}>
<div className="col-md-12">
<FormControlLabel
control={
<Checkbox
checked={get(locale, 'locale_preferred', false)}
name="preferred"
onChange={event => onCheckboxChange(`${idPrefix}.locale_preferred`, event.target.checked)}
/>
}
label="Preferred"
/>
</div>
<div className="col-md-12">
<IconButton onClick={() => onDelete(index)} size="large"><DeleteIcon /></IconButton>
</div>
</div>
</div>
</div>
);
}
export default LocaleForm;