From ceed8ae2ebd8f5b87fc6af5d0fb4d30be24c51f0 Mon Sep 17 00:00:00 2001
From: Pixelastic <tim@pixelastic.com>
Date: Mon, 7 Sep 2015 14:29:06 +0200
Subject: [PATCH] feat: Add `htmlAttributes` to indexSelector

---
 components/IndexSelector.js | 11 ++++++++---
 example/app.js              |  5 ++++-
 widgets/index-selector.js   |  7 +++----
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/components/IndexSelector.js b/components/IndexSelector.js
index 2b73e9303c..fdec5582c0 100644
--- a/components/IndexSelector.js
+++ b/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
 };
diff --git a/example/app.js b/example/app.js
index 4b53a55a17..fdba47343b 100644
--- a/example/app.js
+++ b/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'
+    }
   })
 );
 
diff --git a/widgets/index-selector.js b/widgets/index-selector.js
index 7e939079b8..96527f3f3d 100644
--- a/widgets/index-selector.js
+++ b/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)}