feat(docsearch): introduce initialScrollY option
This commit is contained in:
parent
37a0bf661a
commit
bf4dc9a170
2 changed files with 24 additions and 16 deletions
|
|
@ -1,6 +1,9 @@
|
|||
import React from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { PublicAutocompleteOptions } from '@francoischalifour/autocomplete-core';
|
||||
import {
|
||||
PublicAutocompleteOptions,
|
||||
AutocompleteState,
|
||||
} from '@francoischalifour/autocomplete-core';
|
||||
|
||||
import { DocSearchHit, InternalDocSearchHit } from './types';
|
||||
import { DocSearchButton } from './DocSearchButton';
|
||||
|
|
@ -19,24 +22,21 @@ export interface DocSearchProps
|
|||
hit: DocSearchHit;
|
||||
children: React.ReactNode;
|
||||
}): JSX.Element;
|
||||
resultsFooterComponent?(props: {
|
||||
state: AutocompleteState<InternalDocSearchHit>;
|
||||
}): JSX.Element | null;
|
||||
}
|
||||
|
||||
export function DocSearch(props: DocSearchProps) {
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
|
||||
const onOpen = React.useCallback(
|
||||
function onOpen() {
|
||||
setIsOpen(true);
|
||||
},
|
||||
[setIsOpen]
|
||||
);
|
||||
const onOpen = React.useCallback(() => {
|
||||
setIsOpen(true);
|
||||
}, [setIsOpen]);
|
||||
|
||||
const onClose = React.useCallback(
|
||||
function onClose() {
|
||||
setIsOpen(false);
|
||||
},
|
||||
[setIsOpen]
|
||||
);
|
||||
const onClose = React.useCallback(() => {
|
||||
setIsOpen(false);
|
||||
}, [setIsOpen]);
|
||||
|
||||
useDocSearchKeyboardEvents({ isOpen, onOpen, onClose });
|
||||
|
||||
|
|
@ -46,7 +46,11 @@ export function DocSearch(props: DocSearchProps) {
|
|||
|
||||
{isOpen &&
|
||||
createPortal(
|
||||
<DocSearchModal {...props} onClose={onClose} />,
|
||||
<DocSearchModal
|
||||
{...props}
|
||||
initialScrollY={window.scrollY}
|
||||
onClose={onClose}
|
||||
/>,
|
||||
document.body
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import { ScreenState } from './ScreenState';
|
|||
import { Footer } from './Footer';
|
||||
|
||||
interface DocSearchModalProps extends DocSearchProps {
|
||||
initialScrollY: number;
|
||||
onClose?(): void;
|
||||
}
|
||||
|
||||
|
|
@ -37,6 +38,7 @@ export function DocSearchModal({
|
|||
hitComponent = Hit,
|
||||
resultsFooterComponent = () => null,
|
||||
navigator,
|
||||
initialScrollY = 0,
|
||||
}: DocSearchModalProps) {
|
||||
const [state, setState] = React.useState<
|
||||
AutocompleteState<InternalDocSearchHit>
|
||||
|
|
@ -275,14 +277,16 @@ export function DocSearchModal({
|
|||
|
||||
React.useEffect(() => {
|
||||
document.body.classList.add('DocSearch--active');
|
||||
scrollY.current = window.scrollY;
|
||||
|
||||
return () => {
|
||||
document.body.classList.remove('DocSearch--active');
|
||||
|
||||
// IE11 doesn't support `scrollTo` so we check that the method exists
|
||||
// first.
|
||||
window.scrollTo?.(0, scrollY.current);
|
||||
window.scrollTo?.(0, initialScrollY);
|
||||
};
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue