aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/ui/SearchInput.js
diff options
context:
space:
mode:
authorLibravatar Markus Hatvan <markus_hatvan@aon.at>2021-10-14 23:32:05 +0200
committerLibravatar GitHub <noreply@github.com>2021-10-15 03:02:05 +0530
commit137555821f172e4eadc7cf099d4270ae8fc1374e (patch)
tree693882bbf7a6b2a24b5a727091d09586d0371007 /src/components/ui/SearchInput.js
parentNew translations en-US.json (Spanish) (#2072) (diff)
downloadferdium-app-137555821f172e4eadc7cf099d4270ae8fc1374e.tar.gz
ferdium-app-137555821f172e4eadc7cf099d4270ae8fc1374e.tar.zst
ferdium-app-137555821f172e4eadc7cf099d4270ae8fc1374e.zip
chore: convert components to tsx (#2071)
Diffstat (limited to 'src/components/ui/SearchInput.js')
-rw-r--r--src/components/ui/SearchInput.js112
1 files changed, 0 insertions, 112 deletions
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js
deleted file mode 100644
index 2e8793a2b..000000000
--- a/src/components/ui/SearchInput.js
+++ /dev/null
@@ -1,112 +0,0 @@
1import { Component } from 'react';
2import PropTypes from 'prop-types';
3import { observer } from 'mobx-react';
4import classnames from 'classnames';
5import { debounce } from 'lodash';
6
7@observer
8class SearchInput extends Component {
9 static propTypes = {
10 value: PropTypes.string,
11 placeholder: PropTypes.string,
12 className: PropTypes.string,
13 onChange: PropTypes.func,
14 onReset: PropTypes.func,
15 name: PropTypes.string,
16 throttle: PropTypes.bool,
17 throttleDelay: PropTypes.number,
18 autoFocus: PropTypes.bool,
19 };
20
21 static defaultProps = {
22 value: '',
23 placeholder: '',
24 className: '',
25 name: 'searchInput',
26 throttle: false,
27 throttleDelay: 250,
28 onChange: () => null,
29 onReset: () => null,
30 autoFocus: false,
31 };
32
33 input = null;
34
35 constructor(props) {
36 super(props);
37
38 this.state = {
39 value: props.value,
40 };
41
42 this.throttledOnChange = debounce(
43 this.throttledOnChange,
44 this.props.throttleDelay,
45 );
46 }
47
48 componentDidMount() {
49 const { autoFocus } = this.props;
50
51 if (autoFocus) {
52 this.input.focus();
53 }
54 }
55
56 onChange(e) {
57 const { throttle, onChange } = this.props;
58 const { value } = e.target;
59 this.setState({ value });
60
61 if (throttle) {
62 e.persist();
63 this.throttledOnChange(value);
64 } else {
65 onChange(value);
66 }
67 }
68
69 throttledOnChange(e) {
70 const { onChange } = this.props;
71
72 onChange(e);
73 }
74
75 reset() {
76 const { onReset } = this.props;
77 this.setState({ value: '' });
78
79 onReset();
80 }
81
82 render() {
83 const { className, name, placeholder } = this.props;
84 const { value } = this.state;
85
86 return (
87 <div className={classnames([className, 'search-input'])}>
88 <label htmlFor={name} className="mdi mdi-magnify">
89 <input
90 name={name}
91 id={name}
92 type="text"
93 placeholder={placeholder}
94 value={value}
95 onChange={e => this.onChange(e)}
96 ref={ref => {
97 this.input = ref;
98 }}
99 />
100 </label>
101 {value.length > 0 && (
102 <span
103 className="mdi mdi-close-circle-outline"
104 onClick={() => this.reset()}
105 />
106 )}
107 </div>
108 );
109 }
110}
111
112export default SearchInput;