fix: Remove htmlAttribute in favor of cssClass

Author: pixelastic

Diff for: components/IndexSelector.js

@@ -8,16 +8,13 @@ class IndexSelector extends React.Component {
   render() {
     var currentIndex = this.props.currentIndex;
     var indices = this.props.indices;
-    var htmlAttributes = this.props.htmlAttributes;
-    // React needs `className` in place of `class`
-    if (htmlAttributes.class) {
-      htmlAttributes.className = htmlAttributes.class;
-      htmlAttributes.class = null;
-    }
+    var cssClass = this.props.cssClass;
+    var selectId = this.props.containerId + '-select';
 
     return (
       <select
-        {...htmlAttributes}
+        id={selectId}
+        className={cssClass}
         onChange={this.handleChange.bind(this)}
         value={currentIndex}
       >
@@ -30,8 +27,9 @@ class IndexSelector extends React.Component {
 }
 
 IndexSelector.propTypes = {
+  containerId: React.PropTypes.string,
+  cssClass: React.PropTypes.string,
   currentIndex: React.PropTypes.string,
-  htmlAttributes: React.PropTypes.object,
   indices: React.PropTypes.array,
   setIndex: React.PropTypes.func
 };

Diff for: example/app.js

@@ -30,10 +30,7 @@ search.addWidget(
       {name: 'instant_search_price_asc', label: 'Lowest price'},
       {name: 'instant_search_price_desc', label: 'Highest price'}
     ],
-    htmlAttributes: {
-      id: 'indexSelectorDropdown',
-      class: 'form-control'
-    }
+    cssClass: 'form-control'
   })
 );
 

Diff for: example/index.html

@@ -46,7 +46,7 @@ <h1>Instant search demo <small>using instantsearch.js</small></h1>
           <div class="col-md-4 text-right">
             <div class="form-inline">
               <div class="form-group">
-                <label>Sort by:</label>
+                <label for="index-selector-select">Sort by:</label>
                 <span id="index-selector"></span>
               </div>
             </div>

Diff for: widgets/index-selector.js

@@ -7,12 +7,12 @@ var utils = require('../lib/widget-utils.js');
  * Instantiate a dropdown element to choose the current targeted index
  * @param  {String|DOMElement} options.container Valid CSS Selector as a string or DOMElement
  * @param  {Array} options.indices Array of objects defining the different indices to choose from. Each object must contain a `name` and `label` key.
- * @param  {String} [options.htmlAttributes] Object of html attributes to be passed to the generated `select` element
+ * @param  {String} options.cssClass Class name(s) to be added to the generated select element
  * @return {Object}
  */
 function indexSelector({
     container = null,
-    htmlAttributes = {},
+    cssClass = {},
     indices = null
   }) {
   var IndexSelector = require('../components/IndexSelector');
@@ -33,9 +33,11 @@ function indexSelector({
     },
 
     render: function(results, state, helper) {
+      var containerId = containerNode.id;
       React.render(
         <IndexSelector
-          htmlAttributes={htmlAttributes}
+          containerId={containerId}
+          cssClass={cssClass}
           currentIndex={helper.getIndex()}
           indices={indices}
           setIndex={helper.setIndex.bind(helper)}