feat(js): pass source to header and footer templates

algolia · Dec 2, 2020 · 9983c64 · 9983c64
1 parent 8638a98
commit 9983c64
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/packages/autocomplete-js/src/render.ts b/packages/autocomplete-js/src/render.ts
@@ -72,7 +72,12 @@ export function render<TItem extends BaseItem>(
       const headerElement = SourceHeader({ classNames });
 
       renderTemplate({
-        template: source.templates.header({ root: headerElement, state }),
+        template: source.templates.header({
+          root: headerElement,
+          state,
+          source,
+          items,
+        }),
         parent: sectionElement,
         element: headerElement,
       });
@@ -108,7 +113,12 @@ export function render<TItem extends BaseItem>(
       });
 
       renderTemplate({
-        template: source.templates.footer({ root: footerElement, state }),
+        template: source.templates.footer({
+          root: footerElement,
+          state,
+          source,
+          items,
+        }),
         parent: sectionElement,
         element: footerElement,
       });

diff --git a/packages/autocomplete-js/src/types/index.ts b/packages/autocomplete-js/src/types/index.ts
@@ -31,13 +31,17 @@ export type SourceTemplates<TItem extends BaseItem> = {
   header?: Template<{
     root: HTMLElement;
     state: AutocompleteState<TItem>;
+    source: AutocompleteSource<TItem>;
+    items: TItem[];
   }>;
   /**
    * The template for the section footer.
    */
   footer?: Template<{
     root: HTMLElement;
     state: AutocompleteState<TItem>;
+    source: AutocompleteSource<TItem>;
+    items: TItem[];
   }>;
 };
 

diff --git a/packages/website/docs/sources.md b/packages/website/docs/sources.md
@@ -298,8 +298,18 @@ type SourceTemplate = {
     item: TItem;
     state: AutocompleteState<TItem>;
   }>;
-  header?: Template<{ root: HTMLElement; state: AutocompleteState<TItem> }>;
-  footer?: Template<{ root: HTMLElement; state: AutocompleteState<TItem> }>;
+  header?: Template<{
+    root: HTMLElement;
+    state: AutocompleteState<TItem>;
+    source: AutocompleteSource;
+    items: TItem[];
+  }>;
+  footer?: Template<{
+    root: HTMLElement;
+    state: AutocompleteState<TItem>;
+    source: AutocompleteSource;
+    items: TItem[];
+  }>;
 };
 ```
 
@@ -321,7 +331,9 @@ const autocompleteSearch = autocomplete({
   getSources() {
     return [
       {
-        getItemInputValue: ({ item }) => item.query,
+        getItemInputValue({ item }) {
+          return item.query;
+        },
         getItems({ query }) {
           return getAlgoliaHits({
             searchClient,