Merge pull request #3400 from matrix-org/t3chguy/react16_9

Switch to createReactClass: views/rooms and test/components. React 16 :D

src/components/views/rooms/AppsDrawer.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 MatrixClientPeg from '../../../MatrixClientPeg';
 import AppTile from '../elements/AppTile';
 import Modal from '../../../Modal';
@@ -35,7 +34,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 // The maximum number of widgets that can be added in a room
 const MAX_WIDGETS = 2;
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'AppsDrawer',
 
     propTypes: {

src/components/views/rooms/AuxPanel.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 MatrixClientPeg from "../../../MatrixClientPeg";
 import sdk from '../../../index';
 import dis from "../../../dispatcher";
@@ -28,7 +29,7 @@ import RateLimitedFunc from '../../../ratelimitedfunc';
 import SettingsStore from "../../../settings/SettingsStore";
 
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'AuxPanel',
 
     propTypes: {

src/components/views/rooms/EntityTile.js

@@ -15,11 +15,10 @@ 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';
 import AccessibleButton from '../elements/AccessibleButton';
 import { _t } from '../../../languageHandler';
 import classNames from "classnames";
@@ -52,7 +51,7 @@ function presenceClassForMember(presenceState, lastActiveAgo, showPresence) {
     }
 }
 
-const EntityTile = React.createClass({
+const EntityTile = createReactClass({
     displayName: 'EntityTile',
 
     propTypes: {

src/components/views/rooms/EventTile.js

@@ -17,12 +17,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import ReplyThread from "../elements/ReplyThread";
 
-const React = require('react');
+import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 const classNames = require("classnames");
 import { _t, _td } from '../../../languageHandler';
 const Modal = require('../../../Modal');
@@ -84,7 +83,7 @@ const MAX_READ_AVATARS = 5;
 // |    '--------------------------------------'              |
 // '----------------------------------------------------------'
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'EventTile',
 
     propTypes: {

src/components/views/rooms/ForwardMessage.js

@@ -17,12 +17,13 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 import dis from '../../../dispatcher';
 import { KeyCode } from '../../../Keyboard';
 
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'ForwardMessage',
 
     propTypes: {

src/components/views/rooms/LinkPreviewWidget.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 { linkifyElement } from '../../../HtmlUtils';
 
 const sdk = require('../../../index');
@@ -25,7 +24,7 @@ const MatrixClientPeg = require('../../../MatrixClientPeg');
 const ImageUtils = require('../../../ImageUtils');
 const Modal = require('../../../Modal');
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'LinkPreviewWidget',
 
     propTypes: {

src/components/views/rooms/MemberInfo.js

@@ -29,6 +29,7 @@ limitations under the License.
  */
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import classNames from 'classnames';
 import { MatrixClient } from 'matrix-js-sdk';
 import dis from '../../../dispatcher';
@@ -48,7 +49,7 @@ import E2EIcon from "./E2EIcon";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import MatrixClientPeg from "../../../MatrixClientPeg";
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'MemberInfo',
 
     propTypes: {

src/components/views/rooms/MemberList.js

@@ -17,6 +17,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import dis from '../../../dispatcher';
@@ -31,7 +32,7 @@ const INITIAL_LOAD_NUM_MEMBERS = 30;
 const INITIAL_LOAD_NUM_INVITED = 5;
 const SHOW_MORE_INCREMENT = 100;
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'MemberList',
 
     getInitialState: function() {

src/components/views/rooms/MemberTile.js

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

src/components/views/rooms/PinnedEventTile.js

@@ -16,6 +16,7 @@ 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 AccessibleButton from "../elements/AccessibleButton";
@@ -24,7 +25,7 @@ import MemberAvatar from "../avatars/MemberAvatar";
 import { _t } from '../../../languageHandler';
 import {formatFullDate} from '../../../DateUtils';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'PinnedEventTile',
     propTypes: {
         mxRoom: PropTypes.object.isRequired,

src/components/views/rooms/PinnedEventsPanel.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 MatrixClientPeg from "../../../MatrixClientPeg";
 import AccessibleButton from "../elements/AccessibleButton";
 import PinnedEventTile from "./PinnedEventTile";
 import { _t } from '../../../languageHandler';
 import PinningUtils from "../../../utils/PinningUtils";
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'PinnedEventsPanel',
     propTypes: {
         // The Room from the js-sdk we're going to show pinned events for

src/components/views/rooms/PresenceLabel.js

@@ -14,15 +14,14 @@ 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: 'PresenceLabel',
 
     propTypes: {

src/components/views/rooms/ReadReceiptMarker.js

@@ -14,11 +14,10 @@ See the License for the specific language governing permissions and
 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';
 
 const sdk = require('../../../index');
 
@@ -36,7 +35,7 @@ try {
 } catch (e) {
 }
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'ReadReceiptMarker',
 
     propTypes: {

src/components/views/rooms/RoomDetailList.js

@@ -19,11 +19,12 @@ import dis from '../../../dispatcher';
 import React from 'react';
 import { _t } from '../../../languageHandler';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import classNames from 'classnames';
 
 import {roomShape} from './RoomDetailRow';
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'RoomDetailList',
 
     propTypes: {

src/components/views/rooms/RoomDetailRow.js

@@ -21,6 +21,7 @@ import { linkifyElement } from '../../../HtmlUtils';
 import { ContentRepo } from 'matrix-js-sdk';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 
 export function getDisplayAliasForRoom(room) {
     return room.canonicalAlias || (room.aliases ? room.aliases[0] : "");
@@ -39,7 +40,7 @@ export const roomShape = PropTypes.shape({
     guestCanJoin: PropTypes.bool,
 });
 
-export default React.createClass({
+export default createReactClass({
     propTypes: {
         room: roomShape,
         // passes ev, room as args

src/components/views/rooms/RoomDropTarget.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 createReactClass from 'create-react-class';
 
-const React = require('react');
-
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'RoomDropTarget',
 
     render: function() {

src/components/views/rooms/RoomHeader.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 classNames from 'classnames';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -33,7 +32,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
 import E2EIcon from './E2EIcon';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'RoomHeader',
 
     propTypes: {

src/components/views/rooms/RoomList.js

@@ -15,12 +15,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
 import SettingsStore from "../../../settings/SettingsStore";
 import Timer from "../../../utils/Timer";
 
-const React = require("react");
-const ReactDOM = require("react-dom");
+import React from "react";
+import ReactDOM from "react-dom";
+import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 const MatrixClientPeg = require("../../../MatrixClientPeg");
@@ -64,7 +64,7 @@ function phraseForSection(section) {
     }
 }
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'RoomList',
 
     propTypes: {

src/components/views/rooms/RoomNameEditor.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 sdk = require('../../../index');
 const MatrixClientPeg = require('../../../MatrixClientPeg');
 import { _t } from '../../../languageHandler';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'RoomNameEditor',
 
     propTypes: {

src/components/views/rooms/RoomPreviewBar.js

@@ -16,10 +16,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 sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import dis from '../../../dispatcher';
@@ -44,7 +43,7 @@ const MessageCase = Object.freeze({
     OtherError: "OtherError",
 });
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'RoomPreviewBar',
 
     propTypes: {

src/components/views/rooms/RoomTile.js

@@ -20,6 +20,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import classNames from 'classnames';
 import dis from '../../../dispatcher';
 import MatrixClientPeg from '../../../MatrixClientPeg';
@@ -33,7 +34,7 @@ import ActiveRoomObserver from '../../../ActiveRoomObserver';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import SettingsStore from "../../../settings/SettingsStore";
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'RoomTile',
 
     propTypes: {

src/components/views/rooms/RoomTopicEditor.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';
-const sdk = require('../../../index');
+import createReactClass from 'create-react-class';
+import sdk from '../../../index';
 import { _t } from "../../../languageHandler";
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'RoomTopicEditor',
 
     propTypes: {

src/components/views/rooms/RoomUpgradeWarningBar.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 sdk from '../../../index';
 import Modal from '../../../Modal';
 
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from "../../../MatrixClientPeg";
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'RoomUpgradeWarningBar',
 
     propTypes: {

src/components/views/rooms/SearchBar.js

@@ -14,16 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-const React = require('react');
-const MatrixClientPeg = require('../../../MatrixClientPeg');
-const sdk = require('../../../index');
+import React from 'react';
+import createReactClass from 'create-react-class';
 const classNames = require('classnames');
 const AccessibleButton = require('../../../components/views/elements/AccessibleButton');
 import { _t } from '../../../languageHandler';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'SearchBar',
 
     getInitialState: function() {

src/components/views/rooms/SearchResultTile.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: 'SearchResult',
 
     propTypes: {

src/components/views/rooms/SearchableEntityList.js

@@ -13,16 +13,16 @@ 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.
 */
-const React = require('react');
+
+import React from 'react';
 import PropTypes from 'prop-types';
-const MatrixClientPeg = require("../../../MatrixClientPeg");
-const Modal = require("../../../Modal");
-const sdk = require("../../../index");
+import createReactClass from 'create-react-class';
+import sdk from "../../../index";
 import { _t } from '../../../languageHandler';
 
 // A list capable of displaying entities which conform to the SearchableEntity
 // interface which is an object containing getJsx(): Jsx and matches(query: string): boolean
-const SearchableEntityList = React.createClass({
+const SearchableEntityList = createReactClass({
     displayName: 'SearchableEntityList',
 
     propTypes: {

src/components/views/rooms/SimpleRoomHeader.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import AccessibleButton from '../elements/AccessibleButton';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -36,7 +37,7 @@ export function CancelButton(props) {
  * A stripped-down room header used for things like the user settings
  * and room directory.
  */
-export default React.createClass({
+export default createReactClass({
     displayName: 'SimpleRoomHeader',
 
     propTypes: {

src/components/views/rooms/TopUnreadMessagesBar.js

@@ -16,17 +16,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';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
-import {formatCount} from '../../../utils/FormattingUtils';
 
-const sdk = require('../../../index');
-
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'TopUnreadMessagesBar',
 
     propTypes: {

src/components/views/rooms/UserTile.js

@@ -14,18 +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 MatrixClientPeg = require('../../../MatrixClientPeg');
 const sdk = require('../../../index');
-const dis = require('../../../dispatcher');
-const Modal = require("../../../Modal");
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'UserTile',
 
     propTypes: {

src/components/views/rooms/WhoIsTypingTile.js

@@ -17,12 +17,13 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import WhoIsTyping from '../../../WhoIsTyping';
 import Timer from '../../../utils/Timer';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import MemberAvatar from '../avatars/MemberAvatar';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'WhoIsTypingTile',
 
     propTypes: {

test/components/structures/MessagePanel-test.js

@@ -16,8 +16,9 @@ limitations under the License.
 
 import SettingsStore from "../../../src/settings/SettingsStore";
 
-const React = require('react');
-const ReactDOM = require("react-dom");
+import React from 'react';
+import createReactClass from 'create-react-class';
+import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 const TestUtils = require('react-dom/test-utils');
 const expect = require('expect');
@@ -39,7 +40,7 @@ let client;
 const room = new Matrix.Room();
 
 // wrap MessagePanel with a component which provides the MatrixClient in the context.
-const WrappedMessagePanel = React.createClass({
+const WrappedMessagePanel = createReactClass({
     childContextTypes: {
         matrixClient: PropTypes.object,
         room: PropTypes.object,

test/components/stub-component.js

@@ -1,8 +1,8 @@
 /* A dummy React component which we use for stubbing out app-level components
  */
-'use strict';
 
-const React = require('react');
+import React from 'react';
+import createReactClass from 'create-react-class';
 
 module.exports = function(opts) {
     opts = opts || {};
@@ -16,5 +16,5 @@ module.exports = function(opts) {
         };
     }
 
-    return React.createClass(opts);
+    return createReactClass(opts);
 };