Merge pull request #3405 from matrix-org/t3chguy/react16_11

Switch to createReactClass: *everything else*. React 16 :D

src/components/views/avatars/BaseAvatar.js

@@ -18,12 +18,13 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import { MatrixClient } from 'matrix-js-sdk';
 import AvatarLogic from '../../../Avatar';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from '../elements/AccessibleButton';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'BaseAvatar',
 
     propTypes: {

src/components/views/avatars/GroupAvatar.js

@@ -16,10 +16,11 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'GroupAvatar',
 
     propTypes: {

src/components/views/avatars/MemberAvatar.js

@@ -14,15 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-const React = require('react');
+import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 const Avatar = require('../../../Avatar');
 const sdk = require("../../../index");
 const dispatcher = require("../../../dispatcher");
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'MemberAvatar',
 
     propTypes: {

src/components/views/avatars/RoomAvatar.js

@@ -15,13 +15,14 @@ limitations under the License.
 */
 import React from "react";
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import {ContentRepo} from "matrix-js-sdk";
 import MatrixClientPeg from "../../../MatrixClientPeg";
 import Modal from '../../../Modal';
 import sdk from "../../../index";
 import Avatar from '../../../Avatar';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'RoomAvatar',
 
     // Room may be left unset here, but if it is,

src/components/views/context_menus/MessageContextMenu.js

@@ -17,6 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import {EventStatus} from 'matrix-js-sdk';
 
 import MatrixClientPeg from '../../../MatrixClientPeg';
@@ -33,7 +34,7 @@ function canCancel(eventStatus) {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
 }
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'MessageContextMenu',
 
     propTypes: {

src/components/views/context_menus/RoomTileContextMenu.js

@@ -18,8 +18,9 @@ limitations under the License.
 
 import Promise from 'bluebird';
 import React from 'react';
-import classNames from 'classnames';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
+import classNames from 'classnames';
 import sdk from '../../../index';
 import { _t, _td } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
@@ -31,7 +32,7 @@ import Modal from '../../../Modal';
 import RoomListActions from '../../../actions/RoomListActions';
 import RoomViewStore from '../../../stores/RoomViewStore';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'RoomTileContextMenu',
 
     propTypes: {

src/components/views/create_room/CreateRoomButton.js

@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
-module.exports = React.createClass({
+
+module.exports = createReactClass({
     displayName: 'CreateRoomButton',
     propTypes: {
         onCreateRoom: PropTypes.func,

src/components/views/create_room/Presets.js

@@ -14,10 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-const React = require('react');
+import React from "react";
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 
 const Presets = {
@@ -26,7 +25,7 @@ const Presets = {
     Custom: "custom",
 };
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'CreateRoomPresets',
     propTypes: {
         onChange: PropTypes.func,

src/components/views/create_room/RoomAlias.js

@@ -14,11 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const React = require('react');
+import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'RoomAlias',
     propTypes: {
         // Specifying a homeserver will make magical things happen when you,

src/components/views/globals/MatrixToolbar.js

@@ -14,14 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
+import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 import Notifier from '../../../Notifier';
 import AccessibleButton from '../../../components/views/elements/AccessibleButton';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'MatrixToolbar',
 
     hideToolbar: function() {

src/components/views/globals/NewVersionBar.js

@@ -17,6 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import sdk from '../../../index';
 import Modal from '../../../Modal';
 import PlatformPeg from '../../../PlatformPeg';
@@ -31,7 +32,7 @@ function checkVersion(ver) {
     return parts.length == 5 && parts[1] == 'react' && parts[3] == 'js';
 }
 
-export default React.createClass({
+export default createReactClass({
     propTypes: {
         version: PropTypes.string.isRequired,
         newVersion: PropTypes.string.isRequired,

src/components/views/globals/PasswordNagBar.js

@@ -16,11 +16,12 @@ limitations under the License.
 */
 
 import React from 'react';
+import createReactClass from 'create-react-class';
 import sdk from '../../../index';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 
-export default React.createClass({
+export default createReactClass({
     onUpdateClicked: function() {
         const SetPasswordDialog = sdk.getComponent('dialogs.SetPasswordDialog');
         Modal.createTrackedDialog('Set Password Dialog', 'Password Nag Bar', SetPasswordDialog);

src/components/views/globals/ServerLimitBar.js

@@ -16,11 +16,12 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import classNames from 'classnames';
 import { _td } from '../../../languageHandler';
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
 
-export default React.createClass({
+export default createReactClass({
     propTypes: {
         // 'hard' if the logged in user has been locked out, 'soft' if they haven't
         kind: PropTypes.string,

src/components/views/globals/UpdateCheckBar.js

@@ -16,11 +16,12 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 import PlatformPeg from '../../../PlatformPeg';
 import AccessibleButton from '../../../components/views/elements/AccessibleButton';
 
-export default React.createClass({
+export default createReactClass({
     propTypes: {
         status: PropTypes.string.isRequired,
         // Currently for error detail but will be usable for download progress

src/components/views/messages/MFileBody.js

@@ -15,10 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import filesize from 'filesize';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
@@ -195,7 +194,7 @@ function computedStyle(element) {
     return cssText;
 }
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'MFileBody',
 
     getInitialState: function() {

src/components/views/messages/MVideoBody.js

@@ -14,10 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import MFileBody from './MFileBody';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import { decryptFile } from '../../../utils/DecryptFile';
@@ -25,7 +24,7 @@ import Promise from 'bluebird';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'MVideoBody',
 
     propTypes: {

src/components/views/messages/MessageEvent.js

@@ -14,13 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-const React = require('react');
+import React from 'react';
 import PropTypes from 'prop-types';
-const sdk = require('../../../index');
+import createReactClass from 'create-react-class';
+import sdk from '../../../index';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'MessageEvent',
 
     propTypes: {

src/components/views/messages/RoomAvatarEvent.js

@@ -17,13 +17,14 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import Modal from '../../../Modal';
 import AccessibleButton from '../elements/AccessibleButton';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'RoomAvatarEvent',
 
     propTypes: {

src/components/views/messages/RoomCreate.js

@@ -16,13 +16,14 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 
 import dis from '../../../dispatcher';
 import { RoomPermalinkCreator } from '../../../matrix-to';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'RoomCreate',
 
     propTypes: {

src/components/views/messages/SenderProfile.js

@@ -14,17 +14,16 @@
  limitations under the License.
  */
 
-'use strict';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import {MatrixClient} from 'matrix-js-sdk';
 import Flair from '../elements/Flair.js';
 import FlairStore from '../../../stores/FlairStore';
 import { _t } from '../../../languageHandler';
 import {getUserNameColorClass} from '../../../utils/FormattingUtils';
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'SenderProfile',
     propTypes: {
         mxEvent: PropTypes.object.isRequired, // event whose sender we're showing

src/components/views/messages/TextualBody.js

@@ -16,17 +16,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import highlight from 'highlight.js';
 import * as HtmlUtils from '../../../HtmlUtils';
 import {formatDate} from '../../../DateUtils';
 import sdk from '../../../index';
 import Modal from '../../../Modal';
-import SdkConfig from '../../../SdkConfig';
 import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
 import * as ContextualMenu from '../../structures/ContextualMenu';
@@ -36,7 +34,7 @@ import {host as matrixtoHost} from '../../../matrix-to';
 import {pillifyLinks} from '../../../utils/pillify';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'TextualBody',
 
     propTypes: {

src/components/views/messages/TextualEvent.js

@@ -14,14 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-const React = require('react');
+import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 
 const TextForEvent = require('../../../TextForEvent');
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'TextualEvent',
 
     propTypes: {

src/components/views/messages/UnknownBody.js

@@ -14,12 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
+import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'UnknownBody',
 
     render: function() {

src/components/views/room_settings/ColorSettings.js

@@ -13,15 +13,13 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
 import Promise from 'bluebird';
-const React = require('react');
+import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 
-const sdk = require('../../../index');
-const Tinter = require('../../../Tinter');
-const MatrixClientPeg = require("../../../MatrixClientPeg");
-const Modal = require("../../../Modal");
-
+import Tinter from '../../../Tinter';
 import dis from '../../../dispatcher';
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
 
@@ -43,7 +41,7 @@ const ROOM_COLORS = [
 // has a high possibility of being used in the nearish future.
 // Ref: https://github.com/vector-im/riot-web/issues/8421
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'ColorSettings',
 
     propTypes: {

src/components/views/room_settings/UrlPreviewSettings.js

@@ -16,16 +16,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const React = require('react');
+import React from 'react';
 import PropTypes from 'prop-types';
-const sdk = require("../../../index");
+import createReactClass from 'create-react-class';
+import sdk from "../../../index";
 import { _t, _td } from '../../../languageHandler';
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
 import dis from "../../../dispatcher";
 import MatrixClientPeg from "../../../MatrixClientPeg";
 
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'UrlPreviewSettings',
 
     propTypes: {

src/components/views/settings/ChangeAvatar.js

@@ -14,13 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const React = require('react');
+import React from 'react';
 import PropTypes from 'prop-types';
-const MatrixClientPeg = require("../../../MatrixClientPeg");
-const sdk = require('../../../index');
+import createReactClass from 'create-react-class';
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'ChangeAvatar',
     propTypes: {
         initialAvatarUrl: PropTypes.string,

src/components/views/settings/ChangeDisplayName.js

@@ -16,11 +16,12 @@ limitations under the License.
 */
 
 import React from 'react';
+import createReactClass from 'create-react-class';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'ChangeDisplayName',
 
     _getDisplayName: async function() {

src/components/views/settings/ChangePassword.js

@@ -17,8 +17,9 @@ limitations under the License.
 
 import Field from "../elements/Field";
 
-const React = require('react');
+import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 const MatrixClientPeg = require("../../../MatrixClientPeg");
 const Modal = require("../../../Modal");
 const sdk = require("../../../index");
@@ -30,7 +31,7 @@ import { _t } from '../../../languageHandler';
 
 import sessionStore from '../../../stores/SessionStore';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'ChangePassword',
 
     propTypes: {

src/components/views/settings/EnableNotificationsButton.js

@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-const React = require("react");
-const Notifier = require("../../../Notifier");
-const dis = require("../../../dispatcher");
+import React from "react";
+import createReactClass from 'create-react-class';
+import Notifier from "../../../Notifier";
+import dis from "../../../dispatcher";
 import { _t } from '../../../languageHandler';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'EnableNotificationsButton',
 
     componentDidMount: function() {

src/components/views/settings/Notifications.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import createReactClass from 'create-react-class';
 import Promise from 'bluebird';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -62,7 +63,7 @@ function portLegacyActions(actions) {
     }
 }
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'Notifications',
 
     phases: {

src/components/views/voip/CallPreview.js

@@ -16,12 +16,13 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import CallHandler from '../../../CallHandler';
 import dis from '../../../dispatcher';
 import sdk from '../../../index';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'CallPreview',
 
     propTypes: {

src/components/views/voip/CallView.js

@@ -15,13 +15,14 @@ limitations under the License.
 */
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import dis from '../../../dispatcher';
 import CallHandler from '../../../CallHandler';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'CallView',
 
     propTypes: {

src/components/views/voip/IncomingCallBox.js

@@ -16,12 +16,13 @@ limitations under the License.
 */
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'IncomingCallBox',
 
     propTypes: {

src/components/views/voip/VideoFeed.js

@@ -14,12 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'VideoFeed',
 
     propTypes: {

src/components/views/voip/VideoView.js

@@ -14,11 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import classNames from 'classnames';
 
 import sdk from '../../../index';
@@ -35,7 +34,7 @@ function getFullScreenElement() {
     );
 }
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'VideoView',
 
     propTypes: {