Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Remove create-react-class #5157

Merged
merged 11 commits into from
Sep 3, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -61,7 +61,6 @@
"classnames": "^2.2.6",
"commonmark": "^0.29.1",
"counterpart": "^0.18.6",
"create-react-class": "^15.6.3",
"diff-dom": "^4.1.6",
"diff-match-patch": "^1.0.5",
"emojibase-data": "^5.0.1",
36 changes: 17 additions & 19 deletions src/AsyncWrapper.js
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import createReactClass from 'create-react-class';
import React from "react";
import * as sdk from './index';
import PropTypes from 'prop-types';
import { _t } from './languageHandler';
@@ -24,21 +24,19 @@ import { _t } from './languageHandler';
* Wrap an asynchronous loader function with a react component which shows a
* spinner until the real component loads.
*/
export default createReactClass({
propTypes: {
export default class AsyncWrapper extends React.Component {
static propTypes = {
/** A promise which resolves with the real component
*/
prom: PropTypes.object.isRequired,
},
};

getInitialState: function() {
return {
component: null,
error: null,
};
},
state = {
component: null,
error: null,
};

componentDidMount: function() {
componentDidMount() {
this._unmounted = false;
// XXX: temporary logging to try to diagnose
// https://github.com/vector-im/element-web/issues/3148
@@ -56,17 +54,17 @@ export default createReactClass({
console.warn('AsyncWrapper promise failed', e);
this.setState({error: e});
});
},
}

componentWillUnmount: function() {
componentWillUnmount() {
this._unmounted = true;
},
}

_onWrapperCancelClick: function() {
_onWrapperCancelClick = () => {
this.props.onFinished(false);
},
};

render: function() {
render() {
if (this.state.component) {
const Component = this.state.component;
return <Component {...this.props} />;
@@ -87,6 +85,6 @@ export default createReactClass({
const Spinner = sdk.getComponent("elements.Spinner");
return <Spinner />;
}
},
});
}
}

48 changes: 22 additions & 26 deletions src/async-components/views/dialogs/ExportE2eKeysDialog.js
Original file line number Diff line number Diff line change
@@ -17,7 +17,6 @@ limitations under the License.
import FileSaver from 'file-saver';
import React, {createRef} from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';
import { _t } from '../../../languageHandler';

import { MatrixClient } from 'matrix-js-sdk';
@@ -27,34 +26,31 @@ import * as sdk from '../../../index';
const PHASE_EDIT = 1;
const PHASE_EXPORTING = 2;

export default createReactClass({
displayName: 'ExportE2eKeysDialog',

propTypes: {
export default class ExportE2eKeysDialog extends React.Component {
static propTypes = {
matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
onFinished: PropTypes.func.isRequired,
},
};

getInitialState: function() {
return {
phase: PHASE_EDIT,
errStr: null,
};
},
constructor(props) {
super(props);

// TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
UNSAFE_componentWillMount: function() {
this._unmounted = false;

this._passphrase1 = createRef();
this._passphrase2 = createRef();
},

componentWillUnmount: function() {
this.state = {
phase: PHASE_EDIT,
errStr: null,
};
}

componentWillUnmount() {
this._unmounted = true;
},
}

_onPassphraseFormSubmit: function(ev) {
_onPassphraseFormSubmit = (ev) => {
ev.preventDefault();

const passphrase = this._passphrase1.current.value;
@@ -69,9 +65,9 @@ export default createReactClass({

this._startExport(passphrase);
return false;
},
};

_startExport: function(passphrase) {
_startExport(passphrase) {
// extra Promise.resolve() to turn synchronous exceptions into
// asynchronous ones.
Promise.resolve().then(() => {
@@ -102,15 +98,15 @@ export default createReactClass({
errStr: null,
phase: PHASE_EXPORTING,
});
},
}

_onCancelClick: function(ev) {
_onCancelClick = (ev) => {
ev.preventDefault();
this.props.onFinished(false);
return false;
},
};

render: function() {
render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');

const disableForm = (this.state.phase === PHASE_EXPORTING);
@@ -184,5 +180,5 @@ export default createReactClass({
</form>
</BaseDialog>
);
},
});
}
}
54 changes: 25 additions & 29 deletions src/async-components/views/dialogs/ImportE2eKeysDialog.js
Original file line number Diff line number Diff line change
@@ -16,7 +16,6 @@ limitations under the License.

import React, {createRef} from 'react';
import PropTypes from 'prop-types';
import createReactClass from 'create-react-class';

import { MatrixClient } from 'matrix-js-sdk';
import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption';
@@ -38,48 +37,45 @@ function readFileAsArrayBuffer(file) {
const PHASE_EDIT = 1;
const PHASE_IMPORTING = 2;

export default createReactClass({
displayName: 'ImportE2eKeysDialog',

propTypes: {
export default class ImportE2eKeysDialog extends React.Component {
static propTypes = {
matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
onFinished: PropTypes.func.isRequired,
},
};

getInitialState: function() {
return {
enableSubmit: false,
phase: PHASE_EDIT,
errStr: null,
};
},
constructor(props) {
super(props);

// TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
UNSAFE_componentWillMount: function() {
this._unmounted = false;

this._file = createRef();
this._passphrase = createRef();
},

componentWillUnmount: function() {
this.state = {
enableSubmit: false,
phase: PHASE_EDIT,
errStr: null,
};
}

componentWillUnmount() {
this._unmounted = true;
},
}

_onFormChange: function(ev) {
_onFormChange = (ev) => {
const files = this._file.current.files || [];
this.setState({
enableSubmit: (this._passphrase.current.value !== "" && files.length > 0),
});
},
};

_onFormSubmit: function(ev) {
_onFormSubmit = (ev) => {
ev.preventDefault();
this._startImport(this._file.current.files[0], this._passphrase.current.value);
return false;
},
};

_startImport: function(file, passphrase) {
_startImport(file, passphrase) {
this.setState({
errStr: null,
phase: PHASE_IMPORTING,
@@ -105,15 +101,15 @@ export default createReactClass({
phase: PHASE_EDIT,
});
});
},
}

_onCancelClick: function(ev) {
_onCancelClick = (ev) => {
ev.preventDefault();
this.props.onFinished(false);
return false;
},
};

render: function() {
render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');

const disableForm = (this.state.phase !== PHASE_EDIT);
@@ -188,5 +184,5 @@ export default createReactClass({
</form>
</BaseDialog>
);
},
});
}
}
4 changes: 2 additions & 2 deletions src/components/structures/EmbeddedPage.js
Original file line number Diff line number Diff line change
@@ -43,8 +43,8 @@ export default class EmbeddedPage extends React.PureComponent {

static contextType = MatrixClientContext;

constructor(props) {
super(props);
constructor(props, context) {
super(props, context);

this._dispatcherRef = null;

Loading