aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/ui/SearchInput.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/ui/SearchInput.js')
-rw-r--r--src/components/ui/SearchInput.js30
1 files changed, 15 insertions, 15 deletions
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js
index 0b25734dd..2d760beab 100644
--- a/src/components/ui/SearchInput.js
+++ b/src/components/ui/SearchInput.js
@@ -4,7 +4,8 @@ import { observer } from 'mobx-react';
4import classnames from 'classnames'; 4import classnames from 'classnames';
5import { debounce } from 'lodash'; 5import { debounce } from 'lodash';
6 6
7export default @observer class SearchInput extends Component { 7@observer
8class SearchInput extends Component {
8 static propTypes = { 9 static propTypes = {
9 value: PropTypes.string, 10 value: PropTypes.string,
10 placeholder: PropTypes.string, 11 placeholder: PropTypes.string,
@@ -27,7 +28,7 @@ export default @observer class SearchInput extends Component {
27 onChange: () => null, 28 onChange: () => null,
28 onReset: () => null, 29 onReset: () => null,
29 autoFocus: false, 30 autoFocus: false,
30 } 31 };
31 32
32 input = null; 33 input = null;
33 34
@@ -38,7 +39,10 @@ export default @observer class SearchInput extends Component {
38 value: props.value, 39 value: props.value,
39 }; 40 };
40 41
41 this.throttledOnChange = debounce(this.throttledOnChange, this.props.throttleDelay); 42 this.throttledOnChange = debounce(
43 this.throttledOnChange,
44 this.props.throttleDelay,
45 );
42 } 46 }
43 47
44 componentDidMount() { 48 componentDidMount() {
@@ -80,24 +84,18 @@ export default @observer class SearchInput extends Component {
80 const { value } = this.state; 84 const { value } = this.state;
81 85
82 return ( 86 return (
83 <div 87 <div className={classnames([className, 'search-input'])}>
84 className={classnames([ 88 <label htmlFor={name} className="mdi mdi-magnify">
85 className,
86 'search-input',
87 ])}
88 >
89 <label
90 htmlFor={name}
91 className="mdi mdi-magnify"
92 >
93 <input 89 <input
94 name={name} 90 name={name}
95 id={name} 91 id={name}
96 type="text" 92 type="text"
97 placeholder={placeholder} 93 placeholder={placeholder}
98 value={value} 94 value={value}
99 onChange={(e) => this.onChange(e)} 95 onChange={e => this.onChange(e)}
100 ref={(ref) => { this.input = ref; }} 96 ref={ref => {
97 this.input = ref;
98 }}
101 /> 99 />
102 </label> 100 </label>
103 {value.length > 0 && ( 101 {value.length > 0 && (
@@ -110,3 +108,5 @@ export default @observer class SearchInput extends Component {
110 ); 108 );
111 } 109 }
112} 110}
111
112export default SearchInput;