Merge pull request #3404 from matrix-org/t3chguy/react16_10

Switch to createReactClass: views/elements & views/groups. React 16 :D

src/components/views/elements/ActionButton.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 AccessibleButton from './AccessibleButton';
 import dis from '../../../dispatcher';
 import sdk from '../../../index';
 import Analytics from '../../../Analytics';
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'RoleButton',
 
     propTypes: {

src/components/views/elements/AddressSelector.js

@@ -15,15 +15,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 sdk from '../../../index';
 import classNames from 'classnames';
 import { UserAddressType } from '../../../UserAddress';
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'AddressSelector',
 
     propTypes: {

src/components/views/elements/AddressTile.js

@@ -17,14 +17,15 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import classNames from 'classnames';
 import sdk from "../../../index";
 import MatrixClientPeg from "../../../MatrixClientPeg";
 import { _t } from '../../../languageHandler';
 import { UserAddressType } from '../../../UserAddress.js';
 
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'AddressTile',
 
     propTypes: {

src/components/views/elements/DeviceVerifyButtons.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 sdk from '../../../index';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'DeviceVerifyButtons',
 
     propTypes: {

src/components/views/elements/DialogButtons.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 { _t } from '../../../languageHandler';
 
 /**
  * Basic container for buttons in modal dialogs.
  */
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: "DialogButtons",
 
     propTypes: {

src/components/views/elements/EditableText.js

@@ -17,8 +17,9 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'EditableText',
 
     propTypes: {

src/components/views/elements/InlineSpinner.js

@@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const React = require('react');
+import React from "react";
+import createReactClass from 'create-react-class';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'InlineSpinner',
 
     render: function() {

src/components/views/elements/MemberEventListSummary.js

@@ -18,11 +18,12 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import MemberAvatar from '../avatars/MemberAvatar';
 import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'MemberEventListSummary',
 
     propTypes: {

src/components/views/elements/MessageSpinner.js

@@ -15,8 +15,9 @@ limitations under the License.
 */
 
 import React from 'react';
+import createReactClass from 'create-react-class';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'MessageSpinner',
 
     render: function() {

src/components/views/elements/PersistentApp.js

@@ -15,13 +15,14 @@ limitations under the License.
 */
 
 import React from 'react';
+import createReactClass from 'create-react-class';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'PersistentApp',
 
     getInitialState: function() {

src/components/views/elements/Pill.js

@@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
+import createReactClass from 'create-react-class';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import classNames from 'classnames';
@@ -31,7 +32,7 @@ const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
 // HttpUtils transformTags to relative links. This excludes event URLs (with `[^\/]*`)
 const REGEX_LOCAL_MATRIXTO = /^#\/(?:user|room|group)\/(([#!@+])[^/]*)$/;
 
-const Pill = React.createClass({
+const Pill = createReactClass({
     statics: {
         isPillUrl: (url) => {
             return !!REGEX_MATRIXTO.exec(url);

src/components/views/elements/PowerSelector.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 * as Roles from '../../../Roles';
 import { _t } from '../../../languageHandler';
 import Field from "./Field";
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'PowerSelector',
 
     propTypes: {

src/components/views/elements/ProgressBar.js

@@ -14,12 +14,11 @@ 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';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'ProgressBar',
     propTypes: {
         value: PropTypes.number,

src/components/views/elements/SettingsFlag.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 SettingsStore from "../../../settings/SettingsStore";
 import { _t } from '../../../languageHandler';
 import ToggleSwitch from "./ToggleSwitch";
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'SettingsFlag',
     propTypes: {
         name: PropTypes.string.isRequired,

src/components/views/elements/Spinner.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: 'Spinner',
 
     render: function() {

src/components/views/elements/TagTile.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 classNames from 'classnames';
 import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
@@ -34,7 +35,7 @@ import TagOrderStore from '../../../stores/TagOrderStore';
 //  - Rooms that are part of the group
 //  - Direct messages with members of the group
 // with the intention that this could be expanded to arbitrary tags in future.
-export default React.createClass({
+export default createReactClass({
     displayName: 'TagTile',
 
     propTypes: {

src/components/views/elements/TintableSvg.js

@@ -14,14 +14,12 @@ 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 PropTypes from 'prop-types';
-const Tinter = require("../../../Tinter");
+import createReactClass from 'create-react-class';
+import Tinter from "../../../Tinter";
 
-var TintableSvg = React.createClass({
+const TintableSvg = createReactClass({
     displayName: 'TintableSvg',
 
     propTypes: {

src/components/views/elements/Tooltip.js

@@ -20,12 +20,13 @@ limitations under the License.
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import dis from '../../../dispatcher';
 import classNames from 'classnames';
 
 const MIN_TOOLTIP_HEIGHT = 25;
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'Tooltip',
 
     propTypes: {

src/components/views/elements/TooltipButton.js

@@ -16,9 +16,10 @@ limitations under the License.
 */
 
 import React from 'react';
+import createReactClass from 'create-react-class';
 import sdk from '../../../index';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'TooltipButton',
 
     getInitialState: function() {

src/components/views/elements/TruncatedList.js

@@ -17,9 +17,10 @@ limitations under the License.
 
 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: 'TruncatedList',
 
     propTypes: {

src/components/views/elements/UserSelector.js

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

src/components/views/groups/GroupInviteTile.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 { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
@@ -25,7 +26,7 @@ import classNames from 'classnames';
 import MatrixClientPeg from "../../../MatrixClientPeg";
 import {createMenu} from "../../structures/ContextualMenu";
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'GroupInviteTile',
 
     propTypes: {

src/components/views/groups/GroupMemberInfo.js

@@ -15,8 +15,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import PropTypes from 'prop-types';
 import React from 'react';
+import PropTypes from 'prop-types';
+import createReactClass from 'create-react-class';
 import { MatrixClient } from 'matrix-js-sdk';
 import dis from '../../../dispatcher';
 import Modal from '../../../Modal';
@@ -26,7 +27,7 @@ import { GroupMemberType } from '../../../groups';
 import GroupStore from '../../../stores/GroupStore';
 import AccessibleButton from '../elements/AccessibleButton';
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'GroupMemberInfo',
 
     contextTypes: {

src/components/views/groups/GroupMemberList.js

@@ -15,6 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
+import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
@@ -27,7 +28,7 @@ import RightPanel from '../../structures/RightPanel';
 
 const INITIAL_LOAD_NUM_MEMBERS = 30;
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'GroupMemberList',
 
     propTypes: {

src/components/views/groups/GroupMemberTile.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 sdk from '../../../index';
 import dis from '../../../dispatcher';
 import { GroupMemberType } from '../../../groups';
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'GroupMemberTile',
 
     propTypes: {

src/components/views/groups/GroupPublicityToggle.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 sdk from '../../../index';
 import GroupStore from '../../../stores/GroupStore';
 import ToggleSwitch from "../elements/ToggleSwitch";
 
-export default React.createClass({
+export default createReactClass({
     displayName: 'GroupPublicityToggle',
 
     propTypes: {