66 * LICENSE file in the root directory of this source tree.
77 */
88
9- import React , { useRef , useCallback } from "react" ;
10- import classnames from "classnames" ;
11- import { useHistory } from "@docusaurus/router" ;
12- import useDocusaurusContext from "@docusaurus/useDocusaurusContext" ;
13- let loaded = false ;
9+ import React , { useRef , useCallback , useEffect } from "react"
10+ import classnames from "classnames"
11+ import { useHistory } from "@docusaurus/router"
12+ import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
13+ import "./styles.css"
14+
15+ let loaded = false
1416const Search = ( props ) => {
15- const initialized = useRef ( false ) ;
16- const searchBarRef = useRef ( null ) ;
17- const history = useHistory ( ) ;
18- const { siteConfig = { } } = useDocusaurusContext ( ) ;
19- const { baseUrl } = siteConfig ;
17+ const initialized = useRef ( false )
18+ const searchBarRef = useRef ( null )
19+ const history = useHistory ( )
20+ const { siteConfig = { } } = useDocusaurusContext ( )
21+ const { baseUrl } = siteConfig
2022 const initAlgolia = ( ) => {
2123 if ( ! initialized . current ) {
2224 new window . DocSearch ( {
@@ -25,25 +27,25 @@ const Search = (props) => {
2527 // Override algolia's default selection event, allowing us to do client-side
2628 // navigation and avoiding a full page refresh.
2729 handleSelected : ( _input , _event , suggestion ) => {
28- const url = baseUrl + suggestion . url ;
30+ const url = baseUrl + suggestion . url
2931 // Use an anchor tag to parse the absolute url into a relative url
3032 // Alternatively, we can use new URL(suggestion.url) but its not supported in IE
31- const a = document . createElement ( "a" ) ;
32- a . href = url ;
33+ const a = document . createElement ( "a" )
34+ a . href = url
3335 // Algolia use closest parent element id #__docusaurus when a h1 page title does not have an id
3436 // So, we can safely remove it. See https://github.com/facebook/docusaurus/issues/1828 for more details.
3537
36- history . push ( url ) ;
38+ history . push ( url )
3739 } ,
38- } ) ;
39- initialized . current = true ;
40+ } )
41+ initialized . current = true
4042 }
41- } ;
43+ }
4244
4345 const getSearchData = ( ) =>
4446 process . env . NODE_ENV === "production"
4547 ? fetch ( `${ baseUrl } ) . then ( ( content ) => content . json ( ) )
46- : Promise . resolve ( [ ] ) ;
48+ : Promise . resolve ( [ ] )
4749
4850 const loadAlgolia = ( ) => {
4951 if ( ! loaded ) {
@@ -52,26 +54,38 @@ const Search = (props) => {
5254 import ( "./lib/DocSearch" ) ,
5355 import ( "./algolia.css" ) ,
5456 ] ) . then ( ( [ searchData , { default : DocSearch } ] ) => {
55- loaded = true ;
56- window . searchData = searchData ;
57- window . DocSearch = DocSearch ;
58- initAlgolia ( ) ;
59- } ) ;
57+ loaded = true
58+ window . searchData = searchData
59+ window . DocSearch = DocSearch
60+ initAlgolia ( )
61+ } )
6062 } else {
61- initAlgolia ( ) ;
63+ initAlgolia ( )
6264 }
63- } ;
65+ }
6466
6567 const toggleSearchIconClick = useCallback (
6668 ( e ) => {
6769 if ( ! searchBarRef . current . contains ( e . target ) ) {
68- searchBarRef . current . focus ( ) ;
70+ searchBarRef . current . focus ( )
6971 }
7072
71- props . handleSearchBarToggle ( ! props . isSearchBarExpanded ) ;
73+ props . handleSearchBarToggle &&
74+ props . handleSearchBarToggle ( ! props . isSearchBarExpanded )
7275 } ,
7376 [ props . isSearchBarExpanded ]
74- ) ;
77+ )
78+
79+ useEffect ( ( ) => {
80+ document . addEventListener ( "keypress" , ( e ) => {
81+ if ( document . activeElement === searchBarRef . current ) return
82+ if ( e . key === "/" ) {
83+ e . preventDefault ( )
84+ searchBarRef . current . focus ( )
85+ }
86+ } )
87+ return ( ) => document . removeEventListener ( "keypress" )
88+ } , [ ] )
7589
7690 return (
7791 < div className = "navbar__search" key = "search-box" >
@@ -101,8 +115,27 @@ const Search = (props) => {
101115 onBlur = { toggleSearchIconClick }
102116 ref = { searchBarRef }
103117 />
118+
119+ < svg
120+ x = "0px"
121+ y = "0px"
122+ width = "19px"
123+ height = "20px"
124+ viewBox = "0 0 19 20"
125+ className = { classnames ( "search-icon-keyboard" , {
126+ "search-icon-hidden" : props . isSearchBarExpanded ,
127+ } ) }
128+ >
129+ < path
130+ fill = "none"
131+ stroke = "#979A9C"
132+ opacity = "0.4"
133+ d = "M3.5,0.5h12c1.7,0,3,1.3,3,3v13c0,1.7-1.3,3-3,3h-12c-1.7,0-3-1.3-3-3v-13C0.5,1.8,1.8,0.5,3.5,0.5z"
134+ />
135+ < path fill = "#979a9c" d = "M11.8,6L8,15.1H7.1L10.8,6L11.8,6z" />
136+ </ svg >
104137 </ div >
105- ) ;
106- } ;
138+ )
139+ }
107140
108- export default Search ;
141+ export default Search
0 commit comments