From 4b007b67c8c0a2883265d8293b407bea71fbd1b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Thu, 14 May 2020 14:16:11 +0200
Subject: [PATCH] feat(docusaurus): import DocSearch modal on hover

---
 src/DocSearchButton.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/DocSearchButton.tsx b/src/DocSearchButton.tsx
index bb91a2143..2344f745a 100644
--- a/src/DocSearchButton.tsx
+++ b/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>