@@ -220,7 +216,7 @@ const FilePanel = createReactClass({
// "(" + this.state.timelineSet._timelines.join(", ") + ")" + " with key " + this.props.roomId);
return (
;
- },
+ }
- _getRoomsNode: function() {
+ _getRoomsNode() {
const RoomDetailList = sdk.getComponent('rooms.RoomDetailList');
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const TintableSvg = sdk.getComponent('elements.TintableSvg');
@@ -902,9 +889,9 @@ export default createReactClass({
className={roomDetailListClassName} />
}
-
);
}
- },
-});
+ }
+}
export default FilePanel;
diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index c6703b1b9a..5dadba983a 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -17,7 +17,6 @@ limitations under the License.
*/
import React from 'react';
-import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import {MatrixClientPeg} from '../../MatrixClientPeg';
import * as sdk from '../../index';
@@ -70,10 +69,8 @@ const UserSummaryType = PropTypes.shape({
}).isRequired,
});
-const CategoryRoomList = createReactClass({
- displayName: 'CategoryRoomList',
-
- props: {
+class CategoryRoomList extends React.Component {
+ static propTypes = {
rooms: PropTypes.arrayOf(RoomSummaryType).isRequired,
category: PropTypes.shape({
profile: PropTypes.shape({
@@ -84,9 +81,9 @@ const CategoryRoomList = createReactClass({
// Whether the list should be editable
editing: PropTypes.bool.isRequired,
- },
+ };
- onAddRoomsToSummaryClicked: function(ev) {
+ onAddRoomsToSummaryClicked = (ev) => {
ev.preventDefault();
const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
Modal.createTrackedDialog('Add Rooms to Group Summary', '', AddressPickerDialog, {
@@ -122,9 +119,9 @@ const CategoryRoomList = createReactClass({
});
},
}, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
- },
+ };
- render: function() {
+ render() {
const TintableSvg = sdk.getComponent("elements.TintableSvg");
const addButton = this.props.editing ?
(;
- },
-});
+ }
+}
-const FeaturedRoom = createReactClass({
- displayName: 'FeaturedRoom',
-
- props: {
+class FeaturedRoom extends React.Component {
+ static propTypes = {
summaryInfo: RoomSummaryType.isRequired,
editing: PropTypes.bool.isRequired,
groupId: PropTypes.string.isRequired,
- },
+ };
- onClick: function(e) {
+ onClick = (e) => {
e.preventDefault();
e.stopPropagation();
@@ -176,9 +171,9 @@ const FeaturedRoom = createReactClass({
room_alias: this.props.summaryInfo.profile.canonical_alias,
room_id: this.props.summaryInfo.room_id,
});
- },
+ };
- onDeleteClicked: function(e) {
+ onDeleteClicked = (e) => {
e.preventDefault();
e.stopPropagation();
GroupStore.removeRoomFromGroupSummary(
@@ -201,9 +196,9 @@ const FeaturedRoom = createReactClass({
description: _t("The room '%(roomName)s' could not be removed from the summary.", {roomName}),
});
});
- },
+ };
- render: function() {
+ render() {
const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
const roomName = this.props.summaryInfo.profile.name ||
@@ -243,13 +238,11 @@ const FeaturedRoom = createReactClass({
;
- },
-});
+ }
+}
-const RoleUserList = createReactClass({
- displayName: 'RoleUserList',
-
- props: {
+class RoleUserList extends React.Component {
+ static propTypes = {
users: PropTypes.arrayOf(UserSummaryType).isRequired,
role: PropTypes.shape({
profile: PropTypes.shape({
@@ -260,9 +253,9 @@ const RoleUserList = createReactClass({
// Whether the list should be editable
editing: PropTypes.bool.isRequired,
- },
+ };
- onAddUsersClicked: function(ev) {
+ onAddUsersClicked = (ev) => {
ev.preventDefault();
const AddressPickerDialog = sdk.getComponent("dialogs.AddressPickerDialog");
Modal.createTrackedDialog('Add Users to Group Summary', '', AddressPickerDialog, {
@@ -298,9 +291,9 @@ const RoleUserList = createReactClass({
});
},
}, /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
- },
+ };
- render: function() {
+ render() {
const TintableSvg = sdk.getComponent("elements.TintableSvg");
const addButton = this.props.editing ?
(
@@ -325,19 +318,17 @@ const RoleUserList = createReactClass({
{ userNodes }
{ addButton }
;
- },
-});
+ }
+}
-const FeaturedUser = createReactClass({
- displayName: 'FeaturedUser',
-
- props: {
+class FeaturedUser extends React.Component {
+ static propTypes = {
summaryInfo: UserSummaryType.isRequired,
editing: PropTypes.bool.isRequired,
groupId: PropTypes.string.isRequired,
- },
+ };
- onClick: function(e) {
+ onClick = (e) => {
e.preventDefault();
e.stopPropagation();
@@ -345,9 +336,9 @@ const FeaturedUser = createReactClass({
action: 'view_start_chat_or_reuse',
user_id: this.props.summaryInfo.user_id,
});
- },
+ };
- onDeleteClicked: function(e) {
+ onDeleteClicked = (e) => {
e.preventDefault();
e.stopPropagation();
GroupStore.removeUserFromGroupSummary(
@@ -368,9 +359,9 @@ const FeaturedUser = createReactClass({
description: _t("The user '%(displayName)s' could not be removed from the summary.", {displayName}),
});
});
- },
+ };
- render: function() {
+ render() {
const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
const name = this.props.summaryInfo.displayname || this.props.summaryInfo.user_id;
@@ -394,41 +385,37 @@ const FeaturedUser = createReactClass({
{ roomNameNode }
{ deleteButton }
{ userNameNode }
{ deleteButton }
;
- },
-});
+ }
+}
const GROUP_JOINPOLICY_OPEN = "open";
const GROUP_JOINPOLICY_INVITE = "invite";
-export default createReactClass({
- displayName: 'GroupView',
-
- propTypes: {
+export default class GroupView extends React.Component {
+ static propTypes = {
groupId: PropTypes.string.isRequired,
// Whether this is the first time the group admin is viewing the group
groupIsNew: PropTypes.bool,
- },
+ };
- getInitialState: function() {
- return {
- summary: null,
- isGroupPublicised: null,
- isUserPrivileged: null,
- groupRooms: null,
- groupRoomsLoading: null,
- error: null,
- editing: false,
- saving: false,
- uploadingAvatar: false,
- avatarChanged: false,
- membershipBusy: false,
- publicityBusy: false,
- inviterProfile: null,
- showRightPanel: RightPanelStore.getSharedInstance().isOpenForGroup,
- };
- },
+ state = {
+ summary: null,
+ isGroupPublicised: null,
+ isUserPrivileged: null,
+ groupRooms: null,
+ groupRoomsLoading: null,
+ error: null,
+ editing: false,
+ saving: false,
+ uploadingAvatar: false,
+ avatarChanged: false,
+ membershipBusy: false,
+ publicityBusy: false,
+ inviterProfile: null,
+ showRightPanel: RightPanelStore.getSharedInstance().isOpenForGroup,
+ };
- componentDidMount: function() {
+ componentDidMount() {
this._unmounted = false;
this._matrixClient = MatrixClientPeg.get();
this._matrixClient.on("Group.myMembership", this._onGroupMyMembership);
@@ -437,9 +424,9 @@ export default createReactClass({
this._dispatcherRef = dis.register(this._onAction);
this._rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this._onRightPanelStoreUpdate);
- },
+ }
- componentWillUnmount: function() {
+ componentWillUnmount() {
this._unmounted = true;
this._matrixClient.removeListener("Group.myMembership", this._onGroupMyMembership);
dis.unregister(this._dispatcherRef);
@@ -448,10 +435,11 @@ export default createReactClass({
if (this._rightPanelStoreToken) {
this._rightPanelStoreToken.remove();
}
- },
+ }
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
- UNSAFE_componentWillReceiveProps: function(newProps) {
+ // eslint-disable-next-line camelcase
+ UNSAFE_componentWillReceiveProps(newProps) {
if (this.props.groupId !== newProps.groupId) {
this.setState({
summary: null,
@@ -460,24 +448,24 @@ export default createReactClass({
this._initGroupStore(newProps.groupId);
});
}
- },
+ }
- _onRightPanelStoreUpdate: function() {
+ _onRightPanelStoreUpdate = () => {
this.setState({
showRightPanel: RightPanelStore.getSharedInstance().isOpenForGroup,
});
- },
+ };
- _onGroupMyMembership: function(group) {
+ _onGroupMyMembership = (group) => {
if (this._unmounted || group.groupId !== this.props.groupId) return;
if (group.myMembership === 'leave') {
// Leave settings - the user might have clicked the "Leave" button
this._closeSettings();
}
this.setState({membershipBusy: false});
- },
+ };
- _initGroupStore: function(groupId, firstInit) {
+ _initGroupStore(groupId, firstInit) {
const group = this._matrixClient.getGroup(groupId);
if (group && group.inviter && group.inviter.userId) {
this._fetchInviterProfile(group.inviter.userId);
@@ -506,9 +494,9 @@ export default createReactClass({
});
}
});
- },
+ }
- onGroupStoreUpdated(firstInit) {
+ onGroupStoreUpdated = (firstInit) => {
if (this._unmounted) return;
const summary = GroupStore.getSummary(this.props.groupId);
if (summary.profile) {
@@ -533,7 +521,7 @@ export default createReactClass({
if (this.props.groupIsNew && firstInit) {
this._onEditClick();
}
- },
+ };
_fetchInviterProfile(userId) {
this.setState({
@@ -555,9 +543,9 @@ export default createReactClass({
inviterProfileBusy: false,
});
});
- },
+ }
- _onEditClick: function() {
+ _onEditClick = () => {
this.setState({
editing: true,
profileForm: Object.assign({}, this.state.summary.profile),
@@ -568,20 +556,20 @@ export default createReactClass({
GROUP_JOINPOLICY_INVITE,
},
});
- },
+ };
- _onShareClick: function() {
+ _onShareClick = () => {
const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
Modal.createTrackedDialog('share community dialog', '', ShareDialog, {
target: this._matrixClient.getGroup(this.props.groupId) || new Group(this.props.groupId),
});
- },
+ };
- _onCancelClick: function() {
+ _onCancelClick = () => {
this._closeSettings();
- },
+ };
- _onAction(payload) {
+ _onAction = (payload) => {
switch (payload.action) {
// NOTE: close_settings is an app-wide dispatch; as it is dispatched from MatrixChat
case 'close_settings':
@@ -593,34 +581,34 @@ export default createReactClass({
default:
break;
}
- },
+ };
- _closeSettings() {
+ _closeSettings = () => {
dis.dispatch({action: 'close_settings'});
- },
+ };
- _onNameChange: function(value) {
+ _onNameChange = (value) => {
const newProfileForm = Object.assign(this.state.profileForm, { name: value });
this.setState({
profileForm: newProfileForm,
});
- },
+ };
- _onShortDescChange: function(value) {
+ _onShortDescChange = (value) => {
const newProfileForm = Object.assign(this.state.profileForm, { short_description: value });
this.setState({
profileForm: newProfileForm,
});
- },
+ };
- _onLongDescChange: function(e) {
+ _onLongDescChange = (e) => {
const newProfileForm = Object.assign(this.state.profileForm, { long_description: e.target.value });
this.setState({
profileForm: newProfileForm,
});
- },
+ };
- _onAvatarSelected: function(ev) {
+ _onAvatarSelected = ev => {
const file = ev.target.files[0];
if (!file) return;
@@ -644,15 +632,15 @@ export default createReactClass({
description: _t('Failed to upload image'),
});
});
- },
+ };
- _onJoinableChange: function(ev) {
+ _onJoinableChange = ev => {
this.setState({
joinableForm: { policyType: ev.target.value },
});
- },
+ };
- _onSaveClick: function() {
+ _onSaveClick = () => {
this.setState({saving: true});
const savePromise = this.state.isUserPrivileged ? this._saveGroup() : Promise.resolve();
savePromise.then((result) => {
@@ -683,16 +671,16 @@ export default createReactClass({
avatarChanged: false,
});
});
- },
+ };
- _saveGroup: async function() {
+ async _saveGroup() {
await this._matrixClient.setGroupProfile(this.props.groupId, this.state.profileForm);
await this._matrixClient.setGroupJoinPolicy(this.props.groupId, {
type: this.state.joinableForm.policyType,
});
- },
+ }
- _onAcceptInviteClick: async function() {
+ _onAcceptInviteClick = async () => {
this.setState({membershipBusy: true});
// Wait 500ms to prevent flashing. Do this before sending a request otherwise we risk the
@@ -709,9 +697,9 @@ export default createReactClass({
description: _t("Unable to accept invite"),
});
});
- },
+ };
- _onRejectInviteClick: async function() {
+ _onRejectInviteClick = async () => {
this.setState({membershipBusy: true});
// Wait 500ms to prevent flashing. Do this before sending a request otherwise we risk the
@@ -728,9 +716,9 @@ export default createReactClass({
description: _t("Unable to reject invite"),
});
});
- },
+ };
- _onJoinClick: async function() {
+ _onJoinClick = async () => {
if (this._matrixClient.isGuest()) {
dis.dispatch({action: 'require_registration', screen_after: {screen: `group/${this.props.groupId}`}});
return;
@@ -752,9 +740,9 @@ export default createReactClass({
description: _t("Unable to join community"),
});
});
- },
+ };
- _leaveGroupWarnings: function() {
+ _leaveGroupWarnings() {
const warnings = [];
if (this.state.isUserPrivileged) {
@@ -768,10 +756,9 @@ export default createReactClass({
}
return warnings;
- },
+ }
-
- _onLeaveClick: function() {
+ _onLeaveClick = () => {
const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
const warnings = this._leaveGroupWarnings();
@@ -806,13 +793,13 @@ export default createReactClass({
});
},
});
- },
+ };
- _onAddRoomsClick: function() {
+ _onAddRoomsClick = () => {
showGroupAddRoomDialog(this.props.groupId);
- },
+ };
- _getGroupSection: function() {
+ _getGroupSection() {
const groupSettingsSectionClasses = classnames({
"mx_GroupView_group": this.state.editing,
"mx_GroupView_group_disabled": this.state.editing && !this.state.isUserPrivileged,
@@ -856,9 +843,9 @@ export default createReactClass({
{ this._getLongDescriptionNode() }
{ this._getRoomsNode() }
@@ -1136,9 +1123,9 @@ export default createReactClass({
{ description }
;
- },
+ }
- render: function() {
+ render() {
const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
const Spinner = sdk.getComponent("elements.Spinner");
@@ -1366,5 +1353,5 @@ export default createReactClass({
console.error("Invalid state for GroupView");
return ;
}
- },
-});
+ }
+}
diff --git a/src/components/structures/InteractiveAuth.js b/src/components/structures/InteractiveAuth.js
index fa7860ccef..c8fcd7e9ca 100644
--- a/src/components/structures/InteractiveAuth.js
+++ b/src/components/structures/InteractiveAuth.js
@@ -17,7 +17,6 @@ limitations under the License.
import {InteractiveAuth} from "matrix-js-sdk";
import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import getEntryComponentForLoginType from '../views/auth/InteractiveAuthEntryComponents';
@@ -26,10 +25,8 @@ import * as sdk from '../../index';
export const ERROR_USER_CANCELLED = new Error("User cancelled auth session");
-export default createReactClass({
- displayName: 'InteractiveAuth',
-
- propTypes: {
+export default class InteractiveAuthComponent extends React.Component {
+ static propTypes = {
// matrix client to use for UI auth requests
matrixClient: PropTypes.object.isRequired,
@@ -86,20 +83,19 @@ export default createReactClass({
// continueText and continueKind are passed straight through to the AuthEntryComponent.
continueText: PropTypes.string,
continueKind: PropTypes.string,
- },
+ };
- getInitialState: function() {
- return {
+ constructor(props) {
+ super(props);
+
+ this.state = {
authStage: null,
busy: false,
errorText: null,
stageErrorText: null,
submitButtonEnabled: false,
};
- },
- // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
- UNSAFE_componentWillMount: function() {
this._unmounted = false;
this._authLogic = new InteractiveAuth({
authData: this.props.authData,
@@ -114,6 +110,18 @@ export default createReactClass({
requestEmailToken: this._requestEmailToken,
});
+ this._intervalId = null;
+ if (this.props.poll) {
+ this._intervalId = setInterval(() => {
+ this._authLogic.poll();
+ }, 2000);
+ }
+
+ this._stageComponent = createRef();
+ }
+
+ // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+ UNSAFE_componentWillMount() { // eslint-disable-line camelcase
this._authLogic.attemptAuth().then((result) => {
const extra = {
emailSid: this._authLogic.getEmailSid(),
@@ -132,26 +140,17 @@ export default createReactClass({
errorText: msg,
});
});
+ }
- this._intervalId = null;
- if (this.props.poll) {
- this._intervalId = setInterval(() => {
- this._authLogic.poll();
- }, 2000);
- }
-
- this._stageComponent = createRef();
- },
-
- componentWillUnmount: function() {
+ componentWillUnmount() {
this._unmounted = true;
if (this._intervalId !== null) {
clearInterval(this._intervalId);
}
- },
+ }
- _requestEmailToken: async function(...args) {
+ _requestEmailToken = async (...args) => {
this.setState({
busy: true,
});
@@ -162,15 +161,15 @@ export default createReactClass({
busy: false,
});
}
- },
+ };
- tryContinue: function() {
+ tryContinue = () => {
if (this._stageComponent.current && this._stageComponent.current.tryContinue) {
this._stageComponent.current.tryContinue();
}
- },
+ };
- _authStateUpdated: function(stageType, stageState) {
+ _authStateUpdated = (stageType, stageState) => {
const oldStage = this.state.authStage;
this.setState({
busy: false,
@@ -180,16 +179,16 @@ export default createReactClass({
}, () => {
if (oldStage != stageType) this._setFocus();
});
- },
+ };
- _requestCallback: function(auth) {
+ _requestCallback = (auth) => {
// This wrapper just exists because the js-sdk passes a second
// 'busy' param for backwards compat. This throws the tests off
// so discard it here.
return this.props.makeRequest(auth);
- },
+ };
- _onBusyChanged: function(busy) {
+ _onBusyChanged = (busy) => {
// if we've started doing stuff, reset the error messages
if (busy) {
this.setState({
@@ -204,29 +203,29 @@ export default createReactClass({
// there's a new screen to show the user. This is implemented by setting
// `busy: false` in `_authStateUpdated`.
// See also https://github.com/vector-im/element-web/issues/12546
- },
+ };
- _setFocus: function() {
+ _setFocus() {
if (this._stageComponent.current && this._stageComponent.current.focus) {
this._stageComponent.current.focus();
}
- },
+ }
- _submitAuthDict: function(authData) {
+ _submitAuthDict = authData => {
this._authLogic.submitAuthDict(authData);
- },
+ };
- _onPhaseChange: function(newPhase) {
+ _onPhaseChange = newPhase => {
if (this.props.onStagePhaseChange) {
this.props.onStagePhaseChange(this.state.authStage, newPhase || 0);
}
- },
+ };
- _onStageCancel: function() {
+ _onStageCancel = () => {
this.props.onAuthFinished(false, ERROR_USER_CANCELLED);
- },
+ };
- _renderCurrentStage: function() {
+ _renderCurrentStage() {
const stage = this.state.authStage;
if (!stage) {
if (this.state.busy) {
@@ -260,16 +259,17 @@ export default createReactClass({
onCancel={this._onStageCancel}
/>
);
- },
+ }
- _onAuthStageFailed: function(e) {
+ _onAuthStageFailed = e => {
this.props.onAuthFinished(false, e);
- },
- _setEmailSid: function(sid) {
- this._authLogic.setEmailSid(sid);
- },
+ };
- render: function() {
+ _setEmailSid = sid => {
+ this._authLogic.setEmailSid(sid);
+ };
+
+ render() {
let error = null;
if (this.state.errorText) {
error = (
@@ -287,5 +287,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index 7043c7f38a..e0551eecdb 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -17,7 +17,6 @@ limitations under the License.
*/
import React from 'react';
-import createReactClass from 'create-react-class';
import * as sdk from '../../index';
import { _t } from '../../languageHandler';
import SdkConfig from '../../SdkConfig';
@@ -26,29 +25,23 @@ import AccessibleButton from '../views/elements/AccessibleButton';
import MatrixClientContext from "../../contexts/MatrixClientContext";
import AutoHideScrollbar from "./AutoHideScrollbar";
-export default createReactClass({
- displayName: 'MyGroups',
+export default class MyGroups extends React.Component {
+ static contextType = MatrixClientContext;
- getInitialState: function() {
- return {
- groups: null,
- error: null,
- };
- },
+ state = {
+ groups: null,
+ error: null,
+ };
- statics: {
- contextType: MatrixClientContext,
- },
-
- componentDidMount: function() {
+ componentDidMount() {
this._fetch();
- },
+ }
- _onCreateGroupClick: function() {
+ _onCreateGroupClick = () => {
dis.dispatch({action: 'view_create_group'});
- },
+ };
- _fetch: function() {
+ _fetch() {
this.context.getJoinedGroups().then((result) => {
this.setState({groups: result.groups, error: null});
}, (err) => {
@@ -59,9 +52,9 @@ export default createReactClass({
}
this.setState({groups: null, error: err});
});
- },
+ }
- render: function() {
+ render() {
const brand = SdkConfig.get().brand;
const Loader = sdk.getComponent("elements.Spinner");
const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
@@ -149,5 +142,5 @@ export default createReactClass({
{ content }
;
- },
-});
+ }
+}
diff --git a/src/components/structures/NotificationPanel.js b/src/components/structures/NotificationPanel.js
index c1f78cffda..6ae7f91142 100644
--- a/src/components/structures/NotificationPanel.js
+++ b/src/components/structures/NotificationPanel.js
@@ -17,7 +17,6 @@ limitations under the License.
*/
import React from 'react';
-import createReactClass from 'create-react-class';
import { _t } from '../../languageHandler';
import {MatrixClientPeg} from "../../MatrixClientPeg";
import * as sdk from "../../index";
@@ -25,13 +24,8 @@ import * as sdk from "../../index";
/*
* Component which shows the global notification list using a TimelinePanel
*/
-const NotificationPanel = createReactClass({
- displayName: 'NotificationPanel',
-
- propTypes: {
- },
-
- render: function() {
+class NotificationPanel extends React.Component {
+ render() {
// wrap a TimelinePanel with the jump-to-event bits turned off.
const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
const Loader = sdk.getComponent("elements.Spinner");
@@ -45,7 +39,7 @@ const NotificationPanel = createReactClass({
if (timelineSet) {
return (
-
);
}
- },
-});
+ }
+}
export default NotificationPanel;
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index a4e3254e4c..11416b29fb 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -21,6 +21,8 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
+import {Room} from "matrix-js-sdk/src/models/room";
+
import * as sdk from '../../index';
import dis from '../../dispatcher/dispatcher';
import RateLimitedFunc from '../../ratelimitedfunc';
@@ -34,7 +36,7 @@ import {Action} from "../../dispatcher/actions";
export default class RightPanel extends React.Component {
static get propTypes() {
return {
- roomId: PropTypes.string, // if showing panels for a given room, this is set
+ room: PropTypes.instanceOf(Room), // if showing panels for a given room, this is set
groupId: PropTypes.string, // if showing panels for a given group, this is set
user: PropTypes.object, // used if we know the user ahead of opening the panel
};
@@ -42,8 +44,8 @@ export default class RightPanel extends React.Component {
static contextType = MatrixClientContext;
- constructor(props) {
- super(props);
+ constructor(props, context) {
+ super(props, context);
this.state = {
phase: this._getPhaseFromProps(),
isUserPrivilegedInGroup: null,
@@ -161,13 +163,13 @@ export default class RightPanel extends React.Component {
}
onRoomStateMember(ev, state, member) {
- if (member.roomId !== this.props.roomId) {
+ if (member.roomId !== this.props.room.roomId) {
return;
}
// redraw the badge on the membership list
- if (this.state.phase === RightPanelPhases.RoomMemberList && member.roomId === this.props.roomId) {
+ if (this.state.phase === RightPanelPhases.RoomMemberList && member.roomId === this.props.room.roomId) {
this._delayedUpdate();
- } else if (this.state.phase === RightPanelPhases.RoomMemberInfo && member.roomId === this.props.roomId &&
+ } else if (this.state.phase === RightPanelPhases.RoomMemberInfo && member.roomId === this.props.room.roomId &&
member.userId === this.state.member.userId) {
// refresh the member info (e.g. new power level)
this._delayedUpdate();
@@ -226,8 +228,8 @@ export default class RightPanel extends React.Component {
switch (this.state.phase) {
case RightPanelPhases.RoomMemberList:
- if (this.props.roomId) {
- panel = {joinOrViewButton}
);
- },
+ }
- collectScrollPanel: function(element) {
+ collectScrollPanel = (element) => {
this.scrollPanel = element;
- },
+ };
- _stringLooksLikeId: function(s, field_type) {
+ _stringLooksLikeId(s, field_type) {
let pat = /^#[^\s]+:[^\s]/;
if (field_type && field_type.regexp) {
pat = new RegExp(field_type.regexp);
}
return pat.test(s);
- },
+ }
- _getFieldsForThirdPartyLocation: function(userInput, protocol, instance) {
+ _getFieldsForThirdPartyLocation(userInput, protocol, instance) {
// make an object with the fields specified by that protocol. We
// require that the values of all but the last field come from the
// instance. The last is the user input.
@@ -569,20 +565,20 @@ export default createReactClass({
}
fields[requiredFields[requiredFields.length - 1]] = userInput;
return fields;
- },
+ }
/**
* called by the parent component when PageUp/Down/etc is pressed.
*
* We pass it down to the scroll panel.
*/
- handleScrollKey: function(ev) {
+ handleScrollKey = ev => {
if (this.scrollPanel) {
this.scrollPanel.handleScrollKey(ev);
}
- },
+ };
- render: function() {
+ render() {
const Loader = sdk.getComponent("elements.Spinner");
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
@@ -712,8 +708,8 @@ export default createReactClass({
);
- },
-});
+ }
+}
// Similar to matrix-react-sdk's MatrixTools.getDisplayAliasForRoom
// but works with the objects we get from the public room list
diff --git a/src/components/structures/RoomStatusBar.js b/src/components/structures/RoomStatusBar.js
index 3171dbccbe..cdaa0bb7f9 100644
--- a/src/components/structures/RoomStatusBar.js
+++ b/src/components/structures/RoomStatusBar.js
@@ -17,7 +17,6 @@ limitations under the License.
*/
import React from 'react';
-import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import Matrix from 'matrix-js-sdk';
import { _t, _td } from '../../languageHandler';
@@ -39,10 +38,8 @@ function getUnsentMessages(room) {
});
}
-export default createReactClass({
- displayName: 'RoomStatusBar',
-
- propTypes: {
+export default class RoomStatusBar extends React.Component {
+ static propTypes = {
// the room this statusbar is representing.
room: PropTypes.object.isRequired,
// This is true when the user is alone in the room, but has also sent a message.
@@ -86,37 +83,35 @@ export default createReactClass({
// callback for when the status bar is displaying something and should
// be visible
onVisible: PropTypes.func,
- },
+ };
- getInitialState: function() {
- return {
- syncState: MatrixClientPeg.get().getSyncState(),
- syncStateData: MatrixClientPeg.get().getSyncStateData(),
- unsentMessages: getUnsentMessages(this.props.room),
- };
- },
+ state = {
+ syncState: MatrixClientPeg.get().getSyncState(),
+ syncStateData: MatrixClientPeg.get().getSyncStateData(),
+ unsentMessages: getUnsentMessages(this.props.room),
+ };
- componentDidMount: function() {
+ componentDidMount() {
MatrixClientPeg.get().on("sync", this.onSyncStateChange);
MatrixClientPeg.get().on("Room.localEchoUpdated", this._onRoomLocalEchoUpdated);
this._checkSize();
- },
+ }
- componentDidUpdate: function() {
+ componentDidUpdate() {
this._checkSize();
- },
+ }
- componentWillUnmount: function() {
+ componentWillUnmount() {
// we may have entirely lost our client as we're logging out before clicking login on the guest bar...
const client = MatrixClientPeg.get();
if (client) {
client.removeListener("sync", this.onSyncStateChange);
client.removeListener("Room.localEchoUpdated", this._onRoomLocalEchoUpdated);
}
- },
+ }
- onSyncStateChange: function(state, prevState, data) {
+ onSyncStateChange = (state, prevState, data) => {
if (state === "SYNCING" && prevState === "SYNCING") {
return;
}
@@ -124,39 +119,39 @@ export default createReactClass({
syncState: state,
syncStateData: data,
});
- },
+ };
- _onResendAllClick: function() {
+ _onResendAllClick = () => {
Resend.resendUnsentEvents(this.props.room);
dis.fire(Action.FocusComposer);
- },
+ };
- _onCancelAllClick: function() {
+ _onCancelAllClick = () => {
Resend.cancelUnsentEvents(this.props.room);
dis.fire(Action.FocusComposer);
- },
+ };
- _onRoomLocalEchoUpdated: function(event, room, oldEventId, oldStatus) {
+ _onRoomLocalEchoUpdated = (event, room, oldEventId, oldStatus) => {
if (room.roomId !== this.props.room.roomId) return;
this.setState({
unsentMessages: getUnsentMessages(this.props.room),
});
- },
+ };
// Check whether current size is greater than 0, if yes call props.onVisible
- _checkSize: function() {
+ _checkSize() {
if (this._getSize()) {
if (this.props.onVisible) this.props.onVisible();
} else {
if (this.props.onHidden) this.props.onHidden();
}
- },
+ }
// We don't need the actual height - just whether it is likely to have
// changed - so we use '0' to indicate normal size, and other values to
// indicate other sizes.
- _getSize: function() {
+ _getSize() {
if (this._shouldShowConnectionError() ||
this.props.hasActiveCall ||
this.props.sentMessageAndIsAlone
@@ -166,10 +161,10 @@ export default createReactClass({
return STATUS_BAR_EXPANDED_LARGE;
}
return STATUS_BAR_HIDDEN;
- },
+ }
// return suitable content for the image on the left of the status bar.
- _getIndicator: function() {
+ _getIndicator() {
if (this.props.hasActiveCall) {
const TintableSvg = sdk.getComponent("elements.TintableSvg");
return (
@@ -182,9 +177,9 @@ export default createReactClass({
}
return null;
- },
+ }
- _shouldShowConnectionError: function() {
+ _shouldShowConnectionError() {
// no conn bar trumps the "some not sent" msg since you can't resend without
// a connection!
// There's one situation in which we don't show this 'no connection' bar, and that's
@@ -195,9 +190,9 @@ export default createReactClass({
this.state.syncStateData.error.errcode === 'M_RESOURCE_LIMIT_EXCEEDED',
);
return this.state.syncState === "ERROR" && !errorIsMauError;
- },
+ }
- _getUnsentMessageContent: function() {
+ _getUnsentMessageContent() {
const unsentMessages = this.state.unsentMessages;
if (!unsentMessages.length) return null;
@@ -272,10 +267,10 @@ export default createReactClass({
;
- },
+ }
// return suitable content for the main (text) part of the status bar.
- _getContent: function() {
+ _getContent() {
if (this._shouldShowConnectionError()) {
return (
@@ -323,9 +318,9 @@ export default createReactClass({
}
return null;
- },
+ }
- render: function() {
+ render() {
const content = this._getContent();
const indicator = this._getIndicator();
@@ -339,5 +334,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 2e06be7b4c..d98a19ebe8 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -24,7 +24,6 @@ limitations under the License.
import shouldHideEvent from '../../shouldHideEvent';
import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { _t } from '../../languageHandler';
@@ -68,9 +67,8 @@ if (DEBUG) {
debuglog = console.log.bind(console);
}
-export default createReactClass({
- displayName: 'RoomView',
- propTypes: {
+export default class RoomView extends React.Component {
+ static propTypes = {
ConferenceHandler: PropTypes.any,
// Called with the credentials of a registered user (if they were a ROU that
@@ -97,15 +95,15 @@ export default createReactClass({
// Servers the RoomView can use to try and assist joins
viaServers: PropTypes.arrayOf(PropTypes.string),
- },
+ };
- statics: {
- contextType: MatrixClientContext,
- },
+ static contextType = MatrixClientContext;
+
+ constructor(props, context) {
+ super(props, context);
- getInitialState: function() {
const llMembers = this.context.hasLazyLoadMembersEnabled();
- return {
+ this.state = {
room: null,
roomId: null,
roomLoading: true,
@@ -171,10 +169,7 @@ export default createReactClass({
matrixClientIsReady: this.context && this.context.isInitialSyncComplete(),
};
- },
- // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
- UNSAFE_componentWillMount: function() {
this.dispatcherRef = dis.register(this.onAction);
this.context.on("Room", this.onRoom);
this.context.on("Room.timeline", this.onRoomTimeline);
@@ -191,7 +186,6 @@ export default createReactClass({
// Start listening for RoomViewStore updates
this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
this._rightPanelStoreToken = RightPanelStore.getSharedInstance().addListener(this._onRightPanelStoreUpdate);
- this._onRoomViewStoreUpdate(true);
WidgetEchoStore.on('update', this._onWidgetEchoStoreUpdate);
this._showReadReceiptsWatchRef = SettingsStore.watchSetting("showReadReceipts", null,
@@ -201,15 +195,20 @@ export default createReactClass({
this._searchResultsPanel = createRef();
this._layoutWatcherRef = SettingsStore.watchSetting("useIRCLayout", null, this.onLayoutChange);
- },
+ }
- _onReadReceiptsChange: function() {
+ // TODO: [REACT-WARNING] Move into constructor
+ UNSAFE_componentWillMount() {
+ this._onRoomViewStoreUpdate(true);
+ }
+
+ _onReadReceiptsChange = () => {
this.setState({
showReadReceipts: SettingsStore.getValue("showReadReceipts", this.state.roomId),
});
- },
+ };
- _onRoomViewStoreUpdate: function(initial) {
+ _onRoomViewStoreUpdate = initial => {
if (this.unmounted) {
return;
}
@@ -303,7 +302,7 @@ export default createReactClass({
if (initial) {
this._setupRoom(newState.room, newState.roomId, newState.joining, newState.shouldPeek);
}
- },
+ };
_getRoomId() {
// According to `_onRoomViewStoreUpdate`, `state.roomId` can be null
@@ -312,9 +311,9 @@ export default createReactClass({
// the bare room ID. (We may want to update `state.roomId` after
// resolving aliases, so we could always trust it.)
return this.state.room ? this.state.room.roomId : this.state.roomId;
- },
+ }
- _getPermalinkCreatorForRoom: function(room) {
+ _getPermalinkCreatorForRoom(room) {
if (!this._permalinkCreators) this._permalinkCreators = {};
if (this._permalinkCreators[room.roomId]) return this._permalinkCreators[room.roomId];
@@ -327,22 +326,22 @@ export default createReactClass({
this._permalinkCreators[room.roomId].load();
}
return this._permalinkCreators[room.roomId];
- },
+ }
- _stopAllPermalinkCreators: function() {
+ _stopAllPermalinkCreators() {
if (!this._permalinkCreators) return;
for (const roomId of Object.keys(this._permalinkCreators)) {
this._permalinkCreators[roomId].stop();
}
- },
+ }
- _onWidgetEchoStoreUpdate: function() {
+ _onWidgetEchoStoreUpdate = () => {
this.setState({
showApps: this._shouldShowApps(this.state.room),
});
- },
+ };
- _setupRoom: function(room, roomId, joining, shouldPeek) {
+ _setupRoom(room, roomId, joining, shouldPeek) {
// if this is an unknown room then we're in one of three states:
// - This is a room we can peek into (search engine) (we can /peek)
// - This is a room we can publicly join or were invited to. (we can /join)
@@ -404,9 +403,9 @@ export default createReactClass({
this.setState({isPeeking: false});
}
}
- },
+ }
- _shouldShowApps: function(room) {
+ _shouldShowApps(room) {
if (!BROWSER_SUPPORTS_SANDBOX) return false;
// Check if user has previously chosen to hide the app drawer for this
@@ -417,9 +416,9 @@ export default createReactClass({
// This is confusing, but it means to say that we default to the tray being
// hidden unless the user clicked to open it.
return hideWidgetDrawer === "false";
- },
+ }
- componentDidMount: function() {
+ componentDidMount() {
const call = this._getCallForRoom();
const callState = call ? call.call_state : "ended";
this.setState({
@@ -435,14 +434,14 @@ export default createReactClass({
this.onResize();
document.addEventListener("keydown", this.onNativeKeyDown);
- },
+ }
- shouldComponentUpdate: function(nextProps, nextState) {
+ shouldComponentUpdate(nextProps, nextState) {
return (!ObjectUtils.shallowEqual(this.props, nextProps) ||
!ObjectUtils.shallowEqual(this.state, nextState));
- },
+ }
- componentDidUpdate: function() {
+ componentDidUpdate() {
if (this._roomView.current) {
const roomView = this._roomView.current;
if (!roomView.ondrop) {
@@ -464,9 +463,9 @@ export default createReactClass({
atEndOfLiveTimeline: this._messagePanel.isAtEndOfLiveTimeline(),
});
}
- },
+ }
- componentWillUnmount: function() {
+ componentWillUnmount() {
// set a boolean to say we've been unmounted, which any pending
// promises can use to throw away their results.
//
@@ -543,21 +542,21 @@ export default createReactClass({
// Tinter.tint(); // reset colourscheme
SettingsStore.unwatchSetting(this._layoutWatcherRef);
- },
+ }
- onLayoutChange: function() {
+ onLayoutChange = () => {
this.setState({
useIRCLayout: SettingsStore.getValue("useIRCLayout"),
});
- },
+ };
- _onRightPanelStoreUpdate: function() {
+ _onRightPanelStoreUpdate = () => {
this.setState({
showRightPanel: RightPanelStore.getSharedInstance().isOpenForRoom,
});
- },
+ };
- onPageUnload(event) {
+ onPageUnload = event => {
if (ContentMessages.sharedInstance().getCurrentUploads().length > 0) {
return event.returnValue =
_t("You seem to be uploading files, are you sure you want to quit?");
@@ -565,10 +564,10 @@ export default createReactClass({
return event.returnValue =
_t("You seem to be in a call, are you sure you want to quit?");
}
- },
+ };
// we register global shortcuts here, they *must not conflict* with local shortcuts elsewhere or both will fire
- onNativeKeyDown: function(ev) {
+ onNativeKeyDown = ev => {
let handled = false;
const ctrlCmdOnly = isOnlyCtrlOrCmdKeyEvent(ev);
@@ -592,9 +591,9 @@ export default createReactClass({
ev.stopPropagation();
ev.preventDefault();
}
- },
+ };
- onReactKeyDown: function(ev) {
+ onReactKeyDown = ev => {
let handled = false;
switch (ev.key) {
@@ -613,7 +612,7 @@ export default createReactClass({
break;
case Key.U.toUpperCase():
if (isOnlyCtrlOrCmdIgnoreShiftKeyEvent(ev) && ev.shiftKey) {
- dis.dispatch({ action: "upload_file" })
+ dis.dispatch({ action: "upload_file" });
handled = true;
}
break;
@@ -623,9 +622,9 @@ export default createReactClass({
ev.stopPropagation();
ev.preventDefault();
}
- },
+ };
- onAction: function(payload) {
+ onAction = payload => {
switch (payload.action) {
case 'message_send_failed':
case 'message_sent':
@@ -709,9 +708,9 @@ export default createReactClass({
}
break;
}
- },
+ };
- onRoomTimeline: function(ev, room, toStartOfTimeline, removed, data) {
+ onRoomTimeline = (ev, room, toStartOfTimeline, removed, data) => {
if (this.unmounted) return;
// ignore events for other rooms
@@ -747,51 +746,51 @@ export default createReactClass({
});
}
}
- },
+ };
- onRoomName: function(room) {
+ onRoomName = room => {
if (this.state.room && room.roomId == this.state.room.roomId) {
this.forceUpdate();
}
- },
+ };
- onRoomRecoveryReminderDontAskAgain: function() {
+ onRoomRecoveryReminderDontAskAgain = () => {
// Called when the option to not ask again is set:
// force an update to hide the recovery reminder
this.forceUpdate();
- },
+ };
- onKeyBackupStatus() {
+ onKeyBackupStatus = () => {
// Key backup status changes affect whether the in-room recovery
// reminder is displayed.
this.forceUpdate();
- },
+ };
- canResetTimeline: function() {
+ canResetTimeline = () => {
if (!this._messagePanel) {
return true;
}
return this._messagePanel.canResetTimeline();
- },
+ };
// called when state.room is first initialised (either at initial load,
// after a successful peek, or after we join the room).
- _onRoomLoaded: function(room) {
+ _onRoomLoaded = room => {
this._calculatePeekRules(room);
this._updatePreviewUrlVisibility(room);
this._loadMembersIfJoined(room);
this._calculateRecommendedVersion(room);
this._updateE2EStatus(room);
this._updatePermissions(room);
- },
+ };
- _calculateRecommendedVersion: async function(room) {
+ async _calculateRecommendedVersion(room) {
this.setState({
upgradeRecommendation: await room.getRecommendedVersion(),
});
- },
+ }
- _loadMembersIfJoined: async function(room) {
+ async _loadMembersIfJoined(room) {
// lazy load members if enabled
if (this.context.hasLazyLoadMembersEnabled()) {
if (room && room.getMyMembership() === 'join') {
@@ -808,9 +807,9 @@ export default createReactClass({
}
}
}
- },
+ }
- _calculatePeekRules: function(room) {
+ _calculatePeekRules(room) {
const guestAccessEvent = room.currentState.getStateEvents("m.room.guest_access", "");
if (guestAccessEvent && guestAccessEvent.getContent().guest_access === "can_join") {
this.setState({
@@ -824,17 +823,17 @@ export default createReactClass({
canPeek: true,
});
}
- },
+ }
- _updatePreviewUrlVisibility: function({roomId}) {
+ _updatePreviewUrlVisibility({roomId}) {
// URL Previews in E2EE rooms can be a privacy leak so use a different setting which is per-room explicit
const key = this.context.isRoomEncrypted(roomId) ? 'urlPreviewsEnabled_e2ee' : 'urlPreviewsEnabled';
this.setState({
showUrlPreview: SettingsStore.getValue(key, roomId),
});
- },
+ }
- onRoom: function(room) {
+ onRoom = room => {
if (!room || room.roomId !== this.state.roomId) {
return;
}
@@ -843,32 +842,32 @@ export default createReactClass({
}, () => {
this._onRoomLoaded(room);
});
- },
+ };
- onDeviceVerificationChanged: function(userId, device) {
+ onDeviceVerificationChanged = (userId, device) => {
const room = this.state.room;
if (!room.currentState.getMember(userId)) {
return;
}
this._updateE2EStatus(room);
- },
+ };
- onUserVerificationChanged: function(userId, _trustStatus) {
+ onUserVerificationChanged = (userId, _trustStatus) => {
const room = this.state.room;
if (!room || !room.currentState.getMember(userId)) {
return;
}
this._updateE2EStatus(room);
- },
+ };
- onCrossSigningKeysChanged: function() {
+ onCrossSigningKeysChanged = () => {
const room = this.state.room;
if (room) {
this._updateE2EStatus(room);
}
- },
+ };
- _updateE2EStatus: async function(room) {
+ async _updateE2EStatus(room) {
if (!this.context.isRoomEncrypted(room.roomId)) {
return;
}
@@ -886,26 +885,26 @@ export default createReactClass({
this.setState({
e2eStatus: await shieldStatusForRoom(this.context, room),
});
- },
+ }
- updateTint: function() {
+ updateTint() {
const room = this.state.room;
if (!room) return;
console.log("Tinter.tint from updateTint");
const colorScheme = SettingsStore.getValue("roomColor", room.roomId);
Tinter.tint(colorScheme.primary_color, colorScheme.secondary_color);
- },
+ }
- onAccountData: function(event) {
+ onAccountData = event => {
const type = event.getType();
if ((type === "org.matrix.preview_urls" || type === "im.vector.web.settings") && this.state.room) {
// non-e2ee url previews are stored in legacy event type `org.matrix.room.preview_urls`
this._updatePreviewUrlVisibility(this.state.room);
}
- },
+ };
- onRoomAccountData: function(event, room) {
+ onRoomAccountData = (event, room) => {
if (room.roomId == this.state.roomId) {
const type = event.getType();
if (type === "org.matrix.room.color_scheme") {
@@ -918,18 +917,18 @@ export default createReactClass({
this._updatePreviewUrlVisibility(room);
}
}
- },
+ };
- onRoomStateEvents: function(ev, state) {
+ onRoomStateEvents = (ev, state) => {
// ignore if we don't have a room yet
if (!this.state.room || this.state.room.roomId !== state.roomId) {
return;
}
this._updatePermissions(this.state.room);
- },
+ };
- onRoomStateMember: function(ev, state, member) {
+ onRoomStateMember = (ev, state, member) => {
// ignore if we don't have a room yet
if (!this.state.room) {
return;
@@ -941,17 +940,17 @@ export default createReactClass({
}
this._updateRoomMembers(member);
- },
+ };
- onMyMembership: function(room, membership, oldMembership) {
+ onMyMembership = (room, membership, oldMembership) => {
if (room.roomId === this.state.roomId) {
this.forceUpdate();
this._loadMembersIfJoined(room);
this._updatePermissions(room);
}
- },
+ };
- _updatePermissions: function(room) {
+ _updatePermissions(room) {
if (room) {
const me = this.context.getUserId();
const canReact = room.getMyMembership() === "join" && room.currentState.maySendEvent("m.reaction", me);
@@ -959,11 +958,11 @@ export default createReactClass({
this.setState({canReact, canReply});
}
- },
+ }
// rate limited because a power level change will emit an event for every
// member in the room.
- _updateRoomMembers: rate_limited_func(function(dueToMember) {
+ _updateRoomMembers = rate_limited_func((dueToMember) => {
// a member state changed in this room
// refresh the conf call notification state
this._updateConfCallNotification();
@@ -978,9 +977,9 @@ export default createReactClass({
this._checkIfAlone(this.state.room, memberCountInfluence);
this._updateE2EStatus(this.state.room);
- }, 500),
+ }, 500);
- _checkIfAlone: function(room, countInfluence) {
+ _checkIfAlone(room, countInfluence) {
let warnedAboutLonelyRoom = false;
if (localStorage) {
warnedAboutLonelyRoom = localStorage.getItem('mx_user_alone_warned_' + this.state.room.roomId);
@@ -993,9 +992,9 @@ export default createReactClass({
let joinedOrInvitedMemberCount = room.getJoinedMemberCount() + room.getInvitedMemberCount();
if (countInfluence) joinedOrInvitedMemberCount += countInfluence;
this.setState({isAlone: joinedOrInvitedMemberCount === 1});
- },
+ }
- _updateConfCallNotification: function() {
+ _updateConfCallNotification() {
const room = this.state.room;
if (!room || !this.props.ConferenceHandler) {
return;
@@ -1017,7 +1016,7 @@ export default createReactClass({
confMember.membership === "join"
),
});
- },
+ }
_updateDMState() {
const room = this.state.room;
@@ -1028,9 +1027,9 @@ export default createReactClass({
if (dmInviter) {
Rooms.setDMRoom(room.roomId, dmInviter);
}
- },
+ }
- onSearchResultsFillRequest: function(backwards) {
+ onSearchResultsFillRequest = backwards => {
if (!backwards) {
return Promise.resolve(false);
}
@@ -1043,25 +1042,25 @@ export default createReactClass({
debuglog("no more search results");
return Promise.resolve(false);
}
- },
+ };
- onInviteButtonClick: function() {
+ onInviteButtonClick = () => {
// call AddressPickerDialog
dis.dispatch({
action: 'view_invite',
roomId: this.state.room.roomId,
});
this.setState({isAlone: false}); // there's a good chance they'll invite someone
- },
+ };
- onStopAloneWarningClick: function() {
+ onStopAloneWarningClick = () => {
if (localStorage) {
localStorage.setItem('mx_user_alone_warned_' + this.state.room.roomId, true);
}
this.setState({isAlone: false});
- },
+ };
- onJoinButtonClicked: function(ev) {
+ onJoinButtonClicked = ev => {
// If the user is a ROU, allow them to transition to a PWLU
if (this.context && this.context.isGuest()) {
// Join this room once the user has registered and logged in
@@ -1120,10 +1119,9 @@ export default createReactClass({
return Promise.resolve();
});
}
+ };
- },
-
- onMessageListScroll: function(ev) {
+ onMessageListScroll = ev => {
if (this._messagePanel.isAtEndOfLiveTimeline()) {
this.setState({
numUnreadMessages: 0,
@@ -1135,9 +1133,9 @@ export default createReactClass({
});
}
this._updateTopUnreadMessagesBar();
- },
+ };
- onDragOver: function(ev) {
+ onDragOver = ev => {
ev.stopPropagation();
ev.preventDefault();
@@ -1154,9 +1152,9 @@ export default createReactClass({
ev.dataTransfer.dropEffect = 'copy';
}
}
- },
+ };
- onDrop: function(ev) {
+ onDrop = ev => {
ev.stopPropagation();
ev.preventDefault();
ContentMessages.sharedInstance().sendContentListToRoom(
@@ -1164,15 +1162,15 @@ export default createReactClass({
);
this.setState({ draggingFile: false });
dis.fire(Action.FocusComposer);
- },
+ };
- onDragLeaveOrEnd: function(ev) {
+ onDragLeaveOrEnd = ev => {
ev.stopPropagation();
ev.preventDefault();
this.setState({ draggingFile: false });
- },
+ };
- injectSticker: function(url, info, text) {
+ injectSticker(url, info, text) {
if (this.context.isGuest()) {
dis.dispatch({action: 'require_registration'});
return;
@@ -1185,9 +1183,9 @@ export default createReactClass({
return;
}
});
- },
+ }
- onSearch: function(term, scope) {
+ onSearch = (term, scope) => {
this.setState({
searchTerm: term,
searchScope: scope,
@@ -1213,9 +1211,9 @@ export default createReactClass({
debuglog("sending search request");
const searchPromise = eventSearch(term, roomId);
this._handleSearchResult(searchPromise);
- },
+ };
- _handleSearchResult: function(searchPromise) {
+ _handleSearchResult(searchPromise) {
const self = this;
// keep a record of the current search id, so that if the search terms
@@ -1266,9 +1264,9 @@ export default createReactClass({
searchInProgress: false,
});
});
- },
+ }
- getSearchResultTiles: function() {
+ getSearchResultTiles() {
const SearchResultTile = sdk.getComponent('rooms.SearchResultTile');
const Spinner = sdk.getComponent("elements.Spinner");
@@ -1348,20 +1346,20 @@ export default createReactClass({
onHeightChanged={onHeightChanged} />);
}
return ret;
- },
+ }
- onPinnedClick: function() {
+ onPinnedClick = () => {
const nowShowingPinned = !this.state.showingPinned;
const roomId = this.state.room.roomId;
this.setState({showingPinned: nowShowingPinned, searching: false});
SettingsStore.setValue("PinnedEvents.isOpen", roomId, SettingLevel.ROOM_DEVICE, nowShowingPinned);
- },
+ };
- onSettingsClick: function() {
+ onSettingsClick = () => {
dis.dispatch({ action: 'open_room_settings' });
- },
+ };
- onCancelClick: function() {
+ onCancelClick = () => {
console.log("updateTint from onCancelClick");
this.updateTint();
if (this.state.forwardingEvent) {
@@ -1371,23 +1369,23 @@ export default createReactClass({
});
}
dis.fire(Action.FocusComposer);
- },
+ };
- onLeaveClick: function() {
+ onLeaveClick = () => {
dis.dispatch({
action: 'leave_room',
room_id: this.state.room.roomId,
});
- },
+ };
- onForgetClick: function() {
+ onForgetClick = () => {
dis.dispatch({
action: 'forget_room',
room_id: this.state.room.roomId,
});
- },
+ };
- onRejectButtonClicked: function(ev) {
+ onRejectButtonClicked = ev => {
const self = this;
this.setState({
rejecting: true,
@@ -1412,9 +1410,9 @@ export default createReactClass({
rejectError: error,
});
});
- },
+ };
- onRejectAndIgnoreClick: async function() {
+ onRejectAndIgnoreClick = async () => {
this.setState({
rejecting: true,
});
@@ -1446,49 +1444,49 @@ export default createReactClass({
rejectError: error,
});
}
- },
+ };
- onRejectThreepidInviteButtonClicked: function(ev) {
+ onRejectThreepidInviteButtonClicked = ev => {
// We can reject 3pid invites in the same way that we accept them,
// using /leave rather than /join. In the short term though, we
// just ignore them.
// https://github.com/vector-im/vector-web/issues/1134
dis.fire(Action.ViewRoomDirectory);
- },
+ };
- onSearchClick: function() {
+ onSearchClick = () => {
this.setState({
searching: !this.state.searching,
showingPinned: false,
});
- },
+ };
- onCancelSearchClick: function() {
+ onCancelSearchClick = () => {
this.setState({
searching: false,
searchResults: null,
});
- },
+ };
// jump down to the bottom of this room, where new events are arriving
- jumpToLiveTimeline: function() {
+ jumpToLiveTimeline = () => {
this._messagePanel.jumpToLiveTimeline();
dis.fire(Action.FocusComposer);
- },
+ };
// jump up to wherever our read marker is
- jumpToReadMarker: function() {
+ jumpToReadMarker = () => {
this._messagePanel.jumpToReadMarker();
- },
+ };
// update the read marker to match the read-receipt
- forgetReadMarker: function(ev) {
+ forgetReadMarker = ev => {
ev.stopPropagation();
this._messagePanel.forgetReadMarker();
- },
+ };
// decide whether or not the top 'unread messages' bar should be shown
- _updateTopUnreadMessagesBar: function() {
+ _updateTopUnreadMessagesBar = () => {
if (!this._messagePanel) {
return;
}
@@ -1497,12 +1495,12 @@ export default createReactClass({
if (this.state.showTopUnreadMessagesBar != showBar) {
this.setState({showTopUnreadMessagesBar: showBar});
}
- },
+ };
// get the current scroll position of the room, so that it can be
// restored when we switch back to it.
//
- _getScrollState: function() {
+ _getScrollState() {
const messagePanel = this._messagePanel;
if (!messagePanel) return null;
@@ -1537,9 +1535,9 @@ export default createReactClass({
focussedEvent: scrollState.trackedScrollToken,
pixelOffset: scrollState.pixelOffset,
};
- },
+ }
- onResize: function() {
+ onResize = () => {
// It seems flexbox doesn't give us a way to constrain the auxPanel height to have
// a minimum of the height of the video element, whilst also capping it from pushing out the page
// so we have to do it via JS instead. In this implementation we cap the height by putting
@@ -1557,16 +1555,16 @@ export default createReactClass({
if (auxPanelMaxHeight < 50) auxPanelMaxHeight = 50;
this.setState({auxPanelMaxHeight: auxPanelMaxHeight});
- },
+ };
- onFullscreenClick: function() {
+ onFullscreenClick = () => {
dis.dispatch({
action: 'video_fullscreen',
fullscreen: true,
}, true);
- },
+ };
- onMuteAudioClick: function() {
+ onMuteAudioClick = () => {
const call = this._getCallForRoom();
if (!call) {
return;
@@ -1574,9 +1572,9 @@ export default createReactClass({
const newState = !call.isMicrophoneMuted();
call.setMicrophoneMuted(newState);
this.forceUpdate(); // TODO: just update the voip buttons
- },
+ };
- onMuteVideoClick: function() {
+ onMuteVideoClick = () => {
const call = this._getCallForRoom();
if (!call) {
return;
@@ -1584,29 +1582,29 @@ export default createReactClass({
const newState = !call.isLocalVideoMuted();
call.setLocalVideoMuted(newState);
this.forceUpdate(); // TODO: just update the voip buttons
- },
+ };
- onStatusBarVisible: function() {
+ onStatusBarVisible = () => {
if (this.unmounted) return;
this.setState({
statusBarVisible: true,
});
- },
+ };
- onStatusBarHidden: function() {
+ onStatusBarHidden = () => {
// This is currently not desired as it is annoying if it keeps expanding and collapsing
if (this.unmounted) return;
this.setState({
statusBarVisible: false,
});
- },
+ };
/**
* called by the parent component when PageUp/Down/etc is pressed.
*
* We pass it down to the scroll panel.
*/
- handleScrollKey: function(ev) {
+ handleScrollKey = ev => {
let panel;
if (this._searchResultsPanel.current) {
panel = this._searchResultsPanel.current;
@@ -1617,48 +1615,48 @@ export default createReactClass({
if (panel) {
panel.handleScrollKey(ev);
}
- },
+ };
/**
* get any current call for this room
*/
- _getCallForRoom: function() {
+ _getCallForRoom() {
if (!this.state.room) {
return null;
}
return CallHandler.getCallForRoom(this.state.room.roomId);
- },
+ }
// this has to be a proper method rather than an unnamed function,
// otherwise react calls it with null on each update.
- _gatherTimelinePanelRef: function(r) {
+ _gatherTimelinePanelRef = r => {
this._messagePanel = r;
if (r) {
console.log("updateTint from RoomView._gatherTimelinePanelRef");
this.updateTint();
}
- },
+ };
- _getOldRoom: function() {
+ _getOldRoom() {
const createEvent = this.state.room.currentState.getStateEvents("m.room.create", "");
if (!createEvent || !createEvent.getContent()['predecessor']) return null;
return this.context.getRoom(createEvent.getContent()['predecessor']['room_id']);
- },
+ }
- _getHiddenHighlightCount: function() {
+ _getHiddenHighlightCount() {
const oldRoom = this._getOldRoom();
if (!oldRoom) return 0;
return oldRoom.getUnreadNotificationCount('highlight');
- },
+ }
- _onHiddenHighlightsClick: function() {
+ _onHiddenHighlightsClick = () => {
const oldRoom = this._getOldRoom();
if (!oldRoom) return;
dis.dispatch({action: "view_room", room_id: oldRoom.roomId});
- },
+ };
- render: function() {
+ render() {
const RoomHeader = sdk.getComponent('rooms.RoomHeader');
const ForwardMessage = sdk.getComponent("rooms.ForwardMessage");
const AuxPanel = sdk.getComponent("rooms.AuxPanel");
@@ -2068,7 +2066,7 @@ export default createReactClass({
const showRightPanel = !forceHideRightPanel && this.state.room && this.state.showRightPanel;
const rightPanel = showRightPanel
- ? ); - }, + } render() { const DNDTagTile = sdk.getComponent('elements.DNDTagTile'); @@ -173,6 +166,6 @@ const TagPanel = createReactClass({ ; - }, -}); + } +} export default TagPanel; diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js index 2313b60ab1..daa18bb290 100644 --- a/src/components/structures/TimelinePanel.js +++ b/src/components/structures/TimelinePanel.js @@ -19,7 +19,6 @@ limitations under the License. import SettingsStore from "../../settings/SettingsStore"; import React, {createRef} from 'react'; -import createReactClass from 'create-react-class'; import ReactDOM from "react-dom"; import PropTypes from 'prop-types'; import {EventTimeline} from "matrix-js-sdk"; @@ -54,10 +53,8 @@ if (DEBUG) { * * Also responsible for handling and sending read receipts. */ -const TimelinePanel = createReactClass({ - displayName: 'TimelinePanel', - - propTypes: { +class TimelinePanel extends React.Component { + static propTypes = { // The js-sdk EventTimelineSet object for the timeline sequence we are // representing. This may or may not have a room, depending on what it's // a timeline representing. If it has a room, we maintain RRs etc for @@ -115,23 +112,28 @@ const TimelinePanel = createReactClass({ // whether to use the irc layout useIRCLayout: PropTypes.bool, - }, + } - statics: { - // a map from room id to read marker event timestamp - roomReadMarkerTsMap: {}, - }, + // a map from room id to read marker event timestamp + static roomReadMarkerTsMap = {}; - getDefaultProps: function() { - return { - // By default, disable the timelineCap in favour of unpaginating based on - // event tile heights. (See _unpaginateEvents) - timelineCap: Number.MAX_VALUE, - className: 'mx_RoomView_messagePanel', - }; - }, + static defaultProps = { + // By default, disable the timelineCap in favour of unpaginating based on + // event tile heights. (See _unpaginateEvents) + timelineCap: Number.MAX_VALUE, + className: 'mx_RoomView_messagePanel', + }; + + constructor(props) { + super(props); + + debuglog("TimelinePanel: mounting"); + + this.lastRRSentEventId = undefined; + this.lastRMSentEventId = undefined; + + this._messagePanel = createRef(); - getInitialState: function() { // XXX: we could track RM per TimelineSet rather than per Room. // but for now we just do it per room for simplicity. let initialReadMarker = null; @@ -144,7 +146,7 @@ const TimelinePanel = createReactClass({ } } - return { + this.state = { events: [], liveEvents: [], timelineLoading: true, // track whether our room timeline is loading @@ -203,24 +205,6 @@ const TimelinePanel = createReactClass({ // how long to show the RM for when it's scrolled off-screen readMarkerOutOfViewThresholdMs: SettingsStore.getValue("readMarkerOutOfViewThresholdMs"), }; - }, - - // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs - UNSAFE_componentWillMount: function() { - debuglog("TimelinePanel: mounting"); - - this.lastRRSentEventId = undefined; - this.lastRMSentEventId = undefined; - - this._messagePanel = createRef(); - - if (this.props.manageReadReceipts) { - this.updateReadReceiptOnUserActivity(); - } - if (this.props.manageReadMarkers) { - this.updateReadMarkerOnUserActivity(); - } - this.dispatcherRef = dis.register(this.onAction); MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline); @@ -234,12 +218,24 @@ const TimelinePanel = createReactClass({ MatrixClientPeg.get().on("Event.decrypted", this.onEventDecrypted); MatrixClientPeg.get().on("Event.replaced", this.onEventReplaced); MatrixClientPeg.get().on("sync", this.onSync); + } + + // TODO: [REACT-WARNING] Move into constructor + // eslint-disable-next-line camelcase + UNSAFE_componentWillMount() { + if (this.props.manageReadReceipts) { + this.updateReadReceiptOnUserActivity(); + } + if (this.props.manageReadMarkers) { + this.updateReadMarkerOnUserActivity(); + } this._initTimeline(this.props); - }, + } // TODO: [REACT-WARNING] Replace with appropriate lifecycle event - UNSAFE_componentWillReceiveProps: function(newProps) { + // eslint-disable-next-line camelcase + UNSAFE_componentWillReceiveProps(newProps) { if (newProps.timelineSet !== this.props.timelineSet) { // throw new Error("changing timelineSet on a TimelinePanel is not supported"); @@ -260,9 +256,9 @@ const TimelinePanel = createReactClass({ " (was " + this.props.eventId + ")"); return this._initTimeline(newProps); } - }, + } - shouldComponentUpdate: function(nextProps, nextState) { + shouldComponentUpdate(nextProps, nextState) { if (!ObjectUtils.shallowEqual(this.props, nextProps)) { if (DEBUG) { console.group("Timeline.shouldComponentUpdate: props change"); @@ -284,9 +280,9 @@ const TimelinePanel = createReactClass({ } return false; - }, + } - componentWillUnmount: function() { + componentWillUnmount() { // set a boolean to say we've been unmounted, which any pending // promises can use to throw away their results. // @@ -316,9 +312,9 @@ const TimelinePanel = createReactClass({ client.removeListener("Event.replaced", this.onEventReplaced); client.removeListener("sync", this.onSync); } - }, + } - onMessageListUnfillRequest: function(backwards, scrollToken) { + onMessageListUnfillRequest = (backwards, scrollToken) => { // If backwards, unpaginate from the back (i.e. the start of the timeline) const dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS; debuglog("TimelinePanel: unpaginating events in direction", dir); @@ -349,18 +345,18 @@ const TimelinePanel = createReactClass({ firstVisibleEventIndex, }); } - }, + }; - onPaginationRequest(timelineWindow, direction, size) { + onPaginationRequest = (timelineWindow, direction, size) => { if (this.props.onPaginationRequest) { return this.props.onPaginationRequest(timelineWindow, direction, size); } else { return timelineWindow.paginate(direction, size); } - }, + }; // set off a pagination request. - onMessageListFillRequest: function(backwards) { + onMessageListFillRequest = backwards => { if (!this._shouldPaginate()) return Promise.resolve(false); const dir = backwards ? EventTimeline.BACKWARDS : EventTimeline.FORWARDS; @@ -425,9 +421,9 @@ const TimelinePanel = createReactClass({ }); }); }); - }, + }; - onMessageListScroll: function(e) { + onMessageListScroll = e => { if (this.props.onScroll) { this.props.onScroll(e); } @@ -447,9 +443,9 @@ const TimelinePanel = createReactClass({ // NO-OP when timeout already has set to the given value this._readMarkerActivityTimer.changeTimeout(timeout); } - }, + }; - onAction: function(payload) { + onAction = payload => { if (payload.action === 'ignore_state_changed') { this.forceUpdate(); } @@ -463,9 +459,9 @@ const TimelinePanel = createReactClass({ } }); } - }, + }; - onRoomTimeline: function(ev, room, toStartOfTimeline, removed, data) { + onRoomTimeline = (ev, room, toStartOfTimeline, removed, data) => { // ignore events for other timeline sets if (data.timeline.getTimelineSet() !== this.props.timelineSet) return; @@ -537,21 +533,19 @@ const TimelinePanel = createReactClass({ } }); }); - }, + }; - onRoomTimelineReset: function(room, timelineSet) { + onRoomTimelineReset = (room, timelineSet) => { if (timelineSet !== this.props.timelineSet) return; if (this._messagePanel.current && this._messagePanel.current.isAtBottom()) { this._loadTimeline(); } - }, + }; - canResetTimeline: function() { - return this._messagePanel.current && this._messagePanel.current.isAtBottom(); - }, + canResetTimeline = () => this._messagePanel.current && this._messagePanel.current.isAtBottom(); - onRoomRedaction: function(ev, room) { + onRoomRedaction = (ev, room) => { if (this.unmounted) return; // ignore events for other rooms @@ -560,9 +554,9 @@ const TimelinePanel = createReactClass({ // we could skip an update if the event isn't in our timeline, // but that's probably an early optimisation. this.forceUpdate(); - }, + }; - onEventReplaced: function(replacedEvent, room) { + onEventReplaced = (replacedEvent, room) => { if (this.unmounted) return; // ignore events for other rooms @@ -571,27 +565,27 @@ const TimelinePanel = createReactClass({ // we could skip an update if the event isn't in our timeline, // but that's probably an early optimisation. this.forceUpdate(); - }, + }; - onRoomReceipt: function(ev, room) { + onRoomReceipt = (ev, room) => { if (this.unmounted) return; // ignore events for other rooms if (room !== this.props.timelineSet.room) return; this.forceUpdate(); - }, + }; - onLocalEchoUpdated: function(ev, room, oldEventId) { + onLocalEchoUpdated = (ev, room, oldEventId) => { if (this.unmounted) return; // ignore events for other rooms if (room !== this.props.timelineSet.room) return; this._reloadEvents(); - }, + }; - onAccountData: function(ev, room) { + onAccountData = (ev, room) => { if (this.unmounted) return; // ignore events for other rooms @@ -605,9 +599,9 @@ const TimelinePanel = createReactClass({ this.setState({ readMarkerEventId: ev.getContent().event_id, }, this.props.onReadMarkerUpdated); - }, + }; - onEventDecrypted: function(ev) { + onEventDecrypted = ev => { // Can be null for the notification timeline, etc. if (!this.props.timelineSet.room) return; @@ -620,19 +614,19 @@ const TimelinePanel = createReactClass({ if (ev.getRoomId() === this.props.timelineSet.room.roomId) { this.forceUpdate(); } - }, + }; - onSync: function(state, prevState, data) { + onSync = (state, prevState, data) => { this.setState({clientSyncState: state}); - }, + }; _readMarkerTimeout(readMarkerPosition) { return readMarkerPosition === 0 ? this.state.readMarkerInViewThresholdMs : this.state.readMarkerOutOfViewThresholdMs; - }, + } - updateReadMarkerOnUserActivity: async function() { + async updateReadMarkerOnUserActivity() { const initialTimeout = this._readMarkerTimeout(this.getReadMarkerPosition()); this._readMarkerActivityTimer = new Timer(initialTimeout); @@ -644,9 +638,9 @@ const TimelinePanel = createReactClass({ // outside of try/catch to not swallow errors this.updateReadMarker(); } - }, + } - updateReadReceiptOnUserActivity: async function() { + async updateReadReceiptOnUserActivity() { this._readReceiptActivityTimer = new Timer(READ_RECEIPT_INTERVAL_MS); while (this._readReceiptActivityTimer) { //unset on unmount UserActivity.sharedInstance().timeWhileActiveNow(this._readReceiptActivityTimer); @@ -656,9 +650,9 @@ const TimelinePanel = createReactClass({ // outside of try/catch to not swallow errors this.sendReadReceipt(); } - }, + } - sendReadReceipt: function() { + sendReadReceipt = () => { if (SettingsStore.getValue("lowBandwidth")) return; if (!this._messagePanel.current) return; @@ -766,11 +760,11 @@ const TimelinePanel = createReactClass({ }); } } - }, + }; // if the read marker is on the screen, we can now assume we've caught up to the end // of the screen, so move the marker down to the bottom of the screen. - updateReadMarker: function() { + updateReadMarker = () => { if (!this.props.manageReadMarkers) return; if (this.getReadMarkerPosition() === 1) { // the read marker is at an event below the viewport, @@ -801,11 +795,11 @@ const TimelinePanel = createReactClass({ // Send the updated read marker (along with read receipt) to the server this.sendReadReceipt(); - }, + }; // advance the read marker past any events we sent ourselves. - _advanceReadMarkerPastMyEvents: function() { + _advanceReadMarkerPastMyEvents() { if (!this.props.manageReadMarkers) return; // we call `_timelineWindow.getEvents()` rather than using @@ -837,11 +831,11 @@ const TimelinePanel = createReactClass({ const ev = events[i]; this._setReadMarker(ev.getId(), ev.getTs()); - }, + } /* jump down to the bottom of this room, where new events are arriving */ - jumpToLiveTimeline: function() { + jumpToLiveTimeline = () => { // if we can't forward-paginate the existing timeline, then there // is no point reloading it - just jump straight to the bottom. // @@ -854,12 +848,12 @@ const TimelinePanel = createReactClass({ this._messagePanel.current.scrollToBottom(); } } - }, + }; /* scroll to show the read-up-to marker. We put it 1/3 of the way down * the container. */ - jumpToReadMarker: function() { + jumpToReadMarker = () => { if (!this.props.manageReadMarkers) return; if (!this._messagePanel.current) return; if (!this.state.readMarkerEventId) return; @@ -883,11 +877,11 @@ const TimelinePanel = createReactClass({ // As with jumpToLiveTimeline, we want to reload the timeline around the // read-marker. this._loadTimeline(this.state.readMarkerEventId, 0, 1/3); - }, + }; /* update the read-up-to marker to match the read receipt */ - forgetReadMarker: function() { + forgetReadMarker = () => { if (!this.props.manageReadMarkers) return; const rmId = this._getCurrentReadReceipt(); @@ -903,17 +897,17 @@ const TimelinePanel = createReactClass({ } this._setReadMarker(rmId, rmTs); - }, + }; /* return true if the content is fully scrolled down and we are * at the end of the live timeline. */ - isAtEndOfLiveTimeline: function() { + isAtEndOfLiveTimeline = () => { return this._messagePanel.current && this._messagePanel.current.isAtBottom() && this._timelineWindow && !this._timelineWindow.canPaginate(EventTimeline.FORWARDS); - }, + } /* get the current scroll state. See ScrollPanel.getScrollState for @@ -921,10 +915,10 @@ const TimelinePanel = createReactClass({ * * returns null if we are not mounted. */ - getScrollState: function() { + getScrollState = () => { if (!this._messagePanel.current) { return null; } return this._messagePanel.current.getScrollState(); - }, + }; // returns one of: // @@ -932,7 +926,7 @@ const TimelinePanel = createReactClass({ // -1: read marker is above the window // 0: read marker is visible // +1: read marker is below the window - getReadMarkerPosition: function() { + getReadMarkerPosition = () => { if (!this.props.manageReadMarkers) return null; if (!this._messagePanel.current) return null; @@ -953,9 +947,9 @@ const TimelinePanel = createReactClass({ } return null; - }, + }; - canJumpToReadMarker: function() { + canJumpToReadMarker = () => { // 1. Do not show jump bar if neither the RM nor the RR are set. // 3. We want to show the bar if the read-marker is off the top of the screen. // 4. Also, if pos === null, the event might not be paginated - show the unread bar @@ -963,14 +957,14 @@ const TimelinePanel = createReactClass({ const ret = this.state.readMarkerEventId !== null && // 1. (pos < 0 || pos === null); // 3., 4. return ret; - }, + }; /* * called by the parent component when PageUp/Down/etc is pressed. * * We pass it down to the scroll panel. */ - handleScrollKey: function(ev) { + handleScrollKey = ev => { if (!this._messagePanel.current) { return; } // jump to the live timeline on ctrl-end, rather than the end of the @@ -980,9 +974,9 @@ const TimelinePanel = createReactClass({ } else { this._messagePanel.current.handleScrollKey(ev); } - }, + }; - _initTimeline: function(props) { + _initTimeline(props) { const initialEvent = props.eventId; const pixelOffset = props.eventPixelOffset; @@ -994,7 +988,7 @@ const TimelinePanel = createReactClass({ } return this._loadTimeline(initialEvent, pixelOffset, offsetBase); - }, + } /** * (re)-load the event timeline, and initialise the scroll state, centered @@ -1012,7 +1006,7 @@ const TimelinePanel = createReactClass({ * * returns a promise which will resolve when the load completes. */ - _loadTimeline: function(eventId, pixelOffset, offsetBase) { + _loadTimeline(eventId, pixelOffset, offsetBase) { this._timelineWindow = new Matrix.TimelineWindow( MatrixClientPeg.get(), this.props.timelineSet, {windowLimit: this.props.timelineCap}); @@ -1122,21 +1116,21 @@ const TimelinePanel = createReactClass({ }); prom.then(onLoaded, onError); } - }, + } // handle the completion of a timeline load or localEchoUpdate, by // reloading the events from the timelinewindow and pending event list into // the state. - _reloadEvents: function() { + _reloadEvents() { // we might have switched rooms since the load started - just bin // the results if so. if (this.unmounted) return; this.setState(this._getEvents()); - }, + } // get the list of events from the timeline window and the pending event list - _getEvents: function() { + _getEvents() { const events = this._timelineWindow.getEvents(); const firstVisibleEventIndex = this._checkForPreJoinUISI(events); @@ -1154,7 +1148,7 @@ const TimelinePanel = createReactClass({ liveEvents, firstVisibleEventIndex, }; - }, + } /** * Check for undecryptable messages that were sent while the user was not in @@ -1166,7 +1160,7 @@ const TimelinePanel = createReactClass({ * undecryptable event that was sent while the user was not in the room. If no * such events were found, then it returns 0. */ - _checkForPreJoinUISI: function(events) { + _checkForPreJoinUISI(events) { const room = this.props.timelineSet.room; if (events.length === 0 || !room || @@ -1228,18 +1222,18 @@ const TimelinePanel = createReactClass({ } } return 0; - }, + } - _indexForEventId: function(evId) { + _indexForEventId(evId) { for (let i = 0; i < this.state.events.length; ++i) { if (evId == this.state.events[i].getId()) { return i; } } return null; - }, + } - _getLastDisplayedEventIndex: function(opts) { + _getLastDisplayedEventIndex(opts) { opts = opts || {}; const ignoreOwn = opts.ignoreOwn || false; const allowPartial = opts.allowPartial || false; @@ -1313,7 +1307,7 @@ const TimelinePanel = createReactClass({ } return null; - }, + } /** * Get the id of the event corresponding to our user's latest read-receipt. @@ -1324,7 +1318,7 @@ const TimelinePanel = createReactClass({ * SDK. * @return {String} the event ID */ - _getCurrentReadReceipt: function(ignoreSynthesized) { + _getCurrentReadReceipt(ignoreSynthesized) { const client = MatrixClientPeg.get(); // the client can be null on logout if (client == null) { @@ -1333,9 +1327,9 @@ const TimelinePanel = createReactClass({ const myUserId = client.credentials.userId; return this.props.timelineSet.room.getEventReadUpTo(myUserId, ignoreSynthesized); - }, + } - _setReadMarker: function(eventId, eventTs, inhibitSetState) { + _setReadMarker(eventId, eventTs, inhibitSetState) { const roomId = this.props.timelineSet.room.roomId; // don't update the state (and cause a re-render) if there is @@ -1358,9 +1352,9 @@ const TimelinePanel = createReactClass({ this.setState({ readMarkerEventId: eventId, }, this.props.onReadMarkerUpdated); - }, + } - _shouldPaginate: function() { + _shouldPaginate() { // don't try to paginate while events in the timeline are // still being decrypted. We don't render events while they're // being decrypted, so they don't take up space in the timeline. @@ -1369,13 +1363,11 @@ const TimelinePanel = createReactClass({ return !this.state.events.some((e) => { return e.isBeingDecrypted(); }); - }, + } - getRelationsForEvent(...args) { - return this.props.timelineSet.getRelationsForEvent(...args); - }, + getRelationsForEvent = (...args) => this.props.timelineSet.getRelationsForEvent(...args); - render: function() { + render() { const MessagePanel = sdk.getComponent("structures.MessagePanel"); const Loader = sdk.getComponent("elements.Spinner"); @@ -1456,7 +1448,7 @@ const TimelinePanel = createReactClass({ useIRCLayout={this.props.useIRCLayout} /> ); - }, -}); + } +} export default TimelinePanel; diff --git a/src/components/structures/UploadBar.js b/src/components/structures/UploadBar.js index 421d1d79a7..0865764c5a 100644 --- a/src/components/structures/UploadBar.js +++ b/src/components/structures/UploadBar.js @@ -16,30 +16,28 @@ limitations under the License. */ import React from 'react'; -import createReactClass from 'create-react-class'; import PropTypes from 'prop-types'; import ContentMessages from '../../ContentMessages'; import dis from "../../dispatcher/dispatcher"; import filesize from "filesize"; import { _t } from '../../languageHandler'; -export default createReactClass({ - displayName: 'UploadBar', - propTypes: { +export default class UploadBar extends React.Component { + static propTypes = { room: PropTypes.object, - }, + }; - componentDidMount: function() { + componentDidMount() { this.dispatcherRef = dis.register(this.onAction); this.mounted = true; - }, + } - componentWillUnmount: function() { + componentWillUnmount() { this.mounted = false; dis.unregister(this.dispatcherRef); - }, + } - onAction: function(payload) { + onAction = payload => { switch (payload.action) { case 'upload_progress': case 'upload_finished': @@ -48,9 +46,9 @@ export default createReactClass({ if (this.mounted) this.forceUpdate(); break; } - }, + }; - render: function() { + render() { const uploads = ContentMessages.sharedInstance().getCurrentUploads(); // for testing UI... - also fix up the ContentMessages.getCurrentUploads().length @@ -105,5 +103,5 @@ export default createReactClass({
{ uploadText }
);
- },
-});
+ }
+}
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index 69b9c3f26e..b83369d296 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -42,6 +42,14 @@ import IconizedContextMenu, {
IconizedContextMenuOption,
IconizedContextMenuOptionList,
} from "../views/context_menus/IconizedContextMenu";
+import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore";
+import * as fbEmitter from "fbemitter";
+import TagOrderStore from "../../stores/TagOrderStore";
+import { showCommunityInviteDialog } from "../../RoomInvite";
+import dis from "../../dispatcher/dispatcher";
+import { RightPanelPhases } from "../../stores/RightPanelStorePhases";
+import ErrorDialog from "../views/dialogs/ErrorDialog";
+import EditCommunityPrototypeDialog from "../views/dialogs/EditCommunityPrototypeDialog";
interface IProps {
isMinimized: boolean;
@@ -58,6 +66,7 @@ export default class UserMenu extends React.Component
+ let primaryHeader = (
+
+
+ {homeButton}
+ this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}
+ />
+ this.onSettingsOpen(e, USER_SECURITY_TAB)}
+ />
+ this.onSettingsOpen(e, null)}
+ />
+ {/*
+
+
+
+ );
+ let secondarySection = null;
+
+ if (prototypeCommunityName) {
+ primaryHeader = (
+
+ );
+ secondarySection = (
+
+
+
+ this.onSettingsOpen(e, null)}
+ />
+
+
+
+
+ )
+ }
+
+ const classes = classNames({
+ "mx_UserMenu_contextMenu": true,
+ "mx_UserMenu_contextMenu_prototype": !!prototypeCommunityName,
+ });
+
+ return
+
- {homeButton}
- this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)}
- />
- this.onSettingsOpen(e, USER_SECURITY_TAB)}
- />
- this.onSettingsOpen(e, null)}
- />
- {/*
-
-
+ {primaryOptionList}
+ {secondarySection}
;
};
@@ -298,12 +440,34 @@ export default class UserMenu extends React.Component {
const displayName = OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId();
const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
+ const prototypeCommunityName = CommunityPrototypeStore.instance.getSelectedCommunityName();
+
+ let isPrototype = false;
+ let menuName = _t("User menu");
let name = {displayName};
let buttons = (
{/* masked image in CSS */}
);
+ if (prototypeCommunityName) {
+ name = (
+ {
const classes = classNames({
'mx_UserMenu': true,
'mx_UserMenu_minimized': this.props.isMinimized,
+ 'mx_UserMenu_prototype': isPrototype,
});
return (
@@ -320,7 +485,7 @@ export default class UserMenu extends React.Component {
className={classes}
onClick={this.onOpenMenuClick}
inputRef={this.buttonRef}
- label={_t("User menu")}
+ label={menuName}
isExpanded={!!this.state.contextMenuPosition}
onContextMenu={this.onContextMenu}
>
diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js
index 326ba2c22f..0b969784e5 100644
--- a/src/components/structures/ViewSource.js
+++ b/src/components/structures/ViewSource.js
@@ -17,24 +17,21 @@ limitations under the License.
*/
import React from 'react';
-import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import SyntaxHighlight from '../views/elements/SyntaxHighlight';
import {_t} from "../../languageHandler";
import * as sdk from "../../index";
-export default createReactClass({
- displayName: 'ViewSource',
-
- propTypes: {
+export default class ViewSource extends React.Component {
+ static propTypes = {
content: PropTypes.object.isRequired,
onFinished: PropTypes.func.isRequired,
roomId: PropTypes.string.isRequired,
eventId: PropTypes.string.isRequired,
- },
+ };
- render: function() {
+ render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
return (
@@ -49,5 +46,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/structures/auth/ForgotPassword.js b/src/components/structures/auth/ForgotPassword.js
index 9877c53106..3fa2713a35 100644
--- a/src/components/structures/auth/ForgotPassword.js
+++ b/src/components/structures/auth/ForgotPassword.js
@@ -17,7 +17,6 @@ limitations under the License.
*/
import React from 'react';
-import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import { _t } from '../../../languageHandler';
import * as sdk from '../../../index';
@@ -40,50 +39,47 @@ const PHASE_EMAIL_SENT = 3;
// User has clicked the link in email and completed reset
const PHASE_DONE = 4;
-export default createReactClass({
- displayName: 'ForgotPassword',
-
- propTypes: {
+export default class ForgotPassword extends React.Component {
+ static propTypes = {
serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
onServerConfigChange: PropTypes.func.isRequired,
onLoginClick: PropTypes.func,
onComplete: PropTypes.func.isRequired,
- },
+ };
- getInitialState: function() {
- return {
- phase: PHASE_FORGOT,
- email: "",
- password: "",
- password2: "",
- errorText: null,
+ state = {
+ phase: PHASE_FORGOT,
+ email: "",
+ password: "",
+ password2: "",
+ errorText: null,
- // We perform liveliness checks later, but for now suppress the errors.
- // We also track the server dead errors independently of the regular errors so
- // that we can render it differently, and override any other error the user may
- // be seeing.
- serverIsAlive: true,
- serverErrorIsFatal: false,
- serverDeadError: "",
- serverRequiresIdServer: null,
- };
- },
+ // We perform liveliness checks later, but for now suppress the errors.
+ // We also track the server dead errors independently of the regular errors so
+ // that we can render it differently, and override any other error the user may
+ // be seeing.
+ serverIsAlive: true,
+ serverErrorIsFatal: false,
+ serverDeadError: "",
+ serverRequiresIdServer: null,
+ };
- componentDidMount: function() {
+ componentDidMount() {
this.reset = null;
this._checkServerLiveliness(this.props.serverConfig);
- },
+ }
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
- UNSAFE_componentWillReceiveProps: function(newProps) {
+ // eslint-disable-next-line camelcase
+ UNSAFE_componentWillReceiveProps(newProps) {
if (newProps.serverConfig.hsUrl === this.props.serverConfig.hsUrl &&
newProps.serverConfig.isUrl === this.props.serverConfig.isUrl) return;
// Do a liveliness check on the new URLs
this._checkServerLiveliness(newProps.serverConfig);
- },
+ }
- _checkServerLiveliness: async function(serverConfig) {
+ async _checkServerLiveliness(serverConfig) {
try {
await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(
serverConfig.hsUrl,
@@ -100,9 +96,9 @@ export default createReactClass({
} catch (e) {
this.setState(AutoDiscoveryUtils.authComponentStateForError(e, "forgot_password"));
}
- },
+ }
- submitPasswordReset: function(email, password) {
+ submitPasswordReset(email, password) {
this.setState({
phase: PHASE_SENDING_EMAIL,
});
@@ -117,9 +113,9 @@ export default createReactClass({
phase: PHASE_FORGOT,
});
});
- },
+ }
- onVerify: async function(ev) {
+ onVerify = async ev => {
ev.preventDefault();
if (!this.reset) {
console.error("onVerify called before submitPasswordReset!");
@@ -131,9 +127,9 @@ export default createReactClass({
} catch (err) {
this.showErrorDialog(err.message);
}
- },
+ };
- onSubmitForm: async function(ev) {
+ onSubmitForm = async ev => {
ev.preventDefault();
// refresh the server errors, just in case the server came back online
@@ -166,41 +162,41 @@ export default createReactClass({
},
});
}
- },
+ };
- onInputChanged: function(stateKey, ev) {
+ onInputChanged = (stateKey, ev) => {
this.setState({
[stateKey]: ev.target.value,
});
- },
+ };
- async onServerDetailsNextPhaseClick() {
+ onServerDetailsNextPhaseClick = async () => {
this.setState({
phase: PHASE_FORGOT,
});
- },
+ };
- onEditServerDetailsClick(ev) {
+ onEditServerDetailsClick = ev => {
ev.preventDefault();
ev.stopPropagation();
this.setState({
phase: PHASE_SERVER_DETAILS,
});
- },
+ };
- onLoginClick: function(ev) {
+ onLoginClick = ev => {
ev.preventDefault();
ev.stopPropagation();
this.props.onLoginClick();
- },
+ };
- showErrorDialog: function(body, title) {
+ showErrorDialog(body, title) {
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
Modal.createTrackedDialog('Forgot Password Error', '', ErrorDialog, {
title: title,
description: body,
});
- },
+ }
renderServerDetails() {
const ServerConfig = sdk.getComponent("auth.ServerConfig");
@@ -218,7 +214,7 @@ export default createReactClass({
submitText={_t("Next")}
submitClass="mx_Login_submit"
/>;
- },
+ }
renderForgot() {
const Field = sdk.getComponent('elements.Field');
@@ -335,12 +331,12 @@ export default createReactClass({
{_t('Sign in instead')}
;
- },
+ }
renderSendingEmail() {
const Spinner = sdk.getComponent("elements.Spinner");
return
+
+ {OwnProfileStore.instance.displayName}
+
+
+ {MatrixClientPeg.get().getUserId()}
+
+
+ );
+ let primaryOptionList = (
+
- {OwnProfileStore.instance.displayName}
-
-
- {MatrixClientPeg.get().getUserId()}
+ {prototypeCommunityName}
+ );
+ primaryOptionList = (
+ +
+
+
+
+ {OwnProfileStore.instance.displayName}
+
+
+ {MatrixClientPeg.get().getUserId()}
+
+
+
+ {primaryHeader}
{
{hostingLink}
-
+ {prototypeCommunityName}
+ {displayName}
+
+ );
+ menuName = _t("Community and user menu");
+ isPrototype = true;
+ } else if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
+ name = (
+
+ {_t("Home")}
+ {displayName}
+
+ );
+ isPrototype = true;
+ }
if (this.props.isMinimized) {
name = null;
buttons = null;
@@ -312,6 +476,7 @@ export default class UserMenu extends React.Component
@@ -350,7 +346,7 @@ export default createReactClass({
;
- },
+ }
renderDone() {
return
@@ -363,9 +359,9 @@ export default createReactClass({
;
- },
+ }
- render: function() {
+ render() {
const AuthHeader = sdk.getComponent("auth.AuthHeader");
const AuthBody = sdk.getComponent("auth.AuthBody");
@@ -397,5 +393,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/structures/auth/Login.js b/src/components/structures/auth/Login.js
index 3bc363f863..53769fb5a6 100644
--- a/src/components/structures/auth/Login.js
+++ b/src/components/structures/auth/Login.js
@@ -17,7 +17,6 @@ limitations under the License.
*/
import React from 'react';
-import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import {_t, _td} from '../../../languageHandler';
import * as sdk from '../../../index';
@@ -53,13 +52,11 @@ _td("Invalid base_url for m.identity_server");
_td("Identity server URL does not appear to be a valid identity server");
_td("General failure");
-/**
+/*
* A wire component which glues together login UI components and Login logic
*/
-export default createReactClass({
- displayName: 'Login',
-
- propTypes: {
+export default class LoginComponent extends React.Component {
+ static propTypes = {
// Called when the user has logged in. Params:
// - The object returned by the login API
// - The user's password, if applicable, (may be cached in memory for a
@@ -85,10 +82,14 @@ export default createReactClass({
serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
isSyncing: PropTypes.bool,
- },
+ };
- getInitialState: function() {
- return {
+ constructor(props) {
+ super(props);
+
+ this._unmounted = false;
+
+ this.state = {
busy: false,
busyLoggingIn: null,
errorText: null,
@@ -113,11 +114,6 @@ export default createReactClass({
serverErrorIsFatal: false,
serverDeadError: "",
};
- },
-
- // TODO: [REACT-WARNING] Move this to constructor
- UNSAFE_componentWillMount: function() {
- this._unmounted = false;
// map from login step type to a function which will render a control
// letting you do that login type
@@ -130,33 +126,32 @@ export default createReactClass({
};
this._initLoginLogic();
- },
+ }
- componentWillUnmount: function() {
+ componentWillUnmount() {
this._unmounted = true;
- },
+ }
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+ // eslint-disable-next-line camelcase
UNSAFE_componentWillReceiveProps(newProps) {
if (newProps.serverConfig.hsUrl === this.props.serverConfig.hsUrl &&
newProps.serverConfig.isUrl === this.props.serverConfig.isUrl) return;
// Ensure that we end up actually logging in to the right place
this._initLoginLogic(newProps.serverConfig.hsUrl, newProps.serverConfig.isUrl);
- },
+ }
- onPasswordLoginError: function(errorText) {
+ onPasswordLoginError = errorText => {
this.setState({
errorText,
loginIncorrect: Boolean(errorText),
});
- },
+ };
- isBusy: function() {
- return this.state.busy || this.props.busy;
- },
+ isBusy = () => this.state.busy || this.props.busy;
- onPasswordLogin: async function(username, phoneCountry, phoneNumber, password) {
+ onPasswordLogin = async (username, phoneCountry, phoneNumber, password) => {
if (!this.state.serverIsAlive) {
this.setState({busy: true});
// Do a quick liveliness check on the URLs
@@ -263,13 +258,13 @@ export default createReactClass({
loginIncorrect: error.httpStatus === 401 || error.httpStatus === 403,
});
});
- },
+ };
- onUsernameChanged: function(username) {
+ onUsernameChanged = username => {
this.setState({ username: username });
- },
+ };
- onUsernameBlur: async function(username) {
+ onUsernameBlur = async username => {
const doWellknownLookup = username[0] === "@";
this.setState({
username: username,
@@ -314,19 +309,19 @@ export default createReactClass({
});
}
}
- },
+ };
- onPhoneCountryChanged: function(phoneCountry) {
+ onPhoneCountryChanged = phoneCountry => {
this.setState({ phoneCountry: phoneCountry });
- },
+ };
- onPhoneNumberChanged: function(phoneNumber) {
+ onPhoneNumberChanged = phoneNumber => {
this.setState({
phoneNumber: phoneNumber,
});
- },
+ };
- onPhoneNumberBlur: function(phoneNumber) {
+ onPhoneNumberBlur = phoneNumber => {
// Validate the phone number entered
if (!PHONE_NUMBER_REGEX.test(phoneNumber)) {
this.setState({
@@ -339,15 +334,15 @@ export default createReactClass({
canTryLogin: true,
});
}
- },
+ };
- onRegisterClick: function(ev) {
+ onRegisterClick = ev => {
ev.preventDefault();
ev.stopPropagation();
this.props.onRegisterClick();
- },
+ };
- onTryRegisterClick: function(ev) {
+ onTryRegisterClick = ev => {
const step = this._getCurrentFlowStep();
if (step === 'm.login.sso' || step === 'm.login.cas') {
// If we're showing SSO it means that registration is also probably disabled,
@@ -361,23 +356,23 @@ export default createReactClass({
// Don't intercept - just go through to the register page
this.onRegisterClick(ev);
}
- },
+ };
- async onServerDetailsNextPhaseClick() {
+ onServerDetailsNextPhaseClick = () => {
this.setState({
phase: PHASE_LOGIN,
});
- },
+ };
- onEditServerDetailsClick(ev) {
+ onEditServerDetailsClick = ev => {
ev.preventDefault();
ev.stopPropagation();
this.setState({
phase: PHASE_SERVER_DETAILS,
});
- },
+ };
- _initLoginLogic: async function(hsUrl, isUrl) {
+ async _initLoginLogic(hsUrl, isUrl) {
hsUrl = hsUrl || this.props.serverConfig.hsUrl;
isUrl = isUrl || this.props.serverConfig.isUrl;
@@ -465,9 +460,9 @@ export default createReactClass({
busy: false,
});
});
- },
+ }
- _isSupportedFlow: function(flow) {
+ _isSupportedFlow(flow) {
// technically the flow can have multiple steps, but no one does this
// for login and loginLogic doesn't support it so we can ignore it.
if (!this._stepRendererMap[flow.type]) {
@@ -475,11 +470,11 @@ export default createReactClass({
return false;
}
return true;
- },
+ }
- _getCurrentFlowStep: function() {
+ _getCurrentFlowStep() {
return this._loginLogic ? this._loginLogic.getCurrentFlowStep() : null;
- },
+ }
_errorTextFromError(err) {
let errCode = err.errcode;
@@ -526,7 +521,7 @@ export default createReactClass({
}
return errorText;
- },
+ }
renderServerComponent() {
const ServerConfig = sdk.getComponent("auth.ServerConfig");
@@ -552,7 +547,7 @@ export default createReactClass({
delayTimeMs={250}
{...serverDetailsProps}
/>;
- },
+ }
renderLoginComponentForStep() {
if (PHASES_ENABLED && this.state.phase !== PHASE_LOGIN) {
@@ -572,9 +567,9 @@ export default createReactClass({
}
return null;
- },
+ }
- _renderPasswordStep: function() {
+ _renderPasswordStep = () => {
const PasswordLogin = sdk.getComponent('auth.PasswordLogin');
let onEditServerDetailsClick = null;
@@ -603,9 +598,9 @@ export default createReactClass({
busy={this.props.isSyncing || this.state.busyLoggingIn}
/>
);
- },
+ };
- _renderSsoStep: function(loginType) {
+ _renderSsoStep = loginType => {
const SignInToText = sdk.getComponent('views.auth.SignInToText');
let onEditServerDetailsClick = null;
@@ -634,9 +629,9 @@ export default createReactClass({
/>
);
- },
+ };
- render: function() {
+ render() {
const Loader = sdk.getComponent("elements.Spinner");
const InlineSpinner = sdk.getComponent("elements.InlineSpinner");
const AuthHeader = sdk.getComponent("auth.AuthHeader");
@@ -704,5 +699,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/structures/auth/PostRegistration.js b/src/components/structures/auth/PostRegistration.js
index 687ab9a195..aa36de6596 100644
--- a/src/components/structures/auth/PostRegistration.js
+++ b/src/components/structures/auth/PostRegistration.js
@@ -15,29 +15,24 @@ 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 {MatrixClientPeg} from '../../../MatrixClientPeg';
import { _t } from '../../../languageHandler';
import AuthPage from "../../views/auth/AuthPage";
-export default createReactClass({
- displayName: 'PostRegistration',
-
- propTypes: {
+export default class PostRegistration extends React.Component {
+ static propTypes = {
onComplete: PropTypes.func.isRequired,
- },
+ };
- getInitialState: function() {
- return {
- avatarUrl: null,
- errorString: null,
- busy: false,
- };
- },
+ state = {
+ avatarUrl: null,
+ errorString: null,
+ busy: false,
+ };
- componentDidMount: function() {
+ componentDidMount() {
// There is some assymetry between ChangeDisplayName and ChangeAvatar,
// as ChangeDisplayName will auto-get the name but ChangeAvatar expects
// the URL to be passed to you (because it's also used for room avatars).
@@ -55,9 +50,9 @@ export default createReactClass({
busy: false,
});
});
- },
+ }
- render: function() {
+ render() {
const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
const AuthHeader = sdk.getComponent('auth.AuthHeader');
@@ -78,5 +73,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/structures/auth/Registration.js b/src/components/structures/auth/Registration.js
index 13e48f6287..630e04da9c 100644
--- a/src/components/structures/auth/Registration.js
+++ b/src/components/structures/auth/Registration.js
@@ -19,7 +19,6 @@ limitations under the License.
import Matrix from 'matrix-js-sdk';
import React from 'react';
-import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import * as sdk from '../../../index';
import { _t, _td } from '../../../languageHandler';
@@ -43,10 +42,8 @@ const PHASE_REGISTRATION = 1;
// Enable phases for registration
const PHASES_ENABLED = true;
-export default createReactClass({
- displayName: 'Registration',
-
- propTypes: {
+export default class Registration extends React.Component {
+ static propTypes = {
// Called when the user has logged in. Params:
// - object with userId, deviceId, homeserverUrl, identityServerUrl, accessToken
// - The user's password, if available and applicable (may be cached in memory
@@ -65,12 +62,13 @@ export default createReactClass({
onLoginClick: PropTypes.func.isRequired,
onServerConfigChange: PropTypes.func.isRequired,
defaultDeviceDisplayName: PropTypes.string,
- },
+ };
+
+ constructor(props) {
+ super(props);
- getInitialState: function() {
const serverType = ServerType.getTypeFromServerConfig(this.props.serverConfig);
-
- return {
+ this.state = {
busy: false,
errorText: null,
// We remember the values entered by the user because
@@ -118,14 +116,15 @@ export default createReactClass({
// this is the user ID that's logged in.
differentLoggedInUserId: null,
};
- },
+ }
- componentDidMount: function() {
+ componentDidMount() {
this._unmounted = false;
this._replaceClient();
- },
+ }
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+ // eslint-disable-next-line camelcase
UNSAFE_componentWillReceiveProps(newProps) {
if (newProps.serverConfig.hsUrl === this.props.serverConfig.hsUrl &&
newProps.serverConfig.isUrl === this.props.serverConfig.isUrl) return;
@@ -142,7 +141,7 @@ export default createReactClass({
phase: this.getDefaultPhaseForServerType(serverType),
});
}
- },
+ }
getDefaultPhaseForServerType(type) {
switch (type) {
@@ -155,9 +154,9 @@ export default createReactClass({
case ServerType.ADVANCED:
return PHASE_SERVER_DETAILS;
}
- },
+ }
- onServerTypeChange(type) {
+ onServerTypeChange = type => {
this.setState({
serverType: type,
});
@@ -184,9 +183,9 @@ export default createReactClass({
this.setState({
phase: this.getDefaultPhaseForServerType(type),
});
- },
+ };
- _replaceClient: async function(serverConfig) {
+ async _replaceClient(serverConfig) {
this.setState({
errorText: null,
serverDeadError: null,
@@ -286,18 +285,18 @@ export default createReactClass({
showGenericError(e);
}
}
- },
+ }
- onFormSubmit: function(formVals) {
+ onFormSubmit = formVals => {
this.setState({
errorText: "",
busy: true,
formVals: formVals,
doingUIAuth: true,
});
- },
+ };
- _requestEmailToken: function(emailAddress, clientSecret, sendAttempt, sessionId) {
+ _requestEmailToken = (emailAddress, clientSecret, sendAttempt, sessionId) => {
return this.state.matrixClient.requestRegisterEmailToken(
emailAddress,
clientSecret,
@@ -309,9 +308,9 @@ export default createReactClass({
session_id: sessionId,
}),
);
- },
+ }
- _onUIAuthFinished: async function(success, response, extra) {
+ _onUIAuthFinished = async (success, response, extra) => {
if (!success) {
let msg = response.message || response.toString();
// can we give a better error message?
@@ -395,9 +394,9 @@ export default createReactClass({
}
this.setState(newState);
- },
+ };
- _setupPushers: function() {
+ _setupPushers() {
if (!this.props.brand) {
return Promise.resolve();
}
@@ -418,15 +417,15 @@ export default createReactClass({
}, (error) => {
console.error("Couldn't get pushers: " + error);
});
- },
+ }
- onLoginClick: function(ev) {
+ onLoginClick = ev => {
ev.preventDefault();
ev.stopPropagation();
this.props.onLoginClick();
- },
+ };
- onGoToFormClicked(ev) {
+ onGoToFormClicked = ev => {
ev.preventDefault();
ev.stopPropagation();
this._replaceClient();
@@ -435,23 +434,23 @@ export default createReactClass({
doingUIAuth: false,
phase: PHASE_REGISTRATION,
});
- },
+ };
- async onServerDetailsNextPhaseClick() {
+ onServerDetailsNextPhaseClick = async () => {
this.setState({
phase: PHASE_REGISTRATION,
});
- },
+ };
- onEditServerDetailsClick(ev) {
+ onEditServerDetailsClick = ev => {
ev.preventDefault();
ev.stopPropagation();
this.setState({
phase: PHASE_SERVER_DETAILS,
});
- },
+ };
- _makeRegisterRequest: function(auth) {
+ _makeRegisterRequest = auth => {
// We inhibit login if we're trying to register with an email address: this
// avoids a lot of complex race conditions that can occur if we try to log
// the user in one one or both of the tabs they might end up with after
@@ -471,20 +470,20 @@ export default createReactClass({
if (auth) registerParams.auth = auth;
if (inhibitLogin !== undefined && inhibitLogin !== null) registerParams.inhibit_login = inhibitLogin;
return this.state.matrixClient.registerRequest(registerParams);
- },
+ };
- _getUIAuthInputs: function() {
+ _getUIAuthInputs() {
return {
emailAddress: this.state.formVals.email,
phoneCountry: this.state.formVals.phoneCountry,
phoneNumber: this.state.formVals.phoneNumber,
};
- },
+ }
// Links to the login page shown after registration is completed are routed through this
// which checks the user hasn't already logged in somewhere else (perhaps we should do
// this more generally?)
- _onLoginClickWithCheck: async function(ev) {
+ _onLoginClickWithCheck = async ev => {
ev.preventDefault();
const sessionLoaded = await Lifecycle.loadSession({ignoreGuest: true});
@@ -492,7 +491,7 @@ export default createReactClass({
// ok fine, there's still no session: really go to the login page
this.props.onLoginClick();
}
- },
+ };
renderServerComponent() {
const ServerTypeSelector = sdk.getComponent("auth.ServerTypeSelector");
@@ -553,7 +552,7 @@ export default createReactClass({
/>
{serverDetails}
;
- },
+ }
renderRegisterComponent() {
if (PHASES_ENABLED && this.state.phase !== PHASE_REGISTRATION) {
@@ -608,9 +607,9 @@ export default createReactClass({
serverRequiresIdServer={this.state.serverRequiresIdServer}
/>;
}
- },
+ }
- render: function() {
+ render() {
const AuthHeader = sdk.getComponent('auth.AuthHeader');
const AuthBody = sdk.getComponent("auth.AuthBody");
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
@@ -706,5 +705,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/views/auth/AuthFooter.js b/src/components/views/auth/AuthFooter.js
index 1309800772..3de5a19350 100644
--- a/src/components/views/auth/AuthFooter.js
+++ b/src/components/views/auth/AuthFooter.js
@@ -18,16 +18,13 @@ limitations under the License.
import { _t } from '../../../languageHandler';
import React from 'react';
-import createReactClass from 'create-react-class';
-export default createReactClass({
- displayName: 'AuthFooter',
-
- render: function() {
+export default class AuthFooter extends React.Component {
+ render() {
return (
);
- },
-});
+ }
+}
diff --git a/src/components/views/auth/AuthHeader.js b/src/components/views/auth/AuthHeader.js
index 6e787ba77c..57499e397c 100644
--- a/src/components/views/auth/AuthHeader.js
+++ b/src/components/views/auth/AuthHeader.js
@@ -17,17 +17,14 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
import * as sdk from '../../../index';
-export default createReactClass({
- displayName: 'AuthHeader',
-
- propTypes: {
+export default class AuthHeader extends React.Component {
+ static propTypes = {
disableLanguageSelector: PropTypes.bool,
- },
+ };
- render: function() {
+ render() {
const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo');
const LanguageSelector = sdk.getComponent('views.auth.LanguageSelector');
@@ -37,5 +34,5 @@ export default createReactClass({
@@ -46,5 +43,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/views/auth/InteractiveAuthEntryComponents.js b/src/components/views/auth/InteractiveAuthEntryComponents.js
index 7080eb3602..628c177d94 100644
--- a/src/components/views/auth/InteractiveAuthEntryComponents.js
+++ b/src/components/views/auth/InteractiveAuthEntryComponents.js
@@ -17,7 +17,6 @@ limitations under the License.
*/
import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import url from 'url';
import classnames from 'classnames';
@@ -75,14 +74,10 @@ import AccessibleButton from "../elements/AccessibleButton";
export const DEFAULT_PHASE = 0;
-export const PasswordAuthEntry = createReactClass({
- displayName: 'PasswordAuthEntry',
+export class PasswordAuthEntry extends React.Component {
+ static LOGIN_TYPE = "m.login.password";
- statics: {
- LOGIN_TYPE: "m.login.password",
- },
-
- propTypes: {
+ static propTypes = {
matrixClient: PropTypes.object.isRequired,
submitAuthDict: PropTypes.func.isRequired,
errorText: PropTypes.string,
@@ -90,19 +85,17 @@ export const PasswordAuthEntry = createReactClass({
// happen?
busy: PropTypes.bool,
onPhaseChange: PropTypes.func.isRequired,
- },
+ };
- componentDidMount: function() {
+ componentDidMount() {
this.props.onPhaseChange(DEFAULT_PHASE);
- },
+ }
- getInitialState: function() {
- return {
- password: "",
- };
- },
+ state = {
+ password: "",
+ };
- _onSubmit: function(e) {
+ _onSubmit = e => {
e.preventDefault();
if (this.props.busy) return;
@@ -117,16 +110,16 @@ export const PasswordAuthEntry = createReactClass({
},
password: this.state.password,
});
- },
+ };
- _onPasswordFieldChange: function(ev) {
+ _onPasswordFieldChange = ev => {
// enable the submit button iff the password is non-empty
this.setState({
password: ev.target.value,
});
- },
+ };
- render: function() {
+ render() {
const passwordBoxClass = classnames({
"error": this.props.errorText,
});
@@ -176,36 +169,32 @@ export const PasswordAuthEntry = createReactClass({
{ errorSection }
);
- },
-});
+ }
+}
-export const RecaptchaAuthEntry = createReactClass({
- displayName: 'RecaptchaAuthEntry',
+export class RecaptchaAuthEntry extends React.Component {
+ static LOGIN_TYPE = "m.login.recaptcha";
- statics: {
- LOGIN_TYPE: "m.login.recaptcha",
- },
-
- propTypes: {
+ static propTypes = {
submitAuthDict: PropTypes.func.isRequired,
stageParams: PropTypes.object.isRequired,
errorText: PropTypes.string,
busy: PropTypes.bool,
onPhaseChange: PropTypes.func.isRequired,
- },
+ };
- componentDidMount: function() {
+ componentDidMount() {
this.props.onPhaseChange(DEFAULT_PHASE);
- },
+ }
- _onCaptchaResponse: function(response) {
+ _onCaptchaResponse = response => {
this.props.submitAuthDict({
type: RecaptchaAuthEntry.LOGIN_TYPE,
response: response,
});
- },
+ };
- render: function() {
+ render() {
if (this.props.busy) {
const Loader = sdk.getComponent("elements.Spinner");
return {_t(
"Private rooms can be found and joined by invitation only. Public rooms can be " +
"found and joined by anyone in this community.",
@@ -239,9 +238,8 @@ export default createReactClass({
}
let title = this.state.isPublic ? _t('Create a public room') : _t('Create a private room');
- if (TagOrderStore.getSelectedPrototypeTag()) {
- const summary = GroupStore.getSummary(TagOrderStore.getSelectedPrototypeTag());
- const name = summary?.profile?.name || TagOrderStore.getSelectedPrototypeTag();
+ if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
+ const name = CommunityPrototypeStore.instance.getSelectedCommunityName();
title = _t("Create a room in %(communityName)s", {communityName: name});
}
return (
@@ -275,5 +273,5 @@ export default createReactClass({
onCancel={this.onCancel} />
);
- },
-});
+ }
+}
diff --git a/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx b/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx
new file mode 100644
index 0000000000..3071854b3e
--- /dev/null
+++ b/src/components/views/dialogs/EditCommunityPrototypeDialog.tsx
@@ -0,0 +1,167 @@
+/*
+Copyright 2020 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.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { ChangeEvent } from 'react';
+import BaseDialog from "./BaseDialog";
+import { _t } from "../../../languageHandler";
+import { IDialogProps } from "./IDialogProps";
+import Field from "../elements/Field";
+import AccessibleButton from "../elements/AccessibleButton";
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
+import FlairStore from "../../../stores/FlairStore";
+
+interface IProps extends IDialogProps {
+ communityId: string;
+}
+
+interface IState {
+ name: string;
+ error: string;
+ busy: boolean;
+ currentAvatarUrl: string;
+ avatarFile: File;
+ avatarPreview: string;
+}
+
+// XXX: This is a lot of duplication from the create dialog, just in a different shape
+export default class EditCommunityPrototypeDialog extends React.PureComponent {sectionSubname};
+ if (!this.state.avatarPreview) {
+ if (this.state.currentAvatarUrl) {
+ const url = MatrixClientPeg.get().mxcUrlToHttp(this.state.currentAvatarUrl);
+ preview =
;
+ } else {
+ preview =
+ }
+ }
+
+ return (
+
@@ -1083,6 +1096,33 @@ export default class InviteDialog extends React.PureComponent {
return {userId};
}},
);
+ if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
+ const communityName = CommunityPrototypeStore.instance.getSelectedCommunityName();
+ helpText = _t(
+ "Start a conversation with someone using their name, username (like {sectionName}
+ {sectionSubname ?
{ label || initialValue }
@@ -234,5 +229,5 @@ export default createReactClass({
}
return editableEl;
- },
-});
+ }
+}
diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index d2869f68c8..7fd154047d 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -17,7 +17,7 @@ limitations under the License.
import React, {InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes} from 'react';
import classNames from 'classnames';
import * as sdk from '../../../index';
-import { debounce } from 'lodash';
+import {debounce} from "lodash";
import {IFieldState, IValidationResult} from "./Validation";
// Invoke validation from user input (when typing, etc.) at most once every N ms.
diff --git a/src/components/views/elements/InlineSpinner.js b/src/components/views/elements/InlineSpinner.js
index ce3c738f3b..73316157f4 100644
--- a/src/components/views/elements/InlineSpinner.js
+++ b/src/components/views/elements/InlineSpinner.js
@@ -15,14 +15,11 @@ limitations under the License.
*/
import React from "react";
-import createReactClass from 'create-react-class';
import {_t} from "../../../languageHandler";
import SettingsStore from "../../../settings/SettingsStore";
-export default createReactClass({
- displayName: 'InlineSpinner',
-
- render: function() {
+export default class InlineSpinner extends React.Component {
+ render() {
const w = this.props.w || 16;
const h = this.props.h || 16;
const imgClass = this.props.imgClassName || "";
@@ -45,5 +42,5 @@ export default createReactClass({
/>
);
- },
-});
+ }
+}
diff --git a/src/components/views/elements/MemberEventListSummary.js b/src/components/views/elements/MemberEventListSummary.js
index 956b69ca7b..e16b52c8a2 100644
--- a/src/components/views/elements/MemberEventListSummary.js
+++ b/src/components/views/elements/MemberEventListSummary.js
@@ -18,17 +18,14 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
import { _t } from '../../../languageHandler';
import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
import * as sdk from "../../../index";
import {MatrixEvent} from "matrix-js-sdk";
import {isValid3pidInvite} from "../../../RoomInvite";
-export default createReactClass({
- displayName: 'MemberEventListSummary',
-
- propTypes: {
+export default class MemberEventListSummary extends React.Component {
+ static propTypes = {
// An array of member events to summarise
events: PropTypes.arrayOf(PropTypes.instanceOf(MatrixEvent)).isRequired,
// An array of EventTiles to render when expanded
@@ -43,17 +40,15 @@ export default createReactClass({
onToggle: PropTypes.func,
// Whether or not to begin with state.expanded=true
startExpanded: PropTypes.bool,
- },
+ };
- getDefaultProps: function() {
- return {
- summaryLength: 1,
- threshold: 3,
- avatarsMaxLength: 5,
- };
- },
+ static defaultProps = {
+ summaryLength: 1,
+ threshold: 3,
+ avatarsMaxLength: 5,
+ };
- shouldComponentUpdate: function(nextProps) {
+ shouldComponentUpdate(nextProps) {
// Update if
// - The number of summarised events has changed
// - or if the summary is about to toggle to become collapsed
@@ -62,7 +57,7 @@ export default createReactClass({
nextProps.events.length !== this.props.events.length ||
nextProps.events.length < this.props.threshold
);
- },
+ }
/**
* Generate the text for users aggregated by their transition sequences (`eventAggregates`) where
@@ -73,7 +68,7 @@ export default createReactClass({
* `Object.keys(eventAggregates)`.
* @returns {string} the textual summary of the aggregated events that occurred.
*/
- _generateSummary: function(eventAggregates, orderedTransitionSequences) {
+ _generateSummary(eventAggregates, orderedTransitionSequences) {
const summaries = orderedTransitionSequences.map((transitions) => {
const userNames = eventAggregates[transitions];
const nameList = this._renderNameList(userNames);
@@ -105,7 +100,7 @@ export default createReactClass({
}
return summaries.join(", ");
- },
+ }
/**
* @param {string[]} users an array of user display names or user IDs.
@@ -113,9 +108,9 @@ export default createReactClass({
* more items in `users` than `this.props.summaryLength`, which is the number of names
* included before "and [n] others".
*/
- _renderNameList: function(users) {
+ _renderNameList(users) {
return formatCommaSeparatedList(users, this.props.summaryLength);
- },
+ }
/**
* Canonicalise an array of transitions such that some pairs of transitions become
@@ -124,7 +119,7 @@ export default createReactClass({
* @param {string[]} transitions an array of transitions.
* @returns {string[]} an array of transitions.
*/
- _getCanonicalTransitions: function(transitions) {
+ _getCanonicalTransitions(transitions) {
const modMap = {
'joined': {
'after': 'left',
@@ -155,7 +150,7 @@ export default createReactClass({
res.push(transition);
}
return res;
- },
+ }
/**
* Transform an array of transitions into an array of transitions and how many times
@@ -171,7 +166,7 @@ export default createReactClass({
* @param {string[]} transitions the array of transitions to transform.
* @returns {object[]} an array of coalesced transitions.
*/
- _coalesceRepeatedTransitions: function(transitions) {
+ _coalesceRepeatedTransitions(transitions) {
const res = [];
for (let i = 0; i < transitions.length; i++) {
if (res.length > 0 && res[res.length - 1].transitionType === transitions[i]) {
@@ -184,7 +179,7 @@ export default createReactClass({
}
}
return res;
- },
+ }
/**
* For a certain transition, t, describe what happened to the users that
@@ -268,11 +263,11 @@ export default createReactClass({
}
return res;
- },
+ }
- _getTransitionSequence: function(events) {
+ _getTransitionSequence(events) {
return events.map(this._getTransition);
- },
+ }
/**
* Label a given membership event, `e`, where `getContent().membership` has
@@ -282,7 +277,7 @@ export default createReactClass({
* @returns {string?} the transition type given to this event. This defaults to `null`
* if a transition is not recognised.
*/
- _getTransition: function(e) {
+ _getTransition(e) {
if (e.mxEvent.getType() === 'm.room.third_party_invite') {
// Handle 3pid invites the same as invites so they get bundled together
if (!isValid3pidInvite(e.mxEvent)) {
@@ -323,9 +318,9 @@ export default createReactClass({
}
default: return null;
}
- },
+ }
- _getAggregate: function(userEvents) {
+ _getAggregate(userEvents) {
// A map of aggregate type to arrays of display names. Each aggregate type
// is a comma-delimited string of transitions, e.g. "joined,left,kicked".
// The array of display names is the array of users who went through that
@@ -364,9 +359,9 @@ export default createReactClass({
names: aggregate,
indices: aggregateIndices,
};
- },
+ }
- render: function() {
+ render() {
const eventsToRender = this.props.events;
// Map user IDs to an array of objects:
@@ -420,5 +415,5 @@ export default createReactClass({
children={this.props.children}
summaryMembers={avatarMembers}
summaryText={this._generateSummary(aggregate.names, orderedTransitionSequences)} />;
- },
-});
+ }
+}
diff --git a/src/components/views/elements/PersistentApp.js b/src/components/views/elements/PersistentApp.js
index a146debc45..bdf5f60234 100644
--- a/src/components/views/elements/PersistentApp.js
+++ b/src/components/views/elements/PersistentApp.js
@@ -16,49 +16,44 @@ limitations under the License.
*/
import React from 'react';
-import createReactClass from 'create-react-class';
import RoomViewStore from '../../../stores/RoomViewStore';
import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
import WidgetUtils from '../../../utils/WidgetUtils';
import * as sdk from '../../../index';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
-export default createReactClass({
- displayName: 'PersistentApp',
+export default class PersistentApp extends React.Component {
+ state = {
+ roomId: RoomViewStore.getRoomId(),
+ persistentWidgetId: ActiveWidgetStore.getPersistentWidgetId(),
+ };
- getInitialState: function() {
- return {
- roomId: RoomViewStore.getRoomId(),
- persistentWidgetId: ActiveWidgetStore.getPersistentWidgetId(),
- };
- },
-
- componentDidMount: function() {
+ componentDidMount() {
this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
ActiveWidgetStore.on('update', this._onActiveWidgetStoreUpdate);
- },
+ }
- componentWillUnmount: function() {
+ componentWillUnmount() {
if (this._roomStoreToken) {
this._roomStoreToken.remove();
}
ActiveWidgetStore.removeListener('update', this._onActiveWidgetStoreUpdate);
- },
+ }
- _onRoomViewStoreUpdate: function(payload) {
+ _onRoomViewStoreUpdate = payload => {
if (RoomViewStore.getRoomId() === this.state.roomId) return;
this.setState({
roomId: RoomViewStore.getRoomId(),
});
- },
+ };
- _onActiveWidgetStoreUpdate: function() {
+ _onActiveWidgetStoreUpdate = () => {
this.setState({
persistentWidgetId: ActiveWidgetStore.getPersistentWidgetId(),
});
- },
+ };
- render: function() {
+ render() {
if (this.state.persistentWidgetId) {
const persistentWidgetInRoomId = ActiveWidgetStore.getRoomId(this.state.persistentWidgetId);
if (this.state.roomId !== persistentWidgetInRoomId) {
@@ -91,6 +86,6 @@ export default createReactClass({
}
}
return null;
- },
-});
+ }
+}
diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.js
index 03a1aeed85..8247225a2b 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.js
@@ -16,7 +16,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
-import createReactClass from 'create-react-class';
import * as sdk from '../../../index';
import dis from '../../../dispatcher/dispatcher';
import classNames from 'classnames';
@@ -32,27 +31,29 @@ import {Action} from "../../../dispatcher/actions";
// HttpUtils transformTags to relative links. This excludes event URLs (with `[^\/]*`)
const REGEX_LOCAL_PERMALINK = /^#\/(?:user|room|group)\/(([#!@+])[^/]*)$/;
-const Pill = createReactClass({
- statics: {
- isPillUrl: (url) => {
- return !!getPrimaryPermalinkEntity(url);
- },
- isMessagePillUrl: (url) => {
- return !!REGEX_LOCAL_PERMALINK.exec(url);
- },
- roomNotifPos: (text) => {
- return text.indexOf("@room");
- },
- roomNotifLen: () => {
- return "@room".length;
- },
- TYPE_USER_MENTION: 'TYPE_USER_MENTION',
- TYPE_ROOM_MENTION: 'TYPE_ROOM_MENTION',
- TYPE_GROUP_MENTION: 'TYPE_GROUP_MENTION',
- TYPE_AT_ROOM_MENTION: 'TYPE_AT_ROOM_MENTION', // '@room' mention
- },
+class Pill extends React.Component {
+ static isPillUrl(url) {
+ return !!getPrimaryPermalinkEntity(url);
+ }
- props: {
+ static isMessagePillUrl(url) {
+ return !!REGEX_LOCAL_PERMALINK.exec(url);
+ }
+
+ static roomNotifPos(text) {
+ return text.indexOf("@room");
+ }
+
+ static roomNotifLen() {
+ return "@room".length;
+ }
+
+ static TYPE_USER_MENTION = 'TYPE_USER_MENTION';
+ static TYPE_ROOM_MENTION = 'TYPE_ROOM_MENTION';
+ static TYPE_GROUP_MENTION = 'TYPE_GROUP_MENTION';
+ static TYPE_AT_ROOM_MENTION = 'TYPE_AT_ROOM_MENTION'; // '@room' mention
+
+ static propTypes = {
// The Type of this Pill. If url is given, this is auto-detected.
type: PropTypes.string,
// The URL to pillify (no validation is done, see isPillUrl and isMessagePillUrl)
@@ -65,25 +66,24 @@ const Pill = createReactClass({
shouldShowPillAvatar: PropTypes.bool,
// Whether to render this pill as if it were highlit by a selection
isSelected: PropTypes.bool,
- },
+ };
- getInitialState() {
- return {
- // ID/alias of the room/user
- resourceId: null,
- // Type of pill
- pillType: null,
+ state = {
+ // ID/alias of the room/user
+ resourceId: null,
+ // Type of pill
+ pillType: null,
- // The member related to the user pill
- member: null,
- // The group related to the group pill
- group: null,
- // The room related to the room pill
- room: null,
- };
- },
+ // The member related to the user pill
+ member: null,
+ // The group related to the group pill
+ group: null,
+ // The room related to the room pill
+ room: null,
+ };
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+ // eslint-disable-next-line camelcase
async UNSAFE_componentWillReceiveProps(nextProps) {
let resourceId;
let prefix;
@@ -155,7 +155,7 @@ const Pill = createReactClass({
}
}
this.setState({resourceId, pillType, member, group, room});
- },
+ }
componentDidMount() {
this._unmounted = false;
@@ -163,13 +163,13 @@ const Pill = createReactClass({
// eslint-disable-next-line new-cap
this.UNSAFE_componentWillReceiveProps(this.props); // HACK: We shouldn't be calling lifecycle functions ourselves.
- },
+ }
componentWillUnmount() {
this._unmounted = true;
- },
+ }
- doProfileLookup: function(userId, member) {
+ doProfileLookup(userId, member) {
MatrixClientPeg.get().getProfileInfo(userId).then((resp) => {
if (this._unmounted) {
return;
@@ -188,15 +188,16 @@ const Pill = createReactClass({
}).catch((err) => {
console.error('Could not retrieve profile data for ' + userId + ':', err);
});
- },
+ }
- onUserPillClicked: function() {
+ onUserPillClicked = () => {
dis.dispatch({
action: Action.ViewUser,
member: this.state.member,
});
- },
- render: function() {
+ };
+
+ render() {
const BaseAvatar = sdk.getComponent('views.avatars.BaseAvatar');
const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
@@ -285,7 +286,7 @@ const Pill = createReactClass({
// Deliberately render nothing if the URL isn't recognised
return null;
}
- },
-});
+ }
+}
export default Pill;
diff --git a/src/components/views/elements/PowerSelector.js b/src/components/views/elements/PowerSelector.js
index 948b4835d5..e5f217dd90 100644
--- a/src/components/views/elements/PowerSelector.js
+++ b/src/components/views/elements/PowerSelector.js
@@ -16,16 +16,13 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
import * as Roles from '../../../Roles';
import { _t } from '../../../languageHandler';
import Field from "./Field";
import {Key} from "../../../Keyboard";
-export default createReactClass({
- displayName: 'PowerSelector',
-
- propTypes: {
+export default class PowerSelector extends React.Component {
+ static propTypes = {
value: PropTypes.number.isRequired,
// The maximum value that can be set with the power selector
maxValue: PropTypes.number.isRequired,
@@ -42,10 +39,17 @@ export default createReactClass({
// The name to annotate the selector with
label: PropTypes.string,
- },
+ }
- getInitialState: function() {
- return {
+ static defaultProps = {
+ maxValue: Infinity,
+ usersDefault: 0,
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
levelRoleMap: {},
// List of power levels to show in the drop-down
options: [],
@@ -53,26 +57,17 @@ export default createReactClass({
customValue: this.props.value,
selectValue: 0,
};
- },
- getDefaultProps: function() {
- return {
- maxValue: Infinity,
- usersDefault: 0,
- };
- },
-
- componentDidMount: function() {
- // TODO: [REACT-WARNING] Move this to class constructor
this._initStateFromProps(this.props);
- },
+ }
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
- UNSAFE_componentWillReceiveProps: function(newProps) {
+ // eslint-disable-next-line camelcase
+ UNSAFE_componentWillReceiveProps(newProps) {
this._initStateFromProps(newProps);
- },
+ }
- _initStateFromProps: function(newProps) {
+ _initStateFromProps(newProps) {
// This needs to be done now because levelRoleMap has translated strings
const levelRoleMap = Roles.levelRoleMap(newProps.usersDefault);
const options = Object.keys(levelRoleMap).filter(level => {
@@ -92,9 +87,9 @@ export default createReactClass({
customLevel: newProps.value,
selectValue: isCustom ? "SELECT_VALUE_CUSTOM" : newProps.value,
});
- },
+ }
- onSelectChange: function(event) {
+ onSelectChange = event => {
const isCustom = event.target.value === "SELECT_VALUE_CUSTOM";
if (isCustom) {
this.setState({custom: true});
@@ -102,20 +97,20 @@ export default createReactClass({
this.props.onChange(event.target.value, this.props.powerLevelKey);
this.setState({selectValue: event.target.value});
}
- },
+ };
- onCustomChange: function(event) {
+ onCustomChange = event => {
this.setState({customValue: event.target.value});
- },
+ };
- onCustomBlur: function(event) {
+ onCustomBlur = event => {
event.preventDefault();
event.stopPropagation();
this.props.onChange(parseInt(this.state.customValue), this.props.powerLevelKey);
- },
+ };
- onCustomKeyDown: function(event) {
+ onCustomKeyDown = event => {
if (event.key === Key.ENTER) {
event.preventDefault();
event.stopPropagation();
@@ -127,9 +122,9 @@ export default createReactClass({
// handle the onBlur safely.
event.target.blur();
}
- },
+ };
- render: function() {
+ render() {
let picker;
const label = typeof this.props.label === "undefined" ? _t("Power level") : this.props.label;
if (this.state.custom) {
@@ -166,5 +161,5 @@ export default createReactClass({
{ picker }
);
- },
-});
+ }
+}
diff --git a/src/components/views/elements/ReplyThread.js b/src/components/views/elements/ReplyThread.js
index 409bf9e01f..70592c72c5 100644
--- a/src/components/views/elements/ReplyThread.js
+++ b/src/components/views/elements/ReplyThread.js
@@ -45,8 +45,8 @@ export default class ReplyThread extends React.Component {
static contextType = MatrixClientContext;
- constructor(props) {
- super(props);
+ constructor(props, context) {
+ super(props, context);
this.state = {
// The loaded events to be rendered as linear-replies
@@ -331,8 +331,14 @@ export default class ReplyThread extends React.Component {
{
_t('In reply to { _t("And %(count)s more...", {count: overflowCount}) }
- );
- },
- };
- },
+ static defaultProps ={
+ truncateAt: 2,
+ createOverflowElement(overflowCount, totalCount) {
+ return (
+ { _t("And %(count)s more...", {count: overflowCount}) }
+ );
+ },
+ };
- _getChildren: function(start, end) {
+ _getChildren(start, end) {
if (this.props.getChildren && this.props.getChildCount) {
return this.props.getChildren(start, end);
} else {
@@ -64,9 +59,9 @@ export default createReactClass({
return c != null;
}).slice(start, end);
}
- },
+ }
- _getChildCount: function() {
+ _getChildCount() {
if (this.props.getChildren && this.props.getChildCount) {
return this.props.getChildCount();
} else {
@@ -74,9 +69,9 @@ export default createReactClass({
return c != null;
}).length;
}
- },
+ }
- render: function() {
+ render() {
let overflowNode = null;
const totalChildren = this._getChildCount();
@@ -98,5 +93,5 @@ export default createReactClass({
{ overflowNode }
);
- },
-});
+ }
+}
diff --git a/src/components/views/groups/GroupInviteTile.js b/src/components/views/groups/GroupInviteTile.js
index bc5334f2de..0c09b6ed05 100644
--- a/src/components/views/groups/GroupInviteTile.js
+++ b/src/components/views/groups/GroupInviteTile.js
@@ -18,7 +18,6 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
import * as sdk from '../../../index';
import dis from '../../../dispatcher/dispatcher';
import {_t} from '../../../languageHandler';
@@ -29,50 +28,48 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {RovingTabIndexWrapper} from "../../../accessibility/RovingTabIndex";
// XXX this class copies a lot from RoomTile.js
-export default createReactClass({
- displayName: 'GroupInviteTile',
-
- propTypes: {
+export default class GroupInviteTile extends React.Component {
+ static propTypes: {
group: PropTypes.object.isRequired,
- },
+ };
- statics: {
- contextType: MatrixClientContext,
- },
+ static contextType = MatrixClientContext;
- getInitialState: function() {
- return ({
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
hover: false,
badgeHover: false,
menuDisplayed: false,
selected: this.props.group.groupId === null, // XXX: this needs linking to LoggedInView/GroupView state
- });
- },
+ };
+ }
- onClick: function(e) {
+ onClick = e => {
dis.dispatch({
action: 'view_group',
group_id: this.props.group.groupId,
});
- },
+ };
- onMouseEnter: function() {
+ onMouseEnter = () => {
const state = {hover: true};
// Only allow non-guests to access the context menu
if (!this.context.isGuest()) {
state.badgeHover = true;
}
this.setState(state);
- },
+ };
- onMouseLeave: function() {
+ onMouseLeave = () => {
this.setState({
badgeHover: false,
hover: false,
});
- },
+ };
- _showContextMenu: function(boundingClientRect) {
+ _showContextMenu(boundingClientRect) {
// Only allow non-guests to access the context menu
if (MatrixClientPeg.get().isGuest()) return;
@@ -86,17 +83,17 @@ export default createReactClass({
}
this.setState(state);
- },
+ }
- onContextMenuButtonClick: function(e) {
+ onContextMenuButtonClick = e => {
// Prevent the RoomTile onClick event firing as well
e.stopPropagation();
e.preventDefault();
this._showContextMenu(e.target.getBoundingClientRect());
- },
+ };
- onContextMenu: function(e) {
+ onContextMenu = e => {
// Prevent the native context menu
e.preventDefault();
@@ -105,15 +102,15 @@ export default createReactClass({
top: e.clientY,
height: 0,
});
- },
+ };
- closeMenu: function() {
+ closeMenu = () => {
this.setState({
contextMenuPosition: null,
});
- },
+ };
- render: function() {
+ render() {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
@@ -197,5 +194,5 @@ export default createReactClass({
{ contextMenu }
;
- },
-});
+ }
+}
diff --git a/src/components/views/groups/GroupMemberList.js b/src/components/views/groups/GroupMemberList.js
index 031b875409..600a466601 100644
--- a/src/components/views/groups/GroupMemberList.js
+++ b/src/components/views/groups/GroupMemberList.js
@@ -16,7 +16,6 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
-import createReactClass from 'create-react-class';
import { _t } from '../../../languageHandler';
import * as sdk from '../../../index';
import dis from '../../../dispatcher/dispatcher';
@@ -30,33 +29,29 @@ import {Action} from "../../../dispatcher/actions";
const INITIAL_LOAD_NUM_MEMBERS = 30;
-export default createReactClass({
- displayName: 'GroupMemberList',
-
- propTypes: {
+export default class GroupMemberList extends React.Component {
+ static propTypes = {
groupId: PropTypes.string.isRequired,
- },
+ };
- getInitialState: function() {
- return {
- members: null,
- membersError: null,
- invitedMembers: null,
- invitedMembersError: null,
- truncateAt: INITIAL_LOAD_NUM_MEMBERS,
- };
- },
+ state = {
+ members: null,
+ membersError: null,
+ invitedMembers: null,
+ invitedMembersError: null,
+ truncateAt: INITIAL_LOAD_NUM_MEMBERS,
+ };
- componentDidMount: function() {
+ componentDidMount() {
this._unmounted = false;
this._initGroupStore(this.props.groupId);
- },
+ }
- componentWillUnmount: function() {
+ componentWillUnmount() {
this._unmounted = true;
- },
+ }
- _initGroupStore: function(groupId) {
+ _initGroupStore(groupId) {
GroupStore.registerListener(groupId, () => {
this._fetchMembers();
});
@@ -73,17 +68,17 @@ export default createReactClass({
});
}
});
- },
+ }
- _fetchMembers: function() {
+ _fetchMembers() {
if (this._unmounted) return;
this.setState({
members: GroupStore.getGroupMembers(this.props.groupId),
invitedMembers: GroupStore.getGroupInvitedMembers(this.props.groupId),
});
- },
+ }
- _createOverflowTile: function(overflowCount, totalCount) {
+ _createOverflowTile = (overflowCount, totalCount) => {
// For now we'll pretend this is any entity. It should probably be a separate tile.
const EntityTile = sdk.getComponent("rooms.EntityTile");
const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
@@ -94,19 +89,19 @@ export default createReactClass({
} name={text} presenceState="online" suppressOnHover={true}
onClick={this._showFullMemberList} />
);
- },
+ };
- _showFullMemberList: function() {
+ _showFullMemberList = () => {
this.setState({
truncateAt: -1,
});
- },
+ };
- onSearchQueryChanged: function(ev) {
+ onSearchQueryChanged = ev => {
this.setState({ searchQuery: ev.target.value });
- },
+ };
- makeGroupMemberTiles: function(query, memberList, memberListError) {
+ makeGroupMemberTiles(query, memberList, memberListError) {
if (memberListError) {
return { _t("Failed to load group members") }
;
}
@@ -160,9 +155,9 @@ export default createReactClass({
>
{ memberTiles }
;
- },
+ }
- onInviteToGroupButtonClick() {
+ onInviteToGroupButtonClick = () => {
showGroupInviteDialog(this.props.groupId).then(() => {
dis.dispatch({
action: Action.SetRightPanelPhase,
@@ -170,9 +165,9 @@ export default createReactClass({
refireParams: { groupId: this.props.groupId },
});
});
- },
+ };
- render: function() {
+ render() {
if (this.state.fetching || this.state.fetchingInvitedMembers) {
const Spinner = sdk.getComponent("elements.Spinner");
return (
@@ -230,5 +225,5 @@ export default createReactClass({
{ inputBox }
);
- },
-});
+ }
+}
diff --git a/src/components/views/groups/GroupMemberTile.js b/src/components/views/groups/GroupMemberTile.js
index 05e3f6ac2a..13617cf681 100644
--- a/src/components/views/groups/GroupMemberTile.js
+++ b/src/components/views/groups/GroupMemberTile.js
@@ -18,37 +18,28 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
import * as sdk from '../../../index';
import dis from '../../../dispatcher/dispatcher';
import { GroupMemberType } from '../../../groups';
import MatrixClientContext from "../../../contexts/MatrixClientContext";
-export default createReactClass({
- displayName: 'GroupMemberTile',
-
- propTypes: {
+export default class GroupMemberTile extends React.Component {
+ static propTypes = {
groupId: PropTypes.string.isRequired,
member: GroupMemberType.isRequired,
- },
+ };
- getInitialState: function() {
- return {};
- },
+ static contextType = MatrixClientContext;
- statics: {
- contextType: MatrixClientContext,
- },
-
- onClick: function(e) {
+ onClick = e => {
dis.dispatch({
action: 'view_group_user',
member: this.props.member,
groupId: this.props.groupId,
});
- },
+ };
- render: function() {
+ render() {
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
const EntityTile = sdk.getComponent('rooms.EntityTile');
@@ -74,5 +65,5 @@ export default createReactClass({
powerStatus={this.props.member.isPrivileged ? EntityTile.POWER_STATUS_ADMIN : null}
/>
);
- },
-});
+ }
+}
diff --git a/src/components/views/groups/GroupPublicityToggle.js b/src/components/views/groups/GroupPublicityToggle.js
index 81f0f469ef..d42059551e 100644
--- a/src/components/views/groups/GroupPublicityToggle.js
+++ b/src/components/views/groups/GroupPublicityToggle.js
@@ -16,44 +16,39 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
import * as sdk from '../../../index';
import GroupStore from '../../../stores/GroupStore';
import ToggleSwitch from "../elements/ToggleSwitch";
-export default createReactClass({
- displayName: 'GroupPublicityToggle',
-
- propTypes: {
+export default class GroupPublicityToggle extends React.Component {
+ static propTypes = {
groupId: PropTypes.string.isRequired,
- },
+ };
- getInitialState() {
- return {
- busy: false,
- ready: false,
- isGroupPublicised: false, // assume false as { this.props.groupId }
;
- },
-});
+ }
+}
export default GroupTile;
diff --git a/src/components/views/groups/GroupUserSettings.js b/src/components/views/groups/GroupUserSettings.js
index 8f57eccd05..9209106c8f 100644
--- a/src/components/views/groups/GroupUserSettings.js
+++ b/src/components/views/groups/GroupUserSettings.js
@@ -15,33 +15,26 @@ limitations under the License.
*/
import React from 'react';
-import createReactClass from 'create-react-class';
import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
import MatrixClientContext from "../../../contexts/MatrixClientContext";
-export default createReactClass({
- displayName: 'GroupUserSettings',
+export default class GroupUserSettings extends React.Component {
+ static contextType = MatrixClientContext;
- statics: {
- contextType: MatrixClientContext,
- },
+ state = {
+ error: null,
+ groups: null,
+ };
- getInitialState() {
- return {
- error: null,
- groups: null,
- };
- },
-
- componentDidMount: function() {
+ componentDidMount() {
this.context.getJoinedGroups().then((result) => {
this.setState({groups: result.groups || [], error: null});
}, (err) => {
console.error(err);
this.setState({groups: null, error: err});
});
- },
+ }
render() {
let text = "";
@@ -70,5 +63,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/views/messages/MFileBody.js b/src/components/views/messages/MFileBody.js
index 2f2521f02d..cc140a4352 100644
--- a/src/components/views/messages/MFileBody.js
+++ b/src/components/views/messages/MFileBody.js
@@ -17,7 +17,6 @@ limitations under the License.
import React, {createRef} from 'react';
import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
import filesize from 'filesize';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import * as sdk from '../../../index';
@@ -117,16 +116,8 @@ function computedStyle(element) {
return cssText;
}
-export default createReactClass({
- displayName: 'MFileBody',
-
- getInitialState: function() {
- return {
- decryptedBlob: (this.props.decryptedBlob ? this.props.decryptedBlob : null),
- };
- },
-
- propTypes: {
+export default class MFileBody extends React.Component {
+ static propTypes = {
/* the MatrixEvent to show */
mxEvent: PropTypes.object.isRequired,
/* already decrypted blob */
@@ -135,7 +126,19 @@ export default createReactClass({
onHeightChanged: PropTypes.func,
/* the shape of the tile, used */
tileShape: PropTypes.string,
- },
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ decryptedBlob: (this.props.decryptedBlob ? this.props.decryptedBlob : null),
+ };
+
+ this._iframe = createRef();
+ this._dummyLink = createRef();
+ this._downloadImage = createRef();
+ }
/**
* Extracts a human readable label for the file attachment to use as
@@ -144,7 +147,7 @@ export default createReactClass({
* @params {Object} content The "content" key of the matrix event.
* @return {string} the human readable link text for the attachment.
*/
- presentableTextForFile: function(content) {
+ presentableTextForFile(content) {
let linkText = _t("Attachment");
if (content.body && content.body.length > 0) {
// The content body should be the name of the file including a
@@ -163,40 +166,33 @@ export default createReactClass({
linkText += ' (' + filesize(content.info.size) + ')';
}
return linkText;
- },
+ }
- _getContentUrl: function() {
+ _getContentUrl() {
const content = this.props.mxEvent.getContent();
return MatrixClientPeg.get().mxcUrlToHttp(content.url);
- },
+ }
- // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
- UNSAFE_componentWillMount: function() {
- this._iframe = createRef();
- this._dummyLink = createRef();
- this._downloadImage = createRef();
- },
-
- componentDidMount: function() {
+ componentDidMount() {
// Add this to the list of mounted components to receive notifications
// when the tint changes.
this.id = nextMountId++;
mounts[this.id] = this;
this.tint();
- },
+ }
- componentDidUpdate: function(prevProps, prevState) {
+ componentDidUpdate(prevProps, prevState) {
if (this.props.onHeightChanged && !prevState.decryptedBlob && this.state.decryptedBlob) {
this.props.onHeightChanged();
}
- },
+ }
- componentWillUnmount: function() {
+ componentWillUnmount() {
// Remove this from the list of mounted components
delete mounts[this.id];
- },
+ }
- tint: function() {
+ tint = () => {
// Update our tinted copy of require("../../../../res/img/download.svg")
if (this._downloadImage.current) {
this._downloadImage.current.src = tintedDownloadImageURL;
@@ -210,9 +206,9 @@ export default createReactClass({
style: computedStyle(this._dummyLink.current),
}, "*");
}
- },
+ };
- render: function() {
+ render() {
const content = this.props.mxEvent.getContent();
const text = this.presentableTextForFile(content);
const isEncrypted = content.file !== undefined;
@@ -378,5 +374,5 @@ export default createReactClass({
{ _t("Invalid file%(extra)s", { extra: extra }) }
;
}
- },
-});
+ }
+}
diff --git a/src/components/views/messages/MVideoBody.js b/src/components/views/messages/MVideoBody.js
index fdc04deffc..86bf41699b 100644
--- a/src/components/views/messages/MVideoBody.js
+++ b/src/components/views/messages/MVideoBody.js
@@ -17,7 +17,6 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
import MFileBody from './MFileBody';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import { decryptFile } from '../../../utils/DecryptFile';
@@ -25,27 +24,23 @@ import { _t } from '../../../languageHandler';
import SettingsStore from "../../../settings/SettingsStore";
import InlineSpinner from '../elements/InlineSpinner';
-export default createReactClass({
- displayName: 'MVideoBody',
-
- propTypes: {
+export default class MVideoBody extends React.Component {
+ static propTypes = {
/* the MatrixEvent to show */
mxEvent: PropTypes.object.isRequired,
/* called when the video has loaded */
onHeightChanged: PropTypes.func.isRequired,
- },
+ };
- getInitialState: function() {
- return {
- decryptedUrl: null,
- decryptedThumbnailUrl: null,
- decryptedBlob: null,
- error: null,
- };
- },
+ state = {
+ decryptedUrl: null,
+ decryptedThumbnailUrl: null,
+ decryptedBlob: null,
+ error: null,
+ };
- thumbScale: function(fullWidth, fullHeight, thumbWidth, thumbHeight) {
+ thumbScale(fullWidth, fullHeight, thumbWidth, thumbHeight) {
if (!fullWidth || !fullHeight) {
// Cannot calculate thumbnail height for image: missing w/h in metadata. We can't even
// log this because it's spammy
@@ -64,18 +59,18 @@ export default createReactClass({
// height is the dominant dimension so scaling will be fixed on that
return heightMulti;
}
- },
+ }
- _getContentUrl: function() {
+ _getContentUrl() {
const content = this.props.mxEvent.getContent();
if (content.file !== undefined) {
return this.state.decryptedUrl;
} else {
return MatrixClientPeg.get().mxcUrlToHttp(content.url);
}
- },
+ }
- _getThumbUrl: function() {
+ _getThumbUrl() {
const content = this.props.mxEvent.getContent();
if (content.file !== undefined) {
return this.state.decryptedThumbnailUrl;
@@ -84,9 +79,9 @@ export default createReactClass({
} else {
return null;
}
- },
+ }
- componentDidMount: function() {
+ componentDidMount() {
const content = this.props.mxEvent.getContent();
if (content.file !== undefined && this.state.decryptedUrl === null) {
let thumbnailPromise = Promise.resolve(null);
@@ -118,18 +113,18 @@ export default createReactClass({
});
});
}
- },
+ }
- componentWillUnmount: function() {
+ componentWillUnmount() {
if (this.state.decryptedUrl) {
URL.revokeObjectURL(this.state.decryptedUrl);
}
if (this.state.decryptedThumbnailUrl) {
URL.revokeObjectURL(this.state.decryptedThumbnailUrl);
}
- },
+ }
- render: function() {
+ render() {
const content = this.props.mxEvent.getContent();
if (this.state.error !== null) {
@@ -182,5 +177,5 @@ export default createReactClass({
{ text }
);
- },
-});
+ }
+}
diff --git a/src/components/views/right_panel/GroupHeaderButtons.tsx b/src/components/views/right_panel/GroupHeaderButtons.tsx
index 44237e401f..dd4a82e645 100644
--- a/src/components/views/right_panel/GroupHeaderButtons.tsx
+++ b/src/components/views/right_panel/GroupHeaderButtons.tsx
@@ -41,13 +41,9 @@ interface IProps {}
export default class GroupHeaderButtons extends HeaderButtons {
constructor(props: IProps) {
super(props, HeaderKind.Group);
- this.onMembersClicked = this.onMembersClicked.bind(this);
- this.onRoomsClicked = this.onRoomsClicked.bind(this);
}
protected onAction(payload: ActionPayload) {
- super.onAction(payload);
-
if (payload.action === Action.ViewUser) {
if ((payload as ViewUserPayload).member) {
this.setPhase(RightPanelPhases.RoomMemberInfo, {member: payload.member});
@@ -70,7 +66,7 @@ export default class GroupHeaderButtons extends HeaderButtons {
}
}
- private onMembersClicked() {
+ private onMembersClicked = () => {
if (this.state.phase === RightPanelPhases.GroupMemberInfo) {
// send the active phase to trigger a toggle
this.setPhase(RightPanelPhases.GroupMemberInfo);
@@ -78,12 +74,12 @@ export default class GroupHeaderButtons extends HeaderButtons {
// This toggles for us, if needed
this.setPhase(RightPanelPhases.GroupMemberList);
}
- }
+ };
- private onRoomsClicked() {
+ private onRoomsClicked = () => {
// This toggles for us, if needed
this.setPhase(RightPanelPhases.GroupRoomList);
- }
+ };
renderButtons() {
return [
diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx
index bbb783ccb9..e922959bbb 100644
--- a/src/components/views/right_panel/HeaderButtons.tsx
+++ b/src/components/views/right_panel/HeaderButtons.tsx
@@ -65,9 +65,7 @@ export default abstract class HeaderButtons extends React.Component{ _t('Please select the destination room for this message') }
{ _t("No pinned messages.") }
);
}
@@ -120,9 +116,9 @@ export default createReactClass({
mxEvent={context.event}
onUnpinned={this._updatePinnedMessages} />);
});
- },
+ }
- render: function() {
+ render() {
let tiles = { _t("Loading...") }
;
if (this.state && !this.state.loading) {
tiles = this._getPinnedTiles();
@@ -139,5 +135,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/views/rooms/PresenceLabel.js b/src/components/views/rooms/PresenceLabel.js
index f9dcd7e89d..ff1460ca21 100644
--- a/src/components/views/rooms/PresenceLabel.js
+++ b/src/components/views/rooms/PresenceLabel.js
@@ -16,15 +16,12 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
import { _t } from '../../../languageHandler';
-export default createReactClass({
- displayName: 'PresenceLabel',
-
- propTypes: {
+export default class PresenceLabel extends React.Component {
+ static propTypes = {
// number of milliseconds ago this user was last active.
// zero = unknown
activeAgo: PropTypes.number,
@@ -35,18 +32,16 @@ export default createReactClass({
// offline, online, etc
presenceState: PropTypes.string,
- },
+ };
- getDefaultProps: function() {
- return {
- ago: -1,
- presenceState: null,
- };
- },
+ static defaultProps = {
+ activeAgo: -1,
+ presenceState: null,
+ };
// Return duration as a string using appropriate time units
// XXX: This would be better handled using a culture-aware library, but we don't use one yet.
- getDuration: function(time) {
+ getDuration(time) {
if (!time) return;
const t = parseInt(time / 1000);
const s = t % 60;
@@ -66,9 +61,9 @@ export default createReactClass({
return _t("%(duration)sh", {duration: h});
}
return _t("%(duration)sd", {duration: d});
- },
+ }
- getPrettyPresence: function(presence, activeAgo, currentlyActive) {
+ getPrettyPresence(presence, activeAgo, currentlyActive) {
if (!currentlyActive && activeAgo !== undefined && activeAgo > 0) {
const duration = this.getDuration(activeAgo);
if (presence === "online") return _t("Online for %(duration)s", { duration: duration });
@@ -81,13 +76,13 @@ export default createReactClass({
if (presence === "offline") return _t("Offline");
return _t("Unknown");
}
- },
+ }
- render: function() {
+ render() {
return (
{ this.getPrettyPresence(this.props.presenceState, this.props.activeAgo, this.props.currentlyActive) }
);
- },
-});
+ }
+}
diff --git a/src/components/views/rooms/ReadReceiptMarker.js b/src/components/views/rooms/ReadReceiptMarker.js
index 1c490f019e..c19247ef5a 100644
--- a/src/components/views/rooms/ReadReceiptMarker.js
+++ b/src/components/views/rooms/ReadReceiptMarker.js
@@ -17,7 +17,6 @@ limitations under the License.
import React, {createRef} from 'react';
import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
import '../../../VelocityBounce';
import { _t } from '../../../languageHandler';
import {formatDate} from '../../../DateUtils';
@@ -33,10 +32,8 @@ try {
} catch (e) {
}
-export default createReactClass({
- displayName: 'ReadReceiptMarker',
-
- propTypes: {
+export default class ReadReceiptMarker extends React.Component {
+ static propTypes = {
// the RoomMember to show the RR for
member: PropTypes.object,
// userId to fallback the avatar to
@@ -70,30 +67,27 @@ export default createReactClass({
// True to show twelve hour format, false otherwise
showTwelveHour: PropTypes.bool,
- },
+ };
- getDefaultProps: function() {
- return {
- leftOffset: 0,
- };
- },
+ static defaultProps = {
+ leftOffset: 0,
+ };
- getInitialState: function() {
- // if we are going to animate the RR, we don't show it on first render,
- // and instead just add a placeholder to the DOM; once we've been
- // mounted, we start an animation which moves the RR from its old
- // position.
- return {
+ constructor(props) {
+ super(props);
+
+ this._avatar = createRef();
+
+ this.state = {
+ // if we are going to animate the RR, we don't show it on first render,
+ // and instead just add a placeholder to the DOM; once we've been
+ // mounted, we start an animation which moves the RR from its old
+ // position.
suppressDisplay: !this.props.suppressAnimation,
};
- },
+ }
- // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
- UNSAFE_componentWillMount: function() {
- this._avatar = createRef();
- },
-
- componentWillUnmount: function() {
+ componentWillUnmount() {
// before we remove the rr, store its location in the map, so that if
// it reappears, it can be animated from the right place.
const rrInfo = this.props.readReceiptInfo;
@@ -112,9 +106,9 @@ export default createReactClass({
rrInfo.top = avatarNode.offsetTop;
rrInfo.left = avatarNode.offsetLeft;
rrInfo.parent = avatarNode.offsetParent;
- },
+ }
- componentDidMount: function() {
+ componentDidMount() {
if (!this.state.suppressDisplay) {
// we've already done our display - nothing more to do.
return;
@@ -172,10 +166,9 @@ export default createReactClass({
startStyles: startStyles,
enterTransitionOpts: enterTransitionOpts,
});
- },
+ }
-
- render: function() {
+ render() {
const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
if (this.state.suppressDisplay) {
return ;
@@ -222,5 +215,5 @@ export default createReactClass({
/>
);
- },
-});
+ }
+}
diff --git a/src/components/views/rooms/RoomDetailList.js b/src/components/views/rooms/RoomDetailList.js
index 5b45cfc29a..d8205aeb21 100644
--- a/src/components/views/rooms/RoomDetailList.js
+++ b/src/components/views/rooms/RoomDetailList.js
@@ -19,35 +19,32 @@ import dis from '../../../dispatcher/dispatcher';
import React from 'react';
import { _t } from '../../../languageHandler';
import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
import classNames from 'classnames';
import {roomShape} from './RoomDetailRow';
-export default createReactClass({
- displayName: 'RoomDetailList',
-
- propTypes: {
+export default class RoomDetailList extends React.Component {
+ static propTypes = {
rooms: PropTypes.arrayOf(roomShape),
className: PropTypes.string,
- },
+ };
- getRows: function() {
+ getRows() {
if (!this.props.rooms) return [];
const RoomDetailRow = sdk.getComponent('rooms.RoomDetailRow');
return this.props.rooms.map((room, index) => {
return
{ rooms }
;
- },
-});
+ }
+}
diff --git a/src/components/views/rooms/RoomDetailRow.js b/src/components/views/rooms/RoomDetailRow.js
index a88fae9e42..667f821922 100644
--- a/src/components/views/rooms/RoomDetailRow.js
+++ b/src/components/views/rooms/RoomDetailRow.js
@@ -20,7 +20,6 @@ import { _t } from '../../../languageHandler';
import { linkifyElement } from '../../../HtmlUtils';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
export function getDisplayAliasForRoom(room) {
@@ -40,47 +39,48 @@ export const roomShape = PropTypes.shape({
guestCanJoin: PropTypes.bool,
});
-export default createReactClass({
- propTypes: {
+export default class RoomDetailRow extends React.Component {
+ static propTypes = {
room: roomShape,
// passes ev, room as args
onClick: PropTypes.func,
onMouseDown: PropTypes.func,
- },
+ };
- _linkifyTopic: function() {
+ constructor(props) {
+ super(props);
+
+ this._topic = createRef();
+ }
+
+ componentDidMount() {
+ this._linkifyTopic();
+ }
+
+ componentDidUpdate() {
+ this._linkifyTopic();
+ }
+
+ _linkifyTopic() {
if (this._topic.current) {
linkifyElement(this._topic.current);
}
- },
+ }
- // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
- UNSAFE_componentWillMount: function() {
- this._topic = createRef();
- },
-
- componentDidMount: function() {
- this._linkifyTopic();
- },
-
- componentDidUpdate: function() {
- this._linkifyTopic();
- },
-
- onClick: function(ev) {
+ onClick = (ev) => {
ev.preventDefault();
if (this.props.onClick) {
this.props.onClick(ev, this.props.room);
}
- },
+ };
- onTopicClick: function(ev) {
+ onTopicClick = (ev) => {
// When clicking a link in the topic, prevent the event being propagated
// to `onClick`.
ev.stopPropagation();
- },
+ };
- render: function() {
+ render() {
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
const room = this.props.room;
@@ -118,5 +118,5 @@ export default createReactClass({
{ room.numJoinedMembers }
;
- },
-});
+ }
+}
diff --git a/src/components/views/rooms/RoomHeader.js b/src/components/views/rooms/RoomHeader.js
index fe5b12c1c0..2a44f53d21 100644
--- a/src/components/views/rooms/RoomHeader.js
+++ b/src/components/views/rooms/RoomHeader.js
@@ -17,7 +17,6 @@ limitations under the License.
import React, {createRef} from 'react';
import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
import classNames from 'classnames';
import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
@@ -35,10 +34,8 @@ import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
import {DefaultTagID} from "../../../stores/room-list/models";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
-export default createReactClass({
- displayName: 'RoomHeader',
-
- propTypes: {
+export default class RoomHeader extends React.Component {
+ static propTypes = {
room: PropTypes.object,
oobData: PropTypes.object,
inRoom: PropTypes.bool,
@@ -48,22 +45,21 @@ export default createReactClass({
onLeaveClick: PropTypes.func,
onCancelClick: PropTypes.func,
e2eStatus: PropTypes.string,
- },
+ };
- getDefaultProps: function() {
- return {
- editing: false,
- inRoom: false,
- onCancelClick: null,
- };
- },
+ static defaultProps = {
+ editing: false,
+ inRoom: false,
+ onCancelClick: null,
+ };
+
+ constructor(props) {
+ super(props);
- // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
- UNSAFE_componentWillMount: function() {
this._topic = createRef();
- },
+ }
- componentDidMount: function() {
+ componentDidMount() {
const cli = MatrixClientPeg.get();
cli.on("RoomState.events", this._onRoomStateEvents);
cli.on("Room.accountData", this._onRoomAccountData);
@@ -74,15 +70,15 @@ export default createReactClass({
if (this.props.room) {
this.props.room.on("Room.name", this._onRoomNameChange);
}
- },
+ }
- componentDidUpdate: function() {
+ componentDidUpdate() {
if (this._topic.current) {
linkifyElement(this._topic.current);
}
- },
+ }
- componentWillUnmount: function() {
+ componentWillUnmount() {
if (this.props.room) {
this.props.room.removeListener("Room.name", this._onRoomNameChange);
}
@@ -91,41 +87,41 @@ export default createReactClass({
cli.removeListener("RoomState.events", this._onRoomStateEvents);
cli.removeListener("Room.accountData", this._onRoomAccountData);
}
- },
+ }
- _onRoomStateEvents: function(event, state) {
+ _onRoomStateEvents = (event, state) => {
if (!this.props.room || event.getRoomId() !== this.props.room.roomId) {
return;
}
// redisplay the room name, topic, etc.
this._rateLimitedUpdate();
- },
+ };
- _onRoomAccountData: function(event, room) {
+ _onRoomAccountData = (event, room) => {
if (!this.props.room || room.roomId !== this.props.room.roomId) return;
if (event.getType() !== "im.vector.room.read_pins") return;
this._rateLimitedUpdate();
- },
+ };
- _rateLimitedUpdate: new RateLimitedFunc(function() {
+ _rateLimitedUpdate = new RateLimitedFunc(function() {
/* eslint-disable babel/no-invalid-this */
this.forceUpdate();
- }, 500),
+ }, 500);
- _onRoomNameChange: function(room) {
+ _onRoomNameChange = (room) => {
this.forceUpdate();
- },
+ };
- onShareRoomClick: function(ev) {
+ onShareRoomClick = (ev) => {
const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
Modal.createTrackedDialog('share room dialog', '', ShareDialog, {
target: this.props.room,
});
- },
+ };
- _hasUnreadPins: function() {
+ _hasUnreadPins() {
const currentPinEvent = this.props.room.currentState.getStateEvents("m.room.pinned_events", '');
if (!currentPinEvent) return false;
if (currentPinEvent.getContent().pinned && currentPinEvent.getContent().pinned.length <= 0) {
@@ -142,16 +138,16 @@ export default createReactClass({
// There's pins, and we haven't read any of them
return true;
- },
+ }
- _hasPins: function() {
+ _hasPins() {
const currentPinEvent = this.props.room.currentState.getStateEvents("m.room.pinned_events", '');
if (!currentPinEvent) return false;
return !(currentPinEvent.getContent().pinned && currentPinEvent.getContent().pinned.length <= 0);
- },
+ }
- render: function() {
+ render() {
let searchStatus = null;
let cancelButton = null;
let settingsButton = null;
@@ -301,5 +297,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
index ec8c8d6840..92bbdfeacb 100644
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@@ -45,7 +45,7 @@ import { arrayFastClone, arrayHasDiff } from "../../../utils/arrays";
import { objectShallowClone, objectWithOnly } from "../../../utils/objects";
import { IconizedContextMenuOption, IconizedContextMenuOptionList } from "../context_menus/IconizedContextMenu";
import AccessibleButton from "../elements/AccessibleButton";
-import TagOrderStore from "../../../stores/TagOrderStore";
+import { CommunityPrototypeStore } from "../../../stores/CommunityPrototypeStore";
interface IProps {
onKeyDown: (ev: React.KeyboardEvent) => void;
@@ -130,7 +130,7 @@ const TAG_AESTHETICS: {
}}
/>
@@ -175,11 +173,11 @@ export default createReactClass({
{ uploadSection }
);
- case this.Phases.Uploading:
+ case ChangeAvatar.Phases.Uploading:
var Loader = sdk.getComponent("elements.Spinner");
return (
@@ -290,5 +283,5 @@ export default createReactClass({
);
}
- },
-});
+ }
+}
diff --git a/src/components/views/settings/CrossSigningPanel.js b/src/components/views/settings/CrossSigningPanel.js
index 847bcf3da3..3eeb072e2d 100644
--- a/src/components/views/settings/CrossSigningPanel.js
+++ b/src/components/views/settings/CrossSigningPanel.js
@@ -19,8 +19,9 @@ import React from 'react';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import { _t } from '../../../languageHandler';
import * as sdk from '../../../index';
-import { accessSecretStorage } from '../../../CrossSigningManager';
+import { accessSecretStorage } from '../../../SecurityManager';
import Modal from '../../../Modal';
+import Spinner from '../elements/Spinner';
export default class CrossSigningPanel extends React.PureComponent {
constructor(props) {
@@ -163,8 +164,7 @@ export default class CrossSigningPanel extends React.PureComponent {
let summarisedStatus;
if (homeserverSupportsCrossSigning === undefined) {
- const InlineSpinner = sdk.getComponent('views.elements.InlineSpinner');
- summarisedStatus = {_t( "Your homeserver does not support cross-signing.", diff --git a/src/components/views/settings/E2eAdvancedPanel.js b/src/components/views/settings/E2eAdvancedPanel.js index 2ba6190a9b..0650630901 100644 --- a/src/components/views/settings/E2eAdvancedPanel.js +++ b/src/components/views/settings/E2eAdvancedPanel.js @@ -25,7 +25,7 @@ const SETTING_MANUALLY_VERIFY_ALL_SESSIONS = "e2ee.manuallyVerifyAllSessions"; const E2eAdvancedPanel = props => { const SettingsFlag = sdk.getComponent('views.elements.SettingsFlag'); return
- {_t("Advanced")}
+ {_t("Encryption")}
{
const self = this;
this.setState({
- phase: this.phases.LOADING,
+ phase: Notifications.phases.LOADING,
});
MatrixClientPeg.get().setPushRuleEnabled('global', self.state.masterPushRule.kind, self.state.masterPushRule.rule_id, !checked).then(function() {
self._refreshFromServer();
});
- },
+ };
- onEnableDesktopNotificationsChange: function(checked) {
+ onEnableDesktopNotificationsChange = (checked) => {
SettingsStore.setValue(
"notificationsEnabled", null,
SettingLevel.DEVICE,
@@ -112,9 +107,9 @@ export default createReactClass({
).finally(() => {
this.forceUpdate();
});
- },
+ };
- onEnableDesktopNotificationBodyChange: function(checked) {
+ onEnableDesktopNotificationBodyChange = (checked) => {
SettingsStore.setValue(
"notificationBodyEnabled", null,
SettingLevel.DEVICE,
@@ -122,9 +117,9 @@ export default createReactClass({
).finally(() => {
this.forceUpdate();
});
- },
+ };
- onEnableAudioNotificationsChange: function(checked) {
+ onEnableAudioNotificationsChange = (checked) => {
SettingsStore.setValue(
"audioNotificationsEnabled", null,
SettingLevel.DEVICE,
@@ -132,7 +127,7 @@ export default createReactClass({
).finally(() => {
this.forceUpdate();
});
- },
+ };
/*
* Returns the email pusher (pusher of type 'email') for a given
@@ -140,7 +135,7 @@ export default createReactClass({
* pushers are unique over (app ID, pushkey), there will be at most
* one such pusher.
*/
- getEmailPusher: function(pushers, address) {
+ getEmailPusher(pushers, address) {
if (pushers === undefined) {
return undefined;
}
@@ -150,9 +145,9 @@ export default createReactClass({
}
}
return undefined;
- },
+ }
- onEnableEmailNotificationsChange: function(address, checked) {
+ onEnableEmailNotificationsChange = (address, checked) => {
let emailPusherPromise;
if (checked) {
const data = {};
@@ -181,9 +176,9 @@ export default createReactClass({
description: _t('An error occurred whilst saving your email notification preferences.'),
});
});
- },
+ };
- onNotifStateButtonClicked: function(event) {
+ onNotifStateButtonClicked = (event) => {
// FIXME: use .bind() rather than className metadata here surely
const vectorRuleId = event.target.className.split("-")[0];
const newPushRuleVectorState = event.target.className.split("-")[1];
@@ -196,11 +191,9 @@ export default createReactClass({
this._setPushRuleVectorState(rule, newPushRuleVectorState);
}
}
- },
-
- onKeywordsClicked: function(event) {
- const self = this;
+ };
+ onKeywordsClicked = (event) => {
// Compute the keywords list to display
let keywords = [];
for (const i in this.state.vectorContentRules.rules) {
@@ -223,7 +216,7 @@ export default createReactClass({
description: _t('Enter keywords separated by a comma:'),
button: _t('OK'),
value: keywords,
- onFinished: function onFinished(should_leave, newValue) {
+ onFinished: (should_leave, newValue) => {
if (should_leave && newValue !== keywords) {
let newKeywords = newValue.split(',');
for (const i in newKeywords) {
@@ -238,25 +231,25 @@ export default createReactClass({
return array;
}, []);
- self._setKeywords(newKeywords);
+ this._setKeywords(newKeywords);
}
},
});
- },
+ };
- getRule: function(vectorRuleId) {
+ getRule(vectorRuleId) {
for (const i in this.state.vectorPushRules) {
const rule = this.state.vectorPushRules[i];
if (rule.vectorRuleId === vectorRuleId) {
return rule;
}
}
- },
+ }
- _setPushRuleVectorState: function(rule, newPushRuleVectorState) {
+ _setPushRuleVectorState(rule, newPushRuleVectorState) {
if (rule && rule.vectorState !== newPushRuleVectorState) {
this.setState({
- phase: this.phases.LOADING,
+ phase: Notifications.phases.LOADING,
});
const self = this;
@@ -288,9 +281,9 @@ export default createReactClass({
});
});
}
- },
+ }
- _setKeywordsPushRuleVectorState: function(newPushRuleVectorState) {
+ _setKeywordsPushRuleVectorState(newPushRuleVectorState) {
// Is there really a change?
if (this.state.vectorContentRules.vectorState === newPushRuleVectorState
|| this.state.vectorContentRules.rules.length === 0) {
@@ -301,7 +294,7 @@ export default createReactClass({
const cli = MatrixClientPeg.get();
this.setState({
- phase: this.phases.LOADING,
+ phase: Notifications.phases.LOADING,
});
// Update all rules in self.state.vectorContentRules
@@ -356,11 +349,11 @@ export default createReactClass({
onFinished: self._refreshFromServer,
});
});
- },
+ }
- _setKeywords: function(newKeywords) {
+ _setKeywords(newKeywords) {
this.setState({
- phase: this.phases.LOADING,
+ phase: Notifications.phases.LOADING,
});
const self = this;
@@ -440,19 +433,19 @@ export default createReactClass({
self._refreshFromServer();
}, onError);
}, onError);
- },
+ }
// Create a push rule but disabled
- _addDisabledPushRule: function(scope, kind, ruleId, body) {
+ _addDisabledPushRule(scope, kind, ruleId, body) {
const cli = MatrixClientPeg.get();
return cli.addPushRule(scope, kind, ruleId, body).then(() =>
cli.setPushRuleEnabled(scope, kind, ruleId, false),
);
- },
+ }
// Check if any legacy im.vector rules need to be ported to the new API
// for overriding the actions of default rules.
- _portRulesToNewAPI: function(rulesets) {
+ _portRulesToNewAPI(rulesets) {
const needsUpdate = [];
const cli = MatrixClientPeg.get();
@@ -485,9 +478,9 @@ export default createReactClass({
// Otherwise return the rules that we already have.
return rulesets;
}
- },
+ }
- _refreshFromServer: function() {
+ _refreshFromServer = () => {
const self = this;
const pushRulesPromise = MatrixClientPeg.get().getPushRules().then(self._portRulesToNewAPI).then(function(rulesets) {
/// XXX seriously? wtf is this?
@@ -636,12 +629,12 @@ export default createReactClass({
Promise.all([pushRulesPromise, pushersPromise]).then(function() {
self.setState({
- phase: self.phases.DISPLAY,
+ phase: Notifications.phases.DISPLAY,
});
}, function(error) {
console.error(error);
self.setState({
- phase: self.phases.ERROR,
+ phase: Notifications.phases.ERROR,
});
}).finally(() => {
// actually explicitly update our state having been deep-manipulating it
@@ -655,9 +648,9 @@ export default createReactClass({
});
MatrixClientPeg.get().getThreePids().then((r) => this.setState({threepids: r.threepids}));
- },
+ };
- _onClearNotifications: function() {
+ _onClearNotifications = () => {
const cli = MatrixClientPeg.get();
cli.getRooms().forEach(r => {
@@ -666,9 +659,9 @@ export default createReactClass({
if (events.length) cli.sendReadReceipt(events.pop());
}
});
- },
+ };
- _updatePushRuleActions: function(rule, actions, enabled) {
+ _updatePushRuleActions(rule, actions, enabled) {
const cli = MatrixClientPeg.get();
return cli.setPushRuleActions(
@@ -681,9 +674,9 @@ export default createReactClass({
);
}
});
- },
+ }
- renderNotifRulesTableRow: function(title, className, pushRuleVectorState) {
+ renderNotifRulesTableRow(title, className, pushRuleVectorState) {
return (
@@ -712,9 +705,9 @@ export default createReactClass({
);
- },
+ }
- renderNotifRulesTableRows: function() {
+ renderNotifRulesTableRows() {
const rows = [];
for (const i in this.state.vectorPushRules) {
const rule = this.state.vectorPushRules[i];
@@ -726,9 +719,9 @@ export default createReactClass({
rows.push(this.renderNotifRulesTableRow(rule.description, rule.vectorRuleId, rule.vectorState));
}
return rows;
- },
+ }
- hasEmailPusher: function(pushers, address) {
+ hasEmailPusher(pushers, address) {
if (pushers === undefined) {
return false;
}
@@ -738,17 +731,17 @@ export default createReactClass({
}
}
return false;
- },
+ }
- emailNotificationsRow: function(address, label) {
+ emailNotificationsRow(address, label) {
return
);
- },
-});
+ }
+}
diff --git a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
index fda7ccb005..90dcc0b658 100644
--- a/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/SecurityUserSettingsTab.js
@@ -332,9 +332,8 @@ export default class SecurityUserSettingsTab extends React.Component {
return (
{warning}
-
- {keyBackup}
- {eventIndex}
- {crossSigning}
- {this._renderCurrentDeviceInfo()}
- {_t("Security & Privacy")}
+ {_t("Where you’re logged in")}
- {_t("Where you’re logged in")}
{_t(
"Manage the names of and sign out of your sessions below or " +
@@ -351,11 +350,15 @@ export default class SecurityUserSettingsTab extends React.Component {
+
{_t("Encryption")}
+
+ {keyBackup}
+ {eventIndex}
+ {crossSigning}
+ {this._renderCurrentDeviceInfo()}
+
+ {_t("Privacy")}
+
{_t("Analytics")}
);
}
diff --git a/src/components/views/voip/VideoFeed.js b/src/components/views/voip/VideoFeed.js
index 527b071942..a0330f8cb1 100644
--- a/src/components/views/voip/VideoFeed.js
+++ b/src/components/views/voip/VideoFeed.js
@@ -17,44 +17,42 @@ limitations under the License.
import React, {createRef} from 'react';
import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-export default createReactClass({
- displayName: 'VideoFeed',
-
- propTypes: {
+export default class VideoFeed extends React.Component {
+ static propTypes = {
// maxHeight style attribute for the video element
maxHeight: PropTypes.number,
// a callback which is called when the video element is resized
// due to a change in video metadata
onResize: PropTypes.func,
- },
+ };
+
+ constructor(props) {
+ super(props);
- // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
- UNSAFE_componentWillMount() {
this._vid = createRef();
- },
+ }
componentDidMount() {
this._vid.current.addEventListener('resize', this.onResize);
- },
+ }
componentWillUnmount() {
this._vid.current.removeEventListener('resize', this.onResize);
- },
+ }
- onResize: function(e) {
+ onResize = (e) => {
if (this.props.onResize) {
this.props.onResize(e);
}
- },
+ };
- render: function() {
+ render() {
return (
);
- },
-});
+ }
+}
diff --git a/src/components/views/voip/VideoView.js b/src/components/views/voip/VideoView.js
index a51ab70da9..374a12e82d 100644
--- a/src/components/views/voip/VideoView.js
+++ b/src/components/views/voip/VideoView.js
@@ -18,7 +18,6 @@ limitations under the License.
import React, {createRef} from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
import classNames from 'classnames';
import * as sdk from '../../../index';
@@ -35,10 +34,8 @@ function getFullScreenElement() {
);
}
-export default createReactClass({
- displayName: 'VideoView',
-
- propTypes: {
+export default class VideoView extends React.Component {
+ static propTypes = {
// maxHeight style attribute for the video element
maxHeight: PropTypes.number,
@@ -48,27 +45,28 @@ export default createReactClass({
// a callback which is called when the video element is resized due to
// a change in video metadata
onResize: PropTypes.func,
- },
+ };
+
+ constructor(props) {
+ super(props);
- // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
- UNSAFE_componentWillMount: function() {
this._local = createRef();
this._remote = createRef();
- },
+ }
- componentDidMount: function() {
+ componentDidMount() {
this.dispatcherRef = dis.register(this.onAction);
- },
+ }
- componentWillUnmount: function() {
+ componentWillUnmount() {
dis.unregister(this.dispatcherRef);
- },
+ }
- getRemoteVideoElement: function() {
+ getRemoteVideoElement = () => {
return ReactDOM.findDOMNode(this._remote.current);
- },
+ };
- getRemoteAudioElement: function() {
+ getRemoteAudioElement = () => {
// this needs to be somewhere at the top of the DOM which
// always exists to avoid audio interruptions.
// Might as well just use DOM.
@@ -78,17 +76,17 @@ export default createReactClass({
+ "You need to add an to the DOM.");
}
return remoteAudioElement;
- },
+ };
- getLocalVideoElement: function() {
+ getLocalVideoElement = () => {
return ReactDOM.findDOMNode(this._local.current);
- },
+ };
- setContainer: function(c) {
+ setContainer = (c) => {
this.container = c;
- },
+ };
- onAction: function(payload) {
+ onAction = (payload) => {
switch (payload.action) {
case 'video_fullscreen': {
if (!this.container) {
@@ -117,9 +115,9 @@ export default createReactClass({
break;
}
}
- },
+ };
- render: function() {
+ render() {
const VideoFeed = sdk.getComponent('voip.VideoFeed');
// if we're fullscreen, we don't want to set a maxHeight on the video element.
@@ -140,5 +138,5 @@ export default createReactClass({
{_t(
@@ -372,9 +375,12 @@ export default class SecurityUserSettingsTab extends React.Component {
- {this._renderIgnoredUsers()}
- {this._renderManageInvites()}
- {_t("Advanced")}
+
+ {this._renderIgnoredUsers()}
+ {this._renderManageInvites()}
+
{ this.displayName }
;
+export default function({displayName = "StubComponent", render} = {}) {
+ if (!render) {
+ render = function() {
+ return { displayName }
;
};
}
- return createReactClass(opts);
+ return class extends React.Component {
+ static displayName = displayName;
+
+ render() {
+ return render();
+ }
+ };
}