feat(docusaurus): import DocSearch modal on hover

francoischalifour · May 14, 2020 · e680f24 · e680f24
1 parent 218944e
commit e680f24
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 24 deletions.
diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx
@@ -2,10 +2,6 @@ import React, { useState, useEffect } from 'react';
 
 import { SearchIcon } from './icons/SearchIcon';
 
-interface SearchButtonProps {
-  onClick(): void;
-}
-
 const ACTION_KEY_DEFAULT = 'Ctrl';
 const ACTION_KEY_APPLE = '⌘';
 
@@ -17,7 +13,12 @@ function isAppleDevice() {
   return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
 }
 
-export function DocSearchButton(props: SearchButtonProps) {
+export function DocSearchButton(
+  props: React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  >
+) {
   const [key, setKey] = useState(() =>
     isAppleDevice() ? ACTION_KEY_APPLE : ACTION_KEY_DEFAULT
   );
@@ -29,11 +30,7 @@ export function DocSearchButton(props: SearchButtonProps) {
   }, []);
 
   return (
-    <button
-      type="button"
-      className="DocSearch-SearchButton"
-      onClick={props.onClick}
-    >
+    <button type="button" className="DocSearch-SearchButton" {...props}>
       <SearchIcon />
       <span className="DocSearch-SearchButton-Placeholder">Search</span>
       <span className="DocSearch-SearchButton-Key">{key}</span>

diff --git a/packages/website/src/theme/SearchBar/index.js b/packages/website/src/theme/SearchBar/index.js
@@ -25,26 +25,29 @@ function SearchBar() {
     searchParameters,
   } = siteConfig.themeConfig.algolia;
 
-  const load = useCallback(function load() {
-    if (DocSearchModal) {
-      return Promise.resolve();
-    }
+  const importDocSearchModalIfNeeded = useCallback(
+    function importDocSearchModalIfNeeded() {
+      if (DocSearchModal) {
+        return Promise.resolve();
+      }
 
-    return Promise.all([
-      import('@francoischalifour/docsearch-react/modal'),
-      import('@francoischalifour/docsearch-react/style'),
-    ]).then(([{ DocSearchModal: Modal }]) => {
-      DocSearchModal = Modal;
-    });
-  }, []);
+      return Promise.all([
+        import('@francoischalifour/docsearch-react/modal'),
+        import('@francoischalifour/docsearch-react/style'),
+      ]).then(([{ DocSearchModal: Modal }]) => {
+        DocSearchModal = Modal;
+      });
+    },
+    []
+  );
 
   const onOpen = useCallback(
     function onOpen() {
-      load().then(() => {
+      importDocSearchModalIfNeeded().then(() => {
         setIsOpen(true);
       });
     },
-    [load, setIsOpen]
+    [importDocSearchModalIfNeeded, setIsOpen]
   );
 
   const onClose = useCallback(
@@ -66,7 +69,11 @@ function SearchBar() {
         />
       </Head>
 
-      <DocSearchButton onClick={onOpen} />
+      <DocSearchButton
+        onTouchStart={importDocSearchModalIfNeeded}
+        onMouseOver={importDocSearchModalIfNeeded}
+        onClick={onOpen}
+      />
 
       {isOpen &&
         createPortal(