diff options
author | 2022-05-12 20:21:02 +0000 | |
---|---|---|
committer | 2022-05-12 20:21:02 +0000 | |
commit | 29e7260a4e484947931398ef9e10b7efa8e361eb (patch) | |
tree | 2bc99e3b943110dd72b49ee22f581ce982e7fe4d /examples/docs/src/components/Header/Search.tsx | |
parent | 17da2b1611703773f06536142991a871d372e153 (diff) | |
download | astro-29e7260a4e484947931398ef9e10b7efa8e361eb.tar.gz astro-29e7260a4e484947931398ef9e10b7efa8e361eb.tar.zst astro-29e7260a4e484947931398ef9e10b7efa8e361eb.zip |
[ci] format
Diffstat (limited to 'examples/docs/src/components/Header/Search.tsx')
-rw-r--r-- | examples/docs/src/components/Header/Search.tsx | 163 |
1 files changed, 78 insertions, 85 deletions
diff --git a/examples/docs/src/components/Header/Search.tsx b/examples/docs/src/components/Header/Search.tsx index 5b1056d14..b8a4292da 100644 --- a/examples/docs/src/components/Header/Search.tsx +++ b/examples/docs/src/components/Header/Search.tsx @@ -1,104 +1,97 @@ /* jsxImportSource: react */ -import { useState, useCallback, useRef } from "react"; -import * as CONFIG from "../../config"; -import "@docsearch/css/dist/style.css"; -import "./Search.css"; +import { useState, useCallback, useRef } from 'react'; +import * as CONFIG from '../../config'; +import '@docsearch/css/dist/style.css'; +import './Search.css'; // @ts-ignore -import * as docSearchReact from "@docsearch/react"; +import * as docSearchReact from '@docsearch/react'; // @ts-ignore -import { createPortal } from "react-dom"; +import { createPortal } from 'react-dom'; export default function Search() { - const DocSearchModal = - docSearchReact.DocSearchModal || docSearchReact.default.DocSearchModal; + const DocSearchModal = docSearchReact.DocSearchModal || docSearchReact.default.DocSearchModal; - const useDocSearchKeyboardEvents = - docSearchReact.useDocSearchKeyboardEvents || - docSearchReact.default.useDocSearchKeyboardEvents; + const useDocSearchKeyboardEvents = + docSearchReact.useDocSearchKeyboardEvents || docSearchReact.default.useDocSearchKeyboardEvents; - const [isOpen, setIsOpen] = useState(false); - const searchButtonRef = useRef(); - const [initialQuery, setInitialQuery] = useState(null); + const [isOpen, setIsOpen] = useState(false); + const searchButtonRef = useRef(); + const [initialQuery, setInitialQuery] = useState(null); - const onOpen = useCallback(() => { - setIsOpen(true); - }, [setIsOpen]); + const onOpen = useCallback(() => { + setIsOpen(true); + }, [setIsOpen]); - const onClose = useCallback(() => { - setIsOpen(false); - }, [setIsOpen]); + const onClose = useCallback(() => { + setIsOpen(false); + }, [setIsOpen]); - const onInput = useCallback( - (e) => { - setIsOpen(true); - setInitialQuery(e.key); - }, - [setIsOpen, setInitialQuery] - ); + const onInput = useCallback( + (e) => { + setIsOpen(true); + setInitialQuery(e.key); + }, + [setIsOpen, setInitialQuery] + ); - useDocSearchKeyboardEvents({ - isOpen, - onOpen, - onClose, - onInput, - searchButtonRef, - }); + useDocSearchKeyboardEvents({ + isOpen, + onOpen, + onClose, + onInput, + searchButtonRef, + }); - return ( - <> - <button - type="button" - ref={searchButtonRef} - onClick={onOpen} - className="search-input" - > - <svg width="24" height="24" fill="none"> - <path - d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" - stroke="currentColor" - strokeWidth="2" - strokeLinecap="round" - strokeLinejoin="round" - /> - </svg> + return ( + <> + <button type="button" ref={searchButtonRef} onClick={onOpen} className="search-input"> + <svg width="24" height="24" fill="none"> + <path + d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" + stroke="currentColor" + strokeWidth="2" + strokeLinecap="round" + strokeLinejoin="round" + /> + </svg> - <span>Search</span> + <span>Search</span> - <span className="search-hint"> - <span className="sr-only">Press </span> + <span className="search-hint"> + <span className="sr-only">Press </span> - <kbd>/</kbd> + <kbd>/</kbd> - <span className="sr-only"> to search</span> - </span> - </button> + <span className="sr-only"> to search</span> + </span> + </button> - {isOpen && - createPortal( - <DocSearchModal - initialQuery={initialQuery} - initialScrollY={window.scrollY} - onClose={onClose} - indexName={(CONFIG as any).ALGOLIA.indexName} - appId={(CONFIG as any).ALGOLIA.appId} - apiKey={(CONFIG as any).ALGOLIA.apiKey} - transformItems={(items) => { - return items.map((item) => { - // We transform the absolute URL into a relative URL to - // work better on localhost, preview URLS. - const a = document.createElement("a"); - a.href = item.url; - const hash = a.hash === "#overview" ? "" : a.hash; - return { - ...item, - url: `${a.pathname}${hash}`, - }; - }); - }} - />, - document.body - )} - </> - ); + {isOpen && + createPortal( + <DocSearchModal + initialQuery={initialQuery} + initialScrollY={window.scrollY} + onClose={onClose} + indexName={(CONFIG as any).ALGOLIA.indexName} + appId={(CONFIG as any).ALGOLIA.appId} + apiKey={(CONFIG as any).ALGOLIA.apiKey} + transformItems={(items) => { + return items.map((item) => { + // We transform the absolute URL into a relative URL to + // work better on localhost, preview URLS. + const a = document.createElement('a'); + a.href = item.url; + const hash = a.hash === '#overview' ? '' : a.hash; + return { + ...item, + url: `${a.pathname}${hash}`, + }; + }); + }} + />, + document.body + )} + </> + ); } |