Skip to content

Commit

Permalink
[EnhancedSwitch] Adjust the way defaultChecked is passed to prevent f…
Browse files Browse the repository at this point in the history
…iring react warnings in v15 RE controlled inputs
  • Loading branch information
nathanmarks committed Apr 11, 2016
1 parent cc645ea commit c375fb6
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 10 deletions.
5 changes: 3 additions & 2 deletions src/Checkbox/Checkbox.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,9 @@ class Checkbox extends React.Component {

/**
* The default state of our checkbox component.
* **Warning:** This cannot be used in conjunction with `checked`.
* Decide between using a controlled or uncontrolled input element and remove one of these props.
* More info: https://fb.me/react-controlled-components
*/
defaultChecked: React.PropTypes.bool,

Expand Down Expand Up @@ -129,7 +132,6 @@ class Checkbox extends React.Component {
};

static defaultProps = {
defaultChecked: false,
labelPosition: 'right',
disabled: false,
};
Expand Down Expand Up @@ -232,7 +234,6 @@ class Checkbox extends React.Component {
onSwitch: this.handleCheck,
labelStyle: labelStyle,
onParentShouldUpdate: this.handleStateChange,
defaultSwitched: this.props.defaultChecked,
labelPosition: this.props.labelPosition,
};

Expand Down
12 changes: 10 additions & 2 deletions src/Toggle/Toggle.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,9 @@ class Toggle extends React.Component {
static propTypes = {
/**
* Determines whether the Toggle is initially turned on.
* **Warning:** This cannot be used in conjunction with `toggled`.
* Decide between using a controlled or uncontrolled input element and remove one of these props.
* More info: https://fb.me/react-controlled-components
*/
defaultToggled: React.PropTypes.bool,

Expand Down Expand Up @@ -182,7 +185,9 @@ class Toggle extends React.Component {

render() {
const {
defaultToggled,
onToggle, // eslint-disable-line no-unused-vars
toggled,
...other,
} = this.props;

Expand Down Expand Up @@ -247,11 +252,14 @@ class Toggle extends React.Component {
switched: this.state.switched,
onSwitch: this.handleToggle,
onParentShouldUpdate: this.handleStateChange,
defaultSwitched: this.props.defaultToggled,
labelPosition: this.props.labelPosition,
};

if (this.props.hasOwnProperty('toggled')) enhancedSwitchProps.checked = this.props.toggled;
if (this.props.hasOwnProperty('toggled')) {
enhancedSwitchProps.checked = toggled;
} else if (this.props.hasOwnProperty('defaultToggled')) {
enhancedSwitchProps.defaultChecked = defaultToggled;
}

return (
<EnhancedSwitch
Expand Down
10 changes: 4 additions & 6 deletions src/internal/EnhancedSwitch.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ class EnhancedSwitch extends React.Component {
static propTypes = {
checked: React.PropTypes.bool,
className: React.PropTypes.string,
defaultSwitched: React.PropTypes.bool,
defaultChecked: React.PropTypes.bool,
disableFocusRipple: React.PropTypes.bool,
disableTouchRipple: React.PropTypes.bool,
disabled: React.PropTypes.bool,
Expand Down Expand Up @@ -121,11 +121,11 @@ class EnhancedSwitch extends React.Component {
const hasCheckedProp = nextProps.hasOwnProperty('checked');
const hasToggledProp = nextProps.hasOwnProperty('toggled');
const hasNewDefaultProp =
(nextProps.hasOwnProperty('defaultSwitched') &&
(nextProps.defaultSwitched !== this.props.defaultSwitched));
(nextProps.hasOwnProperty('defaultChecked') &&
(nextProps.defaultChecked !== this.props.defaultChecked));

if (hasCheckedProp || hasToggledProp || hasNewDefaultProp) {
const switched = nextProps.checked || nextProps.toggled || nextProps.defaultSwitched;
const switched = nextProps.checked || nextProps.toggled || nextProps.defaultChecked;

this.setState({
switched: switched,
Expand Down Expand Up @@ -258,7 +258,6 @@ class EnhancedSwitch extends React.Component {
labelStyle,
labelPosition,
onSwitch, // eslint-disable-line no-unused-vars
defaultSwitched,
onBlur, // eslint-disable-line no-unused-vars
onFocus, // eslint-disable-line no-unused-vars
onMouseUp, // eslint-disable-line no-unused-vars
Expand Down Expand Up @@ -331,7 +330,6 @@ class EnhancedSwitch extends React.Component {
style={prepareStyles(Object.assign(styles.input, inputStyle))}
name={name}
value={value}
defaultChecked={defaultSwitched}
disabled={disabled}
onBlur={this.handleBlur}
onFocus={this.handleFocus}
Expand Down

0 comments on commit c375fb6

Please sign in to comment.