diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-10-14 23:32:05 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-15 03:02:05 +0530 |
commit | 137555821f172e4eadc7cf099d4270ae8fc1374e (patch) | |
tree | 693882bbf7a6b2a24b5a727091d09586d0371007 /src/components/ui/SearchInput.js | |
parent | New translations en-US.json (Spanish) (#2072) (diff) | |
download | ferdium-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.js | 112 |
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 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import classnames from 'classnames'; | ||
5 | import { debounce } from 'lodash'; | ||
6 | |||
7 | @observer | ||
8 | class 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 | |||
112 | export default SearchInput; | ||