feat(toggle): add headerFooter decorator

Added to toggle: - templates.header - templates.body - templates.footer - cssClasses.root BREAKING CHANGES: - toggle: removed template
algolia · Sep 24, 2015 · 8a70c7d · 8a70c7d
1 parent 5974a88
commit 8a70c7d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 60 deletions.
diff --git a/components/Toggle.js b/components/Toggle.js
diff --git a/example/templates/free-shipping.html b/example/templates/free-shipping.html
@@ -1,6 +1,7 @@
 <div class="checkbox panel-body">
   <label>
     <input type="checkbox" {{#isRefined}}checked{{/isRefined}} />
-    <span class="badge">{{label}}</span>
+    {{label}}
   </label>
+  <span class="badge pull-right">{{count}}</span>
 </div>
diff --git a/widgets/toggle.js b/widgets/toggle.js
@@ -1,7 +1,15 @@
+var find = require('lodash/collection/find');
 var React = require('react');
 
 var utils = require('../lib/utils.js');
-var defaultTemplate = '<label>{{label}}<input type="checkbox" {{#isRefined}}checked{{/isRefined}} /></label>';
+
+var defaultTemplates = {
+  header: '',
+  body: `<label>
+  <input type="checkbox" {{#isRefined}}checked{{/isRefined}} />{{label}} <span>{{count}}</span>
+</label>`,
+  footer: ''
+};
 
 /**
  * Instantiate the toggling of a boolean facet filter on and off.
@@ -10,7 +18,12 @@ var defaultTemplate = '<label>{{label}}<input type="checkbox" {{#isRefined}}chec
  * @param  {String|DOMElement} options.container CSS Selector or DOMElement to insert the widget
  * @param  {String} options.facetName Name of the attribute for faceting (eg. "free_shipping")
  * @param  {String} options.label Human-readable name of the filter (eg. "Free Shipping")
- * @param  {String|Function} [options.template] Item template, provided with `label` and `isRefined`
+ * @param  {Object} [options.cssClasses] CSS classes to add to the wrapping elements: root
+ * @param  {String|String[]} [options.cssClasses.root=null]
+ * @param  {Object} [options.templates] Templates to use for the widget
+ * @param  {String|Function} [options.templates.header=''] Header template
+ * @param  {String|Function} [options.templates.body='<label>{{label}}<input type="checkbox" {{#isRefined}}checked{{/isRefined}} /></label>'] Body template
+ * @param  {String|Function} [options.templates.footer=''] Footer template
  * @param  {Function} [options.transformData] Function to change the object passed to the item template
  * @param  {boolean} [hideWhenNoResults=true] Hide the container when no results match
  * @return {Object}
@@ -19,11 +32,14 @@ function toggle({
     container = null,
     facetName = null,
     label = null,
-    template = defaultTemplate,
+    templates = defaultTemplates,
+    cssClasses = {
+      root: null
+    },
     transformData = null,
     hideWhenNoResults = true
   }) {
-  var Toggle = require('../components/Toggle');
+  var RefinementList = require('../components/RefinementList');
 
   var containerNode = utils.getContainerNode(container);
   var usage = 'Usage: toggle({container, facetName, label[, template, transformData]})';
@@ -46,25 +62,44 @@ function toggle({
         count: values && values.count || null
       };
 
-      function toggleFilter() {
-        var methodToCall = isRefined ? 'removeFacetRefinement' : 'addFacetRefinement';
-        helper[methodToCall](facetName, true).search();
-      }
+      var _templates = {
+        header: templates.header,
+        item: templates.body,
+        footer: templates.footer
+      };
 
       React.render(
-        <Toggle
-          isRefined={isRefined}
-          label={label}
-          template={template}
-          transformData={transformData}
+        <RefinementList
+          facetValues={[facetValue]}
+          templates={_templates}
+          cssClasses={cssClasses}
+          transformData={prepareData(transformData)}
           hideWhenNoResults={hideWhenNoResults}
           hasResults={results.hits.length > 0}
-          toggleFilter={toggleFilter}
+          toggleRefinement={toggleRefinement.bind(null, helper, facetName, facetValue.isRefined)}
         />,
         containerNode
       );
     }
   };
 }
 
+function prepareData(transformData) {
+  return function(data) {
+    var newData = {
+      label: data.name, // Toggle API exposes `label`
+      isRefined: data.isRefined,
+      count: data.count
+    };
+
+    return transformData && transformData(newData) || newData;
+  };
+}
+
+function toggleRefinement(helper, facetName, isRefined) {
+  var action = isRefined ? 'remove' : 'add';
+
+  helper[action + 'FacetRefinement'](facetName, true).search();
+}
+
 module.exports = toggle;