-
Notifications
You must be signed in to change notification settings - Fork 932
/
DebounceSearchRender.js
120 lines (106 loc) · 3.19 KB
/
DebounceSearchRender.js
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
108
109
110
111
112
113
114
115
116
117
118
119
120
import React, { useEffect } from 'react';
import Grow from '@mui/material/Grow';
import TextField from '@mui/material/TextField';
import SearchIcon from '@mui/icons-material/Search';
import IconButton from '@mui/material/IconButton';
import ClearIcon from '@mui/icons-material/Clear';
import { withStyles } from '@mui/styles';
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
const defaultStyles = theme => ({
main: {
display: 'flex',
flex: '1 0 auto',
alignItems: "center"
},
searchIcon: {
color: theme.palette.text.secondary,
marginRight: '8px',
},
searchText: {
flex: '0.8 0',
},
clearIcon: {
'&:hover': {
color: theme.palette.error.main,
},
},
});
class _DebounceTableSearch extends React.Component {
handleTextChangeWrapper = debouncedSearch => {
return function(event) {
debouncedSearch(event.target.value);
};
};
componentDidMount() {
document.addEventListener('keydown', this.onKeyDown, false);
}
componentWillUnmount() {
document.removeEventListener('keydown', this.onKeyDown, false);
}
onKeyDown = event => {
if (event.keyCode === 27) {
this.props.onHide();
}
};
render() {
const { classes, options, onHide, searchText, debounceWait } = this.props;
const debouncedSearch = debounce(value => {
this.props.onSearch(value);
}, debounceWait);
const clearIconVisibility = options.searchAlwaysOpen ? 'hidden' : 'visible';
return (
<Grow appear in={true} timeout={300}>
<div className={classes.main}>
<SearchIcon className={classes.searchIcon} />
<TextField
variant={'standard'}
className={classes.searchText}
autoFocus={true}
InputProps={{
'data-test-id': options.textLabels.toolbar.search,
'aria-label': options.textLabels.toolbar.search,
}}
defaultValue={searchText}
onChange={this.handleTextChangeWrapper(debouncedSearch)}
fullWidth={true}
inputRef={el => (this.searchField = el)}
placeholder={options.searchPlaceholder}
{...(options.searchProps ? options.searchProps : {})}
/>
<IconButton className={classes.clearIcon} style={{ visibility: clearIconVisibility }} onClick={onHide}>
<ClearIcon />
</IconButton>
</div>
</Grow>
);
}
}
var DebounceTableSearch = withStyles(defaultStyles, { name: 'MUIDataTableSearch' })(_DebounceTableSearch);
export { DebounceTableSearch };
export function debounceSearchRender(debounceWait = 200) {
return (searchText, handleSearch, hideSearch, options) => {
return (
<DebounceTableSearch
searchText={searchText}
onSearch={handleSearch}
onHide={hideSearch}
options={options}
debounceWait={debounceWait}
/>
);
};
}