Merge pull request #3941 from nathanmarks/react-15

[Core] Update to React v15
mui · Apr 13, 2016 · dd13e64 · dd13e64
2 parents 8492985 + 9d3f3a5
commit dd13e64
Show file tree

Hide file tree

Showing 17 changed files with 60 additions and 55 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -38,16 +38,16 @@
     "json-loader": "^0.5.4",
     "marked": "^0.3.5",
     "raw-loader": "^0.5.1",
-    "react-addons-perf": "^0.14.0",
-    "react-addons-pure-render-mixin": "^0.14.0",
+    "react-addons-perf": "^15.0.1",
+    "react-addons-pure-render-mixin": "^15.0.1",
     "react-docgen": "^2.4.0",
     "react-hot-loader": "^1.2.8",
     "react-motion": "^0.4.2",
     "react-native": "^0.17.0",
     "react-router": "^2.0.0",
-    "react-swipeable-views": "^0.4.0",
-    "recast": "^0.10.41",
-    "style-loader": "0.13.0",
+    "react-swipeable-views": "^0.5.0",
+    "recast": "^0.11.4",
+    "style-loader": "0.13.1",
     "transfer-webpack-plugin": "^0.1.4",
     "webpack": "^1.11.0",
     "webpack-dev-server": "^1.10.1"

diff --git a/docs/src/app/components/CodeExample/index.js b/docs/src/app/components/CodeExample/index.js
@@ -8,11 +8,16 @@ class CodeExample extends React.Component {
   static propTypes = {
     children: React.PropTypes.node,
     code: React.PropTypes.string.isRequired,
+    component: React.PropTypes.bool,
     description: React.PropTypes.string,
     layoutSideBySide: React.PropTypes.bool,
     title: React.PropTypes.string,
   };
 
+  static defaultProps = {
+    component: true,
+  };
+
   static contextTypes = {
     muiTheme: React.PropTypes.object,
   };
@@ -21,6 +26,7 @@ class CodeExample extends React.Component {
     const {
       children,
       code,
+      component,
       layoutSideBySide,
     } = this.props;
 
@@ -41,7 +47,7 @@ class CodeExample extends React.Component {
       },
     };
 
-    const docs = parse(code);
+    const docs = component ? parse(code) : {};
 
     return (
       <Paper style={styles.root}>

diff --git a/docs/src/app/components/pages/components/DatePicker/ExampleToggle.js b/docs/src/app/components/pages/components/DatePicker/ExampleToggle.js
@@ -59,26 +59,26 @@ export default class DatePickerExampleToggle extends React.Component {
         <div style={optionsStyle}>
           <TextField
             floatingLabelText="Min Date"
-            defaultValue={this.state.minDate.toDateString()}
+            value={this.state.minDate.toDateString()}
             onChange={this.handleChangeMinDate}
           />
           <TextField
             floatingLabelText="Max Date"
-            defaultValue={this.state.maxDate.toDateString()}
+            value={this.state.maxDate.toDateString()}
             onChange={this.handleChangeMaxDate}
           />
           <Toggle
             name="autoOk"
             value="autoOk"
             label="Auto Accept"
-            defaultToggled={this.state.autoOk}
+            toggled={this.state.autoOk}
             onToggle={this.handleToggle}
           />
           <Toggle
             name="disableYearSelection"
             value="disableYearSelection"
             label="Disable Year Selection"
-            defaultToggled={this.state.disableYearSelection}
+            toggled={this.state.disableYearSelection}
             onToggle={this.handleToggle}
           />
         </div>

diff --git a/docs/src/app/components/pages/components/Snackbar/ExampleAction.js b/docs/src/app/components/pages/components/Snackbar/ExampleAction.js
@@ -65,5 +65,3 @@ export default class SnackbarExampleSimple extends React.Component {
     );
   }
 }
-
-export default SnackbarExampleSimple;
diff --git a/docs/src/app/components/pages/components/Snackbar/ExampleSimple.js b/docs/src/app/components/pages/components/Snackbar/ExampleSimple.js
@@ -40,5 +40,3 @@ export default class SnackbarExampleSimple extends React.Component {
     );
   }
 }
-
-export default SnackbarExampleSimple;
diff --git a/docs/src/app/components/pages/components/Snackbar/ExampleTwice.js b/docs/src/app/components/pages/components/Snackbar/ExampleTwice.js
@@ -53,5 +53,3 @@ export default class SnackbarExampleTwice extends React.Component {
     );
   }
 }
-
-export default SnackbarExampleTwice;
diff --git a/docs/src/app/components/pages/customization/Colors.js b/docs/src/app/components/pages/customization/Colors.js
@@ -39,7 +39,7 @@ const ColorsPage = React.createClass({
         lineHeight: '32px',
         paddingTop: 16,
         marginBottom: 12,
-        letterSpacing: '0',
+        letterSpacing: 0,
         fontWeight: typography.fontWeightNormal,
         color: typography.textDarkBlack,
       },

diff --git a/docs/src/app/components/pages/customization/InlineStyles.js b/docs/src/app/components/pages/customization/InlineStyles.js
@@ -12,7 +12,7 @@ class InlineStyles extends React.Component {
         lineHeight: '32px',
         paddingTop: 16,
         marginBottom: 12,
-        letterSpacing: '0',
+        letterSpacing: 0,
         fontWeight: typography.fontWeightNormal,
         color: typography.textDarkBlack,
       },
@@ -21,7 +21,7 @@ class InlineStyles extends React.Component {
         lineHeight: '28px',
         paddingTop: 19,
         marginBottom: 13,
-        letterSpacing: '0',
+        letterSpacing: 0,
         fontWeight: typography.fontWeightMedium,
         color: typography.textDarkBlack,
       },
@@ -73,7 +73,7 @@ class InlineStyles extends React.Component {
         </p>
 
         <h3 style={styles.title}>Overriding Inline Styles</h3>
-        <CodeExample code={codeOverrideStyles}>
+        <CodeExample code={codeOverrideStyles} component={false}>
           <Checkbox
             id="checkboxId1"
             name="checkboxName1"
@@ -102,7 +102,7 @@ class InlineStyles extends React.Component {
         </p>
 
         <h3 style={styles.title}>Mixing Inline and CSS Styles</h3>
-        <CodeExample code={codeMixStyles}>
+        <CodeExample code={codeMixStyles} component={false}>
           <Checkbox
             id="checkboxId1"
             name="checkboxName1"

diff --git a/docs/src/app/components/pages/customization/Themes.js b/docs/src/app/components/pages/customization/Themes.js
@@ -168,7 +168,6 @@ const ThemesPage = React.createClass({
               <RadioButton
                 value="euro"
                 label="Euro"
-                defaultChecked={true}
               />
               <RadioButton
                 value="mxn"
@@ -180,12 +179,10 @@ const ThemesPage = React.createClass({
           <div style={styles.container}>
             <Toggle
               name="toggleName1"
-              value="toggleValue1"
               label="toggle"
             />
             <Toggle
               name="toggleName2"
-              value="toggleValue2"
               label="disabled toggle"
               defaultToggled={true}
               disabled={true}

diff --git a/examples/browserify-gulp-example/package.json b/examples/browserify-gulp-example/package.json
@@ -31,8 +31,8 @@
   },
   "dependencies": {
     "material-ui": "^0.15.0-alpha.2",
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0",
-    "react-tap-event-plugin": "^0.2.1"
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1",
+    "react-tap-event-plugin": "^1.0.0"
   }
 }
diff --git a/examples/webpack-example/package.json b/examples/webpack-example/package.json
@@ -28,8 +28,8 @@
   },
   "dependencies": {
     "material-ui": "^0.15.0-alpha.2",
-    "react": "^0.14.3",
-    "react-dom": "^0.14.3",
-    "react-tap-event-plugin": "^0.2.1"
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1",
+    "react-tap-event-plugin": "^1.0.0"
   }
 }
diff --git a/package.json b/package.json
@@ -39,20 +39,20 @@
     "test:unit:coverage": "babel-node node_modules/.bin/isparta cover --report lcovonly --include-all-sources --dir test/coverage/unit test/unit.js"
   },
   "peerDependencies": {
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0",
-    "react-tap-event-plugin": "^0.2.0"
+    "react": "^15.0.0",
+    "react-dom": "^15.0.0",
+    "react-tap-event-plugin": "^1.0.0"
   },
   "dependencies": {
     "inline-style-prefixer": "^1.0.2",
     "keycode": "^2.1.0",
     "lodash.merge": "^4.1.0",
     "lodash.throttle": "^4.0.0",
-    "react-addons-create-fragment": "^0.14.0",
-    "react-addons-transition-group": "^0.14.0",
-    "react-addons-update": "^0.14.0",
+    "react-addons-create-fragment": "^15.0.0",
+    "react-addons-transition-group": "^15.0.0",
+    "react-addons-update": "^15.0.0",
     "react-event-listener": "^0.1.1",
-    "recompose": "^0.15.0",
+    "recompose": "^0.17.0",
     "simple-assign": "^0.1.0",
     "warning": "^2.1.0"
   },
@@ -97,11 +97,11 @@
     "mocha": "^2.4.5",
     "nodemon": "^1.9.1",
     "phantomjs-prebuilt": "^2.1.6",
-    "react": "^0.14.0",
-    "react-addons-test-utils": "^0.14.7",
-    "react-dom": "^0.14.7",
+    "react": "^15.0.0",
+    "react-addons-test-utils": "^15.0.0",
+    "react-dom": "^15.0.0",
     "react-hot-loader": "^1.3.0",
-    "react-tap-event-plugin": "^0.2.0",
+    "react-tap-event-plugin": "^1.0.0",
     "recursive-readdir-sync": "^1.0.6",
     "rimraf": "^2.4.3",
     "sinon": "^1.17.3",

diff --git a/src/Checkbox/Checkbox.js b/src/Checkbox/Checkbox.js
@@ -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,
 
@@ -129,7 +132,6 @@ class Checkbox extends React.Component {
   };
 
   static defaultProps = {
-    defaultChecked: false,
     labelPosition: 'right',
     disabled: false,
   };
@@ -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,
     };
 

diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js
@@ -311,7 +311,7 @@ class DatePicker extends React.Component {
           {...other}
           style={textFieldStyle}
           ref="input"
-          value={this.state.date ? formatDate(this.state.date) : undefined}
+          value={this.state.date ? formatDate(this.state.date) : ''}
           onFocus={this.handleFocus}
           onTouchTap={this.handleTouchTap}
         />

diff --git a/src/Toggle/Toggle.js b/src/Toggle/Toggle.js
@@ -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,
 
@@ -182,7 +185,9 @@ class Toggle extends React.Component {
 
   render() {
     const {
+      defaultToggled,
       onToggle, // eslint-disable-line no-unused-vars
+      toggled,
       ...other,
     } = this.props;
 
@@ -204,7 +209,7 @@ class Toggle extends React.Component {
     );
 
     if (this.state.switched) {
-      thumbStyles.marginLeft = `-${thumbStyles.width}`;
+      thumbStyles.marginLeft = 0 - thumbStyles.width;
     }
 
     const toggleElementStyles = Object.assign({},
@@ -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

diff --git a/src/internal/EnhancedSwitch.js b/src/internal/EnhancedSwitch.js
@@ -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,
@@ -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 || false;
 
       this.setState({
         switched: switched,
@@ -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
@@ -272,6 +271,7 @@ class EnhancedSwitch extends React.Component {
       className,
       rippleStyle,
       style,
+      switched, // eslint-disable-line no-unused-vars
       switchElement,
       thumbStyle,
       trackStyle,
@@ -331,7 +331,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}

diff --git a/test/browser/checkbox-spec.js b/test/browser/checkbox-spec.js
@@ -20,7 +20,7 @@ describe('Checkbox', () => {
     const svgs = TestUtils.scryRenderedDOMComponentsWithTag(render, 'svg');
     const checkMarkNode = svgs[1];
 
-    expect(input.hasAttribute('checked')).to.be.true;
+    expect(input.checked).to.be.true;
     expect(checkMarkNode.style.opacity).to.equal('1');
     expect(checkMarkNode.firstChild.getAttribute('d')).to.equal(CHECKMARK_PATH);
   });
@@ -32,7 +32,7 @@ describe('Checkbox', () => {
     const svgs = TestUtils.scryRenderedDOMComponentsWithTag(render, 'svg');
     const checkMarkNode = svgs[1];
 
-    expect(input.hasAttribute('checked')).to.be.false;
+    expect(input.checked).to.be.false;
     expect(checkMarkNode.style.opacity).to.equal('0');
     expect(checkMarkNode.firstChild.getAttribute('d')).to.equal(CHECKMARK_PATH);
   });
-Original file line number
+Diff line change
@@ Expand Up @@
         );
       }
     }
-    export default SnackbarExampleSimple;