github.com/nozzle/golangci-lint@v1.49.0-nz3/docs/src/components/SearchBar/index.js (about) 1 /** 2 * Copyright (c) Facebook, Inc. and its affiliates. 3 * 4 * This source code is licensed under the MIT license found in the 5 * LICENSE file in the root directory of this source tree. 6 */ 7 8 import React, { useState, useRef, useCallback } from "react"; 9 import classnames from "classnames"; 10 11 import { useHistory } from "react-router-dom"; 12 13 import "./styles.css"; 14 15 const algolia = { 16 // TODO 17 }; 18 19 const Search = (props) => { 20 const [algoliaLoaded, setAlgoliaLoaded] = useState(false); 21 const searchBarRef = useRef(null); 22 const history = useHistory(); 23 24 function initAlgolia(focus) { 25 window.docsearch({ 26 appId: algolia.appId, 27 apiKey: algolia.apiKey, 28 indexName: algolia.indexName, 29 inputSelector: "#search_input_react", 30 algoliaOptions: algolia.algoliaOptions, 31 // Override algolia's default selection event, allowing us to do client-side 32 // navigation and avoiding a full page refresh. 33 handleSelected: (_input, _event, suggestion) => { 34 // Use an anchor tag to parse the absolute url into a relative url 35 // Alternatively, we can use new URL(suggestion.url) but it's not supported in IE. 36 const a = document.createElement("a"); 37 a.href = suggestion.url; 38 39 // Algolia use closest parent element id #__docusaurus when a h1 page title does 40 // not have an id, so we can safely remove it. 41 // See https://github.com/facebook/docusaurus/issues/1828 for more details. 42 const routePath = 43 `#__docusaurus` === a.hash 44 ? `${a.pathname}` 45 : `${a.pathname}${a.hash}`; 46 history.push(routePath); 47 }, 48 }); 49 50 if (focus) { 51 searchBarRef.current.focus(); 52 } 53 } 54 55 const loadAlgolia = (focus = true) => { 56 if (algoliaLoaded) { 57 return; 58 } 59 60 Promise.all([import("docsearch.js"), import("./algolia.css")]).then( 61 ([{ default: docsearch }]) => { 62 setAlgoliaLoaded(true); 63 window.docsearch = docsearch; 64 initAlgolia(focus); 65 } 66 ); 67 }; 68 69 const handleSearchIcon = useCallback(() => { 70 loadAlgolia(); 71 72 if (algoliaLoaded) { 73 searchBarRef.current.focus(); 74 } 75 76 props.handleSearchBarToggle(!props.isSearchBarExpanded); 77 }, [props.isSearchBarExpanded]); 78 79 const handleSearchInputBlur = useCallback(() => { 80 props.handleSearchBarToggle(!props.isSearchBarExpanded); 81 }, [props.isSearchBarExpanded]); 82 83 const handleSearchInput = useCallback((e) => { 84 const needFocus = e.type !== "mouseover"; 85 86 loadAlgolia(needFocus); 87 }); 88 89 return ( 90 <div className="navbar__search" key="search-box"> 91 <span 92 aria-label="expand searchbar" 93 role="button" 94 className={classnames("search-icon", { 95 "search-icon-hidden": props.isSearchBarExpanded, 96 })} 97 onClick={handleSearchIcon} 98 onKeyDown={handleSearchIcon} 99 tabIndex={0} 100 /> 101 <input 102 id="search_input_react" 103 type="search" 104 placeholder="Search" 105 aria-label="Search" 106 className={classnames( 107 "navbar__search-input", 108 { "search-bar-expanded": props.isSearchBarExpanded }, 109 { "search-bar": !props.isSearchBarExpanded } 110 )} 111 onMouseOver={handleSearchInput} 112 onFocus={handleSearchInput} 113 onBlur={handleSearchInputBlur} 114 ref={searchBarRef} 115 /> 116 </div> 117 ); 118 }; 119 120 export default Search;