feat(recent-searches): display tap-ahead button

algolia · Feb 12, 2021 · b3670c9 · b3670c9
1 parent 54ef36c
commit b3670c9
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts b/packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts
@@ -18,6 +18,7 @@ export type CreateRecentSearchesPluginParams<
   transformSource?(params: {
     source: AutocompleteSource<TItem>;
     onRemove(id: string): void;
+    onTapAhead(item: TItem): void;
   }): AutocompleteSource<TItem>;
 };
 
@@ -55,14 +56,19 @@ export function createRecentSearchesPlugin<TItem extends RecentSearchesItem>({
         } as any);
       }
     },
-    getSources({ query, refresh }) {
+    getSources({ query, setQuery, refresh }) {
       lastItemsRef.current = store.getAll(query);
 
       function onRemove(id: string) {
         store.remove(id);
         refresh();
       }
 
+      function onTapAhead(item: TItem) {
+        setQuery(item.query);
+        refresh();
+      }
+
       return Promise.resolve(lastItemsRef.current).then((items) => {
         if (items.length === 0) {
           return [];
@@ -78,9 +84,10 @@ export function createRecentSearchesPlugin<TItem extends RecentSearchesItem>({
               getItems() {
                 return items;
               },
-              templates: getTemplates({ onRemove }),
+              templates: getTemplates({ onRemove, onTapAhead }),
             },
             onRemove,
+            onTapAhead,
           }),
         ];
       });

diff --git a/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx b/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx
@@ -3,13 +3,15 @@ import { reverseHighlightHit, SourceTemplates } from '@algolia/autocomplete-js';
 
 import { RecentSearchesItem } from './types';
 
-export type GetTemplatesParams = {
+export type GetTemplatesParams<TItem extends RecentSearchesItem> = {
   onRemove(id: string): void;
+  onTapAhead(item: TItem): void;
 };
 
 export function getTemplates<TItem extends RecentSearchesItem>({
   onRemove,
-}: GetTemplatesParams): SourceTemplates<TItem> {
+  onTapAhead,
+}: GetTemplatesParams<TItem>): SourceTemplates<TItem> {
   return {
     item({ item, createElement, Fragment }) {
       return (
@@ -50,6 +52,23 @@ export function getTemplates<TItem extends RecentSearchesItem>({
                 <path d="M18 7v13c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-10c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-13zM17 5v-1c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-4c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v1h-4c-0.552 0-1 0.448-1 1s0.448 1 1 1h1v13c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h10c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-13h1c0.552 0 1-0.448 1-1s-0.448-1-1-1zM9 5v-1c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h4c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v1zM9 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM13 11v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1z" />
               </svg>
             </button>
+            <button
+              className="aa-ItemActionButton"
+              title={`Fill query with "${item.query}"`}
+              onClick={(event) => {
+                event.stopPropagation();
+                onTapAhead(item);
+              }}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                width="18"
+                height="18"
+                fill="currentColor"
+              >
+                <path d="M8 17v-7.586l8.293 8.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-8.293-8.293h7.586c0.552 0 1-0.448 1-1s-0.448-1-1-1h-10c-0.552 0-1 0.448-1 1v10c0 0.552 0.448 1 1 1s1-0.448 1-1z" />
+              </svg>
+            </button>
           </div>
         </Fragment>
       );