Remove SearchBar swizzled component, update search (#14649)
This commit is contained in:
@ -1 +0,0 @@
|
|||||||
export { default } from "@docusaurus/Noop";
|
|
@ -1,90 +0,0 @@
|
|||||||
/**
|
|
||||||
* Copyright (c) 2017-present, Facebook, Inc.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the MIT license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React, {
|
|
||||||
useState,
|
|
||||||
useEffect,
|
|
||||||
useContext,
|
|
||||||
useRef,
|
|
||||||
useCallback,
|
|
||||||
} from "react";
|
|
||||||
import classnames from "classnames";
|
|
||||||
|
|
||||||
import DocusaurusContext from "@docusaurus/context";
|
|
||||||
|
|
||||||
import "./styles.css";
|
|
||||||
|
|
||||||
const Search = (props) => {
|
|
||||||
const [isEnabled, setIsEnabled] = useState(true);
|
|
||||||
const searchBarRef = useRef(null);
|
|
||||||
const context = useContext(DocusaurusContext);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const { siteConfig = {} } = context;
|
|
||||||
const {
|
|
||||||
themeConfig: { algolia },
|
|
||||||
} = siteConfig;
|
|
||||||
|
|
||||||
// https://github.com/algolia/docsearch/issues/352
|
|
||||||
const isClient = typeof window !== "undefined";
|
|
||||||
if (isClient) {
|
|
||||||
import("docsearch.js").then(({ default: docsearch }) => {
|
|
||||||
docsearch({
|
|
||||||
appId: algolia.appId,
|
|
||||||
apiKey: algolia.apiKey,
|
|
||||||
indexName: algolia.indexName,
|
|
||||||
inputSelector: "#search_input_react",
|
|
||||||
algoliaOptions: algolia.algoliaOptions,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
console.warn("Search has failed to load and now is being disabled");
|
|
||||||
setIsEnabled(false);
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const toggleSearchIconClick = useCallback(
|
|
||||||
(e) => {
|
|
||||||
if (!searchBarRef.current.contains(e.target)) {
|
|
||||||
searchBarRef.current.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
props.handleSearchBarToggle(!props.isSearchBarExpanded);
|
|
||||||
},
|
|
||||||
[props.isSearchBarExpanded]
|
|
||||||
);
|
|
||||||
|
|
||||||
return isEnabled ? (
|
|
||||||
<div className="navbar__search" key="search-box">
|
|
||||||
<span
|
|
||||||
role="button"
|
|
||||||
className={classnames("search-icon", {
|
|
||||||
"search-icon-hidden": props.isSearchBarExpanded,
|
|
||||||
})}
|
|
||||||
onClick={toggleSearchIconClick}
|
|
||||||
onKeyDown={toggleSearchIconClick}
|
|
||||||
tabIndex={0}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
id="search_input_react"
|
|
||||||
type="search"
|
|
||||||
placeholder="Search"
|
|
||||||
aria-label="Search"
|
|
||||||
className={classnames(
|
|
||||||
"navbar__search-input",
|
|
||||||
{ "search-bar-expanded": props.isSearchBarExpanded },
|
|
||||||
{ "search-bar": !props.isSearchBarExpanded }
|
|
||||||
)}
|
|
||||||
onFocus={toggleSearchIconClick}
|
|
||||||
onBlur={toggleSearchIconClick}
|
|
||||||
ref={searchBarRef}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
) : null;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Search;
|
|
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user