feat: Add Toggle example

Author: pixelastic

components/Toggle.js

@@ -1,26 +1,36 @@
 var React = require('react');
 
+var Template = require('./Template');
+var debounce = require('lodash/function/debounce');
+
 class Toggle extends React.Component {
   render() {
-    var toggleFilter = this.props.toggleFilter;
-    var label = this.props.label;
-    var isRefined = this.props.isRefined;
+    var template = this.props.template;
+    // When a checkbox is wrapped inside a label, click events fire twice, so we
+    // debounce it to only keep the first one
+    var toggleFilter = debounce(this.props.toggleFilter, 0, {
+      leading: true,
+      trailing: false
+    });
+    var data = {
+      label: this.props.label,
+      isRefined: this.props.isRefined
+    };
 
     return (
-      <label>
-        <input
-          checked={isRefined}
-          onChange={toggleFilter}
-          type="checkbox"
-        />
-        {label}
-      </label>
+      <span onClick={toggleFilter}>
+        <Template data={data} template={template} />
+      </span>
     );
   }
 }
 
 Toggle.propTypes = {
-  toggleFilter: React.PropTypes.func,
+  template: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.func
+  ]).isRequired,
+  toggleFilter: React.PropTypes.func.isRequired,
   label: React.PropTypes.string,
   isRefined: React.PropTypes.bool
 };

example/app.js

@@ -52,6 +52,15 @@ search.addWidget(
   })
 );
 
+search.addWidget(
+  instantsearch.widgets.toggle({
+    container: '#free_shipping',
+    facetName: 'free_shipping',
+    label: 'Free Shipping',
+    template: require('./templates/free_shipping.html')
+  })
+);
+
 search.addWidget(
   instantsearch.widgets.menu({
     container: '#categories',

example/index.html

@@ -18,6 +18,15 @@ <h1>Instant search demo <small>using instantsearch.js</small></h1>
           <div class="panel-body" id="search-box"></div>
         </div>
 
+        <div class="panel panel-default">
+          <div class="panel-heading">Toggle filters</div>
+          <div class="panel-body">
+            <ul class="nav nav-stacked">
+              <li><div id="free_shipping"></div></li>
+            </ul>
+          </div>
+        </div>
+
         <div class="panel panel-default">
           <div class="panel-heading">Categories</div>
           <div id="categories" class="list-group"></div>
@@ -27,6 +36,7 @@ <h1>Instant search demo <small>using instantsearch.js</small></h1>
           <div class="panel-heading">Brands</div>
           <div class="panel-body" id="brands"></div>
         </div>
+
       </div>
       <div class="col-md-9">
         <div id="stats"></div>

example/templates/free_shipping.html

@@ -0,0 +1,9 @@
+<div class="checkbox">
+  <label>
+    <input type="checkbox" {{#isRefined}}checked{{/isRefined}} />
+    <span class="badge pull-right">{{label}}</span>
+  </label>
+</div>
+
+
+

example/templates/hit.html

@@ -7,6 +7,7 @@
       <h3 class="pull-right text-right text-info">${{price}}</h3>
       <h4>{{{_highlightResult.name.value}}}</h4>
       <p>{{{_highlightResult.description.value}}}</p>
+      {{#free_shipping}}<span class="badge pull-right">Free Shipping</span>{{/free_shipping}}
     </div>
   </div>
 </div>

widgets/toggle.js

@@ -1,11 +1,13 @@
 var React = require('react');
 
 var utils = require('../lib/widget-utils.js');
+var defaultTemplate = '<label>{{label}}<input type="checkbox" {{#isRefined}}checked{{/isRefined}} /></label>';
 
 function toggle({
     container = null,
     facetName = null,
-    label = null
+    label = null,
+    template = defaultTemplate
   }) {
   var Toggle = require('../components/Toggle');
 
@@ -31,8 +33,9 @@ function toggle({
       React.render(
         <Toggle
           isRefined={isRefined}
-          toggleFilter={toggleFilter}
           label={label}
+          template={template}
+          toggleFilter={toggleFilter}
         />,
         containerNode
       );