Update generated search request. Rename isDeeplinkable prop to isDeep…

…Linkable.
vectara · May 6, 2024 · 4c0dabb · 4c0dabb
1 parent bb08584
commit 4c0dabb
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -55,7 +55,7 @@ import { ReactSearch } from "@vectara/react-search";
   corpusId="CORPUS_ID"
   apiKey="API_KEY"
   placeholder="Placeholder" // Optional search input placeholder
-  isDeeplinkable={true} // Optional boolean determining if search results will be deeplinked
+  isDeepLinkable={true} // Optional boolean determining if search results will be deep-linked
   openResultsInNewTab={true} // Optional boolean determining if links will open in a new tab
   zIndex={/* Optional number assigned to the z-index of the search modal */}
 />
@@ -83,7 +83,7 @@ By default, React-Search sends query requests to the Vectara servers. If you wan
 
 Configure the placeholder text in the search modal's input.
 
-##### `isDeeplinkable` (optional)
+##### `isDeepLinkable` (optional)
 
 Defaults to `false`. Set this option if you want to persist a search query to a URL parameter. This will enable users to share or bookmark the URL. Loading the URL will automatically open the search modal and search for the query that's stored in the URL.
 

diff --git a/docs/src/components/ConfigurationDrawer.tsx b/docs/src/components/ConfigurationDrawer.tsx
@@ -21,9 +21,11 @@ type Props = {
   setApiKey: (apiKey: string) => void;
   placeholder: string;
   setPlaceholder: (placeholder: string) => void;
-  isDeeplinkable: boolean;
-  setIsDeeplinkable: (isDeepLinkable: boolean) => void;
+  isDeepLinkable: boolean;
+  setIsDeepLinkable: (isDeepLinkable: boolean) => void;
   openResultsInNewTab: boolean;
+  isOnToggleSummaryHandled: boolean;
+  setIsOnToggleSummaryHandled: (isOnToggleSummaryHandled: boolean) => void;
   setOpenResultsInNewTab: (openResultsInNewTab: boolean) => void;
   isSummaryToggleVisible: boolean;
   setIsSummaryToggleVisible: (isSummaryToggleVisible: boolean) => void;
@@ -42,10 +44,12 @@ export const ConfigurationDrawer = ({
   setApiKey,
   placeholder,
   setPlaceholder,
-  isDeeplinkable,
-  setIsDeeplinkable,
+  isDeepLinkable,
+  setIsDeepLinkable,
   openResultsInNewTab,
   setOpenResultsInNewTab,
+  isOnToggleSummaryHandled,
+  setIsOnToggleSummaryHandled,
   isSummaryToggleVisible,
   setIsSummaryToggleVisible,
   isSummaryToggleInitiallyEnabled,
@@ -109,18 +113,18 @@ export const ConfigurationDrawer = ({
       <VuiSpacer size="l" />
 
       <VuiTitle size="s">
-        <h3 className="header">Link behavior</h3>
+        <h3 className="header">Search behavior</h3>
       </VuiTitle>
 
       <VuiSpacer size="s" />
 
-      <VuiFormGroup label="Allow deeplinking" labelFor="isDeepLinkable">
-        <VuiToggle checked={isDeeplinkable} onChange={(e) => setIsDeeplinkable(e.target.checked)} id="isDeeplinkable" />
+      <VuiFormGroup label="Enable deep-linking to a search" labelFor="isDeepLinkable">
+        <VuiToggle checked={isDeepLinkable} onChange={(e) => setIsDeepLinkable(e.target.checked)} id="isDeepLinkable" />
       </VuiFormGroup>
 
       <VuiSpacer size="xs" />
 
-      <VuiFormGroup label="Open results in a new tab" labelFor="openResultsInNewTab">
+      <VuiFormGroup label="Open a search result's link in a new tab" labelFor="openResultsInNewTab">
         <VuiToggle
           checked={openResultsInNewTab}
           onChange={(e) => setOpenResultsInNewTab(e.target.checked)}
@@ -136,6 +140,16 @@ export const ConfigurationDrawer = ({
 
       <VuiSpacer size="s" />
 
+      <VuiFormGroup label="Handle summary toggle change" labelFor="summaryToggleHandler">
+        <VuiToggle
+          checked={isOnToggleSummaryHandled}
+          onChange={(e) => setIsOnToggleSummaryHandled(e.target.checked)}
+          id="summaryToggleHandler"
+        />
+      </VuiFormGroup>
+
+      <VuiSpacer size="xs" />
+
       <VuiFormGroup label="Is summary toggle visible" labelFor="summaryToggleVisible">
         <VuiToggle
           checked={isSummaryToggleVisible}

diff --git a/docs/src/index.tsx b/docs/src/index.tsx
@@ -22,16 +22,27 @@ import { ConfigurationDrawer } from "components/ConfigurationDrawer";
 import "./ui/_index.scss";
 import "./index.scss";
 
-const generateCodeSnippet = (
-  customerId?: string,
-  corpusId?: string,
-  apiKey?: string,
-  placeholder?: string,
-  isDeepLinkable: boolean = false,
-  openResultsInNewTab: boolean = false,
-  isSummaryToggleVisible: boolean = false,
-  isSummaryToggleInitiallyEnabled: boolean = false
-) => {
+const generateCodeSnippet = ({
+  customerId,
+  corpusId,
+  apiKey,
+  placeholder,
+  isDeepLinkable = false,
+  openResultsInNewTab = false,
+  isOnToggleSummaryHandled = false,
+  isSummaryToggleVisible = false,
+  isSummaryToggleInitiallyEnabled = false
+}: {
+  customerId?: string;
+  corpusId?: string;
+  apiKey?: string;
+  placeholder?: string;
+  isDeepLinkable: boolean;
+  openResultsInNewTab: boolean;
+  isOnToggleSummaryHandled: boolean;
+  isSummaryToggleVisible: boolean;
+  isSummaryToggleInitiallyEnabled: boolean;
+}) => {
   let quotedPlaceholder = placeholder;
 
   if (placeholder) {
@@ -53,13 +64,17 @@ const generateCodeSnippet = (
   }
 
   if (isDeepLinkable) {
-    props.push(`isDeeplinkable={${isDeepLinkable}}`);
+    props.push(`isDeepLinkable={${isDeepLinkable}}`);
   }
 
   if (openResultsInNewTab) {
     props.push(`openResultsInNewTab={${openResultsInNewTab}}`);
   }
 
+  if (isOnToggleSummaryHandled) {
+    props.push(`onToggleSummary={(isSummaryEnabled: boolean) => console.log(isSummaryEnabled)}`);
+  }
+
   if (isSummaryToggleVisible) {
     props.push(`isSummaryToggleVisible={${isSummaryToggleVisible}}`);
   }
@@ -92,8 +107,9 @@ const App = () => {
   const [customerId, setCustomerId] = useState<string>("");
   const [apiKey, setApiKey] = useState<string>("");
   const [placeholder, setPlaceholder] = useState<string>(DEFAULT_PLACEHOLDER);
-  const [isDeeplinkable, setIsDeeplinkable] = useState<boolean>(false);
+  const [isDeepLinkable, setIsDeepLinkable] = useState<boolean>(false);
   const [openResultsInNewTab, setOpenResultsInNewTab] = useState<boolean>(false);
+  const [isOnToggleSummaryHandled, setIsOnToggleSummaryHandled] = useState<boolean>(false);
   const [isSummaryToggleVisible, setIsSummaryToggleVisible] = useState<boolean>(false);
   const [isSummaryToggleInitiallyEnabled, setIsSummaryToggleInitiallyEnabled] = useState<boolean>(false);
 
@@ -159,7 +175,7 @@ const App = () => {
                 customerId={customerId === "" ? DEFAULT_CUSTOMER_ID : customerId}
                 apiKey={apiKey === "" ? DEFAULT_API_KEY : apiKey}
                 placeholder={placeholder}
-                isDeeplinkable={isDeeplinkable}
+                isDeepLinkable={isDeepLinkable}
                 openResultsInNewTab={openResultsInNewTab}
                 isSummaryToggleVisible={isSummaryToggleVisible}
                 isSummaryToggleInitiallyEnabled={isSummaryToggleInitiallyEnabled}
@@ -199,7 +215,17 @@ const App = () => {
             <VuiSpacer size="s" />
 
             <VuiCode language="tsx">
-              {generateCodeSnippet(customerId, corpusId, apiKey, placeholder, isDeeplinkable, openResultsInNewTab)}
+              {generateCodeSnippet({
+                customerId,
+                corpusId,
+                apiKey,
+                placeholder,
+                isDeepLinkable,
+                openResultsInNewTab,
+                isOnToggleSummaryHandled,
+                isSummaryToggleVisible,
+                isSummaryToggleInitiallyEnabled
+              })}
             </VuiCode>
 
             <VuiSpacer size="xxl" />
@@ -268,10 +294,12 @@ export const App = () => {
               setApiKey={setApiKey}
               placeholder={placeholder}
               setPlaceholder={setPlaceholder}
-              isDeeplinkable={isDeeplinkable}
-              setIsDeeplinkable={setIsDeeplinkable}
+              isDeepLinkable={isDeepLinkable}
+              setIsDeepLinkable={setIsDeepLinkable}
               openResultsInNewTab={openResultsInNewTab}
               setOpenResultsInNewTab={setOpenResultsInNewTab}
+              isOnToggleSummaryHandled={isOnToggleSummaryHandled}
+              setIsOnToggleSummaryHandled={setIsOnToggleSummaryHandled}
               isSummaryToggleVisible={isSummaryToggleVisible}
               setIsSummaryToggleVisible={setIsSummaryToggleVisible}
               isSummaryToggleInitiallyEnabled={isSummaryToggleInitiallyEnabled}

diff --git a/src/index.tsx b/src/index.tsx
@@ -39,7 +39,7 @@ const ReactSearchInternal = ({
   apiUrl,
   historySize = 10,
   placeholder = "Search",
-  isDeeplinkable = false,
+  isDeepLinkable = false,
   openResultsInNewTab = false,
   zIndex = 9999,
   onToggleSummary,
@@ -87,7 +87,7 @@ const ReactSearchInternal = ({
       return;
     }
 
-    if (isDeeplinkable) {
+    if (isDeepLinkable) {
       // Persist search.
       const queryParams = new URLSearchParams(window.location.search);
       queryParams.set("search", query);
@@ -174,7 +174,7 @@ const ReactSearchInternal = ({
     setSearchValue("");
     resetResults();
 
-    if (isDeeplinkable) {
+    if (isDeepLinkable) {
       // Clear persisted search.
       const queryParams = new URLSearchParams(window.location.search);
       queryParams.delete("search");

diff --git a/src/types.ts b/src/types.ts
@@ -19,7 +19,7 @@ export interface Props {
   placeholder?: string;
 
   // Whether to enable deeplinking to a particular search.
-  isDeeplinkable?: boolean;
+  isDeepLinkable?: boolean;
 
   // Whether to open selected results in a new browser tab.
   openResultsInNewTab?: boolean;