-
Notifications
You must be signed in to change notification settings - Fork 12
/
ConceptContainersAutocomplete.jsx
44 lines (42 loc) · 1.63 KB
/
ConceptContainersAutocomplete.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
import React from 'react';
import {List as ListIcon, Loyalty as LoyaltyIcon} from '@mui/icons-material';
import { TextField } from '@mui/material';
import Autocomplete from '@mui/material/Autocomplete';
import { get } from 'lodash'
import { GREEN } from '../../common/constants';
const ConceptContainersAutocomplete = ({onChange, items, label, id, required, selected}) => {
return (
<Autocomplete
openOnFocus
blurOnSelect
isOptionEqualToValue={(option, value) => (option.id === get(value, 'id') && option.type === get(value, 'type'))}
value={selected}
id={id || 'conceptContainer'}
options={items}
getOptionLabel={option => option ? `${option.name} (${option.type})` : ''}
fullWidth
required={required}
renderInput={
params => <TextField {...params} required label={label || "Collection/Source"} variant="outlined" fullWidth />
}
renderOption={
(props, option) => (
<li {...props} key={option.type + '-' + option.name}>
<span className='flex-vertical-center'>
<span style={{marginRight: '5px'}}>
{
option.type === 'source' ?
<ListIcon fontSize='small' style={{marginTop: '5px', color: GREEN, fontSize: '1rem'}} />:
<LoyaltyIcon fontSize='small' style={{marginTop: '5px', color: GREEN, fontSize: '1rem'}} />
}
</span>
{option.name}
</span>
</li>
)
}
onChange={(event, item) => onChange(get(item, 'type') || 'source', item)}
/>
);
}
export default ConceptContainersAutocomplete;