feat(transformData): refinementList + menu implementation

algolia · Sep 22, 2015 · 0a0e36e · 0a0e36e
1 parent 5d7c531
commit 0a0e36e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/components/RefinementList.js b/components/RefinementList.js
@@ -3,6 +3,8 @@ var React = require('react');
 var Template = require('./Template');
 var cx = require('classnames');
 
+var identity = require('lodash/utility/identity');
+
 class RefinementList extends React.Component {
   refine(value) {
     this.props.toggleRefinement(value);
@@ -43,6 +45,7 @@ class RefinementList extends React.Component {
     var rootClass = cx(this.props.cssClasses.root);
     var listClass = cx(this.props.cssClasses.list);
     var itemClass = cx(this.props.cssClasses.item);
+    var transformData = this.props.transformData || identity;
 
     return (
       <div className={rootClass}>
@@ -51,7 +54,7 @@ class RefinementList extends React.Component {
         {facetValues.map(facetValue => {
           return (
             <div className={itemClass} key={facetValue.name} onClick={this.handleClick.bind(this, facetValue.name)}>
-              <Template data={facetValue} template={templates.item} />
+              <Template data={transformData(facetValue)} template={templates.item} />
             </div>
           );
         })}
@@ -92,6 +95,7 @@ RefinementList.propTypes = {
       React.PropTypes.func
     ])
   }),
+  transformData: React.PropTypes.func,
   toggleRefinement: React.PropTypes.func.isRequired
 };
 

diff --git a/example/app.js b/example/app.js
@@ -81,6 +81,10 @@ search.addWidget(
     templates: {
       header: '<div class="panel-heading">Price ranges</div>',
       item: require('./templates/and.html')
+    },
+    transformData: function(data) {
+      data.name = data.name.replace(/(\d+) - (\d+)/, '$$$1 - $$$2').replace(/> (\d+)/, '> $$$1');
+      return data;
     }
   })
 );

diff --git a/widgets/menu.js b/widgets/menu.js
@@ -25,6 +25,7 @@ var hierarchicalCounter = 0;
  * @param  {String|Function} [options.templates.header=''] Header template
  * @param  {String|Function} [options.templates.item='<a href="{{href}}">{{name}}</a> {{count}}'] Item template, provided with `name`, `count`, `isRefined`
  * @param  {String|Function} [options.templates.footer=''] Footer template
+ * @param  {Function} [options.transformData] Method to change the object passed to the item template
  * @param  {boolean} [hideWhenNoResults=true] Hide the container when no results match
  * @return {Object}
  */
@@ -39,14 +40,15 @@ function menu({
       item: null
     },
     hideWhenNoResults = true,
-    templates = defaultTemplates
+    templates = defaultTemplates,
+    transformData = null
   }) {
   hierarchicalCounter++;
 
   var RefinementList = require('../components/RefinementList');
 
   var containerNode = utils.getContainerNode(container);
-  var usage = 'Usage: menu({container, facetName, [sortBy, limit, rootClass, itemClass, template]})';
+  var usage = 'Usage: menu({container, facetName, [sortBy, limit, rootClass, itemClass, templates.{header,item,footer}, transformData]})';
 
   if (container === null || facetName === null) {
     throw new Error(usage);
@@ -85,6 +87,7 @@ function menu({
           cssClasses={cssClasses}
           facetValues={getFacetValues(results, hierarchicalFacetName, sortBy, limit)}
           templates={templates}
+          transformData={transformData}
           toggleRefinement={toggleRefinement.bind(null, helper, hierarchicalFacetName)}
         />,
         containerNode

diff --git a/widgets/refinement-list.js b/widgets/refinement-list.js
@@ -27,6 +27,7 @@ var defaultTemplates = {
   <input type="checkbox" value="{{name}}" {{#isRefined}}checked{{/isRefined}} />{{name}} <span>{{count}}</span>
 </label>`] Item template, provided with `name`, `count`, `isRefined`
  * @param  {String|Function} [options.templates.footer] Footer template
+ * @param  {Function} [options.transformData] Method to change the object passed to the item template
  * @param  {String|Function} [options.singleRefine=true] Are multiple refinements allowed or only one at the same time. You can use this
  *                                                       to build radio based refinement lists for example
  * @param  {boolean} [hideWhenNoResults=true] Hide the container when no results match
@@ -45,12 +46,13 @@ function refinementList({
     },
     hideWhenNoResults = true,
     templates = defaultTemplates,
+    transformData = null,
     singleRefine = false
   }) {
   var RefinementList = require('../components/RefinementList');
 
   var containerNode = utils.getContainerNode(container);
-  var usage = 'Usage: refinementList({container, facetName, operator[sortBy, limit, rootClass, itemClass, template]})';
+  var usage = 'Usage: refinementList({container, facetName, operator[sortBy, limit, rootClass, itemClass, templates.{header,item,footer}, transformData]})';
 
   if (container === null ||
     facetName === null ||
@@ -94,6 +96,7 @@ function refinementList({
           cssClasses={cssClasses}
           facetValues={results.getFacetValues(facetName, {sortBy: sortBy}).slice(0, limit)}
           templates={templates}
+          transformData={transformData}
           toggleRefinement={toggleRefinement.bind(null, helper, singleRefine, facetName)}
         />,
         containerNode