feat(bem): Add BEM to the index-selector widget

This one does not have any default styles (so no `css` file with it).
I still allow the styling of individual `option`, even if I'm unsure
this is even useful.

BREAKING CHANGE: We now use `cssClasses.select` and
`cssClasses.option` instead of `cssClass` for the index-selector
widget.

Author: pixelastic

README.md

@@ -326,7 +326,9 @@ you'll need several indices. This widget lets you easily change it.
  * @param  {Array} options.indices Array of objects defining the different indices to choose from.
  * @param  {String} options.indices[0].name Name of the index to target
  * @param  {String} options.indices[0].label Label displayed in the dropdown
- * @param  {String|String[]} [options.cssClass] Class name(s) to be added to the generated select element
+ * @param  {Object} [options.cssClasses] CSS classes to be added
+ * @param  {String} [options.cssClasses.select] CSS classes added to the parent <select>
+ * @param  {String} [options.cssClasses.option] CSS classes added to each <option>
  * @param  {boolean} [hideWhenNoResults=false] Hide the container when no results match
  * @return {Object}
  */
@@ -347,7 +349,9 @@ search.addWidget(
       {name: 'instant_search_price_asc', label: 'Lowest price'},
       {name: 'instant_search_price_desc', label: 'Highest price'}
     ],
-    cssClass: 'form-control'
+    cssClasses: {
+      select: 'form-control'
+    }
   })
 );
 ```

components/IndexSelector.js

@@ -1,37 +1,43 @@
 var React = require('react');
 
+var bem = require('../lib/utils').bemHelper('ais-index-selector');
+var cx = require('classnames');
+
 class IndexSelector extends React.Component {
   handleChange(event) {
-    this.props.setIndex(event.target.value).search();
+    this.props.setIndex(event.target.value);
   }
 
   render() {
-    var currentIndex = this.props.currentIndex;
-    var indices = this.props.indices;
-    var cssClass = this.props.cssClass;
-    var selectId = this.props.containerId + '-select';
+    var {currentIndex, indices} = this.props;
+
+    var selectClass = cx(bem('select'), this.props.cssClasses.select);
+    var optionClass = cx(bem('option'), this.props.cssClasses.option);
+
+    var handleChange = this.handleChange.bind(this);
 
     return (
       <select
-        id={selectId}
-        className={cssClass}
-        onChange={this.handleChange.bind(this)}
+        className={selectClass}
+        onChange={handleChange}
         value={currentIndex}
       >
           {indices.map(function(index) {
-            return <option key={index.name} value={index.name}>{index.label}</option>;
+            return <option className={optionClass} key={index.name} value={index.name}>{index.label}</option>;
           })}
       </select>
     );
   }
 }
 
 IndexSelector.propTypes = {
-  containerId: React.PropTypes.string,
-  cssClass: React.PropTypes.string,
+  cssClasses: React.PropTypes.shape({
+    select: React.PropTypes.string,
+    option: React.PropTypes.string
+  }),
   currentIndex: React.PropTypes.string,
   indices: React.PropTypes.array,
-  setIndex: React.PropTypes.func
+  setIndex: React.PropTypes.func.isRequired
 };
 
 module.exports = IndexSelector;

example/app.js

@@ -35,7 +35,9 @@ search.addWidget(
       {name: 'instant_search_price_asc', label: 'Lowest price'},
       {name: 'instant_search_price_desc', label: 'Highest price'}
     ],
-    cssClass: 'form-control'
+    cssClasses: {
+      select: 'form-control'
+    }
   })
 );
 

widgets/index-selector.js

@@ -11,20 +11,22 @@ var IndexSelector = autoHide(require('../components/IndexSelector'));
  * @param  {Array} options.indices Array of objects defining the different indices to choose from.
  * @param  {String} options.indices[0].name Name of the index to target
  * @param  {String} options.indices[0].label Label displayed in the dropdown
- * @param  {String|String[]} [options.cssClass] Class name(s) to be added to the generated select element
+ * @param  {Object} [options.cssClasses] CSS classes to be added
+ * @param  {String} [options.cssClasses.select] CSS classes added to the parent <select>
+ * @param  {String} [options.cssClasses.option] CSS classes added to each <option>
  * @param  {boolean} [hideWhenNoResults=false] Hide the container when no results match
  * @return {Object}
  */
 function indexSelector({
-    container = null,
-    indices = null,
-    cssClass,
+    container,
+    indices,
+    cssClasses = {},
     hideWhenNoResults = false
   }) {
   var containerNode = utils.getContainerNode(container);
 
-  var usage = 'Usage: indexSelector({container, indices[, cssClass]})';
-  if (container === null || indices === null) {
+  var usage = 'Usage: indexSelector({container, indices[, cssClasses.{select,option}, hideWhenNoResults]})';
+  if (!container || !indices) {
     throw new Error(usage);
   }
 
@@ -37,17 +39,22 @@ function indexSelector({
       }
     },
 
+    setIndex: function(helper, indexName) {
+      helper.setIndex(indexName).search();
+    },
+
     render: function({helper, results}) {
-      var containerId = containerNode.id;
+      let currentIndex = helper.getIndex();
+      let hasResults = results.hits.length > 0;
+      let setIndex = this.setIndex.bind(this, helper);
       React.render(
         <IndexSelector
-          containerId={containerId}
-          cssClass={cssClass}
-          currentIndex={helper.getIndex()}
-          indices={indices}
+          cssClasses={cssClasses}
+          currentIndex={currentIndex}
+          hasResults={hasResults}
           hideWhenNoResults={hideWhenNoResults}
-          hasResults={results.hits.length > 0}
-          setIndex={helper.setIndex.bind(helper)}
+          indices={indices}
+          setIndex={setIndex}
         />,
         containerNode
       );