From bc91bfb42f72ddcc1df06770aecd5aea8dea7634 Mon Sep 17 00:00:00 2001
From: vvo <vincent.voyer@algolia.com>
Date: Wed, 2 Sep 2015 10:37:41 +0200
Subject: [PATCH] feat: multipleChoiceList first iteration

---
 components/MultipleChoiceList/index.js     | 29 ++++++++++++++++++++++
 example/app.js                             |  7 ++++++
 example/index.html                         |  2 +-
 index.js                                   |  3 ++-
 package.json                               |  2 +-
 webpack.config.js                          |  2 ++
 widgets/multiple-choice-list/index.js      | 29 ++++++++++++++++++++++
 widgets/multiple-choice-list/template.html |  1 +
 8 files changed, 72 insertions(+), 3 deletions(-)
 create mode 100644 components/MultipleChoiceList/index.js
 create mode 100644 widgets/multiple-choice-list/index.js
 create mode 100644 widgets/multiple-choice-list/template.html

diff --git a/components/MultipleChoiceList/index.js b/components/MultipleChoiceList/index.js
new file mode 100644
index 0000000000..a57f40be6a
--- /dev/null
+++ b/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;
diff --git a/example/app.js b/example/app.js
index a0236e56b2..7bf1351a3e 100644
--- a/example/app.js
+++ b/example/app.js
@@ -35,4 +35,11 @@ search.addWidget(
   })
 );
 
+search.addWidget(
+  instantsearch.widgets.multipleChoiceList({
+    container: '#brands',
+    facetName: 'brand'
+  })
+);
+
 search.start();
diff --git a/example/index.html b/example/index.html
index 24e78d57e0..23f3ef0abb 100644
--- a/example/index.html
+++ b/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>
diff --git a/index.js b/index.js
index e4aa4abe16..cc114e0ab0 100644
--- a/index.js
+++ b/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/')
   }
 };
diff --git a/package.json b/package.json
index 5ea0bfb687..c5418d5653 100644
--- a/package.json
+++ b/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"
diff --git a/webpack.config.js b/webpack.config.js
index f15c6a3391..e92939abfa 100644
--- a/webpack.config.js
+++ b/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'
     }]
   }
 };
diff --git a/widgets/multiple-choice-list/index.js b/widgets/multiple-choice-list/index.js
new file mode 100644
index 0000000000..9d27470066
--- /dev/null
+++ b/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;
diff --git a/widgets/multiple-choice-list/template.html b/widgets/multiple-choice-list/template.html
new file mode 100644
index 0000000000..c3ad0296de
--- /dev/null
+++ b/widgets/multiple-choice-list/template.html
@@ -0,0 +1 @@
+<label><input type="checkbox" value="{{name}}" {{#selected}}checked{{/selected}} />{{name}} <span>{{count}}</span></label>