Merge pull request #7083 from code-dot-org/react-14

Update React from 0.13.1 to 0.14.7
code-dot-org · Mar 3, 2016 · 64c04ab · 64c04ab
2 parents e1d5d1a + 2f5d672
commit 64c04ab
Show file tree

Hide file tree

Showing 51 changed files with 105 additions and 92 deletions.
diff --git a/apps/Gruntfile.js b/apps/Gruntfile.js
@@ -475,6 +475,7 @@ module.exports = function (grunt) {
         $: true,
         jQuery: true,
         React: true,
+        ReactDOM: true,
         Blockly: true,
         Phaser: true,
         //TODO: Eliminate the globals below here. Could at least warn about them

diff --git a/apps/package.json b/apps/package.json
@@ -77,8 +77,9 @@
     "node-sass": "1.2.2",
     "npm-which": "2.0.0",
     "phantomjs-prebuilt": "^2.1.3",
-    "react": "0.13.3",
-    "react-tools": "0.13.3",
+    "react": "0.14.7",
+    "react-addons-test-utils": "0.14.7",
+    "react-dom": "0.14.7",
     "require-globify": "1.2.1",
     "rgbcolor": "0.0.4",
     "sanitize-html": "^1.11.3",

diff --git a/apps/src/StudioApp.js b/apps/src/StudioApp.js
@@ -496,7 +496,7 @@ StudioApp.prototype.init = function(config) {
         defaultBtnSelector: 'again-button',
         id: 'showVersionsModal'
       });
-      React.render(React.createElement(VersionHistory, {
+      ReactDOM.render(React.createElement(VersionHistory, {
         handleClearPuzzle: this.handleClearPuzzle.bind(this, config)
       }), codeDiv);
 
@@ -734,7 +734,7 @@ StudioApp.prototype.renderShareFooter_ = function(container) {
     phoneFooter: true
   };
 
-  React.render(React.createElement(window.dashboard.SmallFooter, reactProps),
+  ReactDOM.render(React.createElement(window.dashboard.SmallFooter, reactProps),
     footerDiv);
 };
 
@@ -1075,7 +1075,7 @@ StudioApp.prototype.showInstructions_ = function(level, autoClose, showHints) {
   // Now that our elements are guaranteed to be in the DOM, we can
   // render in our react components
   $(this.instructionsDialog.div).on('show.bs.modal', function () {
-    React.render(instructionsContent, instructionsReactContainer);
+    ReactDOM.render(instructionsContent, instructionsReactContainer);
   });
 
   if (autoClose) {
@@ -1728,7 +1728,7 @@ StudioApp.prototype.handleHideSource_ = function (options) {
 
         var div = document.createElement('div');
         document.body.appendChild(div);
-        React.render(React.createElement(WireframeSendToPhone, {
+        ReactDOM.render(React.createElement(WireframeSendToPhone, {
           channelId: dashboard.project.getCurrentId(),
           appType: dashboard.project.getStandaloneApp()
         }), div);
@@ -2368,7 +2368,7 @@ StudioApp.prototype.displayAlert = function (parentSelector, props) {
   }, props);
 
   var element = React.createElement(Alert, reactProps);
-  React.render(element, container[0]);
+  ReactDOM.render(element, container[0]);
 };
 
 /**

diff --git a/apps/src/applab/DesignToolboxElement.jsx b/apps/src/applab/DesignToolboxElement.jsx
@@ -54,7 +54,7 @@ module.exports = React.createClass({
    * Create a draggable item as we drag an item from the toolbox.
    */
   makeDraggable: function () {
-    $(this.getDOMNode()).find('.new-design-element').draggable({
+    $(ReactDOM.findDOMNode(this)).find('.new-design-element').draggable({
       // Create an item (without an id) for dragging that looks identical to the
       // element that will ultimately be dropped. Note, this item has no
       // containment, and doesn't snap to a grid as we drag (but does on drop)

diff --git a/apps/src/applab/applab.js b/apps/src/applab/applab.js
@@ -382,7 +382,7 @@ function renderFooterInSharedGame() {
     });
   }
 
-  React.render(React.createElement(window.dashboard.SmallFooter,{
+  ReactDOM.render(React.createElement(window.dashboard.SmallFooter,{
     i18nDropdown: '',
     copyrightInBase: false,
     copyrightStrings: copyrightStrings,
@@ -551,7 +551,7 @@ Applab.startSharedAppAfterWarnings = function () {
 
   var modal = document.createElement('div');
   document.body.appendChild(modal);
-  return React.render(React.createElement(ShareWarningsDialog, {
+  return ReactDOM.render(React.createElement(ShareWarningsDialog, {
     showStoreDataAlert: showStoreDataAlert,
     is13Plus: is13Plus,
     handleClose: function () {
@@ -907,7 +907,7 @@ Applab.render = function () {
     onScreenChange: designMode.changeScreen,
     onScreenCreate: designMode.createScreen
   });
-  React.render(React.createElement(AppLabView, nextProps), Applab.reactMountPoint_);
+  ReactDOM.render(React.createElement(AppLabView, nextProps), Applab.reactMountPoint_);
 };
 
 /**

diff --git a/apps/src/applab/designElements/ColorPickerPropertyRow.jsx b/apps/src/applab/designElements/ColorPickerPropertyRow.jsx
@@ -28,8 +28,7 @@ var ColorPickerPropertyRow = React.createClass({
    * Make our button a colpick color picker, if it isn't already
    */
   ensureColorPicker: function () {
-    var element = React.findDOMNode(this.refs.colorPicker);
-    $(element).colpick({
+    $(this.refs.colorPicker).colpick({
       color: this.state.value,
     	layout: 'rgbhex',
     	submit: 0,

diff --git a/apps/src/applab/designMode.js b/apps/src/applab/designMode.js
@@ -875,7 +875,7 @@ designMode.renderDesignWorkspace = function(element) {
     handleManageAssets: showAssetManager,
     isDimmed: Applab.running
   };
-  React.render(React.createElement(DesignWorkspace, props), designWorkspace);
+  ReactDOM.render(React.createElement(DesignWorkspace, props), designWorkspace);
 };
 
 /**

diff --git a/apps/src/assetManagement/AssetUploader.jsx b/apps/src/assetManagement/AssetUploader.jsx
@@ -14,7 +14,7 @@ module.exports = React.createClass({
   componentDidMount: function () {
     var props = this.props;
 
-    $(React.findDOMNode(this.refs.uploader)).fileupload({
+    $(this.refs.uploader).fileupload({
       dataType: 'json',
       url: '/v3/assets/' + props.channelId + '/',
       // prevent fileupload from replacing the input DOM element, which
@@ -34,16 +34,15 @@ module.exports = React.createClass({
   },
 
   componentWillUnmount: function () {
-    $(React.findDOMNode(this.refs.uploader)).fileupload('destroy');
+    $(this.refs.uploader).fileupload('destroy');
   },
 
   /**
    * We've hidden the <input type="file"/> and replaced it with a big button.
    * Forward clicks on the button to the hidden file input.
    */
   fileUploadClicked: function () {
-    var uploader = React.findDOMNode(this.refs.uploader);
-    uploader.click();
+    this.refs.uploader.click();
   },
 
   render: function () {

diff --git a/apps/src/assetManagement/show.js b/apps/src/assetManagement/show.js
@@ -19,7 +19,7 @@ module.exports = function(assetChosen, typeFilter) {
     defaultBtnSelector: 'again-button',
     id: 'manageAssetsModal'
   });
-  React.render(React.createElement(AssetManager, {
+  ReactDOM.render(React.createElement(AssetManager, {
     typeFilter: typeFilter,
     channelId: dashboard.project.getCurrentId(),
     uploadsEnabled: !dashboard.project.exceedsAbuseThreshold(),

diff --git a/apps/src/authoredHints.js b/apps/src/authoredHints.js
@@ -251,7 +251,7 @@ AuthoredHints.prototype.showHint_ = function (hint, callback) {
           }.bind(this),
         });
 
-        React.render(element, container);
+        ReactDOM.render(element, container);
 
         return container;
       }.bind(this),

diff --git a/apps/src/bounce/bounce.js b/apps/src/bounce/bounce.js
@@ -805,7 +805,7 @@ Bounce.init = function(config) {
     dom.addClickTouchEvent(finishButton, Bounce.onPuzzleComplete);
   };
 
-  React.render(React.createElement(AppView, {
+  ReactDOM.render(React.createElement(AppView, {
     assetUrl: studioApp.assetUrl,
     isEmbedView: !!config.embed,
     isShareView: !!config.share,

diff --git a/apps/src/calc/calc.js b/apps/src/calc/calc.js
@@ -227,7 +227,7 @@ Calc.init = function(config) {
     });
   };
 
-  React.render(React.createElement(AppView, {
+  ReactDOM.render(React.createElement(AppView, {
     assetUrl: studioApp.assetUrl,
     isEmbedView: !!config.embed,
     isShareView: !!config.share,

diff --git a/apps/src/craft/craft.js b/apps/src/craft/craft.js
@@ -334,7 +334,7 @@ Craft.init = function (config) {
     }
   };
 
-  React.render(React.createElement(AppView, {
+  ReactDOM.render(React.createElement(AppView, {
     assetUrl: studioApp.assetUrl,
     isEmbedView: !!config.embed,
     isShareView: !!config.share,

diff --git a/apps/src/eval/eval.js b/apps/src/eval/eval.js
@@ -173,7 +173,7 @@ Eval.init = function(config) {
     });
   };
 
-  React.render(React.createElement(AppView, {
+  ReactDOM.render(React.createElement(AppView, {
     assetUrl: studioApp.assetUrl,
     isEmbedView: !!config.embed,
     isShareView: !!config.share,

diff --git a/apps/src/flappy/flappy.js b/apps/src/flappy/flappy.js
@@ -607,7 +607,7 @@ Flappy.init = function(config) {
     dom.addClickTouchEvent(rightButton, Flappy.onPuzzleComplete);
   };
 
-  React.render(React.createElement(AppView, {
+  ReactDOM.render(React.createElement(AppView, {
     assetUrl: studioApp.assetUrl,
     isEmbedView: !!config.embed,
     isShareView: !!config.share,

diff --git a/apps/src/gamelab/GameLab.js b/apps/src/gamelab/GameLab.js
@@ -154,7 +154,7 @@ GameLab.prototype.init = function (config) {
     });
   }.bind(this);
 
-  React.render(React.createElement(AppView, {
+  ReactDOM.render(React.createElement(AppView, {
     assetUrl: this.studioApp_.assetUrl,
     isEmbedView: !!config.embed,
     isShareView: !!config.share,

diff --git a/apps/src/jigsaw/jigsaw.js b/apps/src/jigsaw/jigsaw.js
@@ -186,7 +186,7 @@ Jigsaw.init = function(config) {
     }
   };
 
-  React.render(React.createElement(AppView, {
+  ReactDOM.render(React.createElement(AppView, {
     assetUrl: studioApp.assetUrl,
     isEmbedView: !!config.embed,
     isShareView: !!config.share,

diff --git a/apps/src/maze/maze.js b/apps/src/maze/maze.js
@@ -644,7 +644,7 @@ Maze.init = function(config) {
     });
   };
 
-  React.render(React.createElement(AppView, {
+  ReactDOM.render(React.createElement(AppView, {
     assetUrl: studioApp.assetUrl,
     isEmbedView: !!config.embed,
     isShareView: !!config.share,

diff --git a/apps/src/netsim/netsim.js b/apps/src/netsim/netsim.js
@@ -257,7 +257,7 @@ NetSim.prototype.init = function(config) {
     this.runLoop_.begin();
   }.bind(this);
 
-  React.render(React.createElement(NetSimView, {
+  ReactDOM.render(React.createElement(NetSimView, {
     assetUrl: this.studioApp_.assetUrl,
     isEmbedView: !!config.embed,
     isShareView: !!config.share,

diff --git a/apps/src/studio/studio.js b/apps/src/studio/studio.js
@@ -2005,7 +2005,7 @@ Studio.init = function(config) {
     }
   };
 
-  React.render(React.createElement(AppView, {
+  ReactDOM.render(React.createElement(AppView, {
     assetUrl: studioApp.assetUrl,
     isEmbedView: !!config.embed,
     isShareView: !!config.share,

diff --git a/apps/src/templates/Hint.jsx b/apps/src/templates/Hint.jsx
@@ -8,7 +8,7 @@ module.exports = React.createClass({
    * @see HintsDisplay.injectBlocklyHint
    */
   injectBlocklyHint: function () {
-    var node = React.findDOMNode(this.refs.hintBlock);
+    var node = this.refs.hintBlock;
     // Only render if the node exists in the DOM
     if (node && document.body.contains(node)) {
       Blockly.BlockSpace.createReadOnlyBlockSpace(node, this.props.hint.block);

diff --git a/apps/src/templates/HintSelect.jsx b/apps/src/templates/HintSelect.jsx
@@ -1,6 +1,6 @@
 var msg = require('../locale');
 
-module.exports = React.createClass({
+var HintSelect = React.createClass({
   propTypes: {
     showInstructions: React.PropTypes.func.isRequired,
     showHint: React.PropTypes.func.isRequired
@@ -15,3 +15,4 @@ module.exports = React.createClass({
     );
   }
 });
+module.exports = HintSelect;
diff --git a/apps/src/templates/HintsDisplay.jsx b/apps/src/templates/HintsDisplay.jsx
@@ -11,7 +11,7 @@ var Hint = require('./Hint.jsx');
  * Closing the instructions and re-opening them will reset this
  * Component, allowing the button to be pressed once more.
  */
-module.exports = React.createClass({
+var HintsDisplay = React.createClass({
 
   propTypes: {
     hintReviewTitle: React.PropTypes.string.isRequired,
@@ -71,10 +71,10 @@ module.exports = React.createClass({
     var seenHints;
     if (hintsToShow && hintsToShow.length) {
       seenHints = [
-          <h1>{ this.props.hintReviewTitle }</h1>,
-          <ul>
+          <h1 key="hint-review-title">{ this.props.hintReviewTitle }</h1>,
+          <ul key="hints-to-show">
             {hintsToShow.map(function (hint) {
-              return <Hint hint={hint} ref={hint.hintId} />;
+              return <Hint hint={hint} key={hint.hintId} ref={hint.hintId} />;
             })}
           </ul>
       ];
@@ -98,3 +98,4 @@ module.exports = React.createClass({
     );
   }
 });
+module.exports = HintsDisplay;
diff --git a/apps/src/templates/Instructions.jsx b/apps/src/templates/Instructions.jsx
@@ -1,4 +1,4 @@
-module.exports = React.createClass({
+var Instructions = React.createClass({
 
   propTypes: {
     puzzleTitle: React.PropTypes.string,
@@ -38,14 +38,14 @@ module.exports = React.createClass({
         dangerouslySetInnerHTML={{ __html: this.props.renderedMarkdown }}
       />);
     } else {
-      body = [<p className='dialog-title'>{ this.props.puzzleTitle }</p>];
+      body = [<p key='dialog-title' className='dialog-title'>{ this.props.puzzleTitle }</p>];
 
       if (this.props.instructions) {
-        body.push(<p dangerouslySetInnerHTML={{ __html: this.props.instructions }}/>);
+        body.push(<p key='instructions-1' dangerouslySetInnerHTML={{ __html: this.props.instructions }}/>);
       }
 
       if (this.props.instructions2) {
-        body.push(<p className='instructions2' dangerouslySetInnerHTML={{ __html: this.props.instructions2 }}/>);
+        body.push(<p key='instructions-2' className='instructions2' dangerouslySetInnerHTML={{ __html: this.props.instructions2 }}/>);
       }
     }
 
@@ -63,3 +63,4 @@ module.exports = React.createClass({
     );
   }
 });
+module.exports = Instructions;
diff --git a/apps/src/templates/ProtectedStatefulDiv.jsx b/apps/src/templates/ProtectedStatefulDiv.jsx
@@ -19,7 +19,7 @@ var ProtectedStatefulDiv = React.createClass({
 
   componentDidMount: function () {
     if (typeof this.props.renderContents === 'function') {
-      this.refs.root.getDOMNode().innerHTML = this.props.renderContents();
+      this.refs.root.innerHTML = this.props.renderContents();
     }
   },
 

diff --git a/apps/src/templates/ShareWarnings.jsx b/apps/src/templates/ShareWarnings.jsx
@@ -22,7 +22,7 @@ var SharingWarnings = module.exports = React.createClass({
       return;
     }
 
-    var ageElement = React.findDOMNode(this.refs.age);
+    var ageElement = ReactDOM.findDOMNode(this.refs.age);
     if (ageElement.value === '') {
       // ignore close if we haven't selected a value from dropdown
       return;

diff --git a/apps/src/templates/VersionHistory.jsx b/apps/src/templates/VersionHistory.jsx
@@ -5,7 +5,7 @@ var sourcesApi = require('../clientApi').sources;
 /**
  * A component for viewing project version history.
  */
-module.exports = React.createClass({
+var VersionHistory = React.createClass({
   propTypes: {
     handleClearPuzzle: React.PropTypes.func.isRequired
   },
@@ -101,6 +101,7 @@ module.exports = React.createClass({
     } else {
       var rows = this.state.versions.map(function (version) {
         return <VersionRow
+          key={version.versionId}
           lastModified={new Date(version.lastModified)}
           isLatest={version.isLatest}
           onChoose={this.onChooseVersion.bind(this, version.versionId)} />;
@@ -138,3 +139,4 @@ module.exports = React.createClass({
     );
   }
 });
+module.exports = VersionHistory;
diff --git a/apps/src/templates/VersionRow.jsx b/apps/src/templates/VersionRow.jsx
@@ -4,7 +4,7 @@
 /**
  * A single row in the VersionHistory dialog, describing one version of a project.
  */
-module.exports = React.createClass({
+var VersionRow = React.createClass({
   propTypes: {
     lastModified: React.PropTypes.instanceOf(Date),
     isLatest: React.PropTypes.bool,
@@ -46,3 +46,4 @@ module.exports = React.createClass({
     $('.versionTimestamp').timeago();
   }
 });
+module.exports = VersionRow;
diff --git a/apps/src/turtle/turtle.js b/apps/src/turtle/turtle.js
@@ -235,7 +235,7 @@ Artist.prototype.init = function(config) {
     });
   }.bind(this);
 
-  React.render(React.createElement(AppView, {
+  ReactDOM.render(React.createElement(AppView, {
     assetUrl: this.studioApp_.assetUrl,
     isEmbedView: !!config.embed,
     isShareView: !!config.share,