From b60ed3609c1bc803e7469b87b5fa79bb5a6144c1 Mon Sep 17 00:00:00 2001
From: Pixelastic <tim@pixelastic.com>
Date: Fri, 4 Sep 2015 15:16:43 +0200
Subject: [PATCH] feat: indexSelector widget

---
 components/IndexSelector/index.js    | 28 ++++++++++++++++++++++++++++
 example/app.js                       | 11 +++++++++++
 example/index.html                   |  3 +++
 index.js                             |  1 +
 widgets/index-selector/index.js      | 28 ++++++++++++++++++++++++++++
 widgets/index-selector/template.html |  0
 6 files changed, 71 insertions(+)
 create mode 100644 components/IndexSelector/index.js
 create mode 100644 widgets/index-selector/index.js
 create mode 100644 widgets/index-selector/template.html

diff --git a/components/IndexSelector/index.js b/components/IndexSelector/index.js
new file mode 100644
index 0000000000..ce02f19723
--- /dev/null
+++ b/components/IndexSelector/index.js
@@ -0,0 +1,28 @@
+var React = require('react');
+
+class IndexSelector extends React.Component {
+  handleChange(event) {
+    this.props.setIndex(event.target.value).search();
+  }
+
+  render() {
+    var currentIndex = this.props.currentIndex;
+    var indices = this.props.indices;
+
+    return (
+      <select onChange={this.handleChange.bind(this)} value={currentIndex}>
+        {indices.map(function(index) {
+          return <option key={index.name} value={index.name}>{index.label}</option>;
+        })}
+      </select>
+    );
+  }
+}
+
+IndexSelector.propTypes = {
+  currentIndex: React.PropTypes.string,
+  indices: React.PropTypes.array,
+  setIndex: React.PropTypes.func
+};
+
+module.exports = IndexSelector;
diff --git a/example/app.js b/example/app.js
index f60dc7fabc..eef2fbda43 100644
--- a/example/app.js
+++ b/example/app.js
@@ -22,6 +22,17 @@ search.addWidget(
   })
 );
 
+search.addWidget(
+  instantsearch.widgets.indexSelector({
+    container: '#index-selector',
+    indices: [
+      {'name': 'instant_search', 'label': 'Most relevant'},
+      {'name': 'instant_search_price_asc', 'label': 'Lowest price'},
+      {'name': 'instant_search_price_desc', 'label': 'Highest price'}
+    ]
+  })
+);
+
 search.addWidget(
   instantsearch.widgets.hits({
     container: '#hits',
diff --git a/example/index.html b/example/index.html
index 965b665a77..4ca2843771 100644
--- a/example/index.html
+++ b/example/index.html
@@ -40,6 +40,9 @@ <h1>Instant search demo <small>using instantsearch.js</small></h1>
       </div>
       <div class="col-md-9">
         <div id="stats"></div>
+        <div>
+          Sort by: <span id="index-selector"></span>
+        </div>
         <div id="hits"></div>
         <div id="pagination" class="text-center"></div>
       </div>
diff --git a/index.js b/index.js
index 2b45c9a746..47f9fb8c3e 100644
--- a/index.js
+++ b/index.js
@@ -2,6 +2,7 @@ module.exports = {
   InstantSearch: require('./lib/InstantSearch'),
   widgets: {
     hits: require('./widgets/hits'),
+    indexSelector: require('./widgets/index-selector'),
     menu: require('./widgets/menu'),
     multipleChoiceList: require('./widgets/multiple-choice-list'),
     pagination: require('./widgets/pagination'),
diff --git a/widgets/index-selector/index.js b/widgets/index-selector/index.js
new file mode 100644
index 0000000000..c0d00b513a
--- /dev/null
+++ b/widgets/index-selector/index.js
@@ -0,0 +1,28 @@
+var React = require('react');
+
+var utils = require('../../lib/widgetUtils.js');
+
+function indexSelector({container = null, indices = null}) {
+  var IndexSelector = require('../../components/IndexSelector');
+  var containerNode = utils.getContainerNode(container);
+
+  var usage = 'Usage: indexSelector({container, indices})';
+  if (container === null || indices === null) {
+    throw new Error(usage);
+  }
+
+  return {
+    render: function(results, state, helper) {
+      React.render(
+        <IndexSelector
+          currentIndex={helper.getIndex()}
+          indices={indices}
+          setIndex={helper.setIndex.bind(helper)}
+        />,
+        containerNode
+      );
+    }
+  };
+}
+
+module.exports = indexSelector;
diff --git a/widgets/index-selector/template.html b/widgets/index-selector/template.html
new file mode 100644
index 0000000000..e69de29bb2