Merge pull request #5157 from matrix-org/t3chguy/crc1

Remove create-react-class

src/components/views/dialogs/CreateRoomDialog.js

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
@@ -27,16 +26,17 @@ import {Key} from "../../../Keyboard";
 import {privateShouldBeEncrypted} from "../../../createRoom";
 import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
 
-export default createReactClass({
-    displayName: 'CreateRoomDialog',
-    propTypes: {
+export default class CreateRoomDialog extends React.Component {
+    static propTypes = {
         onFinished: PropTypes.func.isRequired,
         defaultPublic: PropTypes.bool,
-    },
+    };
+
+    constructor(props) {
+        super(props);
 
-    getInitialState() {
         const config = SdkConfig.get();
-        return {
+        this.state = {
             isPublic: this.props.defaultPublic || false,
             isEncrypted: privateShouldBeEncrypted(),
             name: "",
@@ -46,7 +46,7 @@ export default createReactClass({
             noFederate: config.default_federate === false,
             nameIsValid: false,
         };
-    },
+    }
 
     _roomCreateOptions() {
         const opts = {};
@@ -76,27 +76,27 @@ export default createReactClass({
         }
 
         return opts;
-    },
+    }
 
     componentDidMount() {
         this._detailsRef.addEventListener("toggle", this.onDetailsToggled);
         // move focus to first field when showing dialog
         this._nameFieldRef.focus();
-    },
+    }
 
     componentWillUnmount() {
         this._detailsRef.removeEventListener("toggle", this.onDetailsToggled);
-    },
+    }
 
-    _onKeyDown: function(event) {
+    _onKeyDown = event => {
         if (event.key === Key.ENTER) {
             this.onOk();
             event.preventDefault();
             event.stopPropagation();
         }
-    },
+    };
 
-    onOk: async function() {
+    onOk = async () => {
         const activeElement = document.activeElement;
         if (activeElement) {
             activeElement.blur();
@@ -122,51 +122,51 @@ export default createReactClass({
                 field.validate({ allowEmpty: false, focused: true });
             }
         }
-    },
+    };
 
-    onCancel: function() {
+    onCancel = () => {
         this.props.onFinished(false);
-    },
+    };
 
-    onNameChange(ev) {
+    onNameChange = ev => {
         this.setState({name: ev.target.value});
-    },
+    };
 
-    onTopicChange(ev) {
+    onTopicChange = ev => {
         this.setState({topic: ev.target.value});
-    },
+    };
 
-    onPublicChange(isPublic) {
+    onPublicChange = isPublic => {
         this.setState({isPublic});
-    },
+    };
 
-    onEncryptedChange(isEncrypted) {
+    onEncryptedChange = isEncrypted => {
         this.setState({isEncrypted});
-    },
+    };
 
-    onAliasChange(alias) {
+    onAliasChange = alias => {
         this.setState({alias});
-    },
+    };
 
-    onDetailsToggled(ev) {
+    onDetailsToggled = ev => {
         this.setState({detailsOpen: ev.target.open});
-    },
+    };
 
-    onNoFederateChange(noFederate) {
+    onNoFederateChange = noFederate => {
         this.setState({noFederate});
-    },
+    };
 
-    collectDetailsRef(ref) {
+    collectDetailsRef = ref => {
         this._detailsRef = ref;
-    },
+    };
 
-    async onNameValidate(fieldState) {
-        const result = await this._validateRoomName(fieldState);
+    onNameValidate = async fieldState => {
+        const result = await CreateRoomDialog._validateRoomName(fieldState);
         this.setState({nameIsValid: result.valid});
         return result;
-    },
+    };
 
-    _validateRoomName: withValidation({
+    static _validateRoomName = withValidation({
         rules: [
             {
                 key: "required",
@@ -174,9 +174,9 @@ export default createReactClass({
                 invalid: () => _t("Please enter a name for the room"),
             },
         ],
-    }),
+    });
 
-    render: function() {
+    render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const Field = sdk.getComponent('views.elements.Field');
@@ -273,5 +273,5 @@ export default createReactClass({
                     onCancel={this.onCancel} />
             </BaseDialog>
         );
-    },
-});
+    }
+}