1
0
Fork 0

feat(docsearch): introduce initialScrollY option

This commit is contained in:
François Chalifour 2020-06-11 11:18:29 +02:00
parent 37a0bf661a
commit bf4dc9a170
2 changed files with 24 additions and 16 deletions

View file

@ -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
)}
</>

View file

@ -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(() => {