From a782baf510dbd68558d1e0eca11fa2f315c0fd12 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 8 Oct 2019 12:10:37 +0100 Subject: [PATCH 1/3] React error/warning cleanup Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/structures/TagPanelButtons.js | 2 +- src/components/views/avatars/BaseAvatar.js | 2 +- src/components/views/avatars/RoomAvatar.js | 2 +- .../views/dialogs/BugReportDialog.js | 1 + src/components/views/elements/AppTile.js | 2 +- src/components/views/elements/Flair.js | 10 +- src/components/views/elements/TagTile.js | 2 +- src/components/views/elements/ToggleSwitch.js | 108 +++++++----------- src/components/views/globals/CookieBar.js | 6 +- src/components/views/rooms/RoomTile.js | 12 +- 10 files changed, 62 insertions(+), 85 deletions(-) diff --git a/src/components/structures/TagPanelButtons.js b/src/components/structures/TagPanelButtons.js index a850e8c34c..7255e12307 100644 --- a/src/components/structures/TagPanelButtons.js +++ b/src/components/structures/TagPanelButtons.js @@ -25,7 +25,7 @@ const TagPanelButtons = createReactClass({ displayName: 'TagPanelButtons', - componentWillMount: function() { + componentDidMount: function() { this._dispatcherRef = dis.register(this._onAction); }, diff --git a/src/components/views/avatars/BaseAvatar.js b/src/components/views/avatars/BaseAvatar.js index f6afee0eba..82db78615e 100644 --- a/src/components/views/avatars/BaseAvatar.js +++ b/src/components/views/avatars/BaseAvatar.js @@ -57,7 +57,7 @@ module.exports = createReactClass({ return this._getState(this.props); }, - componentWillMount() { + componentDidMount() { this.unmounted = false; this.context.matrixClient.on('sync', this.onClientSync); }, diff --git a/src/components/views/avatars/RoomAvatar.js b/src/components/views/avatars/RoomAvatar.js index 8da5523d1b..6f8f236afc 100644 --- a/src/components/views/avatars/RoomAvatar.js +++ b/src/components/views/avatars/RoomAvatar.js @@ -52,7 +52,7 @@ module.exports = createReactClass({ }; }, - componentWillMount: function() { + componentDidMount: function() { MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents); }, diff --git a/src/components/views/dialogs/BugReportDialog.js b/src/components/views/dialogs/BugReportDialog.js index a72983427c..6d6216993e 100644 --- a/src/components/views/dialogs/BugReportDialog.js +++ b/src/components/views/dialogs/BugReportDialog.js @@ -174,6 +174,7 @@ export default class BugReportDialog extends React.Component { placeholder="https://github.com/vector-im/riot-web/issues/..." /> diff --git a/src/components/views/elements/Flair.js b/src/components/views/elements/Flair.js index 6a70b915c2..0b9dabeae6 100644 --- a/src/components/views/elements/Flair.js +++ b/src/components/views/elements/Flair.js @@ -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); } diff --git a/src/components/views/elements/TagTile.js b/src/components/views/elements/TagTile.js index 8a3b85b65a..2355cae820 100644 --- a/src/components/views/elements/TagTile.js +++ b/src/components/views/elements/TagTile.js @@ -57,7 +57,7 @@ export default createReactClass({ }; }, - componentWillMount() { + componentDidMount() { this.unmounted = false; if (this.props.tag[0] === '+') { FlairStore.addListener('updateGroupProfile', this._onFlairStoreUpdated); diff --git a/src/components/views/elements/ToggleSwitch.js b/src/components/views/elements/ToggleSwitch.js index 05986e4e99..4ebd2ac657 100644 --- a/src/components/views/elements/ToggleSwitch.js +++ b/src/components/views/elements/ToggleSwitch.js @@ -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, +// Controlled Toggle Switch element +const ToggleSwitch = ({checked, disabled=false, onChange, ...props}) => { + const _toggle = () => { + if (disabled) return; + onChange(!checked); }; - 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) => { + const _onClick = (e) => { e.stopPropagation(); e.preventDefault(); - - this._toggle(); + _toggle(); }; - _onKeyDown = (e) => { + const _onKeyDown = (e) => { e.stopPropagation(); e.preventDefault(); if (e.keyCode === KeyCode.ENTER || e.keyCode === KeyCode.SPACE) { - this._toggle(); + _toggle(); } }; - 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 ( -
-
-
- ); - } -} + return ( +
+
+
+ ); +}; + +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, +}; diff --git a/src/components/views/globals/CookieBar.js b/src/components/views/globals/CookieBar.js index f2bcd647d7..04226468d8 100644 --- a/src/components/views/globals/CookieBar.js +++ b/src/components/views/globals/CookieBar.js @@ -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) => { sub } @@ -83,7 +84,6 @@ export default class CookieBar extends React.Component { { 'UsageDataLink': (sub) => { sub } diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js index f2512e06c2..b727abd261 100644 --- a/src/components/views/rooms/RoomTile.js +++ b/src/components/views/rooms/RoomTile.js @@ -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); } } }, From a03e9e7a4f14f562163456716cdd7fbce8680d16 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 8 Oct 2019 12:18:44 +0100 Subject: [PATCH 2/3] tidy ToggleSwitch Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/elements/ToggleSwitch.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/views/elements/ToggleSwitch.js b/src/components/views/elements/ToggleSwitch.js index 4ebd2ac657..72d7b8643a 100644 --- a/src/components/views/elements/ToggleSwitch.js +++ b/src/components/views/elements/ToggleSwitch.js @@ -23,23 +23,21 @@ import {KeyCode} from "../../../Keyboard"; // Controlled Toggle Switch element const ToggleSwitch = ({checked, disabled=false, onChange, ...props}) => { - const _toggle = () => { - if (disabled) return; - onChange(!checked); - }; - const _onClick = (e) => { e.stopPropagation(); e.preventDefault(); - _toggle(); + if (disabled) return; + + onChange(!checked); }; const _onKeyDown = (e) => { e.stopPropagation(); e.preventDefault(); + if (disabled) return; if (e.keyCode === KeyCode.ENTER || e.keyCode === KeyCode.SPACE) { - _toggle(); + onChange(!checked); } }; From 4c82496bca15300670f3b382451d75178e1ff1b3 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Tue, 8 Oct 2019 12:22:22 +0100 Subject: [PATCH 3/3] export ToggleSwitch Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/components/views/elements/ToggleSwitch.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/views/elements/ToggleSwitch.js b/src/components/views/elements/ToggleSwitch.js index 72d7b8643a..5de249f214 100644 --- a/src/components/views/elements/ToggleSwitch.js +++ b/src/components/views/elements/ToggleSwitch.js @@ -72,3 +72,5 @@ ToggleSwitch.propTypes = { // Called when the checked state changes. First argument will be the new state. onChange: PropTypes.func.isRequired, }; + +export default ToggleSwitch;