feat: Add htmlAttributes to indexSelector

Author: pixelastic

components/IndexSelector.js

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

example/app.js

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

widgets/index-selector.js

@@ -1,18 +1,17 @@
 var React = require('react');
-var cx = require('classnames');
 
 var findIndex = require('lodash/array/findIndex');
 var utils = require('../lib/widget-utils.js');
 
 function indexSelector({
     container = null,
-    cssClass = null,
+    htmlAttributes = {},
     indices = null
   }) {
   var IndexSelector = require('../components/IndexSelector');
   var containerNode = utils.getContainerNode(container);
 
-  var usage = 'Usage: indexSelector({container, indices[, cssClass]})';
+  var usage = 'Usage: indexSelector({container, indices[, htmlAttributes]})';
   if (container === null || indices === null) {
     throw new Error(usage);
   }
@@ -29,7 +28,7 @@ function indexSelector({
     render: function(results, state, helper) {
       React.render(
         <IndexSelector
-          cssClass={cx(cssClass)}
+          htmlAttributes={htmlAttributes}
           currentIndex={helper.getIndex()}
           indices={indices}
           setIndex={helper.setIndex.bind(helper)}