feat(numeric-selector): implement transformItems

Author: francoischalifour

dev/app/builtin/stories/numeric-selector.stories.js

@@ -45,4 +45,29 @@ export default () => {
       );
     })
   );
+  stories.add(
+    'with transformed items',
+    wrapWithHits(container => {
+      window.search.addWidget(
+        instantsearch.widgets.numericSelector({
+          container,
+          operator: '=',
+          attributeName: 'rating',
+          options: [
+            { label: 'No rating selected', value: undefined },
+            { label: 'Rating: 5', value: 5 },
+            { label: 'Rating: 4', value: 4 },
+            { label: 'Rating: 3', value: 3 },
+            { label: 'Rating: 2', value: 2 },
+            { label: 'Rating: 1', value: 1 },
+          ],
+          transformItems: items =>
+            items.map(item => ({
+              ...item,
+              label: `${item.label} (transformed)`,
+            })),
+        })
+      );
+    })
+  );
 };

src/connectors/numeric-selector/__tests__/connectNumericSelector-test.js

@@ -74,6 +74,55 @@ describe('connectNumericSelector', () => {
     });
   });
 
+  it('Renders during init and render with transformed items', () => {
+    const rendering = jest.fn();
+    const makeWidget = connectNumericSelector(rendering);
+    const listOptions = [
+      { name: '10', value: 10 },
+      { name: '20', value: 20 },
+      { name: '30', value: 30 },
+    ];
+    const widget = makeWidget({
+      attributeName: 'numerics',
+      options: listOptions,
+      transformItems: items =>
+        items.map(item => ({ ...item, label: 'transformed' })),
+    });
+
+    const config = widget.getConfiguration({}, {});
+
+    const helper = jsHelper({}, '', config);
+    helper.search = jest.fn();
+
+    widget.init({
+      helper,
+      state: helper.state,
+      createURL: () => '#',
+      onHistoryChange: () => {},
+    });
+
+    const firstRenderingOptions = rendering.mock.calls[0][0];
+    expect(firstRenderingOptions.options).toEqual([
+      { name: '10', value: 10, label: 'transformed' },
+      { name: '20', value: 20, label: 'transformed' },
+      { name: '30', value: 30, label: 'transformed' },
+    ]);
+
+    widget.render({
+      results: new SearchResults(helper.state, [{ nbHits: 0 }]),
+      state: helper.state,
+      helper,
+      createURL: () => '#',
+    });
+
+    const secondRenderingOptions = rendering.mock.calls[1][0];
+    expect(secondRenderingOptions.options).toEqual([
+      { name: '10', value: 10, label: 'transformed' },
+      { name: '20', value: 20, label: 'transformed' },
+      { name: '30', value: 30, label: 'transformed' },
+    ]);
+  });
+
   it('Reads the default value from the URL if possible', () => {
     // test that the dummyRendering is called with the isFirstRendering
     // flag set accordingly

src/connectors/numeric-selector/connectNumericSelector.js

@@ -15,7 +15,8 @@ search.addWidget(
   customNumericSelector({
     attributeName,
     options,
-    [ operator = '=' ]
+    [ operator = '=' ],
+    [ transformItems ]
   })
 );
 Full documentation available at https://community.algolia.com/instantsearch.js/v2/connectors/connectNumericSelector.html
@@ -33,6 +34,7 @@ Full documentation available at https://community.algolia.com/instantsearch.js/v
  * @property {string} attributeName Name of the attribute for faceting (eg. "free_shipping").
  * @property {NumericSelectorOption[]} options Array of objects defining the different values and labels.
  * @property {string} [operator = '＝'] The operator to use to refine. Supports following operators: <, <=, =, >, >= and !=.
+ * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  */
 
 /**
@@ -98,7 +100,12 @@ export default function connectNumericSelector(renderFn, unmountFn) {
   checkRendering(renderFn, usage);
 
   return (widgetParams = {}) => {
-    const { attributeName, options, operator = '=' } = widgetParams;
+    const {
+      attributeName,
+      options,
+      operator = '=',
+      transformItems = items => items,
+    } = widgetParams;
 
     if (!attributeName || !options) {
       throw new Error(usage);
@@ -131,7 +138,7 @@ export default function connectNumericSelector(renderFn, unmountFn) {
         renderFn(
           {
             currentRefinement: this._getRefinedValue(helper.state),
-            options,
+            options: transformItems(options),
             refine: this._refine,
             hasNoResults: true,
             instantSearchInstance,
@@ -145,7 +152,7 @@ export default function connectNumericSelector(renderFn, unmountFn) {
         renderFn(
           {
             currentRefinement: this._getRefinedValue(helper.state),
-            options,
+            options: transformItems(options),
             refine: this._refine,
             hasNoResults: results.nbHits === 0,
             instantSearchInstance,

src/widgets/numeric-selector/numeric-selector.js

@@ -31,7 +31,8 @@ const usage = `Usage: numericSelector({
   attributeName,
   options,
   cssClasses.{root,select,item},
-  autoHideContainer
+  autoHideContainer,
+  transformItems
 })`;
 
 /**
@@ -55,6 +56,7 @@ const usage = `Usage: numericSelector({
  * @property {NumericOption[]} options Array of objects defining the different values and labels.
  * @property {string} [operator='='] The operator to use to refine.
  * @property {boolean} [autoHideContainer=false] Hide the container when no results match.
+ * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
  * @property {NumericSelectorCSSClasses} [cssClasses] CSS classes to be added.
  */
 
@@ -96,6 +98,7 @@ export default function numericSelector({
   options,
   cssClasses: userCssClasses = {},
   autoHideContainer = false,
+  transformItems,
 }) {
   const containerNode = getContainerNode(container);
   if (!container || !options || options.length === 0 || !attributeName) {
@@ -121,7 +124,12 @@ export default function numericSelector({
       specializedRenderer,
       () => unmountComponentAtNode(containerNode)
     );
-    return makeNumericSelector({ operator, attributeName, options });
+    return makeNumericSelector({
+      operator,
+      attributeName,
+      options,
+      transformItems,
+    });
   } catch (e) {
     throw new Error(usage);
   }