move key detect to DocSearch

Author: chenxsan

packages/docsearch-react/src/DocSearch.tsx

@@ -8,13 +8,23 @@ import { createPortal } from 'react-dom';
 
 import { DocSearchButton } from './DocSearchButton';
 import { DocSearchModal } from './DocSearchModal';
+import { ControlKeyIcon } from './icons/ControlKeyIcon';
 import {
   DocSearchHit,
   InternalDocSearchHit,
   StoredDocSearchHit,
 } from './types';
 import { useDocSearchKeyboardEvents } from './useDocSearchKeyboardEvents';
 
+const { useState, useEffect, useCallback, useRef } = React;
+
+const ACTION_KEY_APPLE = '⌘' as const;
+const ACTION_KEY_DEFAULT = 'Ctrl' as const;
+
+function isAppleDevice() {
+  return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
+}
+
 export interface DocSearchProps {
   appId?: string;
   apiKey: string;
@@ -36,21 +46,31 @@ export interface DocSearchProps {
 }
 
 export function DocSearch(props: DocSearchProps) {
-  const searchButtonRef = React.useRef<HTMLButtonElement>(null);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [initialQuery, setInitialQuery] = React.useState<string | undefined>(
+  const searchButtonRef = useRef<HTMLButtonElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [initialQuery, setInitialQuery] = useState<string | undefined>(
     undefined
   );
 
-  const onOpen = React.useCallback(() => {
+  const [key, setKey] = useState<
+    typeof ACTION_KEY_APPLE | typeof ACTION_KEY_DEFAULT | null
+  >(null);
+
+  useEffect(() => {
+    if (typeof navigator !== 'undefined') {
+      setKey(isAppleDevice() ? ACTION_KEY_APPLE : ACTION_KEY_DEFAULT);
+    }
+  }, []);
+
+  const onOpen = useCallback(() => {
     setIsOpen(true);
   }, [setIsOpen]);
 
-  const onClose = React.useCallback(() => {
+  const onClose = useCallback(() => {
     setIsOpen(false);
   }, [setIsOpen]);
 
-  const onInput = React.useCallback(
+  const onInput = useCallback(
     (event: KeyboardEvent) => {
       setIsOpen(true);
       setInitialQuery(event.key);
@@ -68,7 +88,16 @@ export function DocSearch(props: DocSearchProps) {
 
   return (
     <>
-      <DocSearchButton onClick={onOpen} ref={searchButtonRef} />
+      <DocSearchButton onClick={onOpen} ref={searchButtonRef}>
+        {key !== null ? (
+          <span className="DocSearch-Button-Keys">
+            <span className="DocSearch-Button-Key">
+              {key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
+            </span>
+            <span className="DocSearch-Button-Key">K</span>
+          </span>
+        ) : undefined}
+      </DocSearchButton>
 
       {isOpen &&
         createPortal(

packages/docsearch-react/src/DocSearchButton.tsx

@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
-import { ControlKeyIcon } from './icons/ControlKeyIcon';
 import { SearchIcon } from './icons/SearchIcon';
 
 type Translations = Partial<{
@@ -12,29 +11,12 @@ export type DocSearchButtonProps = React.ComponentProps<'button'> & {
   translations?: Translations;
 };
 
-const ACTION_KEY_DEFAULT = 'Ctrl' as const;
-const ACTION_KEY_APPLE = '⌘' as const;
-
-function isAppleDevice() {
-  return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
-}
-
 export const DocSearchButton = React.forwardRef<
   HTMLButtonElement,
   DocSearchButtonProps
 >(({ translations = {}, ...props }, ref) => {
   const { buttonText = 'Search', buttonAriaLabel = 'Search' } = translations;
 
-  const [key, setKey] = useState<
-    typeof ACTION_KEY_APPLE | typeof ACTION_KEY_DEFAULT | null
-  >(null);
-
-  useEffect(() => {
-    if (typeof navigator !== 'undefined') {
-      setKey(isAppleDevice() ? ACTION_KEY_APPLE : ACTION_KEY_DEFAULT);
-    }
-  }, []);
-
   return (
     <button
       type="button"
@@ -47,15 +29,7 @@ export const DocSearchButton = React.forwardRef<
         <SearchIcon />
         <span className="DocSearch-Button-Placeholder">{buttonText}</span>
       </span>
-
-      {key !== null && (
-        <span className="DocSearch-Button-Keys">
-          <span className="DocSearch-Button-Key">
-            {key === ACTION_KEY_DEFAULT ? <ControlKeyIcon /> : key}
-          </span>
-          <span className="DocSearch-Button-Key">K</span>
-        </span>
-      )}
+      {props.children}
     </button>
   );
 });