Update to React >= 15.5.4

STYLEGUIDE.md

@@ -183,16 +183,6 @@ Default: https://google.github.io/styleguide/javascriptguide.xml
   Foo.prototype.bar = function () {
   }
 
-  // good
-  // React is a bit of a special case, in that var Foo = module.exports = React.createClass({
-  // results in React devtools thinking our component is named exports instead of Foo. As such,
-  // we prefer a slightly different pattern in this context.
-  var Foo = React.createClass({
-  ...
-  });
-  module.exports = Foo;
-
-
   // bad
   module.exports = {
     foo: function () {

apps/.storybook/config.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import * as storybook from '@kadira/storybook';
 import infoAddon from '@kadira/react-storybook-addon-info';
 import Node from '@kadira/react-storybook-addon-info/dist/components/Node';
@@ -94,7 +95,7 @@ function Centered({children}) {
   return <div style={styles.centeredStory}>{children}</div>;
 }
 Centered.propTypes = {
-  children: React.PropTypes.node,
+  children: PropTypes.node,
 };
 
 storybook.setAddon({

apps/package.json

@@ -78,6 +78,7 @@
     "codemirror-spell-checker": "^1.1.2",
     "connect-livereload": "0.5.3",
     "copy-webpack-plugin": "^3.0.0",
+    "create-react-class": "~15.6.0",
     "css-loader": "^0.23.1",
     "csv-parse": "^1.1.7",
     "data-collection": "^1.1.6",
@@ -147,30 +148,31 @@
     "phantomjs-prebuilt": "^2.1.14",
     "playground-io": "code-dot-org/playground-io#v0.6.0-cdo.0",
     "progress-bar-webpack-plugin": "^1.8.0",
+    "prop-types": "~15.5.10",
     "pusher-js": "4.1.0",
-    "radium": "0.18.1",
-    "react": "~15.4.0",
-    "react-addons-test-utils": "~15.4.0",
-    "react-bootstrap": "0.30.1",
+    "radium": "0.19.4",
+    "react": "~15.6.1",
+    "react-bootstrap": "0.31.2",
     "react-color": "^2.11.7",
-    "react-datepicker": "0.37.0",
-    "react-dom": "~15.4.0",
+    "react-datepicker": "0.52.0",
+    "react-dom": "~15.6.1",
     "react-idle-timer": "1.3.3",
     "react-lazy-load": "3.0.10",
-    "react-motion": "0.4.5",
+    "react-motion": "^0.5.0",
     "react-onclickoutside": "^5.7.1",
-    "react-portal": "^3.0.0",
-    "react-redux": "4.4.5",
+    "react-portal": "^3.1.0",
+    "react-redux": "^5.0.6",
     "react-router": "2.6.0",
     "react-select": "^1.0.0-rc.1",
     "react-sticky": "5.0.5",
     "react-storybook-addon-add-stories-group": "0.1.0",
+    "react-test-renderer": "~15.6.1",
     "react-tether": "^0.5.2",
-    "react-tooltip": "^3.2.7",
+    "react-tooltip": "^3.3.0",
     "react-virtualized": "^9.7.3",
     "react-virtualized-select": "^3.0.1",
     "reactabular": "^2.0.3",
-    "redux": "^3.3.1",
+    "redux": "^3.7.2",
     "redux-logger": "^2.6.1",
     "redux-mock-store": "^1.2.3",
     "redux-thunk": "^2.0.1",

apps/src/applab/AppLabCrosshairOverlay.jsx

@@ -1,16 +1,18 @@
 /** @file App Lab-specific Crosshair Overlay */
 
 import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import CrosshairOverlay from '../templates/CrosshairOverlay';
 import { draggedElementDropPoint } from './gridUtils';
 
-const AppLabCrosshairOverlay = React.createClass({
+const AppLabCrosshairOverlay = createReactClass({
   propTypes: {
     // width, height, mouseX and mouseY are given in app-space, not screen-space
-    width: React.PropTypes.number,
-    height: React.PropTypes.number,
-    mouseX: React.PropTypes.number,
-    mouseY: React.PropTypes.number
+    width: PropTypes.number,
+    height: PropTypes.number,
+    mouseX: PropTypes.number,
+    mouseY: PropTypes.number
   },
 
   render() {

apps/src/applab/AppLabTooltipOverlay.jsx

@@ -1,6 +1,8 @@
 /** @file App Lab-specific Tooltip Overlay */
 import $ from 'jquery';
 import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import TooltipOverlay, {coordinatesProvider} from '../templates/TooltipOverlay';
 import { getId } from './designElements/elementUtils';
 import { draggedElementDropPoint } from './gridUtils';
@@ -10,15 +12,15 @@ import { ellipsify } from '../utils';
 
 var ELEMENT_ID_TEXT_MAX_CHAR = 12;
 
-export const AppLabTooltipOverlay = React.createClass({
+export const AppLabTooltipOverlay = createReactClass({
   propTypes: {
     // width, height, mouseX and mouseY are given in app-space, not screen-space
-    width: React.PropTypes.number,
-    height: React.PropTypes.number,
-    mouseX: React.PropTypes.number,
-    mouseY: React.PropTypes.number,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    mouseX: PropTypes.number,
+    mouseY: PropTypes.number,
     // Provided by redux
-    isInDesignMode: React.PropTypes.bool.isRequired
+    isInDesignMode: PropTypes.bool.isRequired
   },
 
   getInitialState: () => ({

apps/src/applab/AppLabView.jsx

@@ -2,6 +2,8 @@
 import ImportProjectDialog from './ImportProjectDialog';
 import ImportScreensDialog from './ImportScreensDialog';
 import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import ApplabVisualizationColumn from './ApplabVisualizationColumn';
 import ProtectedStatefulDiv from '../templates/ProtectedStatefulDiv';
 import StudioAppWrapper from '../templates/StudioAppWrapper';
@@ -15,22 +17,22 @@ import { connect } from 'react-redux';
 /**
  * Top-level React wrapper for App Lab.
  */
-var AppLabView = React.createClass({
+var AppLabView = createReactClass({
   propTypes: {
-    handleVersionHistory: React.PropTypes.func.isRequired,
-    hasDataMode: React.PropTypes.bool.isRequired,
-    hasDesignMode: React.PropTypes.bool.isRequired,
-    interfaceMode: React.PropTypes.oneOf([
+    handleVersionHistory: PropTypes.func.isRequired,
+    hasDataMode: PropTypes.bool.isRequired,
+    hasDesignMode: PropTypes.bool.isRequired,
+    interfaceMode: PropTypes.oneOf([
       ApplabInterfaceMode.CODE,
       ApplabInterfaceMode.DESIGN,
       ApplabInterfaceMode.DATA
     ]).isRequired,
-    isEditingProject: React.PropTypes.bool.isRequired,
+    isEditingProject: PropTypes.bool.isRequired,
 
-    screenIds: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
-    onScreenCreate: React.PropTypes.func.isRequired,
+    screenIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+    onScreenCreate: PropTypes.func.isRequired,
 
-    onMount: React.PropTypes.func.isRequired
+    onMount: PropTypes.func.isRequired
   },
 
   componentDidMount: function () {

apps/src/applab/ApplabVisualizationColumn.jsx

@@ -3,6 +3,8 @@ import IFrameEmbedOverlay from '../templates/IFrameEmbedOverlay';
 import * as color from "../util/color";
 import * as applabConstants from './constants';
 import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import Radium from 'radium';
 import Visualization from './Visualization';
 import CompletionButton from '../templates/CompletionButton';
@@ -50,25 +52,25 @@ var styles = {
  * Equivalent of visualizationColumn.html.ejs. Initially only supporting
  * portions used by App Lab
  */
-const ApplabVisualizationColumn = React.createClass({
+const ApplabVisualizationColumn = createReactClass({
   propTypes: {
-    isReadOnlyWorkspace: React.PropTypes.bool.isRequired,
-    visualizationHasPadding: React.PropTypes.bool.isRequired,
-    isShareView: React.PropTypes.bool.isRequired,
-    isResponsive: React.PropTypes.bool.isRequired,
-    nonResponsiveWidth: React.PropTypes.number.isRequired,
-    isRunning: React.PropTypes.bool.isRequired,
-    hideSource: React.PropTypes.bool.isRequired,
-    playspacePhoneFrame: React.PropTypes.bool,
-    isIframeEmbed: React.PropTypes.bool.isRequired,
-    pinWorkspaceToBottom: React.PropTypes.bool.isRequired,
-    isPaused: React.PropTypes.bool,
-    awaitingContainedResponse: React.PropTypes.bool.isRequired,
+    isReadOnlyWorkspace: PropTypes.bool.isRequired,
+    visualizationHasPadding: PropTypes.bool.isRequired,
+    isShareView: PropTypes.bool.isRequired,
+    isResponsive: PropTypes.bool.isRequired,
+    nonResponsiveWidth: PropTypes.number.isRequired,
+    isRunning: PropTypes.bool.isRequired,
+    hideSource: PropTypes.bool.isRequired,
+    playspacePhoneFrame: PropTypes.bool,
+    isIframeEmbed: PropTypes.bool.isRequired,
+    pinWorkspaceToBottom: PropTypes.bool.isRequired,
+    isPaused: PropTypes.bool,
+    awaitingContainedResponse: PropTypes.bool.isRequired,
 
     // non redux backed
-    isEditingProject: React.PropTypes.bool.isRequired,
-    screenIds: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
-    onScreenCreate: React.PropTypes.func.isRequired,
+    isEditingProject: PropTypes.bool.isRequired,
+    screenIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+    onScreenCreate: PropTypes.func.isRequired,
   },
 
   render: function () {

apps/src/applab/ApplabVisualizationColumn.story.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import {Provider} from 'react-redux';
 import {createStore} from 'redux';
 import {ApplabInterfaceMode} from './constants';
@@ -17,8 +18,8 @@ export default function (storybook) {
     return <Provider store={store}>{children}</Provider>;
   }
   StubProvider.propTypes = {
-    state: React.PropTypes.object.isRequired,
-    children: React.PropTypes.node.isRequired,
+    state: PropTypes.object.isRequired,
+    children: PropTypes.node.isRequired,
   };
 
   const pageConstants = {

apps/src/applab/DesignModeBox.jsx

@@ -1,21 +1,23 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import color from "../util/color";
 import DesignToolbox from './DesignToolbox';
 import DesignProperties from './designProperties';
 
-export default React.createClass({
+export default createReactClass({
   propTypes: {
-    handleDragStart: React.PropTypes.func,
-    element: React.PropTypes.instanceOf(HTMLElement),
-    elementIdList: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
-    handleChange: React.PropTypes.func.isRequired,
-    onChangeElement: React.PropTypes.func.isRequired,
-    onDepthChange: React.PropTypes.func.isRequired,
-    onDuplicate: React.PropTypes.func.isRequired,
-    onDelete: React.PropTypes.func.isRequired,
-    onInsertEvent: React.PropTypes.func.isRequired,
-    isToolboxVisible: React.PropTypes.bool.isRequired,
-    isDimmed: React.PropTypes.bool.isRequired
+    handleDragStart: PropTypes.func,
+    element: PropTypes.instanceOf(HTMLElement),
+    elementIdList: PropTypes.arrayOf(PropTypes.string).isRequired,
+    handleChange: PropTypes.func.isRequired,
+    onChangeElement: PropTypes.func.isRequired,
+    onDepthChange: PropTypes.func.isRequired,
+    onDuplicate: PropTypes.func.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    onInsertEvent: PropTypes.func.isRequired,
+    isToolboxVisible: PropTypes.bool.isRequired,
+    isDimmed: PropTypes.bool.isRequired
   },
 
   render: function () {

apps/src/applab/DesignModeHeaders.jsx

@@ -1,18 +1,20 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import applabMsg from '@cdo/applab/locale';
 import msg from '@cdo/locale';
 import commonStyles from '../commonStyles';
 import color from '../util/color';
 import PaneHeader, {PaneButton, PaneSection} from '../templates/PaneHeader';
 import SettingsCog from '../lib/ui/SettingsCog';
 
-const DesignModeHeaders = React.createClass({
+const DesignModeHeaders = createReactClass({
   propTypes: {
-    handleVersionHistory: React.PropTypes.func.isRequired,
-    onToggleToolbox: React.PropTypes.func.isRequired,
-    isToolboxVisible: React.PropTypes.bool.isRequired,
-    isRtl: React.PropTypes.bool.isRequired,
-    isRunning: React.PropTypes.bool.isRequired,
+    handleVersionHistory: PropTypes.func.isRequired,
+    onToggleToolbox: PropTypes.func.isRequired,
+    isToolboxVisible: PropTypes.bool.isRequired,
+    isRtl: PropTypes.bool.isRequired,
+    isRunning: PropTypes.bool.isRequired,
   },
 
   onToggleToolbox: function () {

apps/src/applab/DesignToolbox.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import DesignToolboxElement from './DesignToolboxElement';
 import applabMsg from '@cdo/applab/locale';
 
 var IMAGE_BASE_URL = '/blockly/media/applab/design_toolbox/';
 
-export default React.createClass({
+export default createReactClass({
   propTypes: {
-    handleDragStart: React.PropTypes.func.isRequired,
-    isToolboxVisible: React.PropTypes.bool.isRequired
+    handleDragStart: PropTypes.func.isRequired,
+    isToolboxVisible: PropTypes.bool.isRequired
   },
 
   render: function () {

apps/src/applab/DesignToolboxElement.jsx

@@ -1,14 +1,16 @@
 import $ from 'jquery';
 import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import ReactDOM from 'react-dom';
 import library from './designElements/library';
 
-export default React.createClass({
+export default createReactClass({
   propTypes: {
-    imageUrl: React.PropTypes.string.isRequired,
-    desc: React.PropTypes.string.isRequired,
-    elementType: React.PropTypes.string.isRequired,
-    handleDragStart: React.PropTypes.func.isRequired
+    imageUrl: PropTypes.string.isRequired,
+    desc: PropTypes.string.isRequired,
+    elementType: PropTypes.string.isRequired,
+    handleDragStart: PropTypes.func.isRequired
   },
 
   render: function () {

apps/src/applab/DesignWorkspace.jsx

@@ -1,25 +1,27 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import DesignModeBox from './DesignModeBox';
 import DesignModeHeaders from './DesignModeHeaders';
 import {connect} from 'react-redux';
 
-const DesignWorkspace = React.createClass({
+const DesignWorkspace = createReactClass({
   propTypes: {
-    handleVersionHistory: React.PropTypes.func.isRequired,
-    handleDragStart: React.PropTypes.func,
-    element: React.PropTypes.instanceOf(HTMLElement),
-    elementIdList: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
-    handleChange: React.PropTypes.func.isRequired,
-    onChangeElement: React.PropTypes.func.isRequired,
-    onDepthChange: React.PropTypes.func.isRequired,
-    onDuplicate: React.PropTypes.func.isRequired,
-    onDelete: React.PropTypes.func.isRequired,
-    onInsertEvent: React.PropTypes.func.isRequired,
-    isDimmed: React.PropTypes.bool.isRequired,
+    handleVersionHistory: PropTypes.func.isRequired,
+    handleDragStart: PropTypes.func,
+    element: PropTypes.instanceOf(HTMLElement),
+    elementIdList: PropTypes.arrayOf(PropTypes.string).isRequired,
+    handleChange: PropTypes.func.isRequired,
+    onChangeElement: PropTypes.func.isRequired,
+    onDepthChange: PropTypes.func.isRequired,
+    onDuplicate: PropTypes.func.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    onInsertEvent: PropTypes.func.isRequired,
+    isDimmed: PropTypes.bool.isRequired,
 
     // provided by redux
-    isRunning: React.PropTypes.bool.isRequired,
-    isRtl: React.PropTypes.bool.isRequired,
+    isRunning: PropTypes.bool.isRequired,
+    isRtl: PropTypes.bool.isRequired,
   },
 
   getInitialState: function () {