-
Notifications
You must be signed in to change notification settings - Fork 0
/
CustomSearchBox.js
126 lines (117 loc) · 3.55 KB
/
CustomSearchBox.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
121
122
123
124
125
126
import React from 'react';
import debounce from 'lodash.debounce';
import { connectSearchBox } from 'react-instantsearch/connectors';
import translatable from 'react-instantsearch/src/core/translatable';
import classNames from 'react-instantsearch/src/components/classNames.js';
const cx = classNames('SearchBox');
class SearchBox extends React.Component {
static defaultProps = {
mode: 'instant',
debounce: 0,
};
state = {
query: this.props.currentRefinement,
};
debouncedSearch = debounce(
e => this.props.refine(e.target.value),
this.props.debounce
);
onChange = e => {
e.persist();
if (this.props.searchAsYouType) {
this.debouncedSearch(e, e.eventTarget);
}
this.setState({
query: e.target.value,
});
};
onSubmit = e => {
e.preventDefault();
this.props.refine(this.state.query);
this.input.focus();
};
onReset = e => {
e.preventDefault();
this.setState({
query: '',
});
this.props.refine('');
this.input.focus();
};
render() {
const { query } = this.state;
const { translate } = this.props;
return (
<form
noValidate
onSubmit={this.onSubmit}
onReset={this.onReset}
{...cx('root')}
>
<svg xmlns="http://www.w3.org/2000/svg" style={{ display: 'none' }}>
<symbol
xmlns="http://www.w3.org/2000/svg"
id="sbx-icon-search-13"
viewBox="0 0 40 40"
>
<path
d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
fillRule="evenodd"
/>
</symbol>
<symbol
xmlns="http://www.w3.org/2000/svg"
id="sbx-icon-clear-3"
viewBox="0 0 20 20"
>
<path
d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
fillRule="evenodd"
/>
</symbol>
</svg>
<div role="search" {...cx('wrapper')}>
<input
ref={el => (this.input = el)}
type="search"
placeholder={translate('placeholder')}
autoFocus={true}
autoComplete="off"
required
value={query}
onChange={this.onChange}
{...cx('input')}
/>
<button
type="submit"
title={translate('submitTitle')}
{...cx('submit')}
>
<svg role="img">
<use xlinkHref="#sbx-icon-search-13" />
</svg>
</button>
<button
type="reset"
title={translate('resetTitle')}
{...cx('reset')}
onClick={this.onReset}
>
<svg role="img">
<use xlinkHref="#sbx-icon-clear-3" />
</svg>
</button>
</div>
</form>
);
}
}
export default connectSearchBox(
translatable({
submit: null,
reset: null,
resetTitle: 'Clear the search query.',
submitTitle: 'Submit your search query.',
placeholder: 'Search here…',
})(SearchBox)
);