feat(SearchBar): open searchBar on Ctrl + k / ⌘ + k keypress (#2999)

shanpriyan · web-flow · commit fc2cede01684 · 2022-11-12T22:30:14.000-08:00
* Feat(SearchBar): open searchBar on `ctrl + k`/ `⌘ + k` keypress

* Fix: tab focus
diff --git a/src/components/CommonComponents/SearchBar/index.tsx b/src/components/CommonComponents/SearchBar/index.tsx
@@ -91,11 +91,25 @@ const SearchBar = (): JSX.Element => {
     }
   };
 
-  useKeyPress('/', () => expandContainer());
-  useKeyPress('Escape', () => {
-    if (isExpanded) {
-      collapseContainer();
-    }
+  useKeyPress({
+    targetKey: 'ctrl+k',
+    callback: expandContainer,
+    preventDefault: true,
+  });
+
+  useKeyPress({
+    targetKey: 'meta+k',
+    callback: expandContainer,
+    preventDefault: true,
+  });
+
+  useKeyPress({
+    targetKey: 'Escape',
+    callback: () => {
+      if (isExpanded) {
+        collapseContainer();
+      }
+    },
   });
 
   return (
diff --git a/src/hooks/useKeyPress.tsx b/src/hooks/useKeyPress.tsx
@@ -3,21 +3,46 @@
  */
 import { useEffect, useState } from 'react';
 
-function useKeyPress(targetKey: string, cb?: () => void): boolean {
+const decorateKey = ({ metaKey, ctrlKey, key }: KeyboardEvent) => {
+  if (metaKey) {
+    return `meta+${key}`;
+  }
+
+  if (ctrlKey) {
+    return `ctrl+${key}`;
+  }
+
+  return key;
+};
+
+interface UseKeyPressProps {
+  targetKey: string;
+  callback?: () => void;
+  preventDefault?: boolean;
+}
+
+function useKeyPress({
+  targetKey,
+  callback,
+  preventDefault = false,
+}: UseKeyPressProps): boolean {
   const [keyPressed, setKeyPressed] = useState(false);
 
   useEffect(() => {
-    const downHandler = ({ key }: KeyboardEvent) => {
-      if (key === targetKey) {
+    const downHandler = (e: KeyboardEvent) => {
+      if (decorateKey(e) === targetKey) {
+        if (preventDefault) {
+          e.preventDefault();
+        }
         setKeyPressed(true);
-        if (cb) {
-          cb();
+        if (typeof callback === 'function') {
+          callback();
         }
       }
     };
 
-    const upHandler = ({ key }: KeyboardEvent) => {
-      if (key === targetKey) {
+    const upHandler = (e: KeyboardEvent) => {
+      if (decorateKey(e) === targetKey) {
         setKeyPressed(false);
       }
     };
@@ -28,7 +53,7 @@ function useKeyPress(targetKey: string, cb?: () => void): boolean {
       window.removeEventListener('keydown', downHandler);
       window.removeEventListener('keyup', upHandler);
     };
-  }, [cb, targetKey]);
+  }, [callback, targetKey, preventDefault]);
   return keyPressed;
 }
 
