upgraded to support React 0.13, fixed impure rendering, replaced deprecated getDOMNode() with React.findDOMNode(), added example of controlled component without onChange property

Author: jedwards1211

example/bundle.js.map

@@ -17,6 +17,7 @@ var App = React.createClass({
       milkIsReady: false,
       eggsAreReady: false,
       burritoIsReady: false,
+      toastIsReady: false,
       formData: {}
     }
   },
@@ -46,6 +47,10 @@ var App = React.createClass({
     this.setState({burritoIsReady: event.target.checked})
   },
 
+  handleToastChange(event) {
+    this.setState({toastIsReady: event.target.checked})
+  },
+
   render() {
     return (
       <form ref="breakfastForm">
@@ -168,7 +173,7 @@ var App = React.createClass({
         <div className="example">
           <label>
             <Toggle
-              defaultChecked={this.state.milkIsReady}
+              defaultChecked={!!this.state.milkIsReady}
               name="milkIsReady"
               value="yes"
               onChange={this.handleMilkChange} />
@@ -213,6 +218,31 @@ var App = React.createClass({
             onChange={this.handleBurritoChange} />
         </div>
 
+        {/* Controlled Component without onChange */}
+
+        <div className="example">
+          <label>
+            <input
+              type="checkbox"
+              checked={this.state.toastIsReady}
+              name="toastIsReady2"
+              onChange={this.handleToastChange} />
+            <span className="label-text"> Controlled Component without onChange</span>
+          </label>
+
+          <pre>
+{`<Toggle
+  checked={this.state.toastIsReady}
+  name="toastIsReady"
+  value="yes" />`}
+          </pre>
+
+          <Toggle
+            checked={this.state.toastIsReady}
+            name="toastIsReady"
+            value="yes" />
+        </div>
+
         {/* Disabled */}
 
         <div className="example">

example/index.js

@@ -2,8 +2,13 @@ import React from 'react'
 import classNames from 'classnames'
 import Check from './check'
 import X from './x'
+import {addons} from 'react/addons'
+
+var PureRenderMixin = addons.PureRenderMixin;
 
 export default React.createClass({
+  mixins: [PureRenderMixin],
+
   displayName: 'Toggle',
 
   propTypes: {
@@ -18,20 +23,37 @@ export default React.createClass({
   },
 
   getInitialState() {
+    var checked = false;
+    if ('checked' in this.props) {
+      checked = this.props.checked
+    } else if ('defaultChecked' in this.props) {
+      checked = this.props.defaultChecked
+    }
     return {
+      checked: !!checked,
       hasFocus: false
     }
   },
 
+  componentWillReceiveProps(nextProps) {
+    if ('checked' in nextProps) {
+      this.setState({checked: !!nextProps.checked})
+    }
+  },
+
   handleClick(event) {
-    var checkbox = this.refs.input.getDOMNode()
-    var checkboxWasDirectlyClicked = event.target === checkbox
-    if(checkboxWasDirectlyClicked) {
+    var checkbox = React.findDOMNode(this.refs.input)
+    if (event.target !== checkbox)
+    {
+      event.preventDefault()
+      checkbox.focus()
+      checkbox.click()
       return
     }
-    event.preventDefault()
-    checkbox.click()
-    checkbox.focus()
+
+    if (!('checked' in this.props)) {
+      this.setState({checked: checkbox.checked})
+    }
   },
 
   handleFocus() {
@@ -42,19 +64,9 @@ export default React.createClass({
     this.setState({hasFocus: false})
   },
 
-  isChecked() {
-    if (this.props.checked != null) {
-      return this.props.checked
-    }
-    if (this.refs.input) {
-      return this.refs.input.getDOMNode().checked
-    }
-    return this.props.defaultChecked || false
-  },
-
   render() {
     var classes = classNames('react-toggle', {
-      'react-toggle--checked': this.isChecked(),
+      'react-toggle--checked': this.state.checked,
       'react-toggle--focus': this.state.hasFocus,
       'react-toggle--disabled': this.props.disabled
     })

index.es6.js

@@ -33,7 +33,7 @@ module.exports = React.createClass({
   },
 
   handleClick: function handleClick(event) {
-    var checkbox = React.findDOMNode(this.refs.input);
+    var checkbox = this.refs.input.getDOMNode();
     var checkboxWasDirectlyClicked = event.target === checkbox;
     if (checkboxWasDirectlyClicked) {
       return;
@@ -56,7 +56,7 @@ module.exports = React.createClass({
       return this.props.checked;
     }
     if (this.refs.input) {
-      return React.findDOMNode(this.refs.input).checked;
+      return this.refs.input.getDOMNode().checked;
     }
     return this.props.defaultChecked || false;
   },

index.js

@@ -30,7 +30,7 @@
     "babel-loader": "^4.2.0",
     "css-loader": "^0.9.1",
     "mocha": "^2.2.1",
-    "react": "^0.12.0",
+    "react": "^0.13.0",
     "style-loader": "^0.9.0",
     "webpack": "^1.7.3",
     "webpack-dev-server": "^1.7.0"

package.json

@@ -4,6 +4,7 @@ module.exports = {
   entry: {
     'example/bundle': './example/index'
   },
+  devtool: 'source-map',
 
   output: {
     path: '.',