import React, { useState, useRef, useCallback, useMemo } from 'react';
import { createPortal } from 'react-dom';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import { useHistory } from '@docusaurus/router';
import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
import Link from '@theme/Link';
import Head from '@docusaurus/Head';
import useSearchQuery from '@theme/hooks/useSearchQuery';
import { DocSearchButton, useDocSearchKeyboardEvents } from '@docsearch/react';
let DocSearchModal = null;
function Hit({ hit, children }) {
return {children};
}
function ResultsFooter({ state, onClose }) {
const { generateSearchPageLink } = useSearchQuery();
return (
See all {state.context.nbHits} results
);
}
function DocSearch({ disabled, ...props }) {
const { siteMetadata } = useDocusaurusContext();
const { withBaseUrl } = useBaseUrlUtils();
const history = useHistory();
const searchButtonRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);
const [initialQuery, setInitialQuery] = useState(null);
const importDocSearchModalIfNeeded = useCallback(() => {
if (DocSearchModal) {
return Promise.resolve();
}
return Promise.all([import('@docsearch/react/modal'), import('@docsearch/react/style')]).then(
([{ DocSearchModal: Modal }]) => {
DocSearchModal = Modal;
},
);
}, []);
const onOpen = useCallback(() => {
importDocSearchModalIfNeeded().then(() => {
setIsOpen(true);
});
}, [importDocSearchModalIfNeeded, setIsOpen]);
const onClose = useCallback(() => {
setIsOpen(false);
}, [setIsOpen]);
const onInput = useCallback(
(event) => {
importDocSearchModalIfNeeded().then(() => {
setIsOpen(true);
setInitialQuery(event.key);
});
},
[importDocSearchModalIfNeeded, setIsOpen, setInitialQuery],
);
const navigator = useRef({
navigate({ suggestionUrl }) {
history.push(suggestionUrl);
},
}).current;
const transformItems = useRef((items) => {
return items.map((item) => {
// We transform the absolute URL into a relative URL.
// Alternatively, we can use `new URL(item.url)` but it's not
// supported in IE.
const a = document.createElement('a');
a.href = item.url;
return {
...item,
url: withBaseUrl(`${a.pathname}${a.hash}`),
};
});
}).current;
const resultsFooterComponent = useMemo(
// eslint-disable-next-line react/display-name
() => (footerProps) => ,
[onClose],
);
const transformSearchClient = useCallback(
(searchClient) => {
searchClient.addAlgoliaAgent('docusaurus', siteMetadata.docusaurusVersion);
return searchClient;
},
[siteMetadata.docusaurusVersion],
);
useDocSearchKeyboardEvents({
isOpen,
onOpen,
onClose,
onInput,
searchButtonRef,
});
return (
<>
{/* This hints the browser that the website will load data from Algolia,
and allows it to preconnect to the DocSearch cluster. It makes the first
query faster, especially on mobile. */}
{isOpen &&
createPortal(
,
document.body,
)}
);
}
function SearchBar() {
const { siteConfig } = useDocusaurusContext();
return ;
}
export default SearchBar;