diff --git a/site/theme/template/Layout/Header/SearchBar.tsx b/site/theme/template/Layout/Header/SearchBar.tsx index 9861d56e64..cf851f591e 100644 --- a/site/theme/template/Layout/Header/SearchBar.tsx +++ b/site/theme/template/Layout/Header/SearchBar.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; -import { Link, browserHistory } from 'bisheng/router'; +import { Link } from 'bisheng/router'; import classNames from 'classnames'; import { Helmet } from 'react-helmet-async'; import canUseDom from 'rc-util/lib/Dom/canUseDom'; @@ -8,7 +8,6 @@ import { Input, Tooltip, Typography } from 'antd'; import { SearchOutlined } from '@ant-design/icons'; import { DocSearchProps, useDocSearchKeyboardEvents, DocSearchModalProps } from '@docsearch/react'; import '@docsearch/css'; - import { SharedProps } from './interface'; import { IAlgoliaConfig, transformHitUrl } from './algolia-config'; @@ -20,6 +19,7 @@ export interface SearchBarProps extends SharedProps { onTriggerFocus?: (focus: boolean) => void; responsive: null | 'narrow' | 'crowded'; algoliaConfig: IAlgoliaConfig; + router: any; } let SearchModal: React.FC | null = null; @@ -42,11 +42,12 @@ function isAppleDevice() { * - [@docusaurus-theme-search-algolia](https://docusaurus.io/docs/api/themes/@docusaurus/theme-search-algolia) * - [DocSearchModal Docs](https://autocomplete-experimental.netlify.app/docs/DocSearchModal) */ -export const SearchBar = ({ +const SearchBar = ({ isZhCN, responsive, onTriggerFocus, algoliaConfig, + router, }: SearchBarProps) => { const [isInputFocus, setInputFocus] = React.useState(false); const [inputSearch, setInputSearch] = React.useState(''); @@ -114,9 +115,7 @@ export const SearchBar = ({ const navigator = React.useRef({ navigate({ itemUrl }: { itemUrl: string }) { - browserHistory.push(itemUrl); - // should use history from bisheng and remove this `reload` calls - window.location.reload(false); + router.push(itemUrl); }, }).current; @@ -196,3 +195,5 @@ export const SearchBar = ({ ); }; + +export default SearchBar; diff --git a/site/theme/template/Layout/Header/index.tsx b/site/theme/template/Layout/Header/index.tsx index b7a63c8ec1..6063d1c2b7 100644 --- a/site/theme/template/Layout/Header/index.tsx +++ b/site/theme/template/Layout/Header/index.tsx @@ -4,12 +4,10 @@ import classNames from 'classnames'; import { UnorderedListOutlined } from '@ant-design/icons'; import { Select, Row, Col, Popover, Button } from 'antd'; import canUseDom from 'rc-util/lib/Dom/canUseDom'; -// import { browserHistory } from 'bisheng/router'; - import * as utils from '../../utils'; import packageJson from '../../../../../package.json'; import Logo from './Logo'; -import { SearchBar } from './SearchBar'; +import SearchBar from './SearchBar'; import More from './More'; import Navigation from './Navigation'; import Github from './Github'; @@ -47,7 +45,7 @@ const triggerDocSearchImport = () => { }); }; -function initDocSearch(isZhCN: boolean) { +function initDocSearch({ isZhCN, router }: { isZhCN: boolean; router: any }) { if (!canUseDom()) { return; } @@ -62,14 +60,12 @@ function initDocSearch(isZhCN: boolean) { transformData: AlgoliaConfig.transformData, debug: AlgoliaConfig.debug, // https://docsearch.algolia.com/docs/behavior#handleselected - // handleSelected: (input, _$1, suggestion, _$2, context) => { - // doesn't refresh - // // Prevents the default behavior on click - // if (context.selectionMethod === 'click') { - // input.setVal(''); - // browserHistory.push(suggestion.url); - // } - // }, + handleSelected: (input: any, _$1: unknown, suggestion: any) => { + router.push(suggestion.url); + setTimeout(() => { + input.setVal(''); + }); + }, }); }); } @@ -97,7 +93,10 @@ class Header extends React.Component { const { intl, router } = this.props; router.listen(this.handleHideMenu); - initDocSearch(intl.locale === 'zh'); + initDocSearch({ + isZhCN: intl.locale === 'zh', + router, + }); window.addEventListener('resize', this.onWindowResize); this.onWindowResize(); @@ -216,6 +215,7 @@ class Header extends React.Component { location, themeConfig, intl: { locale }, + router, } = this.props; const docVersions: Record = { [antdVersion]: antdVersion, @@ -348,6 +348,7 @@ class Header extends React.Component {