feat: multipleChoiceList first iteration

Author: vvo

components/MultipleChoiceList/index.js

@@ -0,0 +1,29 @@
+var React = require('react');
+
+var Template = require('../Template/');
+
+class MultipleChoiceList extends React.Component {
+  render() {
+    var facetValues = this.props.facetValues;
+    var template = this.props.template;
+
+    return (
+      <ul>
+        {facetValues.map(function(facetValue) {
+          return <Template key={facetValue.name} data={facetValue} template={template} />;
+        })}
+      </ul>
+    );
+  }
+}
+
+MultipleChoiceList.propTypes = {
+  facetValues: React.PropTypes.array,
+  template: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.func
+  ]).isRequired,
+  toggleRefine: React.PropTypes.fn
+};
+
+module.exports = MultipleChoiceList;

example/app.js

@@ -35,4 +35,11 @@ search.addWidget(
   })
 );
 
+search.addWidget(
+  instantsearch.widgets.multipleChoiceList({
+    container: '#brands',
+    facetName: 'brand'
+  })
+);
+
 search.start();

example/index.html

@@ -14,8 +14,8 @@ <h1>Instant search demo <small>using instantsearch.js</small></h1>
 
     <div class="row">
       <div class="col-md-3">
-
         <div id="search-box"></div>
+        <div id="brands"></div>
       </div>
       <div class="col-md-9">
         <div id="hits"></div>

index.js

@@ -3,6 +3,7 @@ module.exports = {
   widgets: {
     searchBox: require('./widgets/search-box/'),
     hits: require('./widgets/hits/'),
-    pagination: require('./widgets/pagination/')
+    pagination: require('./widgets/pagination/'),
+    multipleChoiceList: require('./widgets/multiple-choice-list/')
   }
 };

package.json

@@ -35,7 +35,6 @@
     "onchange": "2.0.0",
     "pretty-bytes": "2.0.1",
     "proxyquire": "1.7.1",
-    "raw-loader": "0.5.1",
     "sinon": "1.16.1",
     "style-loader": "0.12.3",
     "tap-spec": "4.1.0",
@@ -50,6 +49,7 @@
     "classnames": "2.1.3",
     "hogan.js": "3.0.2",
     "lodash": "3.10.1",
+    "raw-loader": "0.5.1",
     "react": "0.13.3"
   },
   "license": "MIT"

webpack.config.js

@@ -9,6 +9,8 @@ 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

@@ -0,0 +1,29 @@
+var React = require('react');
+
+var utils = require('../../lib/widgetUtils.js');
+var defaultTemplate = require('./template.html');
+
+function multipleChoiceList({container = null, facetName = null, template = defaultTemplate}) {
+  var MultipleChoiceList = require('../../components/MultipleChoiceList');
+  var containerNode = utils.getContainerNode(container);
+
+  if (container === null || facetName === null) {
+    throw new Error('Usage: multipleChoiceList({container, facetName[, template]})');
+  }
+
+  return {
+    getConfiguration: () => ({disjunctiveFacets: [facetName]}),
+    render: function(results, state, helper) {
+      React.render(
+        <MultipleChoiceList
+          facetValues={results.getFacetValues(facetName, {sortBy: ['name:asc']})}
+          toggleRefine={helper.toggleRefine.bind(helper, facetName)}
+          template={template}
+        />,
+        containerNode
+      );
+    }
+  };
+}
+
+module.exports = multipleChoiceList;

widgets/multiple-choice-list/template.html

@@ -0,0 +1 @@
+<label><input type="checkbox" value="{{name}}" {{#selected}}checked{{/selected}} />{{name}} <span>{{count}}</span></label>