feat(docsearch): introduce initialScrollY option

algolia · Jun 11, 2020 · bf4dc9a · bf4dc9a
1 parent 37a0bf6
commit bf4dc9a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/src/DocSearch.tsx b/src/DocSearch.tsx
@@ -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
         )}
     </>

diff --git a/src/DocSearchModal.tsx b/src/DocSearchModal.tsx
@@ -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(() => {