-
Notifications
You must be signed in to change notification settings - Fork 2.1k
/
search-bar.jsx
70 lines (61 loc) · 1.63 KB
/
search-bar.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
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import {makeStyles} from '@material-ui/core/styles';
const containerStyle = {
position: 'absolute',
zIndex: 1,
bottom: 40,
left: 20,
width: '20%',
minWidth: 300
};
const useStyles = makeStyles(theme => ({
inputRoot: {
backgroundColor: '#fff !important',
boxShadow: '0 0 8px rgba(0,0,0,0.15)'
}
}));
const MAX_OPTIONS = 30;
function filterOptions(options, {inputValue}) {
if (!inputValue) return [];
const result = [];
const testExp = new RegExp(inputValue.replace(/[^\-\w]/g, ''), 'i');
for (const station of options) {
if (station.callSign.search(testExp) === 0) {
result.push(station);
}
if (result.length >= MAX_OPTIONS) {
return result;
}
}
for (const station of options) {
if (station.name.search(testExp) === 0) {
result.push(station);
}
if (result.length >= MAX_OPTIONS) {
return result;
}
}
return result;
}
function SearchBar(props) {
const classes = useStyles();
return (
props.data && (
<Autocomplete
id="combo-box-demo"
classes={classes}
options={props.data}
filterOptions={filterOptions}
getOptionLabel={option => `(${option.callSign}) ${option.name}`}
noOptionsText=""
size="small"
style={containerStyle}
renderInput={params => <TextField {...params} label="Search..." variant="filled" />}
onChange={(source, selectedOption) => props.onChange(selectedOption)}
/>
)
);
}
export default React.memo(SearchBar);