Fix keyboard shortcut. Add isShortcutEnabled and buttonLabel props. (#72

)
vectara · Jun 18, 2024 · 6229018 · 6229018
1 parent 5bdafb2
commit 6229018
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 5 deletions.
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/src/components/ConfigurationDrawer.tsx b/docs/src/components/ConfigurationDrawer.tsx
@@ -21,6 +21,10 @@ type Props = {
   setCustomerId: (customerId: string) => void;
   apiKey: string;
   setApiKey: (apiKey: string) => void;
+  isShortcutEnabled: boolean;
+  setIsShortcutEnabled: (isShortcutEnabled: boolean) => void;
+  buttonLabel: string;
+  setButtonLabel: (buttonLabel: string) => void;
   placeholder: string;
   setPlaceholder: (placeholder: string) => void;
   isDeepLinkable: boolean;
@@ -46,6 +50,10 @@ export const ConfigurationDrawer = ({
   setCustomerId,
   apiKey,
   setApiKey,
+  isShortcutEnabled,
+  setIsShortcutEnabled,
+  buttonLabel,
+  setButtonLabel,
   placeholder,
   setPlaceholder,
   isDeepLinkable,
@@ -112,6 +120,28 @@ export const ConfigurationDrawer = ({
 
       <VuiSpacer size="l" />
 
+      <VuiTitle size="s">
+        <h3 className="header">Search button</h3>
+      </VuiTitle>
+
+      <VuiSpacer size="s" />
+
+      <VuiFormGroup label="Open modal with keyboard shortcut" labelFor="isKeyboardShortcutEnabled">
+        <VuiToggle
+          checked={isShortcutEnabled}
+          onChange={(e) => setIsShortcutEnabled(e.target.checked)}
+          id="isKeyboardShortcutEnabled"
+        />
+      </VuiFormGroup>
+
+      <VuiSpacer size="xs" />
+
+      <VuiFormGroup label="Button label text" labelFor="buttonLabelText">
+        <VuiTextInput value={buttonLabel} onChange={(e) => setButtonLabel(e.target.value)} fullWidth />
+      </VuiFormGroup>
+
+      <VuiSpacer size="l" />
+
       <VuiTitle size="s">
         <h3 className="header">Search input</h3>
       </VuiTitle>

diff --git a/docs/src/index.tsx b/docs/src/index.tsx
@@ -27,6 +27,8 @@ const generateCodeSnippet = ({
   customerId,
   corpusId,
   apiKey,
+  isShortcutEnabled,
+  buttonLabel,
   placeholder,
   isDeepLinkable = false,
   openResultsInNewTab = false,
@@ -38,6 +40,8 @@ const generateCodeSnippet = ({
   customerId?: string;
   corpusId?: string;
   apiKey?: string;
+  isShortcutEnabled?: boolean;
+  buttonLabel?: string;
   placeholder?: string;
   isDeepLinkable: boolean;
   openResultsInNewTab: boolean;
@@ -62,6 +66,15 @@ const generateCodeSnippet = ({
     `apiKey="${apiKey === "" ? "<Your Vectara API key>" : apiKey}"`
   ];
 
+  // True is the default so only show it if it's false.
+  if (!isShortcutEnabled) {
+    props.push(`isShortcutEnabled={${isShortcutEnabled}}`);
+  }
+
+  if (buttonLabel) {
+    props.push(`buttonLabel="${buttonLabel}"`);
+  }
+
   if (placeholder) {
     props.push(`placeholder=${quotedPlaceholder}`);
   }
@@ -113,6 +126,8 @@ const App = () => {
   const [corpusId, setCorpusId] = useState<string>("");
   const [customerId, setCustomerId] = useState<string>("");
   const [apiKey, setApiKey] = useState<string>("");
+  const [isShortcutEnabled, setIsShortcutEnabled] = useState<boolean>(true);
+  const [buttonLabel, setButtonLabel] = useState<string>("Search");
   const [placeholder, setPlaceholder] = useState<string>(DEFAULT_PLACEHOLDER);
   const [isDeepLinkable, setIsDeepLinkable] = useState<boolean>(false);
   const [openResultsInNewTab, setOpenResultsInNewTab] = useState<boolean>(false);
@@ -190,6 +205,8 @@ const App = () => {
                 corpusId={corpusId === "" ? DEFAULT_CORPUS_ID : corpusId}
                 customerId={customerId === "" ? DEFAULT_CUSTOMER_ID : customerId}
                 apiKey={apiKey === "" ? DEFAULT_API_KEY : apiKey}
+                isShortcutEnabled={isShortcutEnabled}
+                buttonLabel={buttonLabel}
                 placeholder={placeholder}
                 isDeepLinkable={isDeepLinkable}
                 openResultsInNewTab={openResultsInNewTab}
@@ -236,6 +253,8 @@ const App = () => {
                 customerId,
                 corpusId,
                 apiKey,
+                isShortcutEnabled,
+                buttonLabel,
                 placeholder,
                 isDeepLinkable,
                 openResultsInNewTab,
@@ -310,6 +329,10 @@ export const App = () => {
               setCustomerId={setCustomerId}
               apiKey={apiKey}
               setApiKey={setApiKey}
+              isShortcutEnabled={isShortcutEnabled}
+              setIsShortcutEnabled={setIsShortcutEnabled}
+              buttonLabel={buttonLabel}
+              setButtonLabel={setButtonLabel}
               placeholder={placeholder}
               setPlaceholder={setPlaceholder}
               isDeepLinkable={isDeepLinkable}

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/index.tsx b/src/index.tsx
@@ -38,6 +38,8 @@ const ReactSearchInternal = ({
   corpusId,
   apiUrl,
   historySize = 10,
+  isShortcutEnabled = true,
+  buttonLabel = "Search",
   placeholder = "Search",
   isDeepLinkable = false,
   openResultsInNewTab = false,
@@ -68,6 +70,22 @@ const ReactSearchInternal = ({
   const selectedResultRef = useRef<HTMLDivElement | null>(null);
   const searchCount = useRef<number>(0);
 
+  useEffect(() => {
+    const onDocumentKeyDown = ({ key, metaKey }: KeyboardEvent) => {
+      if (metaKey && key === "k") {
+        setIsOpen(true);
+      }
+    };
+
+    if (isShortcutEnabled) {
+      document.addEventListener("keydown", onDocumentKeyDown);
+    }
+
+    return () => {
+      document.removeEventListener("keydown", onDocumentKeyDown);
+    };
+  }, [isShortcutEnabled]);
+
   useEffect(() => {
     setIsSummaryEnabled(isSummaryToggleInitiallyEnabled);
   }, [isSummaryToggleInitiallyEnabled]);
@@ -250,13 +268,13 @@ const ReactSearchInternal = ({
 
                   <VuiFlexItem>
                     <VuiText>
-                      <div>Search</div>
+                      <div>{buttonLabel}</div>
                     </VuiText>
                   </VuiFlexItem>
                 </VuiFlexContainer>
               </VuiFlexItem>
 
-              <div className="vrsSearchButtonShortcut">Ctrl + K</div>
+              {isShortcutEnabled && <div className="vrsSearchButtonShortcut">Ctrl + K</div>}
             </VuiFlexContainer>
           </button>
         </div>

diff --git a/src/types.ts b/src/types.ts
@@ -15,6 +15,12 @@ export interface Props {
   // Default is 0.
   historySize?: number;
 
+  // Whether users can use the keyboard shortcut to open the search modal. Defaults to true.
+  isShortcutEnabled?: boolean;
+
+  // The label on the button that opens the search modal.
+  buttonLabel?: string;
+
   // The search input placeholder.
   placeholder?: string;