This repository has been archived by the owner on Jul 1, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 198
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: search on page * feat: search on page * add styles for search * fix styles * chore: update LO submodule Co-authored-by: shoom3301 <shoom3301@gmail.com> Co-authored-by: Yaroslav Zhavoronkov <y.zhavoronkov@1inch.io>
- Loading branch information
3 people
authored
Dec 23, 2021
1 parent
3de8f9f
commit 06af2ca
Showing
6 changed files
with
353 additions
and
3 deletions.
There are no files selected for viewing
Submodule limit-order-protocol
updated
36 files
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,219 @@ | ||
| /** | ||
| * Copyright (c) Facebook, Inc. and its affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| import React, {useState, useRef, useCallback, useMemo} from 'react'; | ||
| import {createPortal} from 'react-dom'; | ||
| import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; | ||
| import {useHistory} from '@docusaurus/router'; | ||
| import {useBaseUrlUtils} from '@docusaurus/useBaseUrl'; | ||
| import Link from '@docusaurus/Link'; | ||
| import Head from '@docusaurus/Head'; | ||
| import useSearchQuery from '@docusaurus/preset-classic/node_modules/@docusaurus/theme-search-algolia/src/theme/hooks/useSearchQuery.js'; | ||
| import {isRegexpStringMatch} from '@docusaurus/theme-common'; | ||
| import {DocSearchButton, useDocSearchKeyboardEvents} from '@docsearch/react'; | ||
| import useAlgoliaContextualFacetFilters from '@docusaurus/preset-classic/node_modules/@docusaurus/theme-search-algolia/src/theme/hooks/useAlgoliaContextualFacetFilters.js'; | ||
| import {translate} from '@docusaurus/Translate'; | ||
| import styles from './styles.module.css'; | ||
|
|
||
| let DocSearchModal = null; | ||
|
|
||
| function Hit({hit, children}) { | ||
| return <Link to={hit.url}>{children}</Link>; | ||
| } | ||
|
|
||
| function ResultsFooter({state, onClose}) { | ||
| const {generateSearchPageLink} = useSearchQuery(); | ||
|
|
||
| return ( | ||
| <Link to={generateSearchPageLink(state.query)} onClick={onClose}> | ||
| See all {state.context.nbHits} results | ||
| </Link> | ||
| ); | ||
| } | ||
|
|
||
| function DocSearch({contextualSearch, externalUrlRegex, ...props}) { | ||
| const {siteMetadata} = useDocusaurusContext(); | ||
|
|
||
| const contextualSearchFacetFilters = useAlgoliaContextualFacetFilters(); | ||
|
|
||
| const configFacetFilters = props.searchParameters?.facetFilters ?? []; | ||
|
|
||
| const facetFilters = contextualSearch | ||
| ? // Merge contextual search filters with config filters | ||
| [...contextualSearchFacetFilters, ...configFacetFilters] | ||
| : // ... or use config facetFilters | ||
| configFacetFilters; | ||
|
|
||
| // we let user override default searchParameters if he wants to | ||
| const searchParameters = { | ||
| ...props.searchParameters, | ||
| facetFilters, | ||
| }; | ||
|
|
||
| const {withBaseUrl} = useBaseUrlUtils(); | ||
| const history = useHistory(); | ||
| const searchContainer = useRef(null); | ||
| const searchButtonRef = useRef(null); | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const [initialQuery, setInitialQuery] = useState(null); | ||
|
|
||
| const importDocSearchModalIfNeeded = useCallback(() => { | ||
| if (DocSearchModal) { | ||
| return Promise.resolve(); | ||
| } | ||
|
|
||
| return Promise.all([ | ||
| import('@docsearch/react/modal'), | ||
| import('@docsearch/react/style'), | ||
| import('./styles.css'), | ||
| ]).then(([{DocSearchModal: Modal}]) => { | ||
| DocSearchModal = Modal; | ||
| }); | ||
| }, []); | ||
|
|
||
| const onOpen = useCallback(() => { | ||
| importDocSearchModalIfNeeded().then(() => { | ||
| searchContainer.current = document.createElement('div'); | ||
| document.body.insertBefore( | ||
| searchContainer.current, | ||
| document.body.firstChild, | ||
| ); | ||
| setIsOpen(true); | ||
| }); | ||
| }, [importDocSearchModalIfNeeded, setIsOpen]); | ||
|
|
||
| const onClose = useCallback(() => { | ||
| setIsOpen(false); | ||
| searchContainer.current.remove(); | ||
| }, [setIsOpen]); | ||
|
|
||
| const onInput = useCallback( | ||
| (event) => { | ||
| importDocSearchModalIfNeeded().then(() => { | ||
| setIsOpen(true); | ||
| setInitialQuery(event.key); | ||
| }); | ||
| }, | ||
| [importDocSearchModalIfNeeded, setIsOpen, setInitialQuery], | ||
| ); | ||
|
|
||
| const navigator = useRef({ | ||
| navigate({itemUrl}) { | ||
| // Algolia results could contain URL's from other domains which cannot | ||
| // be served through history and should navigate with window.location | ||
| if (isRegexpStringMatch(externalUrlRegex, itemUrl)) { | ||
| window.location.href = itemUrl; | ||
| } else { | ||
| history.push(itemUrl); | ||
| } | ||
| }, | ||
| }).current; | ||
|
|
||
| const transformItems = useRef((items) => { | ||
| return items.map((item) => { | ||
| // If Algolia contains a external domain, we should navigate without relative URL | ||
| if (isRegexpStringMatch(externalUrlRegex, item.url)) { | ||
| return item; | ||
| } | ||
|
|
||
| // We transform the absolute URL into a relative URL. | ||
| const url = new URL(item.url); | ||
| return { | ||
| ...item, | ||
| url: withBaseUrl(`${url.pathname}${url.hash}`), | ||
| }; | ||
| }); | ||
| }).current; | ||
|
|
||
| const resultsFooterComponent = useMemo( | ||
| () => (footerProps) => <ResultsFooter {...footerProps} onClose={onClose} />, | ||
| [onClose], | ||
| ); | ||
|
|
||
| const transformSearchClient = useCallback( | ||
| (searchClient) => { | ||
| searchClient.addAlgoliaAgent( | ||
| 'docusaurus', | ||
| siteMetadata.docusaurusVersion, | ||
| ); | ||
|
|
||
| return searchClient; | ||
| }, | ||
| [siteMetadata.docusaurusVersion], | ||
| ); | ||
|
|
||
| useDocSearchKeyboardEvents({ | ||
| isOpen, | ||
| onOpen, | ||
| onClose, | ||
| onInput, | ||
| searchButtonRef, | ||
| }); | ||
|
|
||
| const translatedSearchLabel = translate({ | ||
| id: 'theme.SearchBar.label', | ||
| message: 'Search', | ||
| description: 'The ARIA label and placeholder for search button', | ||
| }); | ||
|
|
||
| return ( | ||
| <> | ||
| <Head> | ||
| {/* This hints the browser that the website will load data from Algolia, | ||
| and allows it to preconnect to the DocSearch cluster. It makes the first | ||
| query faster, especially on mobile. */} | ||
| <link | ||
| rel="preconnect" | ||
| href={`https://${props.appId}-dsn.algolia.net`} | ||
| crossOrigin="anonymous" | ||
| /> | ||
| </Head> | ||
|
|
||
| <div className={styles.searchBox}> | ||
| <DocSearchButton | ||
| onTouchStart={importDocSearchModalIfNeeded} | ||
| onFocus={importDocSearchModalIfNeeded} | ||
| onMouseOver={importDocSearchModalIfNeeded} | ||
| onClick={onOpen} | ||
| ref={searchButtonRef} | ||
| translations={{ | ||
| buttonText: translatedSearchLabel, | ||
| buttonAriaLabel: translatedSearchLabel, | ||
| }} | ||
| /> | ||
| </div> | ||
|
|
||
| {isOpen && | ||
| createPortal( | ||
| <DocSearchModal | ||
| onClose={onClose} | ||
| initialScrollY={window.scrollY} | ||
| initialQuery={initialQuery} | ||
| navigator={navigator} | ||
| transformItems={transformItems} | ||
| hitComponent={Hit} | ||
| resultsFooterComponent={resultsFooterComponent} | ||
| transformSearchClient={transformSearchClient} | ||
| {...props} | ||
| searchParameters={searchParameters} | ||
| />, | ||
| searchContainer.current, | ||
| )} | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| function SearchBar({size}) { | ||
| const {siteConfig} = useDocusaurusContext(); | ||
| return ( | ||
| <div className={size === 'large' ? 'largeSearch' : 'smallSearch'}> | ||
| <DocSearch {...siteConfig.themeConfig.algolia} /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default SearchBar; |
Oops, something went wrong.