feat: indexSelector widget

Author: pixelastic

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;

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',

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>

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'),

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;