fixes Radio and IconToggle to update the checked/disabled state after the first render

Author: Tommy Leunen

src/IconToggle.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import { findDOMNode } from 'react-dom';
 import classNames from 'classnames';
 import Icon from './Icon';
 import mdlUpgrade from './utils/mdlUpgrade';
@@ -12,6 +13,18 @@ class IconToggle extends React.Component {
         onChange: PropTypes.func,
         ripple: PropTypes.bool
     }
+
+    componentDidUpdate(prevProps) {
+        if(this.props.disabled !== prevProps.disabled) {
+            const fnName = this.props.disabled ? 'disable' : 'enable';
+            findDOMNode(this).MaterialIconToggle[fnName]();
+        }
+        if(this.props.checked !== prevProps.checked) {
+            const fnName = this.props.checked ? 'check' : 'uncheck';
+            findDOMNode(this).MaterialIconToggle[fnName]();
+        }
+    }
+
     render() {
         const { className, name, ripple, ...inputProps } = this.props;
 

src/Radio.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import { findDOMNode } from 'react-dom';
 import classNames from 'classnames';
 import mdlUpgrade from './utils/mdlUpgrade';
 
@@ -16,6 +17,17 @@ class Radio extends React.Component {
         ]).isRequired
     };
 
+    componentDidUpdate(prevProps) {
+        if(this.props.disabled !== prevProps.disabled) {
+            const fnName = this.props.disabled ? 'disable' : 'enable';
+            findDOMNode(this).MaterialRadio[fnName]();
+        }
+        if(this.props.checked !== prevProps.checked) {
+            const fnName = this.props.checked ? 'check' : 'uncheck';
+            findDOMNode(this).MaterialRadio[fnName]();
+        }
+    }
+
     render() {
         const { children, className, name, ripple, value, ...inputProps } = this.props;
 

src/__tests__/IconToggle-test.js

@@ -1,7 +1,8 @@
 /* eslint-env mocha */
 import expect from 'expect';
 import React from 'react';
-import { render } from './render';
+import ReactDOM from 'react-dom';
+import { render, renderDOM } from './render';
 import IconToggle from '../IconToggle';
 import Icon from '../Icon';
 
@@ -62,4 +63,27 @@ describe('IconToggle', () => {
         expect(output.type).toBe('label');
         expect(output.props.className).toInclude('mdl-js-ripple-effect');
     });
+
+    describe('should update the IconToggle after the first render', () => {
+        it('when `checked` has changed', () => {
+            const el = renderDOM(<IconToggle name="add" />);
+
+            expect(el.className).toExclude('is-checked');
+
+            ReactDOM.render(<IconToggle name="add" checked />, el.parentNode);
+            expect(el.className).toInclude('is-checked');
+            ReactDOM.render(<IconToggle name="add" />, el.parentNode);
+            expect(el.className).toExclude('is-checked');
+        });
+
+        it('when `disable` has changed', () => {
+            const el = renderDOM(<IconToggle name="add" />);
+
+            expect(el.className).toExclude('is-disabled');
+            ReactDOM.render(<IconToggle name="add" disabled />, el.parentNode);
+            expect(el.className).toInclude('is-disabled');
+            ReactDOM.render(<IconToggle name="add" />, el.parentNode);
+            expect(el.className).toExclude('is-disabled');
+        });
+    });
 });

src/__tests__/Radio-test.js

@@ -1,7 +1,8 @@
 /* eslint-env mocha */
 import expect from 'expect';
 import React from 'react';
-import { render } from './render';
+import ReactDOM from 'react-dom';
+import { render, renderDOM } from './render';
 import Radio from '../Radio';
 
 describe('Radio', () => {
@@ -42,4 +43,27 @@ describe('Radio', () => {
         expect(label.props.className).toBe('mdl-radio__label');
         expect(label.props.children).toBe('My label');
     });
+
+    describe('should update the Radio after the first render', () => {
+        it('when `checked` has changed', () => {
+            const el = renderDOM(<Radio />);
+
+            expect(el.className).toExclude('is-checked');
+
+            ReactDOM.render(<Radio checked />, el.parentNode);
+            expect(el.className).toInclude('is-checked');
+            ReactDOM.render(<Radio />, el.parentNode);
+            expect(el.className).toExclude('is-checked');
+        });
+
+        it('when `disable` has changed', () => {
+            const el = renderDOM(<Radio />);
+
+            expect(el.className).toExclude('is-disabled');
+            ReactDOM.render(<Radio disabled />, el.parentNode);
+            expect(el.className).toInclude('is-disabled');
+            ReactDOM.render(<Radio />, el.parentNode);
+            expect(el.className).toExclude('is-disabled');
+        });
+    });
 });