Merge pull request #309 from mmrtnz/switches-className

Added innerClassName prop to enhanced-switched. Similiar to paper.
mui · Feb 5, 2015 · 5351e27 · 5351e27
2 parents fb6540d + 970470f
commit 5351e27
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git a/src/js/checkbox.jsx b/src/js/checkbox.jsx
@@ -1,10 +1,13 @@
 var React = require('react');
 var EnhancedSwitch = require('./enhanced-switch.jsx');
+var Classable = require('./mixins/classable.js');
 var CheckboxOutline = require('./svg-icons/toggle-check-box-outline-blank.jsx');
 var CheckboxChecked = require('./svg-icons/toggle-check-box-checked.jsx');
 
 var Checkbox = React.createClass({
 
+  mixins: [Classable],
+
   propTypes: {
     onCheck: React.PropTypes.func,
   },
@@ -15,6 +18,8 @@ var Checkbox = React.createClass({
       ...other
     } = this.props;
 
+    var classes = this.getClasses("mui-checkbox");
+
     var checkboxElement = (
       <div>
         <CheckboxOutline className="mui-checkbox-box" />
@@ -26,7 +31,8 @@ var Checkbox = React.createClass({
       ref: "enhancedSwitch",
       inputType: "checkbox",
       switchElement: checkboxElement,
-      className: "mui-checkbox",
+      className: classes,
+      iconClassName: "mui-checkbox-icon",
       onSwitch: this._handleCheck,
       labelPosition: (this.props.labelPosition) ? this.props.labelPosition : "right"
     };

diff --git a/src/js/enhanced-switch.jsx b/src/js/enhanced-switch.jsx
@@ -15,7 +15,7 @@ var EnhancedSwitch = React.createClass({
       id: React.PropTypes.string,
       inputType: React.PropTypes.string.isRequired,
       switchElement: React.PropTypes.element.isRequired,
-      className: React.PropTypes.string.isRequired,
+      iconClassName: React.PropTypes.string.isRequired,
       name: React.PropTypes.string,
 	    value: React.PropTypes.string,
 	    label: React.PropTypes.string,
@@ -33,6 +33,12 @@ var EnhancedSwitch = React.createClass({
     'keyup': '_handleWindowKeyup'
   },
 
+  getDefaultProps: function() {
+    return {
+      iconClassName: ''
+    };
+  },
+
   getInitialState: function() {
     return {
       switched: this.props.defaultSwitched ||
@@ -83,11 +89,11 @@ var EnhancedSwitch = React.createClass({
       onTouchEnd,
       disableTouchRipple,
       disableFocusRipple,
+      iconClassName,
       ...other
     } = this.props;
 
-    var classes = this.getClasses(this.props.className, {
-      'mui-enhanced-switch': true,
+    var classes = this.getClasses('mui-enhanced-switch', {
       'mui-is-switched': this.state.switched,
       'mui-is-disabled': this.props.disabled,
       'mui-is-required': this.props.required
@@ -145,9 +151,9 @@ var EnhancedSwitch = React.createClass({
       this.props.disabled || disableFocusRipple ? null : focusRipple
     ];
 
-    var iconClassName = this.props.className + '-icon mui-enhanced-switch-wrap';
+    iconClassName += ' mui-enhanced-switch-wrap';
 
-    var switchElement = (this.props.className != "mui-toggle") ? (
+    var switchElement = (this.props.iconClassName.indexOf("toggle") == -1) ? (
         <div className={iconClassName}>
           {this.props.switchElement}
           {ripples}

diff --git a/src/js/radio-button.jsx b/src/js/radio-button.jsx
@@ -1,10 +1,13 @@
 var React = require('react');
+var Classable = require('./mixins/classable.js');
 var EnhancedSwitch = require('./enhanced-switch.jsx');
 var RadioButtonOff = require('./svg-icons/toggle-radio-button-off.jsx');
 var RadioButtonOn = require('./svg-icons/toggle-radio-button-on.jsx');
 
 var RadioButton = React.createClass({
 
+  mixins: [Classable],
+
   propTypes: {
     onCheck: React.PropTypes.func
   },
@@ -28,6 +31,7 @@ var RadioButton = React.createClass({
       inputType: "radio",
       switchElement: radioButtonElement,
       className: "mui-radio-button",
+      iconClassName: "mui-radio-button-icon",
       onSwitch: this._handleCheck,
       labelPosition: (this.props.labelPosition) ? this.props.labelPosition : "right"
     };

diff --git a/src/js/toggle.jsx b/src/js/toggle.jsx
@@ -1,9 +1,12 @@
 var React = require('react');
+var Classable = require('./mixins/classable.js');
 var Paper = require('./paper.jsx');
 var EnhancedSwitch = require('./enhanced-switch.jsx');
 
 var Toggle = React.createClass({
 
+  mixins: [Classable],
+
   propTypes: {
     onToggle: React.PropTypes.func,
     toggled: React.PropTypes.bool,
@@ -28,6 +31,7 @@ var Toggle = React.createClass({
       inputType: "checkbox",
       switchElement: toggleElement,
       className: "mui-toggle",
+      iconClassName: "mui-toggle-icon",
       onSwitch: this._handleToggle,
       defaultSwitched: this.props.defaultToggled,
       labelPosition: (this.props.labelPosition) ? this.props.labelPosition : "left"