feat(hits-per-page): implement transformItems

dev/app/builtin/stories/hits-per-page-selector.stories.js

@@ -37,5 +37,25 @@ export default () => {
           })
         );
       })
+    )
+    .add(
+      'with transformed items',
+      wrapWithHits(container => {
+        window.search.addWidget(
+          instantsearch.widgets.hitsPerPageSelector({
+            container,
+            items: [
+              { value: 3, label: '3 per page' },
+              { value: 5, label: '5 per page' },
+              { value: 10, label: '10 per page' },
+            ],
+            transformItems: items =>
+              items.map(item => ({
+                ...item,
+                label: `${item.label} (transformed)`,
+              })),
+          })
+        );
+      })
     );
 };

src/connectors/hits-per-page/__tests__/connectHitsPerPage-test.js

@@ -76,6 +76,45 @@ describe('connectHitsPerPage', () => {
     });
   });
 
+  it('Renders during init and render with transformed items', () => {
+    const rendering = sinon.stub();
+    const makeWidget = connectHitsPerPage(rendering);
+    const widget = makeWidget({
+      items: [
+        { value: 3, label: '3 items per page' },
+        { value: 10, label: '10 items per page' },
+      ],
+      transformItems: items =>
+        items.map(item => ({ ...item, label: 'transformed' })),
+    });
+
+    const helper = jsHelper({}, '', {
+      hitsPerPage: 3,
+    });
+    helper.search = sinon.stub();
+
+    widget.init({
+      helper,
+      state: helper.state,
+    });
+
+    expect(rendering.lastCall.args[0].items).toEqual([
+      expect.objectContaining({ label: 'transformed' }),
+      expect.objectContaining({ label: 'transformed' }),
+    ]);
+
+    widget.render({
+      results: new SearchResults(helper.state, [{}]),
+      state: helper.state,
+      helper,
+    });
+
+    expect(rendering.lastCall.args[0].items).toEqual([
+      expect.objectContaining({ label: 'transformed' }),
+      expect.objectContaining({ label: 'transformed' }),
+    ]);
+  });
+
   it('Configures the search with the default hitsPerPage provided', () => {
     const rendering = sinon.stub();
     const makeWidget = connectHitsPerPage(rendering);

src/connectors/hits-per-page/connectHitsPerPage.js

@@ -20,6 +20,7 @@ search.addWidget(
       {value: 10, label: '10 results per page'},
       {value: 42, label: '42 results per page'},
     ],
+    [ transformItems ]
   })
 );
 Full documentation available at https://community.algolia.com/instantsearch.js/v2/connectors/connectHitsPerPage.html
@@ -50,6 +51,7 @@ Full documentation available at https://community.algolia.com/instantsearch.js/v
 /**
  * @typedef {Object} HitsPerPageWidgetOptions
  * @property {HitsPerPageWidgetOptionsItem[]} items Array of objects defining the different values and labels.
+ * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  */
 
 /**
@@ -111,7 +113,7 @@ export default function connectHitsPerPage(renderFn, unmountFn) {
   checkRendering(renderFn, usage);
 
   return (widgetParams = {}) => {
-    const { items: userItems } = widgetParams;
+    const { items: userItems, transformItems = items => items } = widgetParams;
     let items = userItems;
 
     if (!items) {
@@ -167,7 +169,7 @@ The first one will be picked, you should probably set only one default value`
 
         renderFn(
           {
-            items: this._transformItems(state),
+            items: transformItems(this._normalizeItems(state)),
             refine: this.setHitsPerPage,
             hasNoResults: true,
             widgetParams,
@@ -182,7 +184,7 @@ The first one will be picked, you should probably set only one default value`
 
         renderFn(
           {
-            items: this._transformItems(state),
+            items: transformItems(this._normalizeItems(state)),
             refine: this.setHitsPerPage,
             hasNoResults,
             widgetParams,
@@ -192,7 +194,7 @@ The first one will be picked, you should probably set only one default value`
         );
       },
 
-      _transformItems({ hitsPerPage }) {
+      _normalizeItems({ hitsPerPage }) {
         return items.map(item => ({
           ...item,
           isRefined: Number(item.value) === Number(hitsPerPage),

src/widgets/hits-per-page-selector/__tests__/__snapshots__/hits-per-page-selector-test.js.snap

@@ -28,3 +28,35 @@ exports[`hitsPerPageSelector() calls twice ReactDOM.render(<Selector props />, c
   shouldAutoHideContainer={false}
 />
 `;
+
+exports[`hitsPerPageSelector() renders transformed items 1`] = `
+<HeaderFooter-AutoHide
+  cssClasses={
+    Object {
+      "item": "ais-hits-per-page-selector--item",
+      "root": "ais-hits-per-page-selector",
+      "select": "ais-hits-per-page-selector",
+    }
+  }
+  currentValue={10}
+  options={
+    Array [
+      Object {
+        "isRefined": true,
+        "label": "10 results",
+        "transformed": true,
+        "value": 10,
+      },
+      Object {
+        "default": true,
+        "isRefined": false,
+        "label": "20 results",
+        "transformed": true,
+        "value": 20,
+      },
+    ]
+  }
+  setValue={[Function]}
+  shouldAutoHideContainer={false}
+/>
+`;

src/widgets/hits-per-page-selector/__tests__/hits-per-page-selector-test.js

@@ -84,6 +84,23 @@ describe('hitsPerPageSelector()', () => {
     expect(ReactDOM.render.firstCall.args[0]).toMatchSnapshot();
   });
 
+  it('renders transformed items', () => {
+    widget = hitsPerPageSelector({
+      container,
+      items: [
+        { value: 10, label: '10 results' },
+        { value: 20, label: '20 results', default: true },
+      ],
+      transformItems: widgetItems =>
+        widgetItems.map(item => ({ ...item, transformed: true })),
+    });
+
+    widget.init({ helper, state: helper.state });
+    widget.render({ results, state });
+
+    expect(ReactDOM.render.firstCall.args[0]).toMatchSnapshot();
+  });
+
   it('sets the underlying hitsPerPage', () => {
     widget.init({ helper, state: helper.state });
     widget.setHitsPerPage(helper, helper.state, 10);

src/widgets/hits-per-page-selector/hits-per-page-selector.js

@@ -36,7 +36,8 @@ hitsPerPageSelector({
   container,
   items,
   [ cssClasses.{root,select,item}={} ],
-  [ autoHideContainer=false ]
+  [ autoHideContainer=false ],
+  [ transformItems ]
 })`;
 
 /**
@@ -59,6 +60,7 @@ hitsPerPageSelector({
  * @property {HitsPerPageSelectorItems[]} items Array of objects defining the different values and labels.
  * @property {boolean} [autoHideContainer=false] Hide the container when no results match.
  * @property {HitsPerPageSelectorCSSClasses} [cssClasses] CSS classes to be added.
+ * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  */
 
 /**
@@ -88,6 +90,7 @@ export default function hitsPerPageSelector({
   items,
   cssClasses: userCssClasses = {},
   autoHideContainer = false,
+  transformItems,
 } = {}) {
   if (!container) {
     throw new Error(usage);
@@ -114,7 +117,7 @@ export default function hitsPerPageSelector({
       specializedRenderer,
       () => unmountComponentAtNode(containerNode)
     );
-    return makeHitsPerPageSelector({ items });
+    return makeHitsPerPageSelector({ items, transformItems });
   } catch (e) {
     throw new Error(usage);
   }