-
Notifications
You must be signed in to change notification settings - Fork 12
Expand file tree
/
Copy pathSearchInputBox.jsx
More file actions
136 lines (117 loc) · 4.73 KB
/
SearchInputBox.jsx
File metadata and controls
136 lines (117 loc) · 4.73 KB
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
127
128
129
130
131
132
133
134
135
136
import React from 'react';
import './SearchInputBox.scss';
import algoliasearch from 'algoliasearch/lite';
import {
InstantSearch,
SearchBox,
Hits,
Configure,
Pagination,
} from 'react-instantsearch-dom';
import { SearchHits } from './SearchHits';
// window.$ = $;
/* Algolia Search Bar */
const ClickOutHandler = require('react-onclickout');
const algoliaClient = algoliasearch(
"KNXVCEA9ZA",
"72fe5e5e369c1af18857a365a1332ec4",
);
// removes empty query searches from analytics
const searchClient = {
search(requests) {
const newRequests = requests.map((request) => {
// test for empty string and change request parameter: analytics
if (!request.params.query || request.params.query.length === 0) {
request.params.analytics = false;
}
return request;
});
return algoliaClient.search(newRequests);
},
};
class SearchInputBox extends React.Component {
constructor(props) {
super(props);
this.state = {
beta: '',
cookie: '',
hasInput: false,
refresh: false,
};
}
// Algolia - clicking out exits searchbox
onClickOut = () => {
const searchInput = document.getElementsByClassName(
'ais-SearchBox-input',
)[0].value;
if (searchInput !== '') {
this.setState(() => ({
hasInput: false,
}));
}
} // end onClickOut
/* eslint-enabe class-methods-use-this */
render() {
const {
refresh, hasInput, beta, visibleHelloBar, cookie,
} = this.state;
return (
<>
{/* Aloglia Widgets */}
<div className="form-inline flex w-1/5 items-center pl-4">
<label htmlFor="search-lc" />
<ClickOutHandler onClickOut={this.onClickOut}>
<InstantSearch
searchClient={searchClient}
indexName="OS Docs"
refresh={refresh}
>
<Configure hitsPerPage={5} />
{/* forcefeed className because component does not accept natively as prop */}
<div>
<svg
width="15"
height="15"
viewBox="0 0 20 20"
fill="#6b6b6b"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M8 16C9.77498 15.9996 11.4988 15.4054 12.897 14.312L17.293 18.708L18.707 17.294L14.311 12.898C15.405 11.4997 15.9996 9.77544 16 8C16 3.589 12.411 0 8 0C3.589 0 0 3.589 0 8C0 12.411 3.589 16 8 16ZM8 2C11.309 2 14 4.691 14 8C14 11.309 11.309 14 8 14C4.691 14 2 11.309 2 8C2 4.691 4.691 2 8 2Z" fill="black"/>
</svg>
</div>
<SearchBox
className="w-full pl-2 mt-15"
id="search-lc"
submit={<></>}
reset={<></>}
translations={{
placeholder: 'Search',
}}
onKeyUp={(event) => {
this.setState({
hasInput: event.currentTarget.value.length > 2,
});
}}
/>
<div className={!hasInput ? 'input-empty' : '-mt-1.5 absolute background-white bg-white search_results border h-full top-20 w-2/8'}>
<div className="container">
<div className="row">
<div className="col-12">
<SearchHits hitComponent={Hits} />
</div>
</div>
<div className="row">
<div className="col-12">
<Pagination />
</div>
</div>
</div>
</div>
</InstantSearch>
</ClickOutHandler>
</div>
</>
);
}
}
export default SearchInputBox;