3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-07-30 23:08:54 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(v2): convert SearchBar to hooks (#1755)

Browse source 
* Refactored with Hooks

* refactored for improvements

* Added classnames for conditional CSS rendering
This commit is contained in:
Shirshendu Bhowmick 2019-09-15 00:02:46 +05:30 • committed by Yangshun Tay
parent 250a818e7f
commit 0bbf7b8202
3 changed files with 59 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

13
packages/docusaurus-theme-classic/src/theme/Navbar/index.js
View file

@ -45,7 +45,7 @@ const Sun = () => <span className={classnames(styles.toggle, styles.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 (
<React.Fragment>
<Head>
@ -132,7 +128,7 @@ function Navbar() {
)}
{title != null && (
<strong
className={searchBarExpanded ? styles.hideLogoText : ''}>
className={isSearchBarExpanded ? styles.hideLogoText : ''}>
{title}
</strong>
)}
@ -161,7 +157,10 @@ function Navbar() {
/>
{algolia && (
<div className="navbar__search" key="search-box">
<SearchBar handleSearchBarToggle={handleSearchBarToggle} />
<SearchBar
handleSearchBarToggle={setIsSearchBarExpanded}
isSearchBarExpanded={isSearchBarExpanded}
/>
</div>
)}
</div>

3
packages/docusaurus-theme-search-algolia/package.json
View file

@ -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",

103
packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
View file

@ -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 ? (
<Fragment>
<span
role="button"
className={`search-icon ${isExpanded ? 'search-icon-hidden' : ''}`}
onClick={this.toggleSearchIconClick}
onKeyDown={this.toggleSearchIconClick}
tabIndex={0}
/>
<input
id="search_input_react"
type="search"
placeholder="Search"
aria-label="Search"
className={`${isExpanded ? 'search-bar-expanded' : 'search-bar'}`}
onBlur={this.toggleSearchIconClick}
ref={this.searchBarRef}
/>
</Fragment>
) : null;
}
}
Search.contextType = DocusaurusContext;
return isEnabled ? (
<Fragment>
<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(
{'search-bar-expanded': props.isSearchBarExpanded},
{'search-bar': !props.isSearchBarExpanded},
)}
onBlur={toggleSearchIconClick}
ref={searchBarRef}
/>
</Fragment>
) : null;
};
export default Search;