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;