56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import React from 'react'
|
|
import { StatelessComponent, ReactElement, useEffect } from 'react';
|
|
import { navigateTo } from "gatsby-link"
|
|
import { getCurrentVersion } from '../utils/nodes';
|
|
|
|
interface SearchBoxProps {
|
|
identifier: string;
|
|
}
|
|
|
|
const autocompleteSelected = (e) => {
|
|
e.stopPropagation()
|
|
// Use an anchor tag to parse the absolute url (from autocomplete.js) into a relative url
|
|
// eslint-disable-next-line no-undef
|
|
const a = document.createElement(`a`)
|
|
a.href = e._args[0].url
|
|
navigateTo(`${a.pathname}${a.hash}`)
|
|
};
|
|
|
|
const SearchBox: StatelessComponent<SearchBoxProps> = ({ identifier }): ReactElement|null => {
|
|
useEffect(() => {
|
|
if (typeof window === 'undefined') return;
|
|
if (!process.env.GATSBY_DOCSEARCH_API_KEY) {
|
|
return;
|
|
}
|
|
window.addEventListener(
|
|
`autocomplete:selected`,
|
|
autocompleteSelected,
|
|
true
|
|
);
|
|
if(window.docsearch){
|
|
window.docsearch({
|
|
algoliaOptions: {
|
|
facetFilters: [`version:${getCurrentVersion()}`],
|
|
hitsPerPage: 5,
|
|
},
|
|
apiKey: process.env.GATSBY_DOCSEARCH_API_KEY,
|
|
debug: true,
|
|
indexName: process.env.GATSBY_DOCSEARCH_INDEX,
|
|
inputSelector: `#${identifier}`,
|
|
});
|
|
}
|
|
|
|
}, []);
|
|
|
|
return (
|
|
<input
|
|
id={identifier}
|
|
type="search"
|
|
placeholder="Search the docs..."
|
|
className="form-control search-input"
|
|
/>
|
|
)
|
|
};
|
|
|
|
export default SearchBox;
|