diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
index 2015ac9cb3..ab463b2fbf 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/index.js
@@ -45,7 +45,7 @@ const Sun = () => ;
function Navbar() {
const context = useDocusaurusContext();
const [sidebarShown, setSidebarShown] = useState(false);
- const [searchBarExpanded, setSearchBarExpanded] = useState(false);
+ const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
const currentTheme =
typeof document !== 'undefined'
? document.querySelector('html').getAttribute('data-theme')
@@ -82,10 +82,6 @@ function Navbar() {
}
};
- const handleSearchBarToggle = () => {
- setSearchBarExpanded(!searchBarExpanded);
- };
-
return (
@@ -132,7 +128,7 @@ function Navbar() {
)}
{title != null && (
+ className={isSearchBarExpanded ? styles.hideLogoText : ''}>
{title}
)}
@@ -161,7 +157,10 @@ function Navbar() {
/>
{algolia && (
-
+
)}
diff --git a/packages/docusaurus-theme-search-algolia/package.json b/packages/docusaurus-theme-search-algolia/package.json
index 7b69236289..50c8ad422a 100644
--- a/packages/docusaurus-theme-search-algolia/package.json
+++ b/packages/docusaurus-theme-search-algolia/package.json
@@ -8,7 +8,8 @@
},
"license": "MIT",
"dependencies": {
- "docsearch.js": "^2.6.3"
+ "docsearch.js": "^2.6.3",
+ "classnames": "^2.2.6"
},
"peerDependencies": {
"@docusaurus/core": "^2.0.0",
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
index afb6a340e5..abfbe78cd8 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
@@ -5,25 +5,27 @@
* LICENSE file in the root directory of this source tree.
*/
-import React, {Fragment} from 'react';
+import React, {
+ useState,
+ useEffect,
+ Fragment,
+ useContext,
+ useRef,
+ useCallback,
+} from 'react';
+import classnames from 'classnames';
import DocusaurusContext from '@docusaurus/context';
import './styles.css';
-class Search extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- enabled: true,
- isExpanded: false,
- };
- this.searchBarRef = React.createRef();
- this.toggleSearchIconClick = this.toggleSearchIconClick.bind(this);
- }
+const Search = props => {
+ const [isEnabled, setIsEnabled] = useState(true);
+ const searchBarRef = useRef(null);
+ const context = useContext(DocusaurusContext);
- componentDidMount() {
- const {siteConfig = {}} = this.context;
+ useEffect(() => {
+ const {siteConfig = {}} = context;
const {
themeConfig: {algolia},
} = siteConfig;
@@ -42,48 +44,45 @@ class Search extends React.Component {
});
} else {
console.warn('Search has failed to load and now is being disabled');
- this.setState({enabled: false});
+ setIsEnabled(false);
}
- }
+ }, []);
- toggleSearchIconClick() {
- this.setState(
- oldState => ({
- isExpanded: !oldState.isExpanded,
- }),
- () => {
- this.searchBarRef.current.focus();
- this.props.handleSearchBarToggle();
- },
- );
- }
+ const toggleSearchIconClick = useCallback(() => {
+ props.handleSearchBarToggle(!props.isSearchBarExpanded);
+ }, [props.isSearchBarExpanded]);
- render() {
- const {enabled, isExpanded} = this.state;
+ useEffect(() => {
+ if (props.isSearchBarExpanded) {
+ searchBarRef.current.focus();
+ }
+ }, [props.isSearchBarExpanded]);
- return enabled ? (
-
-
-
-
- ) : null;
- }
-}
-
-Search.contextType = DocusaurusContext;
+ return isEnabled ? (
+
+
+
+
+ ) : null;
+};
export default Search;