Merge pull request #3529 from matrix-org/t3chguy/react16_cleanup2

React error/warning cleanup
This commit is contained in:
Michael Telatynski 2019-10-09 16:26:24 +01:00 committed by GitHub
commit ff18a04da1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 63 additions and 86 deletions

View file

@ -25,7 +25,7 @@ const TagPanelButtons = createReactClass({
displayName: 'TagPanelButtons',
componentWillMount: function() {
componentDidMount: function() {
this._dispatcherRef = dis.register(this._onAction);
},

View file

@ -57,7 +57,7 @@ module.exports = createReactClass({
return this._getState(this.props);
},
componentWillMount() {
componentDidMount() {
this.unmounted = false;
this.context.matrixClient.on('sync', this.onClientSync);
},

View file

@ -52,7 +52,7 @@ module.exports = createReactClass({
};
},
componentWillMount: function() {
componentDidMount: function() {
MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
},

View file

@ -176,6 +176,7 @@ export default class BugReportDialog extends React.Component {
placeholder="https://github.com/vector-im/riot-web/issues/..."
/>
<Field
id="mx_BugReportDialog_notes"
className="mx_BugReportDialog_field_input"
element="textarea"
label={_t("Notes")}

View file

@ -594,7 +594,7 @@ export default class AppTile extends React.Component {
allow={iframeFeatures}
ref="appFrame"
src={this._getSafeUrl()}
allowFullScreen="true"
allowFullScreen={true}
sandbox={sandboxFlags}
onLoad={this._onLoaded} />
</div>

View file

@ -74,15 +74,15 @@ export default class Flair extends React.Component {
};
}
componentWillUnmount() {
this._unmounted = true;
}
componentWillMount() {
componentDidMount() {
this._unmounted = false;
this._generateAvatars(this.props.groups);
}
componentWillUnmount() {
this._unmounted = true;
}
componentWillReceiveProps(newProps) {
this._generateAvatars(newProps.groups);
}

View file

@ -57,7 +57,7 @@ export default createReactClass({
};
},
componentWillMount() {
componentDidMount() {
this.unmounted = false;
if (this.props.tag[0] === '+') {
FlairStore.addListener('updateGroupProfile', this._onFlairStoreUpdated);

View file

@ -1,5 +1,6 @@
/*
Copyright 2019 New Vector Ltd
Copyright 2019 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@ -14,85 +15,62 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import PropTypes from 'prop-types';
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import {KeyCode} from "../../../Keyboard";
export default class ToggleSwitch extends React.Component {
static propTypes = {
// Whether or not this toggle is in the 'on' position. Default false (off).
checked: PropTypes.bool,
// Whether or not the user can interact with the switch
disabled: PropTypes.bool,
// Called when the checked state changes. First argument will be the new state.
onChange: PropTypes.func,
};
constructor(props) {
super(props);
this.state = {
checked: props.checked || false, // default false
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.checked !== this.state.checked) {
this.setState({checked: nextProps.checked});
}
}
_toggle = () => {
if (this.props.disabled) return;
const newState = !this.state.checked;
this.setState({checked: newState});
if (this.props.onChange) {
this.props.onChange(newState);
}
};
_onClick = (e) => {
// Controlled Toggle Switch element
const ToggleSwitch = ({checked, disabled=false, onChange, ...props}) => {
const _onClick = (e) => {
e.stopPropagation();
e.preventDefault();
if (disabled) return;
this._toggle();
onChange(!checked);
};
_onKeyDown = (e) => {
const _onKeyDown = (e) => {
e.stopPropagation();
e.preventDefault();
if (disabled) return;
if (e.keyCode === KeyCode.ENTER || e.keyCode === KeyCode.SPACE) {
this._toggle();
onChange(!checked);
}
};
render() {
// eslint-disable-next-line no-unused-vars
const {checked, disabled, onChange, ...props} = this.props;
const classes = classNames({
"mx_ToggleSwitch": true,
"mx_ToggleSwitch_on": checked,
"mx_ToggleSwitch_enabled": !disabled,
});
const classes = classNames({
"mx_ToggleSwitch": true,
"mx_ToggleSwitch_on": this.state.checked,
"mx_ToggleSwitch_enabled": !this.props.disabled,
});
return (
<div
{...props}
className={classes}
onClick={this._onClick}
onKeyDown={this._onKeyDown}
role="checkbox"
aria-checked={this.state.checked}
aria-disabled={disabled}
tabIndex={0}
>
<div className="mx_ToggleSwitch_ball" />
</div>
);
}
}
return (
<div {...props}
className={classes}
onClick={_onClick}
onKeyDown={_onKeyDown}
role="checkbox"
aria-checked={checked}
aria-disabled={disabled}
tabIndex={0}
>
<div className="mx_ToggleSwitch_ball" />
</div>
);
};
ToggleSwitch.propTypes = {
// Whether or not this toggle is in the 'on' position.
checked: PropTypes.bool.isRequired,
// Whether or not the user can interact with the switch
disabled: PropTypes.bool,
// Called when the checked state changes. First argument will be the new state.
onChange: PropTypes.func.isRequired,
};
export default ToggleSwitch;

View file

@ -30,7 +30,9 @@ export default class CookieBar extends React.Component {
super();
}
onUsageDataClicked() {
onUsageDataClicked(e) {
e.stopPropagation();
e.preventDefault();
Analytics.showDetailsModal();
}
@ -61,7 +63,6 @@ export default class CookieBar extends React.Component {
{
'UsageDataLink': (sub) => <a
className="mx_MatrixToolbar_link"
href="javascript:;"
onClick={this.onUsageDataClicked}
>
{ sub }
@ -83,7 +84,6 @@ export default class CookieBar extends React.Component {
{
'UsageDataLink': (sub) => <a
className="mx_MatrixToolbar_link"
href="javascript:;"
onClick={this.onUsageDataClicked}
>
{ sub }

View file

@ -146,19 +146,17 @@ module.exports = createReactClass({
});
},
componentWillMount: function() {
MatrixClientPeg.get().on("accountData", this.onAccountData);
MatrixClientPeg.get().on("Room.name", this.onRoomName);
componentDidMount: function() {
const cli = MatrixClientPeg.get();
cli.on("accountData", this.onAccountData);
cli.on("Room.name", this.onRoomName);
ActiveRoomObserver.addListener(this.props.room.roomId, this._onActiveRoomChange);
this.dispatcherRef = dis.register(this.onAction);
if (this._shouldShowStatusMessage()) {
const statusUser = this._getStatusMessageUser();
if (statusUser) {
statusUser.on(
"User._unstable_statusMessage",
this._onStatusMessageCommitted,
);
statusUser.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
}
}
},