feat(sort-by): implement transformItems

dev/app/builtin/stories/sort-by-selector.stories.js

@@ -7,19 +7,40 @@ import { wrapWithHits } from '../../utils/wrap-with-hits.js';
 const stories = storiesOf('SortBySelector');
 
 export default () => {
-  stories.add(
-    'default',
-    wrapWithHits(container => {
-      window.search.addWidget(
-        instantsearch.widgets.sortBySelector({
-          container,
-          indices: [
-            { name: 'instant_search', label: 'Most relevant' },
-            { name: 'instant_search_price_asc', label: 'Lowest price' },
-            { name: 'instant_search_price_desc', label: 'Highest price' },
-          ],
-        })
-      );
-    })
-  );
+  stories
+    .add(
+      'default',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.sortBySelector({
+            container,
+            indices: [
+              { name: 'instant_search', label: 'Most relevant' },
+              { name: 'instant_search_price_asc', label: 'Lowest price' },
+              { name: 'instant_search_price_desc', label: 'Highest price' },
+            ],
+          })
+        );
+      })
+    )
+    .add(
+      'with transformed items',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.sortBySelector({
+            container,
+            indices: [
+              { name: 'instant_search', label: 'Most relevant' },
+              { name: 'instant_search_price_asc', label: 'Lowest price' },
+              { name: 'instant_search_price_desc', label: 'Highest price' },
+            ],
+            transformItems: items =>
+              items.map(item => ({
+                ...item,
+                label: `${item.label} (transformed)`,
+              })),
+          })
+        );
+      })
+    );
 };

src/connectors/sort-by-selector/__tests__/connectSortBySelector-test.js

@@ -83,6 +83,51 @@ describe('connectSortBySelector', () => {
     }
   });
 
+  it('Renders with transformed items', () => {
+    const rendering = sinon.stub();
+    const makeWidget = connectSortBySelector(rendering);
+    const instantSearchInstance = instantSearch({
+      indexName: 'defaultIndex',
+      searchClient: { search() {} },
+    });
+
+    const indices = [
+      { label: 'Sort products by relevance', name: 'relevance' },
+      { label: 'Sort products by price', name: 'priceASC' },
+    ];
+    const widget = makeWidget({
+      indices,
+      transformItems: items =>
+        items.map(item => ({ ...item, label: 'transformed' })),
+    });
+
+    const helper = jsHelper({}, indices[0].name);
+    helper.search = sinon.stub();
+
+    widget.init({
+      helper,
+      state: helper.state,
+      instantSearchInstance,
+    });
+
+    expect(rendering.lastCall.args[0].options).toEqual([
+      { label: 'transformed', value: 'relevance' },
+      { label: 'transformed', value: 'priceASC' },
+    ]);
+
+    widget.render({
+      results: new SearchResults(helper.state, [{}]),
+      helper,
+      state: helper.state,
+      instantSearchInstance,
+    });
+
+    expect(rendering.lastCall.args[0].options).toEqual([
+      { label: 'transformed', value: 'relevance' },
+      { label: 'transformed', value: 'priceASC' },
+    ]);
+  });
+
   it('Provides a function to update the index at each step', () => {
     const rendering = sinon.stub();
     const makeWidget = connectSortBySelector(rendering);

src/connectors/sort-by-selector/connectSortBySelector.js

@@ -13,7 +13,10 @@ var customSortBySelector = connectSortBySelector(function render(params, isFirst
   // }
 });
 search.addWidget(
-  customSortBySelector({ indices })
+  customSortBySelector({
+    indices,
+    [ transformItems ]
+  })
 );
 Full documentation available at https://community.algolia.com/instantsearch.js/v2/connectors/connectSortBySelector.html
 `;
@@ -27,6 +30,7 @@ Full documentation available at https://community.algolia.com/instantsearch.js/v
 /**
  * @typedef {Object} CustomSortBySelectorWidgetOptions
  * @property {SortBySelectorIndices[]} indices Array of objects defining the different indices to choose from.
+ * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  */
 
 /**
@@ -98,7 +102,7 @@ export default function connectSortBySelector(renderFn, unmountFn) {
   checkRendering(renderFn, usage);
 
   return (widgetParams = {}) => {
-    const { indices } = widgetParams;
+    const { indices, transformItems = items => items } = widgetParams;
 
     if (!indices) {
       throw new Error(usage);
@@ -129,7 +133,7 @@ export default function connectSortBySelector(renderFn, unmountFn) {
         renderFn(
           {
             currentRefinement: currentIndex,
-            options: selectorOptions,
+            options: transformItems(selectorOptions),
             refine: this.setIndex,
             hasNoResults: true,
             widgetParams,
@@ -143,7 +147,7 @@ export default function connectSortBySelector(renderFn, unmountFn) {
         renderFn(
           {
             currentRefinement: helper.getIndex(),
-            options: selectorOptions,
+            options: transformItems(selectorOptions),
             refine: this.setIndex,
             hasNoResults: results.nbHits === 0,
             widgetParams,

src/widgets/sort-by-selector/__tests__/__snapshots__/sort-by-selector-test.js.snap

@@ -53,3 +53,32 @@ exports[`sortBySelector() calls twice ReactDOM.render(<Selector props />, contai
   shouldAutoHideContainer={false}
 />
 `;
+
+exports[`sortBySelector() renders transformed items 1`] = `
+<HeaderFooter-AutoHide
+  cssClasses={
+    Object {
+      "item": "ais-sort-by-selector--item",
+      "root": "ais-sort-by-selector",
+      "select": "ais-sort-by-selector",
+    }
+  }
+  currentValue="index-a"
+  options={
+    Array [
+      Object {
+        "label": "Index A",
+        "transformed": true,
+        "value": "index-a",
+      },
+      Object {
+        "label": "Index B",
+        "transformed": true,
+        "value": "index-b",
+      },
+    ]
+  }
+  setValue={[Function]}
+  shouldAutoHideContainer={false}
+/>
+`;

src/widgets/sort-by-selector/__tests__/sort-by-selector-test.js

@@ -81,6 +81,20 @@ describe('sortBySelector()', () => {
     expect(ReactDOM.render.secondCall.args[1]).toEqual(container);
   });
 
+  it('renders transformed items', () => {
+    widget = sortBySelector({
+      container,
+      indices,
+      transformItems: items =>
+        items.map(item => ({ ...item, transformed: true })),
+    });
+
+    widget.init({ helper, instantSearchInstance: {} });
+    widget.render({ helper, results });
+
+    expect(ReactDOM.render.firstCall.args[0]).toMatchSnapshot();
+  });
+
   it('sets the underlying index', () => {
     widget.setIndex('index-b');
     expect(helper.setIndex.calledOnce).toBe(true, 'setIndex called once');

src/widgets/sort-by-selector/sort-by-selector.js

@@ -32,7 +32,8 @@ sortBySelector({
   container,
   indices,
   [cssClasses.{root,select,item}={}],
-  [autoHideContainer=false]
+  [autoHideContainer=false],
+  [transformItems]
 })`;
 
 /**
@@ -54,6 +55,7 @@ sortBySelector({
  * @property {SortByIndexDefinition[]} indices Array of objects defining the different indices to choose from.
  * @property {boolean} [autoHideContainer=false] Hide the container when no results match.
  * @property {SortByWidgetCssClasses} [cssClasses] CSS classes to be added.
+ * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  */
 
 /**
@@ -83,6 +85,7 @@ export default function sortBySelector({
   indices,
   cssClasses: userCssClasses = {},
   autoHideContainer = false,
+  transformItems,
 } = {}) {
   if (!container) {
     throw new Error(usage);
@@ -108,7 +111,7 @@ export default function sortBySelector({
     const makeWidget = connectSortBySelector(specializedRenderer, () =>
       unmountComponentAtNode(containerNode)
     );
-    return makeWidget({ indices });
+    return makeWidget({ indices, transformItems });
   } catch (e) {
     throw new Error(usage);
   }