v0.3.1

Added buttonActive prop to classNames
Will fall back to using custom `button` if necessary

.npmignore

@@ -1,6 +1,5 @@
 demo
 dist
-node_modules
 src
 .gitignore
 .jshintrc

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.3.1 - 2015-01-13
+
+Added: new `buttonActive` property for the `classNames` prop - this will be
+used when one or more options are selected, otherwise `button` will be used.
+
+Changed: `classNames` prop no longer has to provide all properties - defaults
+will be used where not provided.
+
 ## 0.3.0 - 2015-01-01
 
 Added: double-clicking now adds the selected option to the selection.

README.md

@@ -95,7 +95,9 @@ objects each time the selection is added to.
 
 `className` - class name for the component's `<div>` container.
 
-`classNames` - class names for each of the component's child elements.
+`classNames` - class names for each of the component's child elements. See the
+default props below for properties. Defaults will be used for any properties not
+specified via this prop.
 
 `defaultFilter` - default filter text to be applied to the `<select>`
 
@@ -122,6 +124,8 @@ the `value` for its `<option>`.
   className: 'FilteredMultiSelect',
   classNames: {
     button: 'FilteredMultiSelect__button',
+    // Used when at least one <option> is selected
+    buttonActive: 'FilteredMultiSelect__button--active',
     filter: 'FilteredMultiSelect__filter',
     select: 'FilteredMultiSelect__select'
   }

demo/app.jsx

@@ -257,6 +257,7 @@ var bootstrapClasses = {
   filter: 'form-control'
 , select: 'form-control'
 , button: 'btn btn btn-block btn-default'
+, buttonActive: 'btn btn btn-block btn-primary'
 }
 
 var BasicSelection = React.createClass({
@@ -352,7 +353,12 @@ var AddRemoveSelection = React.createClass({
       <div className="col-md-5">
         <FilteredMultiSelect
           buttonText="Remove"
-          classNames={bootstrapClasses}
+          classNames={{
+            filter: 'form-control'
+          , select: 'form-control'
+          , button: 'btn btn btn-block btn-default'
+          , buttonActive: 'btn btn btn-block btn-danger'
+          }}
           onChange={this._onDeselect}
           options={selectedOptions}
           textProp="name"

dist/react-filtered-multiselect.js

@@ -1,5 +1,5 @@
-/**
- * react-filtered-multiselect 0.3.0 - https://github.com/insin/react-filtered-multiselect
+/*!
+ * react-filtered-multiselect 0.3.1 - https://github.com/insin/react-filtered-multiselect
  * MIT Licensed
  */
 !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.FilteredMultiSelect=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
@@ -35,6 +35,13 @@ function getItemsByProp(arr, prop, values) {
   return items
 }
 
+var DEFAULT_CLASS_NAMES = {
+  button: 'FilteredMultiSelect__button'
+, buttonActive: 'FilteredMultiSelect__button--active'
+, filter: 'FilteredMultiSelect__filter'
+, select: 'FilteredMultiSelect__select'
+}
+
 var FilteredMultiSelect = React.createClass({displayName: 'FilteredMultiSelect',
   propTypes: {
     buttonText: React.PropTypes.string
@@ -55,11 +62,7 @@ var FilteredMultiSelect = React.createClass({displayName: 'FilteredMultiSelect',
     return {
       buttonText: 'Select'
     , className: 'FilteredMultiSelect'
-    , classNames: {
-        button: 'FilteredMultiSelect__button'
-      , filter: 'FilteredMultiSelect__filter'
-      , select: 'FilteredMultiSelect__select'
-      }
+    , classNames: {}
     , defaultFilter: ''
     , disabled: false
     , placeholder: 'type to filter'
@@ -98,6 +101,19 @@ var FilteredMultiSelect = React.createClass({displayName: 'FilteredMultiSelect',
     }
   },
 
+  _getClassName:function(name) {
+    if (arguments.length == 1) {
+      return this.props.classNames[name] || DEFAULT_CLASS_NAMES[name]
+    }
+
+    for (var i = 0, l = arguments.length; i < l ; i++) {
+      if (arguments[i] in this.props.classNames) {
+        return this.props.classNames[arguments[i]]
+      }
+    }
+    return DEFAULT_CLASS_NAMES[name]
+  },
+
   _filterOptions:function(filter, selectedOptions, options) {
     if (typeof filter == 'undefined') {
       filter = this.state.filter
@@ -176,10 +192,11 @@ var FilteredMultiSelect = React.createClass({displayName: 'FilteredMultiSelect',
 
   render:function() {
     var $__0=   this,props=$__0.props,state=$__0.state
+    var hasSelectedOptions = state.selectedValues.length > 0
     return React.createElement("div", {className: props.className}, 
       React.createElement("input", {
          type: "text", 
-         className: props.classNames.filter, 
+         className: this._getClassName('filter'), 
          placeholder: props.placeholder, 
          value: state.filter, 
          onChange: this._onFilterChange, 
@@ -188,7 +205,7 @@ var FilteredMultiSelect = React.createClass({displayName: 'FilteredMultiSelect',
       ), 
       React.createElement("select", {multiple: true, 
          ref: "select", 
-         className: props.classNames.select, 
+         className: this._getClassName('select'), 
          size: props.size, 
          value: state.selectedValues, 
          onChange: this._updateSelectedValues, 
@@ -199,8 +216,8 @@ var FilteredMultiSelect = React.createClass({displayName: 'FilteredMultiSelect',
         })
       ), 
       React.createElement("button", {type: "button", 
-         className: props.classNames.button, 
-         disabled: state.selectedValues.length === 0, 
+         className: hasSelectedOptions ? this._getClassName('buttonActive', 'button') : this._getClassName('button'), 
+         disabled: !hasSelectedOptions, 
          onClick: this._addSelectedToSelection}, 
         this.props.buttonText
       )

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-filtered-multiselect",
   "description": "Filtered multi-select React component",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "main": "./lib/index.js",
   "homepage": "https://github.com/insin/react-filtered-multiselect",
   "standalone": "FilteredMultiSelect",

src/index.jsx

@@ -30,6 +30,13 @@ function getItemsByProp(arr, prop, values) {
   return items
 }
 
+var DEFAULT_CLASS_NAMES = {
+  button: 'FilteredMultiSelect__button'
+, buttonActive: 'FilteredMultiSelect__button--active'
+, filter: 'FilteredMultiSelect__filter'
+, select: 'FilteredMultiSelect__select'
+}
+
 var FilteredMultiSelect = React.createClass({
   propTypes: {
     buttonText: React.PropTypes.string
@@ -50,11 +57,7 @@ var FilteredMultiSelect = React.createClass({
     return {
       buttonText: 'Select'
     , className: 'FilteredMultiSelect'
-    , classNames: {
-        button: 'FilteredMultiSelect__button'
-      , filter: 'FilteredMultiSelect__filter'
-      , select: 'FilteredMultiSelect__select'
-      }
+    , classNames: {}
     , defaultFilter: ''
     , disabled: false
     , placeholder: 'type to filter'
@@ -93,6 +96,19 @@ var FilteredMultiSelect = React.createClass({
     }
   },
 
+  _getClassName(name) {
+    if (arguments.length == 1) {
+      return this.props.classNames[name] || DEFAULT_CLASS_NAMES[name]
+    }
+
+    for (var i = 0, l = arguments.length; i < l ; i++) {
+      if (arguments[i] in this.props.classNames) {
+        return this.props.classNames[arguments[i]]
+      }
+    }
+    return DEFAULT_CLASS_NAMES[name]
+  },
+
   _filterOptions(filter, selectedOptions, options) {
     if (typeof filter == 'undefined') {
       filter = this.state.filter
@@ -171,10 +187,11 @@ var FilteredMultiSelect = React.createClass({
 
   render() {
     var {props, state} = this
+    var hasSelectedOptions = state.selectedValues.length > 0
     return <div className={props.className}>
       <input
          type="text"
-         className={props.classNames.filter}
+         className={this._getClassName('filter')}
          placeholder={props.placeholder}
          value={state.filter}
          onChange={this._onFilterChange}
@@ -183,7 +200,7 @@ var FilteredMultiSelect = React.createClass({
       />
       <select multiple
          ref="select"
-         className={props.classNames.select}
+         className={this._getClassName('select')}
          size={props.size}
          value={state.selectedValues}
          onChange={this._updateSelectedValues}
@@ -194,8 +211,8 @@ var FilteredMultiSelect = React.createClass({
         })}
       </select>
       <button type="button"
-         className={props.classNames.button}
-         disabled={state.selectedValues.length === 0}
+         className={hasSelectedOptions ? this._getClassName('buttonActive', 'button') : this._getClassName('button')}
+         disabled={!hasSelectedOptions}
          onClick={this._addSelectedToSelection}>
         {this.props.buttonText}
       </button>