feat: MutlipleChoiceList second pass

New options:
- sortBy
- cssClass
- limit
- operator options

Also it DOES refine now.

There's some funny code inside the click handle on the LI.

Author: vvo

README.md

@@ -143,3 +143,37 @@ search.addWidget(
 );
 ```
 
+### multipleChoiceList
+
+#### API
+
+```js
+/**
+ * Instantiate a list of refinement based on a facet
+ * @param  {String|DOMElement} options.container Valid CSS Selector as a string or DOMElement
+ * @param  {String} options.facetName Name of the attribute for faceting
+ * @param  {String} options.operator How to apply refinements. Possible values: `or`, `and`
+ * @param  {String[]} [options.sortBy=['count:desc']] How to sort refinements. Possible values: `count|isRefined|name:asc|desc`
+ * @param  {String} [options.limit=100] How much facet values to get.
+ * @param  {String|String[]} [options.cssClass=null] CSS class(es) for the main `<ul>` wrapper.
+ * @param  {String|Function} [options.template] Item template, provided with `name`, `count`, `isRefined`
+ * @return {Object}
+ */
+```
+
+
+#### Usage
+
+```html
+<div id="brands"></div>
+```
+
+```js
+search.addWidget(
+  instantsearch.widgets.multipleChoiceList({
+    container: '#brands', 
+    facetName: 'brands',
+    operator: 'or'
+  })
+);
+```

components/MultipleChoiceList/index.js

@@ -3,27 +3,74 @@ var React = require('react');
 var Template = require('../Template/');
 
 class MultipleChoiceList extends React.Component {
+  refine(value) {
+    this.props.toggleRefine(value);
+    this.props.search();
+  }
+
+  // Click events on DOM tree like LABEL > INPUT will result in two click events
+  // instead of one. No matter the framework: see
+  // a label, you will get two click events instead of one.
+  // No matter the framework, see https://www.google.com/search?q=click+label+twice
+  //
+  // Thus making it hard to distinguish activation from deactivation because both click events
+  // are very close. Debounce is a solution but hacky.
+  //
+  // So the code here checks if the click was done on or in a LABEL. If this LABEL
+  // has a checkbox inside, we ignore the first click event because we will get another one.
+  handleClick(value, e) {
+    if (e.target.tagName === 'INPUT') {
+      this.refine(value);
+      return;
+    }
+
+    var parent = e.target;
+    var checkboxInLabel = false;
+
+    while (parent !== e.currentTarget) {
+      if (parent.tagName === 'LABEL' && parent.querySelector('input[type="checkbox"]')) {
+        checkboxInLabel = true;
+        return;
+      }
+
+      parent = parent.parentNode;
+    }
+
+    if (checkboxInLabel === false) {
+      this.refine(value);
+    }
+  }
+
   render() {
     var facetValues = this.props.facetValues;
     var template = this.props.template;
 
     return (
-      <ul>
-        {facetValues.map(function(facetValue) {
-          return <li key={facetValue.name}><Template data={facetValue} template={template} /></li>;
+      <ul className={this.props.cssClass}>
+        {facetValues.map(facetValue => {
+          return (
+            <li key={facetValue.name} onClick={this.handleClick.bind(this, facetValue.name)}>
+              <Template data={facetValue} template={template} />
+            </li>
+          );
         })}
       </ul>
     );
   }
 }
 
 MultipleChoiceList.propTypes = {
+  cssClass: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.array
+  ]),
   facetValues: React.PropTypes.array,
+  search: React.PropTypes.func.isRequired,
   template: React.PropTypes.oneOfType([
     React.PropTypes.string,
     React.PropTypes.func
   ]).isRequired,
-  toggleRefine: React.PropTypes.func
+  toggleRefine: React.PropTypes.func.isRequired
 };
 
 module.exports = MultipleChoiceList;

example/app.js

@@ -44,7 +44,11 @@ search.addWidget(
 search.addWidget(
   instantsearch.widgets.multipleChoiceList({
     container: '#brands',
-    facetName: 'brand'
+    facetName: 'brand',
+    operator: 'or',
+    limit: 10,
+    cssClass: 'nav nav-stacked',
+    template: require('./templates/or.html')
   })
 );
 

example/templates/or.html

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

webpack.config.js

@@ -9,8 +9,6 @@ module.exports = {
   module: {
     loaders: [{
       test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'
-    }, {
-      test: /\.html$/, exclude: /node_modules/, loader: 'raw'
     }]
   }
 };

widgets/multiple-choice-list/index.js

@@ -1,24 +1,61 @@
 var React = require('react');
+var cx = require('classnames');
 
 var utils = require('../../lib/widgetUtils.js');
-var defaultTemplate = require('./template.html');
 
-function multipleChoiceList({container = null, facetName = null, template = defaultTemplate}) {
+var defaultTemplate = `<label>
+  <input type="checkbox" value="{{name}}" {{#isRefined}}checked{{/isRefined}} />{{name}} <span>{{count}}</span>
+</label>`;
+
+/**
+ * Instantiate a list of refinement based on a facet
+ * @param  {String|DOMElement} options.container Valid CSS Selector as a string or DOMElement
+ * @param  {String} options.facetName Name of the attribute for faceting
+ * @param  {String} options.operator How to apply refinements. Possible values: `or`, `and`
+ * @param  {String[]} [options.sortBy=['count:desc']] How to sort refinements. Possible values: `count|isRefined|name:asc|desc`
+ * @param  {String} [options.limit=100] How much facet values to get.
+ * @param  {String|String[]} [options.cssClass=null] CSS class(es) for the main `<ul>` wrapper.
+ * @param  {String|Function} [options.template] Item template, provided with `name`, `count`, `isRefined`
+ * @return {Object}
+ */
+function multipleChoiceList({
+    container = null,
+    facetName = null,
+    operator = null,
+    sortBy = ['count:desc'],
+    limit = 100,
+    cssClass = null,
+    template = defaultTemplate
+  }) {
+  var usage = 'Usage: multipleChoiceList({container, facetName, operator[sortBy, limit, cssClass, template]})';
+
   var MultipleChoiceList = require('../../components/MultipleChoiceList');
   var containerNode = utils.getContainerNode(container);
 
-  if (container === null || facetName === null) {
-    throw new Error('Usage: multipleChoiceList({container, facetName[, template]})');
+  if (container === null ||
+    facetName === null ||
+    operator === null) {
+    throw new Error(usage);
+  }
+
+  operator = operator.toLowerCase();
+  if (operator !== 'and' && operator !== 'or') {
+    throw new Error(usage);
   }
 
   return {
-    getConfiguration: () => ({disjunctiveFacets: [facetName]}),
+    getConfiguration: () => ({
+      maxValuesPerFacet: limit,
+      [operator === 'and' ? 'facets' : 'disjunctiveFacets']: [facetName]
+    }),
     render: function(results, state, helper) {
       React.render(
         <MultipleChoiceList
-          facetValues={results.getFacetValues(facetName, {sortBy: ['name:asc']})}
-          toggleRefine={helper.toggleRefine.bind(helper, facetName)}
+          cssClass={cx(cssClass)}
+          facetValues={results.getFacetValues(facetName, {sortBy: sortBy})}
+          search={helper.search.bind(helper)}
           template={template}
+          toggleRefine={helper.toggleRefine.bind(helper, facetName)}
         />,
         containerNode
       );