Merge pull request #3276 from matrix-org/t3chguy/react16_1

Progress towards React 16 compatibility

src/Modal.js

@@ -15,11 +15,10 @@ limitations under the License.
 */
 
 
-'use strict';
-
-const React = require('react');
-const ReactDOM = require('react-dom');
+import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import Analytics from './Analytics';
 import sdk from './index';
 import dis from './dispatcher';
@@ -32,7 +31,7 @@ const STATIC_DIALOG_CONTAINER_ID = "mx_Dialog_StaticContainer";
  * Wrap an asynchronous loader function with a react component which shows a
  * spinner until the real component loads.
  */
-const AsyncWrapper = React.createClass({
+const AsyncWrapper = createReactClass({
     propTypes: {
         /** A promise which resolves with the real component
          */

src/Velociraptor.js

@@ -1,6 +1,7 @@
 const React = require('react');
 const ReactDom = require('react-dom');
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 const Velocity = require('velocity-animate');
 
 /**
@@ -10,7 +11,7 @@ const Velocity = require('velocity-animate');
  * from DOM order. This makes it a lot simpler and lighter: if you need fully
  * automatic positional animation, look at react-shuffle or similar libraries.
  */
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'Velociraptor',
 
     propTypes: {

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -49,10 +49,10 @@ export default React.createClass({
         onFinished: PropTypes.func.isRequired,
     },
 
-    defaultProps: {
+    getDefaultProps: () => ({
         danger: false,
         askReason: false,
-    },
+    }),
 
     componentWillMount: function() {
         this._reasonField = null;

src/components/views/rooms/AppsDrawer.js

@@ -44,10 +44,10 @@ module.exports = React.createClass({
         hide: PropTypes.bool, // If rendered, should apps drawer be visible
     },
 
-    defaultProps: {
+    getDefaultProps: () => ({
         showApps: true,
         hide: false,
-    },
+    }),
 
     getInitialState: function() {
         return {

src/components/views/rooms/AuxPanel.js

@@ -57,10 +57,10 @@ module.exports = React.createClass({
         fullHeight: PropTypes.bool,
     },
 
-    defaultProps: {
+    getDefaultProps: () => ({
         showApps: true,
         hideAppsDrawer: false,
-    },
+    }),
 
     getInitialState: function() {
         return { counters: this._computeCounters() };