Merge pull request #136 from noisecapella/master

Fixes programmatic handling of checkboxes

src/Checkbox.js

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import { findDOMNode } from 'react-dom';
 import classNames from 'classnames';
 import mdlUpgrade from './utils/mdlUpgrade';
 
@@ -11,6 +12,17 @@ class Checkbox extends React.Component {
         ripple: PropTypes.bool
     }
 
+    componentDidUpdate(prevProps) {
+        if(this.props.disabled !== prevProps.disabled) {
+            const fnName = this.props.disabled ? 'disable' : 'enable';
+            findDOMNode(this).MaterialCheckbox[fnName]();
+        }
+        if(this.props.checked !== prevProps.checked) {
+            const fnName = this.props.checked ? 'check' : 'uncheck';
+            findDOMNode(this).MaterialCheckbox[fnName]();
+        }
+    }
+
     render() {
         const { label, ripple, ...inputProps } = this.props;
 

src/__tests__/Checkbox-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 Checkbox from '../Checkbox';
 
 describe('Checkbox', () => {
@@ -65,4 +66,27 @@ describe('Checkbox', () => {
         expect(output.type).toBe('label');
         expect(output.props.className).toInclude('mdl-js-ripple-effect');
     });
+
+    describe('should update the Checkbox after the first render', () => {
+        it('when `checked` has changed', () => {
+            const el = renderDOM(<Checkbox />);
+
+            expect(el.className).toExclude('is-checked');
+
+            ReactDOM.render(<Checkbox checked />, el.parentNode);
+            expect(el.className).toInclude('is-checked');
+            ReactDOM.render(<Checkbox />, el.parentNode);
+            expect(el.className).toExclude('is-checked');
+        });
+
+        it('when `disable` has changed', () => {
+            const el = renderDOM(<Checkbox />);
+
+            expect(el.className).toExclude('is-disabled');
+            ReactDOM.render(<Checkbox disabled />, el.parentNode);
+            expect(el.className).toInclude('is-disabled');
+            ReactDOM.render(<Checkbox />, el.parentNode);
+            expect(el.className).toExclude('is-disabled');
+        });
+    });
 });