Merge pull request mui#278 from mmrtnz/switches-valueLink

hai-cea · hai-cea · commit a7b6cf9130be · 2015-01-26T16:50:02.000-06:00
Switches checkedLink and default Id
diff --git a/docs/src/app/components/pages/components/switches.jsx b/docs/src/app/components/pages/components/switches.jsx
@@ -4,6 +4,7 @@ var Checkbox = mui.Checkbox;
 var RadioButton = mui.RadioButton;
 var RadioButtonGroup = mui.RadioButtonGroup;
 var Toggle = mui.Toggle;
+var CodeExample = require('../../code-example/code-example.jsx');
 var ComponentDoc = require('../../component-doc.jsx');
 var RaisedButton = mui.RaisedButton;
 
@@ -59,11 +60,9 @@ var SwitchesPage = React.createClass({
       '  label="initiate self-destruct sequence"\n' +
       '  disabled={true} />\n\n';
 
-    var desc = 'This component generates a switches element and all props except for the custom ' +
-        'props below will be passed down to the switch element. All switch can now accept input ' +
-        'attributes of type "checkbox" and "radio" as properties. This can be seen in checkbox ' +
-        '3. In it the input attribute "disabled" is included as a property and is handled ' + 
-        'accordingly';
+    var desc = 'These components extend their current input elements (checkbox and radio) and ' + 
+               'will support all of its props and events. Checkboxes and Toggles support ' + 
+               'checkedLink';
 
     var componentInfo = [
       {
@@ -161,6 +160,12 @@ var SwitchesPage = React.createClass({
             desc: 'Sets the default radio button to be the one whose value matches ' + 
                   'defaultSelected (case-sensitive). This will override any individual radio ' +
                   'button with the defaultChecked or checked property stated.'
+          },
+          {
+            name: 'valueSelected',
+            type: 'string',
+            header: 'optional',
+            desc: 'The value of the currently selected radio button.'
           }
         ]
       },
@@ -178,6 +183,11 @@ var SwitchesPage = React.createClass({
             header: 'RadioButtonGroup.setSelectedValue(newSelection)',
             desc: 'Sets the selected radio button to the radio button whose value matches ' +
                   'newSelection'
+          },
+          {
+            name: 'clearValue',
+            header: 'RadioButtonGroup.clearValue()',
+            desc: 'Clears the selected value for the radio button group.'
           }
         ]
       },
@@ -298,8 +308,7 @@ var SwitchesPage = React.createClass({
             id="checkboxId1"
             name="checkboxName1" 
             value="checkboxValue1"
-            label="went for a run today"
-            onCheck={this._onCheck}/>
+            label="went for a run today"/>
         </div>
         <div className="switches-example-container">
           <Checkbox
diff --git a/src/js/checkbox.jsx b/src/js/checkbox.jsx
@@ -1,12 +1,13 @@
 var React = require('react');
 var Classable = require('./mixins/classable.js');
+var DomIdable = require('./mixins/dom-idable.js');
 var EnhancedSwitch = require('./enhanced-switch.jsx');
 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],
+  mixins: [Classable, DomIdable],
 
   propTypes: {
     id: React.PropTypes.string,
@@ -17,43 +18,52 @@ var Checkbox = React.createClass({
   },
 
   componentDidMount: function() {
-    this.setState({switched: this.refs.enhancedSwitch.isSwitched()});
+    this.setState({checked: this.refs.enhancedSwitch.isSwitched()});
   },
 
   getInitialState: function() {
     return {
-      switched: this.props.defaultChecked || this.props.checked
+      checked: this.props.defaultChecked || this.props.checked
     }
   },
 
   componentWillReceiveProps: function(nextProps) {
-    var hasCheckedProperty = nextProps.hasOwnProperty('checked');
-    var hasDifferentDefaultProperty = 
+    var hasCheckedLinkProp = nextProps.hasOwnProperty('checkedLink');
+    var hasCheckedProp = nextProps.hasOwnProperty('checked');
+    var hasNewDefaultProp = 
       (nextProps.hasOwnProperty('defaultChecked') && 
       (nextProps.defaultChecked != this.props.defaultChecked));
-
-    if (hasCheckedProperty) {
-      this.setState({switched: nextProps.checked});
-    } else if (hasDifferentDefaultProperty) {
-      this.setState({switched: nextProps.defaultChecked});
+    var newState = {};
+
+    if (hasCheckedProp) {
+      newState.checked = nextProps.checked;
+    } else if (hasCheckedLinkProp) {
+      newState.checked = nextProps.checkedLink.value;
+    } else if (hasNewDefaultProp) {
+      newState.checked = nextProps.defaultChecked;
     }
+
+    if (newState) this.setState(newState);
   },
 
   render: function() {
     var {
+      id,
       onCheck,
       ...other
     } = this.props;
 
     var classes = this.getClasses("mui-checkbox", {
       'mui-switch-wrap': true,
-      'mui-is-switched': this.state.switched,
+      'mui-is-switched': this.state.checked,
       'mui-is-disabled': this.props.disabled,
       'mui-is-required': this.props.required
     });
 
+    var inputId = this.props.id || this.getDomId();
+
     var labelElement = this.props.label ? (
-      <label className="mui-switch-label" htmlFor={this.props.id}>
+      <label className="mui-switch-label" htmlFor={inputId}>
         {this.props.label}
       </label>
     ) : null;
@@ -63,12 +73,13 @@ var Checkbox = React.createClass({
 
         <EnhancedSwitch 
           {...other}
+          id={inputId}
           ref="enhancedSwitch"
           inputType="checkbox"
           onSwitch={this._onCheck}
           defaultSwitched={this.props.defaultChecked} />
 
-       <div className="mui-checkbox-icon mui-switch">
+        <div className="mui-checkbox-icon mui-switch">
           <CheckboxOutline className="mui-checkbox-box" />
           <CheckboxChecked className="mui-checkbox-check" />
         </div>
@@ -80,7 +91,7 @@ var Checkbox = React.createClass({
   },
 
   _onCheck: function(e, isInputChecked) {
-    if (!this.props.hasOwnProperty('checked')) this.setState({switched: !this.refs.enhancedSwitch.state.switched});
+    if (!this.props.hasOwnProperty('checked')) this.setState({checked: !this.refs.enhancedSwitch.state.checked});
     if (this.props.onCheck) this.props.onCheck(e, isInputChecked);
   },
 
diff --git a/src/js/enhanced-switch.jsx b/src/js/enhanced-switch.jsx
@@ -14,11 +14,10 @@ var EnhancedSwitch = React.createClass({
 	    defaultSwitched: React.PropTypes.bool
 	  },
 
-  mixins: [Classable],
-
   getInitialState: function() {
     return {
-      switched: this.props.defaultSwitched || false
+      switched: this.props.defaultSwitched ||
+        (this.props.valueLink && this.props.valueLink.value)
     }
   },
 
@@ -28,28 +27,26 @@ var EnhancedSwitch = React.createClass({
   },
 
   componentWillReceiveProps: function(nextProps) {
-    var hasCheckedProperty = nextProps.hasOwnProperty('checked');
-    var hasDifferentDefaultProperty = 
+    var hasCheckedLinkProp = nextProps.hasOwnProperty('checkedLink');
+    var hasCheckedProp = nextProps.hasOwnProperty('checked');
+    var hasNewDefaultProp = 
       (nextProps.hasOwnProperty('defaultSwitched') && 
       (nextProps.defaultSwitched != this.props.defaultSwitched));
+    var newState = {};
 
-    if (hasCheckedProperty) {
-      this.setState({switched: nextProps.checked});
-    } else if (hasDifferentDefaultProperty) {
-      this.setState({switched: nextProps.defaultSwitched});
-    }
-  },
 
-  handleChange: function(e) {
-    var isInputChecked = this.refs.checkbox.getDOMNode().checked;
+    if (hasCheckedProp) {
+      newState.switched = nextProps.checked;
+    } else if (hasCheckedLinkProp) {
+      newState.switched = nextProps.checkedLink.value;
+    } else if (hasNewDefaultProp) {
+      newState.switched = nextProps.defaultSwitched;
+    }
 
-    if (!this.props.hasOwnProperty('checked')) this.setState({switched: isInputChecked});
-    if (this.props.onSwitch) this.props.onSwitch(e, isInputChecked);
+    if (newState) this.setState(newState);
   },
 
   render: function() {
-    var classes = this.getClasses("mui-enhanced-switch");
-
     var {
       type,
       name,
@@ -59,15 +56,24 @@ var EnhancedSwitch = React.createClass({
       ...other
     } = this.props;
 
+    var inputProps;
+
+    inputProps = {
+      ref: "checkbox",
+      type: this.props.inputType,
+      name: this.props.name,
+      value: this.props.value,
+    };
+
+    if (!this.props.hasOwnProperty('checkedLink')) {
+      inputProps.onChange = this._handleChange;
+    }
+
     return (
       <input 
-          {...other} 
-          ref="checkbox"
-          className={classes}
-          type={this.props.inputType}
-          name={this.props.name}
-          value={this.props.value}
-          onChange={this.handleChange} />
+        {...other} 
+        {...inputProps}
+        className="mui-enhanced-switch"/>
     );
   },
 
@@ -85,7 +91,19 @@ var EnhancedSwitch = React.createClass({
       var message = 'Cannot call set method while checked is defined as a property.';
       console.error(message);
     }
+  },
+
+  _handleChange: function(e) {
+    var isInputChecked = this.refs.checkbox.getDOMNode().checked;
+
+    if (!this.props.hasOwnProperty('checked')) this.setState({switched: isInputChecked});
+    if (this.props.onSwitch) this.props.onSwitch(e, isInputChecked);
+  },
+
+  getValue: function() {
+    return this.refs.checkbox.getDOMNode().value;
   }
+
 });
 
 module.exports = EnhancedSwitch;
diff --git a/src/js/radio-button-group.jsx b/src/js/radio-button-group.jsx
@@ -10,6 +10,7 @@ var RadioButtonGroup = React.createClass({
 
 	propTypes: {
 		name: React.PropTypes.string.isRequired,
+    valueSelected: React.PropTypes.string,
     defaultSelected: React.PropTypes.string,
 		onChange: React.PropTypes.func
 	},
@@ -20,19 +21,9 @@ var RadioButtonGroup = React.createClass({
   },
 
   getInitialState: function() {
-    var initialSelection = '';
-    
-    if (this.props.hasOwnProperty('defaultSelected')) {
-      initialSelection = this.props.defaultSelected;
-    } else {
-      this.props.children.forEach(function(option) {
-        if (this._hasCheckAttribute(option) || option.props.defaultChecked) initialSelection = option.props.value;
-      }, this);
-    }
-
     return {
       numberCheckedRadioButtons: 0,
-      selected: initialSelection
+      selected: this.props.valueSelected || this.props.defaultSelected || ''
     };
   },
 
@@ -47,21 +38,17 @@ var RadioButtonGroup = React.createClass({
   }, 
 
   componentWillReceiveProps: function(nextProps) {
-    var newSelection = '';
-    
-    nextProps.children.forEach(function(option) {
-      if (this._hasCheckAttribute(option) || option.props.defaultChecked) newSelection = option.props.value;
-    }, this);
-
-    this.setState({selected: newSelection});
+    if (nextProps.hasOwnProperty('valueSelected')) {
+      this.setState({selected: nextProps.valueSelected});
+    }
   },
 
 	render: function() {
     var options = this.props.children.map(function(option) {
       
       var {
         name,
-        value,
+        value, 
         label,
         onCheck,
         ...other
@@ -88,9 +75,7 @@ var RadioButtonGroup = React.createClass({
 
   _updateRadioButtons: function(newSelection) {
     if (this.state.numberCheckedRadioButtons == 0) {
-      
       this.setState({selected: newSelection});
-
     } else {
         var message = "Cannot select a different radio button while another radio button " + 
                       "has the 'checked' property set to true.";
@@ -113,7 +98,12 @@ var RadioButtonGroup = React.createClass({
 
   setSelectedValue: function(newSelection) {
     this._updateRadioButtons(newSelection);  
+  },
+
+  clearValue: function() {
+    this.setSelectedValue('');  
   }
+
 });
 
 module.exports = RadioButtonGroup;
diff --git a/src/js/radio-button.jsx b/src/js/radio-button.jsx
diff --git a/src/js/toggle.jsx b/src/js/toggle.jsx
