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 a3fe58a598..a3c4ad96ee 100644
--- a/src/components/views/dialogs/BugReportDialog.js
+++ b/src/components/views/dialogs/BugReportDialog.js
@@ -176,6 +176,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..5de249f214 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,
- };
-
- 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 (
-
- );
- }
-}
+ 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,
+};
+
+export default ToggleSwitch;
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);
}
}
},