feat(recentSearches): add remove button (#326)

* feat(recentSearches): add remove button * pass refresh to getSources * update styles * rename delete to remove and add title * remove return null * extract icon * update styles * bump the version * remove unecessary typing * wrap with a sub-container * export style
algolia · Oct 1, 2020 · 648f1e8 · 648f1e8
1 parent a5aaf1e
commit 648f1e8
Show file tree

Hide file tree

Showing 13 changed files with 108 additions and 18 deletions.
diff --git a/examples/js/app.ts b/examples/js/app.ts
@@ -6,6 +6,8 @@ import {
   getAlgoliaHits,
   reverseHighlightItem,
 } from '@algolia/autocomplete-js';
+import { createRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches';
+import '@algolia/autocomplete-plugin-recent-searches/style';
 
 const searchClient = algoliasearch(
   'latency',
@@ -14,10 +16,14 @@ const searchClient = algoliasearch(
 
 type QuerySuggestionHit = { query: string };
 
+const recentSearches = createRecentSearchesPlugin({ key: 'recent' });
+
 autocomplete<Hit<QuerySuggestionHit>>({
   container: '#autocomplete',
   debug: true,
+  openOnFocus: true,
   // dropdownPlacement: 'start',
+  plugins: [recentSearches],
   getSources({ query }) {
     return getAlgoliaHits<QuerySuggestionHit>({
       searchClient,
@@ -27,6 +33,7 @@ autocomplete<Hit<QuerySuggestionHit>>({
           query,
           params: {
             hitsPerPage: 10,
+            facetFilters: [...recentSearches.data.getFacetFilters()],
           },
         },
       ],

diff --git a/examples/js/package.json b/examples/js/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@algolia/autocomplete-js": "^1.0.0-alpha.32",
+    "@algolia/autocomplete-plugin-recent-searches": "^1.0.0-alpha.32",
     "@algolia/client-search": "4.5.1",
     "algoliasearch": "4.5.1"
   },

diff --git a/packages/autocomplete-core/src/createAutocomplete.ts b/packages/autocomplete-core/src/createAutocomplete.ts
@@ -43,6 +43,7 @@ export function createAutocomplete<
     setIsOpen,
     setStatus,
     setContext,
+    refresh,
   });
 
   function refresh() {
@@ -57,6 +58,7 @@ export function createAutocomplete<
       setIsOpen,
       setStatus,
       setContext,
+      refresh,
     });
   }
 

diff --git a/packages/autocomplete-core/src/getPropGetters.ts b/packages/autocomplete-core/src/getPropGetters.ts
@@ -4,6 +4,7 @@ import {
   InternalAutocompleteOptions,
   AutocompleteSetters,
   AutocompleteStore,
+  AutocompleteRefresh,
   GetDropdownProps,
   GetEnvironmentProps,
   GetFormProps,
@@ -18,6 +19,7 @@ import { getHighlightedItem, isOrContainsNode } from './utils';
 interface GetPropGettersOptions<TItem> extends AutocompleteSetters<TItem> {
   store: AutocompleteStore<TItem>;
   props: InternalAutocompleteOptions<TItem>;
+  refresh: AutocompleteRefresh;
 }
 
 export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
@@ -29,6 +31,7 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
   setIsOpen,
   setStatus,
   setContext,
+  refresh,
 }: GetPropGettersOptions<TItem>) {
   const getEnvironmentProps: GetEnvironmentProps = (getterProps) => {
     return {
@@ -135,6 +138,7 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
             setIsOpen,
             setStatus,
             setContext,
+            refresh,
           });
         }
         store.send('reset', null);
@@ -165,6 +169,7 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
           setIsOpen,
           setStatus,
           setContext,
+          refresh,
         });
       }
 
@@ -205,6 +210,7 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
           setIsOpen,
           setStatus,
           setContext,
+          refresh,
         });
       },
       onKeyDown: (event) => {
@@ -218,6 +224,7 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
           setIsOpen,
           setStatus,
           setContext,
+          refresh,
         });
       },
       onFocus,
@@ -351,6 +358,7 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
               setIsOpen,
               setStatus,
               setContext,
+              refresh,
               nextState: {
                 isOpen: false,
               },

diff --git a/packages/autocomplete-core/src/onInput.ts b/packages/autocomplete-core/src/onInput.ts
@@ -3,6 +3,7 @@ import {
   AutocompleteSetters,
   AutocompleteState,
   AutocompleteStore,
+  AutocompleteRefresh,
 } from './types';
 import { getHighlightedItem } from './utils';
 
@@ -21,6 +22,7 @@ interface OnInputParams<TItem> extends AutocompleteSetters<TItem> {
    * but we want to close the dropdown in that case.
    */
   nextState?: Partial<AutocompleteState<TItem>>;
+  refresh: AutocompleteRefresh;
 }
 
 export function onInput<TItem>({
@@ -35,6 +37,7 @@ export function onInput<TItem>({
   setStatus,
   setContext,
   nextState = {},
+  refresh,
 }: OnInputParams<TItem>): Promise<void> {
   if (props.onInput) {
     return Promise.resolve(
@@ -47,6 +50,7 @@ export function onInput<TItem>({
         setIsOpen,
         setStatus,
         setContext,
+        refresh,
       })
     );
   }
@@ -89,6 +93,7 @@ export function onInput<TItem>({
       setIsOpen,
       setStatus,
       setContext,
+      refresh,
     })
     .then((sources) => {
       setStatus('loading');
@@ -106,6 +111,7 @@ export function onInput<TItem>({
               setIsOpen,
               setStatus,
               setContext,
+              refresh,
             })
           ).then((items) => {
             return {

diff --git a/packages/autocomplete-core/src/onKeyDown.ts b/packages/autocomplete-core/src/onKeyDown.ts
@@ -4,13 +4,15 @@ import {
   InternalAutocompleteOptions,
   AutocompleteSetters,
   AutocompleteStore,
+  AutocompleteRefresh,
 } from './types';
 import { getHighlightedItem } from './utils';
 
 interface OnKeyDownOptions<TItem> extends AutocompleteSetters<TItem> {
   event: KeyboardEvent;
   store: AutocompleteStore<TItem>;
   props: InternalAutocompleteOptions<TItem>;
+  refresh: AutocompleteRefresh;
 }
 
 export function onKeyDown<TItem>({
@@ -23,6 +25,7 @@ export function onKeyDown<TItem>({
   setIsOpen,
   setStatus,
   setContext,
+  refresh,
 }: OnKeyDownOptions<TItem>): void {
   if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
     // Default browser behavior changes the caret placement on ArrowUp and
@@ -91,6 +94,7 @@ export function onKeyDown<TItem>({
         setIsOpen,
         setStatus,
         setContext,
+        refresh,
       });
     }
   } else if (event.key === 'Escape') {
@@ -205,6 +209,7 @@ export function onKeyDown<TItem>({
         nextState: {
           isOpen: false,
         },
+        refresh,
       }).then(() => {
         source.onSelect({
           suggestion: item,

diff --git a/packages/autocomplete-core/src/types/api.ts b/packages/autocomplete-core/src/types/api.ts
@@ -17,9 +17,11 @@ export interface AutocompleteApi<
   /**
    * Triggers a search to refresh the state.
    */
-  refresh(): Promise<void>;
+  refresh: AutocompleteRefresh;
 }
 
+export type AutocompleteRefresh = () => Promise<void>;
+
 export interface AutocompleteSuggestion<TItem> {
   source: InternalAutocompleteSource<TItem>;
   items: TItem[];
@@ -28,6 +30,7 @@ export interface AutocompleteSuggestion<TItem> {
 export interface GetSourcesParams<TItem> extends AutocompleteSetters<TItem> {
   query: string;
   state: AutocompleteState<TItem>;
+  refresh: AutocompleteRefresh;
 }
 
 interface ItemParams<TItem> {
@@ -58,6 +61,7 @@ interface OnSubmitParams<TItem> extends AutocompleteSetters<TItem> {
 interface OnInputParams<TItem> extends AutocompleteSetters<TItem> {
   query: string;
   state: AutocompleteState<TItem>;
+  refresh: AutocompleteRefresh;
 }
 
 export interface AutocompleteSource<TItem> {

diff --git a/packages/autocomplete-plugin-recent-searches/package.json b/packages/autocomplete-plugin-recent-searches/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@algolia/autocomplete-plugin-recent-searches",
   "description": "A plugin to add recent searches to Algolia Autocomplete.",
-  "version": "1.0.0-alpha.30",
+  "version": "1.0.0-alpha.32",
   "license": "MIT",
   "source": "src/index.ts",
   "types": "dist/esm/index.d.ts",
@@ -15,9 +15,9 @@
   },
   "scripts": {
     "build:clean": "rm -rf ./dist",
-    "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm  --ignore '**/*/__tests__/'",
+    "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm --ignore '**/*/__tests__/'  && cp src/style.css ./dist/esm/",
     "build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/esm",
-    "build:umd": "rollup --config",
+    "build:umd": "rollup --config && cp src/style.css ./dist/umd/",
     "build": "rm -rf ./dist && yarn build:umd && yarn build:esm && yarn build:types",
     "on:change": "concurrently \"yarn build:esm\" \"yarn build:types\"",
     "prepare": "yarn run build:esm",
@@ -31,7 +31,8 @@
   },
   "sideEffects": false,
   "files": [
-    "dist/"
+    "dist/",
+    "style/"
   ],
   "dependencies": {
     "@algolia/autocomplete-core": "^1.0.0-alpha.31"

diff --git a/packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts b/packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts
@@ -1,6 +1,8 @@
 import { AutocompletePlugin } from '@algolia/autocomplete-core';
 
 import { createRecentSearchesStore } from './createRecentSearchesStore';
+import { recentIcon } from './recentIcon';
+import { resetIcon } from './resetIcon';
 
 type PluginOptions = {
   /**
@@ -38,7 +40,7 @@ export function createRecentSearchesPlugin({
   });
 
   return {
-    getSources: ({ query }) => {
+    getSources: ({ query, refresh }) => {
       if (query) {
         return [];
       }
@@ -50,19 +52,36 @@ export function createRecentSearchesPlugin({
             return store.getAll();
           },
           templates: {
-            item({ item }) {
-              return `
-                <div class="autocomplete-item">
-                  <div>
-                    <svg viewBox="0 0 22 22" width="16" height="16" fill="currentColor">
-                      <path d="M0 0h24v24H0z" fill="none"/>
-                      <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
-                    </svg>
+            item({ item, root }) {
+              const container = document.createElement('div');
+              container.className = 'aa-RecentSearchesItem';
 
-                    <span>${item.query}</span>
-                  </div>
-                </div>
-              `;
+              const leftItems = document.createElement('div');
+              leftItems.className = 'leftItems';
+              const icon = document.createElement('div');
+              icon.className = 'item-icon icon';
+              icon.innerHTML = recentIcon;
+              const title = document.createElement('div');
+              title.className = 'title';
+              title.innerText = item.query;
+              leftItems.appendChild(icon);
+              leftItems.appendChild(title);
+
+              const removeButton = document.createElement('button');
+              removeButton.className = 'item-icon removeButton';
+              removeButton.type = 'button';
+              removeButton.innerHTML = resetIcon;
+              removeButton.title = 'Remove';
+
+              container.appendChild(leftItems);
+              container.appendChild(removeButton);
+              root.appendChild(container);
+
+              removeButton.addEventListener('click', (event) => {
+                event.stopPropagation();
+                store.remove(item);
+                refresh();
+              });
             },
           },
         },

diff --git a/packages/autocomplete-plugin-recent-searches/src/recentIcon.ts b/packages/autocomplete-plugin-recent-searches/src/recentIcon.ts
@@ -0,0 +1,4 @@
+export const recentIcon = `<svg viewBox="0 0 22 22" width="20" height="20" fill="currentColor">
+<path d="M0 0h24v24H0z" fill="none"/>
+<path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
+</svg>`;
diff --git a/packages/autocomplete-plugin-recent-searches/src/resetIcon.ts b/packages/autocomplete-plugin-recent-searches/src/resetIcon.ts
@@ -0,0 +1,11 @@
+// copied from autocomplete-js
+export const resetIcon = `<svg width="20" height="20" viewBox="0 0 20 20">
+  <path
+    d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z"
+    stroke="currentColor"
+    fill="none"
+    fill-rule="evenodd"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  ></path>
+</svg>`;
diff --git a/packages/autocomplete-plugin-recent-searches/src/style.css b/packages/autocomplete-plugin-recent-searches/src/style.css
@@ -0,0 +1,21 @@
+.aa-RecentSearchesItem {
+  display: flex;
+  flex-grow: 1;
+  justify-content: space-between;
+}
+
+.aa-RecentSearchesItem .leftItems {
+  display: flex;
+}
+
+.aa-RecentSearchesItem .removeButton {
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+  opacity: 0.8;
+}
+
+.aa-RecentSearchesItem .removeButton:hover {
+  opacity: 1;
+  color: #000;
+}
diff --git a/packages/autocomplete-plugin-recent-searches/style/index.js b/packages/autocomplete-plugin-recent-searches/style/index.js
@@ -0,0 +1 @@
+export * from '../dist/esm/style.css';