feat: Add support for className

Author: pixelastic

Diff for: components/IndexSelector/index.js

@@ -8,18 +8,24 @@ class IndexSelector extends React.Component {
   render() {
     var currentIndex = this.props.currentIndex;
     var indices = this.props.indices;
+    var cssClass = this.props.cssClass;
 
     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
+        className={cssClass}
+        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 = {
+  cssClass: React.PropTypes.string,
   currentIndex: React.PropTypes.string,
   indices: React.PropTypes.array,
   setIndex: React.PropTypes.func

Diff for: example/app.js

@@ -29,7 +29,8 @@ search.addWidget(
       {'name': 'instant_search', 'label': 'Most relevant'},
       {'name': 'instant_search_price_asc', 'label': 'Lowest price'},
       {'name': 'instant_search_price_desc', 'label': 'Highest price'}
-    ]
+    ],
+    cssClass: 'form-control'
   })
 );
 

Diff for: example/index.html

@@ -40,8 +40,11 @@ <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 class="form-inline">
+          <div class="form-group">
+            <label>Sort by:</label>
+            <span id="index-selector"></span>
+          </div>
         </div>
         <div id="hits"></div>
         <div id="pagination" class="text-center"></div>

Diff for: widgets/index-selector/index.js

@@ -1,13 +1,18 @@
 var React = require('react');
+var cx = require('classnames');
 
 var findIndex = require('lodash/array/findIndex');
 var utils = require('../../lib/widgetUtils.js');
 
-function indexSelector({container = null, indices = null}) {
+function indexSelector({
+    container = null,
+    cssClass = null,
+    indices = null
+  }) {
   var IndexSelector = require('../../components/IndexSelector');
   var containerNode = utils.getContainerNode(container);
 
-  var usage = 'Usage: indexSelector({container, indices})';
+  var usage = 'Usage: indexSelector({container, indices[, cssClass]})';
   if (container === null || indices === null) {
     throw new Error(usage);
   }
@@ -20,9 +25,11 @@ function indexSelector({container = null, indices = null}) {
         throw new Error('[stats]: Index ' + currentIndex + ' not present in `indices`');
       }
     },
+
     render: function(results, state, helper) {
       React.render(
         <IndexSelector
+          cssClass={cx(cssClass)}
           currentIndex={helper.getIndex()}
           indices={indices}
           setIndex={helper.setIndex.bind(helper)}