+
-
),
range,
- }))
- .slice(0, 4);
+ })).slice(0, 4);
}
return completions;
}
diff --git a/src/autocomplete/Components.tsx b/src/autocomplete/Components.tsx
index 6ac2f4db14..4b0d35698d 100644
--- a/src/autocomplete/Components.tsx
+++ b/src/autocomplete/Components.tsx
@@ -34,9 +34,9 @@ export const TextualCompletion = forwardRef((props
const {title, subtitle, description, className, ...restProps} = props;
return (
;
- },
+ }
- _getJoinableNode: function() {
+ _getJoinableNode() {
const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
return this.state.editing ?
{ completions }
);
diff --git a/src/autocomplete/CommunityProvider.tsx b/src/autocomplete/CommunityProvider.tsx
index f34fee890e..ebf5d536ec 100644
--- a/src/autocomplete/CommunityProvider.tsx
+++ b/src/autocomplete/CommunityProvider.tsx
@@ -23,7 +23,7 @@ import {MatrixClientPeg} from '../MatrixClientPeg';
import QueryMatcher from './QueryMatcher';
import {PillCompletion} from './Components';
import * as sdk from '../index';
-import _sortBy from 'lodash/sortBy';
+import {sortBy} from "lodash";
import {makeGroupPermalink} from "../utils/permalinks/Permalinks";
import {ICompletion, ISelectionRange} from "./Autocompleter";
import FlairStore from "../stores/FlairStore";
@@ -81,7 +81,7 @@ export default class CommunityProvider extends AutocompleteProvider {
const matchedString = command[0];
completions = this.matcher.match(matchedString);
- completions = _sortBy(completions, [
+ completions = sortBy(completions, [
(c) => score(matchedString, c.groupId),
(c) => c.groupId.length,
]).map(({avatarUrl, groupId, name}) => ({
@@ -91,15 +91,15 @@ export default class CommunityProvider extends AutocompleteProvider {
href: makeGroupPermalink(groupId),
component: (
{ title }
{ subtitle }
@@ -53,9 +53,9 @@ export const PillCompletion = forwardRef((props, ref)
const {title, subtitle, description, className, children, ...restProps} = props;
return (
{ children }
{ title }
diff --git a/src/autocomplete/EmojiProvider.tsx b/src/autocomplete/EmojiProvider.tsx
index 147d68f5ff..705474f8d0 100644
--- a/src/autocomplete/EmojiProvider.tsx
+++ b/src/autocomplete/EmojiProvider.tsx
@@ -23,8 +23,7 @@ import AutocompleteProvider from './AutocompleteProvider';
import QueryMatcher from './QueryMatcher';
import {PillCompletion} from './Components';
import {ICompletion, ISelectionRange} from './Autocompleter';
-import _uniq from 'lodash/uniq';
-import _sortBy from 'lodash/sortBy';
+import {uniq, sortBy} from 'lodash';
import SettingsStore from "../settings/SettingsStore";
import { shortcodeToUnicode } from '../HtmlUtils';
import { EMOJI, IEmoji } from '../emoji';
@@ -115,7 +114,7 @@ export default class EmojiProvider extends AutocompleteProvider {
}
// Finally, sort by original ordering
sorters.push((c) => c._orderBy);
- completions = _sortBy(_uniq(completions), sorters);
+ completions = sortBy(uniq(completions), sorters);
completions = completions.map(({shortname}) => {
const unicode = shortcodeToUnicode(shortname);
@@ -139,7 +138,11 @@ export default class EmojiProvider extends AutocompleteProvider {
renderCompletions(completions: React.ReactNode[]): React.ReactNode {
return (
-
+ {
@@ -73,7 +72,7 @@ export default class QueryMatcher {
// type for their values. We assume that those values who's keys have
// been specified will be string. Also, we cannot infer all the
// types of the keys of the objects at compile.
- const keyValues = _at(object, this._options.keys);
+ const keyValues = at(object, this._options.keys);
if (this._options.funcs) {
for (const f of this._options.funcs) {
@@ -137,7 +136,7 @@ export default class QueryMatcher {
});
// Now map the keys to the result objects. Also remove any duplicates.
- return _uniq(matches.map((match) => match.object));
+ return uniq(matches.map((match) => match.object));
}
private processQuery(query: string): string {
diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx
index b18b2d132c..74deacf61f 100644
--- a/src/autocomplete/RoomProvider.tsx
+++ b/src/autocomplete/RoomProvider.tsx
@@ -27,7 +27,7 @@ import {PillCompletion} from './Components';
import * as sdk from '../index';
import {makeRoomPermalink} from "../utils/permalinks/Permalinks";
import {ICompletion, ISelectionRange} from "./Autocompleter";
-import { uniqBy, sortBy } from 'lodash';
+import {uniqBy, sortBy} from "lodash";
const ROOM_REGEX = /\B#\S*/g;
@@ -110,9 +110,7 @@ export default class RoomProvider extends AutocompleteProvider {
),
range,
};
- })
- .filter((completion) => !!completion.completion && completion.completion.length > 0)
- .slice(0, 4);
+ }).filter((completion) => !!completion.completion && completion.completion.length > 0).slice(0, 4);
}
return completions;
}
diff --git a/src/autocomplete/UserProvider.tsx b/src/autocomplete/UserProvider.tsx
index c957b5e597..32eea55b0b 100644
--- a/src/autocomplete/UserProvider.tsx
+++ b/src/autocomplete/UserProvider.tsx
@@ -23,7 +23,7 @@ import AutocompleteProvider from './AutocompleteProvider';
import {PillCompletion} from './Components';
import * as sdk from '../index';
import QueryMatcher from './QueryMatcher';
-import _sortBy from 'lodash/sortBy';
+import {sortBy} from 'lodash';
import {MatrixClientPeg} from '../MatrixClientPeg';
import MatrixEvent from "matrix-js-sdk/src/models/event";
@@ -71,8 +71,13 @@ export default class UserProvider extends AutocompleteProvider {
}
}
- private onRoomTimeline = (ev: MatrixEvent, room: Room, toStartOfTimeline: boolean, removed: boolean,
- data: IRoomTimelineData) => {
+ private onRoomTimeline = (
+ ev: MatrixEvent,
+ room: Room,
+ toStartOfTimeline: boolean,
+ removed: boolean,
+ data: IRoomTimelineData,
+ ) => {
if (!room) return;
if (removed) return;
if (room.roomId !== this.room.roomId) return;
@@ -151,7 +156,7 @@ export default class UserProvider extends AutocompleteProvider {
const currentUserId = MatrixClientPeg.get().credentials.userId;
this.users = this.room.getJoinedMembers().filter(({userId}) => userId !== currentUserId);
- this.users = _sortBy(this.users, (member) => 1E20 - lastSpoken[member.userId] || 1E20);
+ this.users = sortBy(this.users, (member) => 1E20 - lastSpoken[member.userId] || 1E20);
this.matcher.setObjects(this.users);
}
@@ -171,7 +176,11 @@ export default class UserProvider extends AutocompleteProvider {
renderCompletions(completions: React.ReactNode[]): React.ReactNode {
return (
-
;
- },
+ }
- _getMembershipSection: function() {
+ _getMembershipSection() {
const Spinner = sdk.getComponent("elements.Spinner");
const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
@@ -1100,9 +1087,9 @@ export default createReactClass({
{ completions }
);
diff --git a/src/autocomplete/QueryMatcher.ts b/src/autocomplete/QueryMatcher.ts
index 9c91414556..a07ed29c7e 100644
--- a/src/autocomplete/QueryMatcher.ts
+++ b/src/autocomplete/QueryMatcher.ts
@@ -16,8 +16,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import _at from 'lodash/at';
-import _uniq from 'lodash/uniq';
+import {at, uniq} from 'lodash';
import {removeHiddenChars} from "matrix-js-sdk/src/utils";
interface IOptions
+ {
switch (ev.key) {
case Key.TAB:
case Key.ESCAPE:
- // close on left and right arrows too for when it is a context menu on a
;
- },
+ }
- _getFeaturedUsersNode: function() {
+ _getFeaturedUsersNode() {
const summary = this.state.summary;
const noRoleUsers = [];
@@ -984,9 +971,9 @@ export default createReactClass({
{ noRoleNode }
{ roleUserNodes }
{ completions }
);
diff --git a/src/components/structures/CompatibilityPage.js b/src/components/structures/CompatibilityPage.js
deleted file mode 100644
index 1fa6068675..0000000000
--- a/src/components/structures/CompatibilityPage.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019, 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 from 'react';
-import createReactClass from 'create-react-class';
-import PropTypes from 'prop-types';
-import { _t } from '../../languageHandler';
-import SdkConfig from '../../SdkConfig';
-
-export default createReactClass({
- displayName: 'CompatibilityPage',
- propTypes: {
- onAccept: PropTypes.func,
- },
-
- getDefaultProps: function() {
- return {
- onAccept: function() {}, // NOP
- };
- },
-
- onAccept: function() {
- this.props.onAccept();
- },
-
- render: function() {
- const brand = SdkConfig.get().brand;
-
- return (
-
-
- );
- },
-});
diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx
index 587ae2cb6b..64e0160d83 100644
--- a/src/components/structures/ContextMenu.tsx
+++ b/src/components/structures/ContextMenu.tsx
@@ -233,8 +233,7 @@ export class ContextMenu extends React.PureComponent
-
- {_t( - "Sorry, your browser is not able to run %(brand)s.", - { - brand, - }, - { - 'b': (sub) => {sub}, - }) - }
-- { _t( - "%(brand)s uses many advanced browser features, some of which are not available " + - "or experimental in your current browser.", - { brand }, - ) } -
-
- { _t(
- 'Please install
- { _t( - "With your current browser, the look and feel of the application may be " + - "completely incorrect, and some or all features may not function. " + - "If you want to try it anyway you can continue, but you are on your own in terms " + - "of any issues you may encounter!", - ) } -
- -
@@ -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 2e2fa25169..83f70eb72a 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/LeftPanel.tsx b/src/components/structures/LeftPanel.tsx
index 899dfe222d..1c2295384c 100644
--- a/src/components/structures/LeftPanel.tsx
+++ b/src/components/structures/LeftPanel.tsx
@@ -377,7 +377,7 @@ export default class LeftPanel extends React.Component
-
);
diff --git a/src/components/structures/LoggedInView.tsx b/src/components/structures/LoggedInView.tsx
index d7f2c73a0b..e427eb92cb 100644
--- a/src/components/structures/LoggedInView.tsx
+++ b/src/components/structures/LoggedInView.tsx
@@ -43,11 +43,11 @@ import PlatformPeg from "../../PlatformPeg";
import { DefaultTagID } from "../../stores/room-list/models";
import {
showToast as showSetPasswordToast,
- hideToast as hideSetPasswordToast
+ hideToast as hideSetPasswordToast,
} from "../../toasts/SetPasswordToast";
import {
showToast as showServerLimitToast,
- hideToast as hideServerLimitToast
+ hideToast as hideServerLimitToast,
} from "../../toasts/ServerLimitToast";
import { Action } from "../../dispatcher/actions";
import LeftPanel from "./LeftPanel";
@@ -79,6 +79,7 @@ interface IProps {
initialEventPixelOffset: number;
leftDisabled: boolean;
rightDisabled: boolean;
+ // eslint-disable-next-line camelcase
page_type: string;
autoJoin: boolean;
thirdPartyInvite?: object;
@@ -98,7 +99,9 @@ interface IProps {
}
interface IUsageLimit {
+ // eslint-disable-next-line camelcase
limit_type: "monthly_active_user" | string;
+ // eslint-disable-next-line camelcase
admin_contact?: string;
}
@@ -316,10 +319,10 @@ class LoggedInView extends React.Component
-
);
}
- },
-});
+ }
+}
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/RoomSearch.tsx b/src/components/structures/RoomSearch.tsx
index f6b8d42c30..768bc38d23 100644
--- a/src/components/structures/RoomSearch.tsx
+++ b/src/components/structures/RoomSearch.tsx
@@ -20,7 +20,6 @@ import classNames from "classnames";
import defaultDispatcher from "../../dispatcher/dispatcher";
import { _t } from "../../languageHandler";
import { ActionPayload } from "../../dispatcher/payloads";
-import { throttle } from 'lodash';
import { Key } from "../../Keyboard";
import AccessibleButton from "../views/elements/AccessibleButton";
import { Action } from "../../dispatcher/actions";
@@ -137,7 +136,7 @@ export default class RoomSearch extends React.PureComponent
@@ -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 a79e5b0aa8..ed2e5645e9 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");
@@ -2064,7 +2062,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 30be71abcb..b83369d296 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -40,8 +40,16 @@ import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
import { SettingLevel } from "../../settings/SettingLevel";
import IconizedContextMenu, {
IconizedContextMenuOption,
- IconizedContextMenuOptionList
+ 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
+
+ {OwnProfileStore.instance.displayName}
+
+
+ {MatrixClientPeg.get().getUserId()}
+
+
+ );
+ let primaryOptionList = (
+
+
+ {prototypeCommunityName}
+
+
+ );
+ primaryOptionList = (
+ +
+
+
+
+ {OwnProfileStore.instance.displayName}
+
+
+ {MatrixClientPeg.get().getUserId()}
+
+
+
- {
{hostingLink}
-
-
- {OwnProfileStore.instance.displayName}
-
-
- {MatrixClientPeg.get().getUserId()}
-
-
+ {primaryHeader}
+ {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
diff --git a/src/components/views/dialogs/CreateGroupDialog.js b/src/components/views/dialogs/CreateGroupDialog.js
index 10285ccee0..6636153c98 100644
--- a/src/components/views/dialogs/CreateGroupDialog.js
+++ b/src/components/views/dialogs/CreateGroupDialog.js
@@ -15,46 +15,42 @@ 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 dis from '../../../dispatcher/dispatcher';
import { _t } from '../../../languageHandler';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
-export default createReactClass({
- displayName: 'CreateGroupDialog',
- propTypes: {
+export default class CreateGroupDialog extends React.Component {
+ static propTypes = {
onFinished: PropTypes.func.isRequired,
- },
+ };
- getInitialState: function() {
- return {
- groupName: '',
- groupId: '',
- groupError: null,
- creating: false,
- createError: null,
- };
- },
+ state = {
+ groupName: '',
+ groupId: '',
+ groupError: null,
+ creating: false,
+ createError: null,
+ };
- _onGroupNameChange: function(e) {
+ _onGroupNameChange = e => {
this.setState({
groupName: e.target.value,
});
- },
+ };
- _onGroupIdChange: function(e) {
+ _onGroupIdChange = e => {
this.setState({
groupId: e.target.value,
});
- },
+ };
- _onGroupIdBlur: function(e) {
+ _onGroupIdBlur = e => {
this._checkGroupId();
- },
+ };
- _checkGroupId: function(e) {
+ _checkGroupId(e) {
let error = null;
if (!this.state.groupId) {
error = _t("Community IDs cannot be empty.");
@@ -67,9 +63,9 @@ export default createReactClass({
createError: null,
});
return error;
- },
+ }
- _onFormSubmit: function(e) {
+ _onFormSubmit = e => {
e.preventDefault();
if (this._checkGroupId()) return;
@@ -94,13 +90,13 @@ export default createReactClass({
}).finally(() => {
this.setState({creating: false});
});
- },
+ };
- _onCancel: function() {
+ _onCancel = () => {
this.props.onFinished(false);
- },
+ };
- render: function() {
+ render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const Spinner = sdk.getComponent('elements.Spinner');
@@ -171,5 +167,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/views/dialogs/CreateRoomDialog.js b/src/components/views/dialogs/CreateRoomDialog.js
index 4890626527..21d48409e8 100644
--- a/src/components/views/dialogs/CreateRoomDialog.js
+++ b/src/components/views/dialogs/CreateRoomDialog.js
@@ -16,7 +16,6 @@ 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 SdkConfig from '../../../SdkConfig';
@@ -25,19 +24,19 @@ import { _t } from '../../../languageHandler';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import {Key} from "../../../Keyboard";
import {privateShouldBeEncrypted} from "../../../createRoom";
-import TagOrderStore from "../../../stores/TagOrderStore";
-import GroupStore from "../../../stores/GroupStore";
+import {CommunityPrototypeStore} from "../../../stores/CommunityPrototypeStore";
-export default createReactClass({
- displayName: 'CreateRoomDialog',
- propTypes: {
+export default class CreateRoomDialog extends React.Component {
+ static propTypes = {
onFinished: PropTypes.func.isRequired,
defaultPublic: PropTypes.bool,
- },
+ };
+
+ constructor(props) {
+ super(props);
- getInitialState() {
const config = SdkConfig.get();
- return {
+ this.state = {
isPublic: this.props.defaultPublic || false,
isEncrypted: privateShouldBeEncrypted(),
name: "",
@@ -47,7 +46,7 @@ export default createReactClass({
noFederate: config.default_federate === false,
nameIsValid: false,
};
- },
+ }
_roomCreateOptions() {
const opts = {};
@@ -72,32 +71,32 @@ export default createReactClass({
opts.encryption = this.state.isEncrypted;
}
- if (TagOrderStore.getSelectedPrototypeTag()) {
- opts.associatedWithCommunity = TagOrderStore.getSelectedPrototypeTag();
+ if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
+ opts.associatedWithCommunity = CommunityPrototypeStore.instance.getSelectedCommunityId();
}
return opts;
- },
+ }
componentDidMount() {
this._detailsRef.addEventListener("toggle", this.onDetailsToggled);
// move focus to first field when showing dialog
this._nameFieldRef.focus();
- },
+ }
componentWillUnmount() {
this._detailsRef.removeEventListener("toggle", this.onDetailsToggled);
- },
+ }
- _onKeyDown: function(event) {
+ _onKeyDown = event => {
if (event.key === Key.ENTER) {
this.onOk();
event.preventDefault();
event.stopPropagation();
}
- },
+ };
- onOk: async function() {
+ onOk = async () => {
const activeElement = document.activeElement;
if (activeElement) {
activeElement.blur();
@@ -123,51 +122,51 @@ export default createReactClass({
field.validate({ allowEmpty: false, focused: true });
}
}
- },
+ };
- onCancel: function() {
+ onCancel = () => {
this.props.onFinished(false);
- },
+ };
- onNameChange(ev) {
+ onNameChange = ev => {
this.setState({name: ev.target.value});
- },
+ };
- onTopicChange(ev) {
+ onTopicChange = ev => {
this.setState({topic: ev.target.value});
- },
+ };
- onPublicChange(isPublic) {
+ onPublicChange = isPublic => {
this.setState({isPublic});
- },
+ };
- onEncryptedChange(isEncrypted) {
+ onEncryptedChange = isEncrypted => {
this.setState({isEncrypted});
- },
+ };
- onAliasChange(alias) {
+ onAliasChange = alias => {
this.setState({alias});
- },
+ };
- onDetailsToggled(ev) {
+ onDetailsToggled = ev => {
this.setState({detailsOpen: ev.target.open});
- },
+ };
- onNoFederateChange(noFederate) {
+ onNoFederateChange = noFederate => {
this.setState({noFederate});
- },
+ };
- collectDetailsRef(ref) {
+ collectDetailsRef = ref => {
this._detailsRef = ref;
- },
+ };
- async onNameValidate(fieldState) {
- const result = await this._validateRoomName(fieldState);
+ onNameValidate = async fieldState => {
+ const result = await CreateRoomDialog._validateRoomName(fieldState);
this.setState({nameIsValid: result.valid});
return result;
- },
+ };
- _validateRoomName: withValidation({
+ static _validateRoomName = withValidation({
rules: [
{
key: "required",
@@ -175,9 +174,9 @@ export default createReactClass({
invalid: () => _t("Please enter a name for the room"),
},
],
- }),
+ });
- render: function() {
+ render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
const Field = sdk.getComponent('views.elements.Field');
@@ -198,7 +197,7 @@ export default createReactClass({
"Private rooms can be found and joined by invitation only. Public rooms can be " +
"found and joined by anyone.",
)};
- if (TagOrderStore.getSelectedPrototypeTag()) {
+ if (CommunityPrototypeStore.instance.getSelectedCommunityId()) {
publicPrivateLabel =
);
- },
-});
+ }
+}
diff --git a/src/components/views/dialogs/SetMxIdDialog.js b/src/components/views/dialogs/SetMxIdDialog.js
index f99d065e7e..090def5e54 100644
--- a/src/components/views/dialogs/SetMxIdDialog.js
+++ b/src/components/views/dialogs/SetMxIdDialog.js
@@ -16,7 +16,6 @@ limitations under the License.
*/
import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import * as sdk from '../../../index';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
@@ -29,23 +28,27 @@ import { SAFE_LOCALPART_REGEX } from '../../../Registration';
// sending a request to the server
const USERNAME_CHECK_DEBOUNCE_MS = 250;
-/**
+/*
* Prompt the user to set a display name.
*
* On success, `onFinished(true, newDisplayName)` is called.
*/
-export default createReactClass({
- displayName: 'SetMxIdDialog',
- propTypes: {
+export default class SetMxIdDialog extends React.Component {
+ static propTypes = {
onFinished: PropTypes.func.isRequired,
// Called when the user requests to register with a different homeserver
onDifferentServerClicked: PropTypes.func.isRequired,
// Called if the user wants to switch to login instead
onLoginClick: PropTypes.func.isRequired,
- },
+ };
- getInitialState: function() {
- return {
+ constructor(props) {
+ super(props);
+
+ this._input_value = createRef();
+ this._uiAuth = createRef();
+
+ this.state = {
// The entered username
username: '',
// Indicate ongoing work on the username
@@ -60,21 +63,15 @@ export default createReactClass({
// Indicate error with auth
authError: '',
};
- },
+ }
- // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
- UNSAFE_componentWillMount: function() {
- this._input_value = createRef();
- this._uiAuth = createRef();
- },
-
- componentDidMount: function() {
+ componentDidMount() {
this._input_value.current.select();
this._matrixClient = MatrixClientPeg.get();
- },
+ }
- onValueChange: function(ev) {
+ onValueChange = ev => {
this.setState({
username: ev.target.value,
usernameBusy: true,
@@ -99,24 +96,24 @@ export default createReactClass({
});
}, USERNAME_CHECK_DEBOUNCE_MS);
});
- },
+ };
- onKeyUp: function(ev) {
+ onKeyUp = ev => {
if (ev.key === Key.ENTER) {
this.onSubmit();
}
- },
+ };
- onSubmit: function(ev) {
+ onSubmit = ev => {
if (this._uiAuth.current) {
this._uiAuth.current.tryContinue();
}
this.setState({
doingUIAuth: true,
});
- },
+ };
- _doUsernameCheck: function() {
+ _doUsernameCheck() {
// We do a quick check ahead of the username availability API to ensure the
// user ID roughly looks okay from a Matrix perspective.
if (!SAFE_LOCALPART_REGEX.test(this.state.username)) {
@@ -167,13 +164,13 @@ export default createReactClass({
this.setState(newState);
},
);
- },
+ }
- _generatePassword: function() {
+ _generatePassword() {
return Math.random().toString(36).slice(2);
- },
+ }
- _makeRegisterRequest: function(auth) {
+ _makeRegisterRequest = auth => {
// Not upgrading - changing mxids
const guestAccessToken = null;
if (!this._generatedPassword) {
@@ -187,9 +184,9 @@ export default createReactClass({
{},
guestAccessToken,
);
- },
+ };
- _onUIAuthFinished: function(success, response) {
+ _onUIAuthFinished = (success, response) => {
this.setState({
doingUIAuth: false,
});
@@ -207,9 +204,9 @@ export default createReactClass({
accessToken: response.access_token,
password: this._generatedPassword,
});
- },
+ };
- render: function() {
+ render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
@@ -303,5 +300,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/views/dialogs/SetPasswordDialog.js b/src/components/views/dialogs/SetPasswordDialog.js
index fcc6e67656..3649190ac9 100644
--- a/src/components/views/dialogs/SetPasswordDialog.js
+++ b/src/components/views/dialogs/SetPasswordDialog.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 * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
@@ -63,32 +62,25 @@ const WarmFuzzy = function(props) {
*
* On success, `onFinished()` when finished
*/
-export default createReactClass({
- displayName: 'SetPasswordDialog',
- propTypes: {
+export default class SetPasswordDialog extends React.Component {
+ static propTypes = {
onFinished: PropTypes.func.isRequired,
- },
+ };
- getInitialState: function() {
- return {
- error: null,
- };
- },
+ state = {
+ error: null,
+ };
- componentDidMount: function() {
- console.info('SetPasswordDialog component did mount');
- },
-
- _onPasswordChanged: function(res) {
+ _onPasswordChanged = res => {
Modal.createDialog(WarmFuzzy, {
didSetEmail: res.didSetEmail,
onFinished: () => {
this.props.onFinished();
},
});
- },
+ };
- _onPasswordChangeError: function(err) {
+ _onPasswordChangeError = err => {
let errMsg = err.error || "";
if (err.httpStatus === 403) {
errMsg = _t('Failed to change password. Is your password correct?');
@@ -101,9 +93,9 @@ export default createReactClass({
this.setState({
error: errMsg,
});
- },
+ };
- render: function() {
+ render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const ChangePassword = sdk.getComponent('views.settings.ChangePassword');
@@ -132,5 +124,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/views/dialogs/ShareDialog.tsx b/src/components/views/dialogs/ShareDialog.tsx
index 22f83d391c..e849f7efe3 100644
--- a/src/components/views/dialogs/ShareDialog.tsx
+++ b/src/components/views/dialogs/ShareDialog.tsx
@@ -186,8 +186,8 @@ export default class ShareDialog extends React.PureComponent{_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 ?
-
{ matrixToUrl }
diff --git a/src/components/views/dialogs/TextInputDialog.js b/src/components/views/dialogs/TextInputDialog.js
index d7ca3f144d..571ed7e413 100644
--- a/src/components/views/dialogs/TextInputDialog.js
+++ b/src/components/views/dialogs/TextInputDialog.js
@@ -15,14 +15,12 @@ limitations under the License.
*/
import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';
import * as sdk from '../../../index';
import Field from "../elements/Field";
-export default createReactClass({
- displayName: 'TextInputDialog',
- propTypes: {
+export default class TextInputDialog extends React.Component {
+ static propTypes = {
title: PropTypes.string,
description: PropTypes.oneOfType([
PropTypes.element,
@@ -36,39 +34,36 @@ export default createReactClass({
hasCancel: PropTypes.bool,
validator: PropTypes.func, // result of withValidation
fixedWidth: PropTypes.bool,
- },
+ };
- getDefaultProps: function() {
- return {
- title: "",
- value: "",
- description: "",
- focus: true,
- hasCancel: true,
- };
- },
+ static defaultProps = {
+ title: "",
+ value: "",
+ description: "",
+ focus: true,
+ hasCancel: true,
+ };
- getInitialState: function() {
- return {
+ constructor(props) {
+ super(props);
+
+ this._field = createRef();
+
+ this.state = {
value: this.props.value,
valid: false,
};
- },
+ }
- // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
- UNSAFE_componentWillMount: function() {
- this._field = createRef();
- },
-
- componentDidMount: function() {
+ componentDidMount() {
if (this.props.focus) {
// Set the cursor at the end of the text input
// this._field.current.value = this.props.value;
this._field.current.focus();
}
- },
+ }
- onOk: async function(ev) {
+ onOk = async ev => {
ev.preventDefault();
if (this.props.validator) {
await this._field.current.validate({ allowEmpty: false });
@@ -80,27 +75,27 @@ export default createReactClass({
}
}
this.props.onFinished(true, this.state.value);
- },
+ };
- onCancel: function() {
+ onCancel = () => {
this.props.onFinished(false);
- },
+ };
- onChange: function(ev) {
+ onChange = ev => {
this.setState({
value: ev.target.value,
});
- },
+ };
- onValidate: async function(fieldState) {
+ onValidate = async fieldState => {
const result = await this.props.validator(fieldState);
this.setState({
valid: result.valid,
});
return result;
- },
+ };
- render: function() {
+ render() {
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
return (
@@ -137,5 +132,5 @@ export default createReactClass({
/>
);
- },
-});
+ }
+}
diff --git a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
index dd34dfbbf0..2362133460 100644
--- a/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
+++ b/src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js
@@ -21,7 +21,7 @@ import * as sdk from '../../../../index';
import {MatrixClientPeg} from '../../../../MatrixClientPeg';
import { MatrixClient } from 'matrix-js-sdk';
import { _t } from '../../../../languageHandler';
-import { accessSecretStorage } from '../../../../CrossSigningManager';
+import { accessSecretStorage } from '../../../../SecurityManager';
const RESTORE_TYPE_PASSPHRASE = 0;
const RESTORE_TYPE_RECOVERYKEY = 1;
diff --git a/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js b/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js
index 5c01a6907f..85ace249a3 100644
--- a/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js
+++ b/src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js
@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import { debounce } from 'lodash';
+import {debounce} from "lodash";
import classNames from 'classnames';
import React from 'react';
import PropTypes from "prop-types";
diff --git a/src/components/views/elements/ActionButton.js b/src/components/views/elements/ActionButton.js
index 7536d66653..bec016bce0 100644
--- a/src/components/views/elements/ActionButton.js
+++ b/src/components/views/elements/ActionButton.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 AccessibleButton from './AccessibleButton';
import dis from '../../../dispatcher/dispatcher';
import * as sdk from '../../../index';
import Analytics from '../../../Analytics';
-export default createReactClass({
- displayName: 'RoleButton',
-
- propTypes: {
+export default class ActionButton extends React.Component {
+ static propTypes = {
size: PropTypes.string,
tooltip: PropTypes.bool,
action: PropTypes.string.isRequired,
@@ -33,39 +30,35 @@ export default createReactClass({
label: PropTypes.string.isRequired,
iconPath: PropTypes.string,
className: PropTypes.string,
- },
+ };
- getDefaultProps: function() {
- return {
- size: "25",
- tooltip: false,
- };
- },
+ static defaultProps = {
+ size: "25",
+ tooltip: false,
+ };
- getInitialState: function() {
- return {
- showTooltip: false,
- };
- },
+ state = {
+ showTooltip: false,
+ };
- _onClick: function(ev) {
+ _onClick = (ev) => {
ev.stopPropagation();
Analytics.trackEvent('Action Button', 'click', this.props.action);
dis.dispatch({action: this.props.action});
- },
+ };
- _onMouseEnter: function() {
+ _onMouseEnter = () => {
if (this.props.tooltip) this.setState({showTooltip: true});
if (this.props.mouseOverAction) {
dis.dispatch({action: this.props.mouseOverAction});
}
- },
+ };
- _onMouseLeave: function() {
+ _onMouseLeave = () => {
this.setState({showTooltip: false});
- },
+ };
- render: function() {
+ render() {
const TintableSvg = sdk.getComponent("elements.TintableSvg");
let tooltip;
@@ -94,5 +87,5 @@ export default createReactClass({
{ tooltip }
);
- },
-});
+ }
+}
diff --git a/src/components/views/elements/AddressSelector.js b/src/components/views/elements/AddressSelector.js
index ab29723a45..45cdbeced8 100644
--- a/src/components/views/elements/AddressSelector.js
+++ b/src/components/views/elements/AddressSelector.js
@@ -17,15 +17,12 @@ 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 classNames from 'classnames';
import { UserAddressType } from '../../../UserAddress';
-export default createReactClass({
- displayName: 'AddressSelector',
-
- propTypes: {
+export default class AddressSelector extends React.Component {
+ static propTypes = {
onSelected: PropTypes.func.isRequired,
// List of the addresses to display
@@ -37,90 +34,91 @@ export default createReactClass({
// Element to put as a header on top of the list
header: PropTypes.node,
- },
+ };
- getInitialState: function() {
- return {
+ constructor(props) {
+ super(props);
+
+ this.state = {
selected: this.props.selected === undefined ? 0 : this.props.selected,
hover: false,
};
- },
+ }
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
- UNSAFE_componentWillReceiveProps: function(props) {
+ UNSAFE_componentWillReceiveProps(props) {
// Make sure the selected item isn't outside the list bounds
const selected = this.state.selected;
const maxSelected = this._maxSelected(props.addressList);
if (selected > maxSelected) {
this.setState({ selected: maxSelected });
}
- },
+ }
- componentDidUpdate: function() {
+ componentDidUpdate() {
// As the user scrolls with the arrow keys keep the selected item
// at the top of the window.
if (this.scrollElement && this.props.addressList.length > 0 && !this.state.hover) {
const elementHeight = this.addressListElement.getBoundingClientRect().height;
this.scrollElement.scrollTop = (this.state.selected * elementHeight) - elementHeight;
}
- },
+ }
- moveSelectionTop: function() {
+ moveSelectionTop = () => {
if (this.state.selected > 0) {
this.setState({
selected: 0,
hover: false,
});
}
- },
+ };
- moveSelectionUp: function() {
+ moveSelectionUp = () => {
if (this.state.selected > 0) {
this.setState({
selected: this.state.selected - 1,
hover: false,
});
}
- },
+ };
- moveSelectionDown: function() {
+ moveSelectionDown = () => {
if (this.state.selected < this._maxSelected(this.props.addressList)) {
this.setState({
selected: this.state.selected + 1,
hover: false,
});
}
- },
+ };
- chooseSelection: function() {
+ chooseSelection = () => {
this.selectAddress(this.state.selected);
- },
+ };
- onClick: function(index) {
+ onClick = index => {
this.selectAddress(index);
- },
+ };
- onMouseEnter: function(index) {
+ onMouseEnter = index => {
this.setState({
selected: index,
hover: true,
});
- },
+ };
- onMouseLeave: function() {
+ onMouseLeave = () => {
this.setState({ hover: false });
- },
+ };
- selectAddress: function(index) {
+ selectAddress = index => {
// Only try to select an address if one exists
if (this.props.addressList.length !== 0) {
this.props.onSelected(index);
this.setState({ hover: false });
}
- },
+ };
- createAddressListTiles: function() {
- const self = this;
+ createAddressListTiles() {
const AddressTile = sdk.getComponent("elements.AddressTile");
const maxSelected = this._maxSelected(this.props.addressList);
const addressList = [];
@@ -157,15 +155,15 @@ export default createReactClass({
}
}
return addressList;
- },
+ }
- _maxSelected: function(list) {
+ _maxSelected(list) {
const listSize = list.length === 0 ? 0 : list.length - 1;
const maxSelected = listSize > (this.props.truncateAt - 1) ? (this.props.truncateAt - 1) : listSize;
return maxSelected;
- },
+ }
- render: function() {
+ render() {
const classes = classNames({
"mx_AddressSelector": true,
"mx_AddressSelector_empty": this.props.addressList.length === 0,
@@ -177,5 +175,5 @@ export default createReactClass({
{ this.createAddressListTiles() }
);
- },
-});
+ }
+}
diff --git a/src/components/views/elements/AddressTile.js b/src/components/views/elements/AddressTile.js
index e5ea2e5d20..dc6c6b2914 100644
--- a/src/components/views/elements/AddressTile.js
+++ b/src/components/views/elements/AddressTile.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 classNames from 'classnames';
import * as sdk from "../../../index";
import {MatrixClientPeg} from "../../../MatrixClientPeg";
@@ -25,25 +24,21 @@ import { _t } from '../../../languageHandler';
import { UserAddressType } from '../../../UserAddress.js';
-export default createReactClass({
- displayName: 'AddressTile',
-
- propTypes: {
+export default class AddressTile extends React.Component {
+ static propTypes = {
address: UserAddressType.isRequired,
canDismiss: PropTypes.bool,
onDismissed: PropTypes.func,
justified: PropTypes.bool,
- },
+ };
- getDefaultProps: function() {
- return {
- canDismiss: false,
- onDismissed: function() {}, // NOP
- justified: false,
- };
- },
+ static defaultProps = {
+ canDismiss: false,
+ onDismissed: function() {}, // NOP
+ justified: false,
+ };
- render: function() {
+ render() {
const address = this.props.address;
const name = address.displayName || address.address;
@@ -144,5 +139,5 @@ export default createReactClass({
{ dismiss }
{ label || initialValue }
@@ -234,5 +229,5 @@ export default createReactClass({
}
return editableEl;
- },
-});
+ }
+}
diff --git a/src/components/views/elements/EventTilePreview.tsx b/src/components/views/elements/EventTilePreview.tsx
index 7d8b774955..61e5f5381d 100644
--- a/src/components/views/elements/EventTilePreview.tsx
+++ b/src/components/views/elements/EventTilePreview.tsx
@@ -39,11 +39,13 @@ interface IProps {
className: string;
}
+/* eslint-disable camelcase */
interface IState {
userId: string;
displayname: string;
avatar_url: string;
}
+/* eslint-enable camelcase */
const AVATAR_SIZE = 32;
@@ -63,19 +65,18 @@ export default class EventTilePreview extends React.Component {
const client = MatrixClientPeg.get();
const userId = client.getUserId();
const profileInfo = await client.getProfileInfo(userId);
- const avatar_url = Avatar.avatarUrlForUser(
+ const avatarUrl = Avatar.avatarUrlForUser(
{avatarUrl: profileInfo.avatar_url},
AVATAR_SIZE, AVATAR_SIZE, "crop");
this.setState({
userId,
displayname: profileInfo.displayname,
- avatar_url,
+ avatar_url: avatarUrl,
});
-
}
- private fakeEvent({userId, displayname, avatar_url}: IState) {
+ private fakeEvent({userId, displayname, avatar_url: avatarUrl}: IState) {
// Fake it till we make it
const event = new MatrixEvent(JSON.parse(`{
"type": "m.room.message",
@@ -85,12 +86,12 @@ export default class EventTilePreview extends React.Component {
"msgtype": "m.text",
"body": "${this.props.message}",
"displayname": "${displayname}",
- "avatar_url": "${avatar_url}"
+ "avatar_url": "${avatarUrl}"
},
"msgtype": "m.text",
"body": "${this.props.message}",
"displayname": "${displayname}",
- "avatar_url": "${avatar_url}"
+ "avatar_url": "${avatarUrl}"
},
"unsigned": {
"age": 97
@@ -104,7 +105,7 @@ export default class EventTilePreview extends React.Component {
name: displayname,
userId: userId,
getAvatarUrl: (..._) => {
- return avatar_url;
+ return avatarUrl;
},
};
@@ -114,13 +115,10 @@ export default class EventTilePreview extends React.Component {
public render() {
const event = this.fakeEvent(this.state);
- let className = classnames(
- this.props.className,
- {
- "mx_IRCLayout": this.props.useIRCLayout,
- "mx_GroupLayout": !this.props.useIRCLayout,
- }
- );
+ const className = classnames(this.props.className, {
+ "mx_IRCLayout": this.props.useIRCLayout,
+ "mx_GroupLayout": !this.props.useIRCLayout,
+ });
return
{
}
}
-
-
public render() {
- const {
- element, prefixComponent, postfixComponent, className, onValidate, children,
+ /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
+ const { element, prefixComponent, postfixComponent, className, onValidate, children,
tooltipContent, forceValidity, tooltipClassName, list, ...inputProps} = this.props;
// Set some defaults for the element
diff --git a/src/components/views/elements/IRCTimelineProfileResizer.tsx b/src/components/views/elements/IRCTimelineProfileResizer.tsx
index 1098d0293e..ecd63816de 100644
--- a/src/components/views/elements/IRCTimelineProfileResizer.tsx
+++ b/src/components/views/elements/IRCTimelineProfileResizer.tsx
@@ -78,7 +78,12 @@ export default class IRCTimelineProfileResizer extends React.Component
);
- },
-});
+ }
+}
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/QRCode.tsx b/src/components/views/elements/QRCode.tsx
index f70ab48fa3..9ce3dc7202 100644
--- a/src/components/views/elements/QRCode.tsx
+++ b/src/components/views/elements/QRCode.tsx
@@ -41,7 +41,7 @@ const QRCode: React.FC
{ dataUri ? 
: ', {}, {
'a': (sub) => { sub },
- 'pill': {
// non linear slider.
private offset(values: number[], value: number): number {
// the index of the first number greater than value.
- let closest = values.reduce((prev, curr) => {
+ const closest = values.reduce((prev, curr) => {
return (value > curr ? prev + 1 : prev);
}, 0);
@@ -68,17 +68,16 @@ export default class Slider extends React.Component {
const linearInterpolation = (value - closestLessValue) / (closestGreaterValue - closestLessValue);
return 100 * (closest - 1 + linearInterpolation) * intervalWidth;
-
}
render(): React.ReactNode {
- const dots = this.props.values.map(v =>
- {} : () => this.props.onSelectionChange(v)}
- key={v}
- disabled={this.props.disabled}
- />);
+ const dots = this.props.values.map(v => {} : () => this.props.onSelectionChange(v)}
+ key={v}
+ disabled={this.props.disabled}
+ />);
let selection = null;
@@ -93,7 +92,7 @@ export default class Slider extends React.Component {
return
);
- },
-});
+ }
+}
diff --git a/src/components/views/groups/GroupRoomTile.js b/src/components/views/groups/GroupRoomTile.js
index fd6969a49a..85aa56d055 100644
--- a/src/components/views/groups/GroupRoomTile.js
+++ b/src/components/views/groups/GroupRoomTile.js
@@ -16,29 +16,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 { GroupRoomType } from '../../../groups';
import MatrixClientContext from "../../../contexts/MatrixClientContext";
-const GroupRoomTile = createReactClass({
- displayName: 'GroupRoomTile',
-
- propTypes: {
+class GroupRoomTile extends React.Component {
+ static propTypes = {
groupId: PropTypes.string.isRequired,
groupRoom: GroupRoomType.isRequired,
- },
+ };
- onClick: function(e) {
+ static contextType = MatrixClientContext
+
+ onClick = e => {
dis.dispatch({
action: 'view_group_room',
groupId: this.props.groupId,
groupRoomId: this.props.groupRoom.roomId,
});
- },
+ };
- render: function() {
+ render() {
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const avatarUrl = this.context.mxcUrlToHttp(
@@ -63,10 +62,7 @@ const GroupRoomTile = createReactClass({
-
{} : this.onClick.bind(this)}/> +
{} : this.onClick.bind(this)} /> { selection }
{} : this.onClick.bind(this)}/> +
{} : this.onClick.bind(this)} /> { selection }
diff --git a/src/components/views/elements/StyledCheckbox.tsx b/src/components/views/elements/StyledCheckbox.tsx
index be983828ff..f8d2665d07 100644
--- a/src/components/views/elements/StyledCheckbox.tsx
+++ b/src/components/views/elements/StyledCheckbox.tsx
@@ -17,8 +17,6 @@ limitations under the License.
import React from "react";
import { randomString } from "matrix-js-sdk/src/randomstring";
-const CHECK_BOX_SVG = require("../../../../res/img/feather-customised/check.svg");
-
interface IProps extends React.InputHTMLAttributes {
}
@@ -39,13 +37,14 @@ export default class StyledCheckbox extends React.PureComponent
}
public render() {
+ /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
const { children, className, ...otherProps } = this.props;
return
);
- },
-});
+ }
+}
diff --git a/src/components/views/elements/UserSelector.js b/src/components/views/elements/UserSelector.js
deleted file mode 100644
index ffb577e090..0000000000
--- a/src/components/views/elements/UserSelector.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-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, {createRef} from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import { _t } from '../../../languageHandler';
-
-export default createReactClass({
- displayName: 'UserSelector',
-
- propTypes: {
- onChange: PropTypes.func,
- selected_users: PropTypes.arrayOf(PropTypes.string),
- },
-
- getDefaultProps: function() {
- return {
- onChange: function() {},
- selected: [],
- };
- },
-
- // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
- UNSAFE_componentWillMount: function() {
- this._user_id_input = createRef();
- },
-
- addUser: function(user_id) {
- if (this.props.selected_users.indexOf(user_id == -1)) {
- this.props.onChange(this.props.selected_users.concat([user_id]));
- }
- },
-
- removeUser: function(user_id) {
- this.props.onChange(this.props.selected_users.filter(function(e) {
- return e != user_id;
- }));
- },
-
- onAddUserId: function() {
- this.addUser(this._user_id_input.current.value);
- this._user_id_input.current.value = "";
- },
-
- render: function() {
- const self = this;
- return (
-
-
- );
- },
-});
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 -
- { this.props.selected_users.map(function(user_id, i) {
- return
- { user_id } - X ; - }) } -
{ _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/messages/UnknownBody.js b/src/components/views/messages/UnknownBody.js
index 6c00921b45..786facc340 100644
--- a/src/components/views/messages/UnknownBody.js
+++ b/src/components/views/messages/UnknownBody.js
@@ -15,13 +15,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from "react";
+import React, {forwardRef} from "react";
-export default ({mxEvent}) => {
+export default forwardRef(({mxEvent}, ref) => {
const text = mxEvent.getContent().body;
return (
-
+
{ text }
);
-};
+});
diff --git a/src/components/views/right_panel/EncryptionInfo.tsx b/src/components/views/right_panel/EncryptionInfo.tsx
index f62af65543..10d35200bd 100644
--- a/src/components/views/right_panel/EncryptionInfo.tsx
+++ b/src/components/views/right_panel/EncryptionInfo.tsx
@@ -76,14 +76,16 @@ const EncryptionInfo: React.FC{_t("Messages in this room are end-to-end encrypted.")}
-{_t("Your messages are secured and only you and the recipient have the unique keys to unlock them.")}
+{_t("Your messages are secured and only you and the recipient have " + + "the unique keys to unlock them.")}
{_t("Messages in this room are not end-to-end encrypted.")}
-{_t("In encrypted rooms, your messages are secured and only you and the recipient have the unique keys to unlock them.")}
+{_t("In encrypted rooms, your messages are secured and only you and the recipient have " + + "the unique keys to unlock them.")}
-
- {_t("Start")}
-
-
;
+ sasBlockDialog = {_t("Compare unique emoji")}
- {_t("Compare a unique set of emoji if you don't have a camera on either device")} -
+
+ {_t("Start")}
+
+
;
}
const or = qrBlockDialog && sasBlockDialog ?
{_t("Compare unique emoji")}
+ + {_t("Compare a unique set of emoji if you don't have a camera on either device")} + +{_t("or")}
: null;
@@ -165,8 +164,8 @@ export default class VerificationPanel extends React.PureComponent{noCommonMethodError}
:
+ null;
// TODO: add way to open camera to scan a QR code
return { _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 92c5982276..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: {
}}
/>
-
- );
- },
-});
diff --git a/src/components/views/rooms/RoomPreviewBar.js b/src/components/views/rooms/RoomPreviewBar.js
index dc3893785d..f42e18372a 100644
--- a/src/components/views/rooms/RoomPreviewBar.js
+++ b/src/components/views/rooms/RoomPreviewBar.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 {MatrixClientPeg} from '../../../MatrixClientPeg';
import dis from '../../../dispatcher/dispatcher';
@@ -46,10 +45,8 @@ const MessageCase = Object.freeze({
OtherError: "OtherError",
});
-export default createReactClass({
- displayName: 'RoomPreviewBar',
-
- propTypes: {
+export default class RoomPreviewBar extends React.Component {
+ static propTypes = {
onJoinClick: PropTypes.func,
onRejectClick: PropTypes.func,
onRejectAndIgnoreClick: PropTypes.func,
@@ -86,36 +83,32 @@ export default createReactClass({
// If given, this will be how the room is referred to (eg.
// in error messages).
roomAlias: PropTypes.string,
- },
+ };
- getDefaultProps: function() {
- return {
- onJoinClick: function() {},
- };
- },
+ static defaultProps = {
+ onJoinClick() {},
+ };
- getInitialState: function() {
- return {
- busy: false,
- };
- },
+ state = {
+ busy: false,
+ };
- componentDidMount: function() {
+ componentDidMount() {
this._checkInvitedEmail();
CommunityPrototypeStore.instance.on(UPDATE_EVENT, this._onCommunityUpdate);
- },
+ }
- componentDidUpdate: function(prevProps, prevState) {
+ componentDidUpdate(prevProps, prevState) {
if (this.props.invitedEmail !== prevProps.invitedEmail || this.props.inviterName !== prevProps.inviterName) {
this._checkInvitedEmail();
}
- },
+ }
- componentWillUnmount: function() {
+ componentWillUnmount() {
CommunityPrototypeStore.instance.off(UPDATE_EVENT, this._onCommunityUpdate);
- },
+ }
- _checkInvitedEmail: async function() {
+ async _checkInvitedEmail() {
// If this is an invite and we've been told what email address was
// invited, fetch the user's account emails and discovery bindings so we
// can check them against the email that was invited.
@@ -148,14 +141,14 @@ export default createReactClass({
}
this.setState({busy: false});
}
- },
+ }
- _onCommunityUpdate: function (roomId) {
+ _onCommunityUpdate = (roomId) => {
if (this.props.room && this.props.room.roomId !== roomId) {
return;
}
this.forceUpdate(); // we have nothing to update
- },
+ };
_getMessageCase() {
const isGuest = MatrixClientPeg.get().isGuest();
@@ -207,7 +200,7 @@ export default createReactClass({
} else {
return MessageCase.ViewingRoom;
}
- },
+ }
_getKickOrBanInfo() {
const myMember = this._getMyMember();
@@ -221,9 +214,9 @@ export default createReactClass({
kickerMember.name : myMember.events.member.getSender();
const reason = myMember.events.member.getContent().reason;
return {memberName, reason};
- },
+ }
- _joinRule: function() {
+ _joinRule() {
const room = this.props.room;
if (room) {
const joinRules = room.currentState.getStateEvents('m.room.join_rules', '');
@@ -231,14 +224,14 @@ export default createReactClass({
return joinRules.getContent().join_rule;
}
}
- },
+ }
- _communityProfile: function() {
+ _communityProfile() {
if (this.props.room) return CommunityPrototypeStore.instance.getInviteProfile(this.props.room.roomId);
return {displayName: null, avatarMxc: null};
- },
+ }
- _roomName: function(atStart = false) {
+ _roomName(atStart = false) {
let name = this.props.room ? this.props.room.name : this.props.roomAlias;
const profile = this._communityProfile();
if (profile.displayName) name = profile.displayName;
@@ -249,16 +242,16 @@ export default createReactClass({
} else {
return _t("this room");
}
- },
+ }
_getMyMember() {
return (
this.props.room &&
this.props.room.getMember(MatrixClientPeg.get().getUserId())
);
- },
+ }
- _getInviteMember: function() {
+ _getInviteMember() {
const {room} = this.props;
if (!room) {
return;
@@ -270,7 +263,7 @@ export default createReactClass({
}
const inviterUserId = inviteEvent.events.member.getSender();
return room.currentState.getMember(inviterUserId);
- },
+ }
_isDMInvite() {
const myMember = this._getMyMember();
@@ -280,7 +273,7 @@ export default createReactClass({
const memberEvent = myMember.events.member;
const memberContent = memberEvent.getContent();
return memberContent.membership === "invite" && memberContent.is_direct;
- },
+ }
_makeScreenAfterLogin() {
return {
@@ -293,17 +286,17 @@ export default createReactClass({
inviter_name: this.props.oobData ? this.props.oobData.inviterName : null,
}
};
- },
+ }
- onLoginClick: function() {
+ onLoginClick = () => {
dis.dispatch({ action: 'start_login', screenAfterLogin: this._makeScreenAfterLogin() });
- },
+ };
- onRegisterClick: function() {
+ onRegisterClick = () => {
dis.dispatch({ action: 'start_registration', screenAfterLogin: this._makeScreenAfterLogin() });
- },
+ };
- render: function() {
+ render() {
const brand = SdkConfig.get().brand;
const Spinner = sdk.getComponent('elements.Spinner');
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
@@ -597,5 +590,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx
index 1e7ba3f77a..4056f2fbd4 100644
--- a/src/components/views/rooms/RoomSublist.tsx
+++ b/src/components/views/rooms/RoomSublist.tsx
@@ -517,15 +517,13 @@ export default class RoomSublist extends React.Component
+
);
- },
-});
+ }
+}
diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.js
index 1d2e7ed602..767f5a35f5 100644
--- a/src/components/views/rooms/SearchBar.js
+++ b/src/components/views/rooms/SearchBar.js
@@ -15,35 +15,31 @@ limitations under the License.
*/
import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
import AccessibleButton from "../elements/AccessibleButton";
import classNames from "classnames";
import { _t } from '../../../languageHandler';
import {Key} from "../../../Keyboard";
-export default createReactClass({
- displayName: 'SearchBar',
+export default class SearchBar extends React.Component {
+ constructor(props) {
+ super(props);
- getInitialState: function() {
- return ({
- scope: 'Room',
- });
- },
-
- // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
- UNSAFE_componentWillMount: function() {
this._search_term = createRef();
- },
- onThisRoomClick: function() {
+ this.state = {
+ scope: 'Room',
+ };
+ }
+
+ onThisRoomClick = () => {
this.setState({ scope: 'Room' }, () => this._searchIfQuery());
- },
+ };
- onAllRoomsClick: function() {
+ onAllRoomsClick = () => {
this.setState({ scope: 'All' }, () => this._searchIfQuery());
- },
+ };
- onSearchChange: function(e) {
+ onSearchChange = (e) => {
switch (e.key) {
case Key.ENTER:
this.onSearch();
@@ -52,19 +48,19 @@ export default createReactClass({
this.props.onCancelClick();
break;
}
- },
+ };
- _searchIfQuery: function() {
+ _searchIfQuery() {
if (this._search_term.current.value) {
this.onSearch();
}
- },
+ }
- onSearch: function() {
+ onSearch = () => {
this.props.onSearch(this._search_term.current.value, this.state.scope);
- },
+ };
- render: function() {
+ render() {
const searchButtonClasses = classNames("mx_SearchBar_searchButton", {
mx_SearchBar_searching: this.props.searchInProgress,
});
@@ -92,5 +88,5 @@ export default createReactClass({
);
- },
-});
+ }
+}
diff --git a/src/components/views/rooms/SearchResultTile.js b/src/components/views/rooms/SearchResultTile.js
index 57856a3a5b..136bd23729 100644
--- a/src/components/views/rooms/SearchResultTile.js
+++ b/src/components/views/rooms/SearchResultTile.js
@@ -17,14 +17,11 @@ 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 {haveTileForEvent} from "./EventTile";
-export default createReactClass({
- displayName: 'SearchResult',
-
- propTypes: {
+export default class SearchResultTile extends React.Component {
+ static propTypes = {
// a matrix-js-sdk SearchResult containing the details of this result
searchResult: PropTypes.object.isRequired,
@@ -35,9 +32,9 @@ export default createReactClass({
resultLink: PropTypes.string,
onHeightChanged: PropTypes.func,
- },
+ };
- render: function() {
+ render() {
const DateSeparator = sdk.getComponent('messages.DateSeparator');
const EventTile = sdk.getComponent('rooms.EventTile');
const result = this.props.searchResult;
@@ -66,5 +63,5 @@ export default createReactClass({
@@ -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/UpdateCheckButton.tsx b/src/components/views/settings/UpdateCheckButton.tsx
index 10e0e29f31..eb1b762423 100644
--- a/src/components/views/settings/UpdateCheckButton.tsx
+++ b/src/components/views/settings/UpdateCheckButton.tsx
@@ -42,7 +42,7 @@ function getStatusText(status: UpdateCheckStatus, errorDetail?: string) {
return _t('Downloading update...');
case UpdateCheckStatus.Ready:
return _t("New version available. Update now.", {}, {
- a: sub =>
{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 {
+ = ({description, acceptLabel, dismissLabel, onAccept, onDismiss, toastKey, numSeconds}) => {
+const GenericExpiringToast: React.FC = ({
+ description,
+ acceptLabel,
+ dismissLabel,
+ onAccept,
+ onDismiss,
+ toastKey,
+ numSeconds,
+}) => {
const onReject = () => {
if (onDismiss) onDismiss();
ToastStore.sharedInstance().dismissToast(toastKey);
diff --git a/src/components/views/toasts/GenericToast.tsx b/src/components/views/toasts/GenericToast.tsx
index 6cd881b9eb..a9c64f1962 100644
--- a/src/components/views/toasts/GenericToast.tsx
+++ b/src/components/views/toasts/GenericToast.tsx
@@ -31,7 +31,13 @@ interface IPropsExtended extends IProps {
onReject();
}
-const GenericToast: React.FC> = ({description, acceptLabel, rejectLabel, onAccept, onReject}) => {
+const GenericToast: React.FC> = ({
+ description,
+ acceptLabel,
+ rejectLabel,
+ onAccept,
+ onReject,
+}) => {
return
);
- },
-});
+ }
+}
diff --git a/src/hooks/useIsEncrypted.ts b/src/hooks/useIsEncrypted.ts
new file mode 100644
index 0000000000..79f3e539cd
--- /dev/null
+++ b/src/hooks/useIsEncrypted.ts
@@ -0,0 +1,36 @@
+/*
+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 {useCallback, useState} from "react";
+import {MatrixClient} from "matrix-js-sdk/src/client";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import {Room} from "matrix-js-sdk/src/models/room";
+
+import {useEventEmitter} from "./useEventEmitter";
+
+// Hook to simplify watching whether a Matrix room is encrypted, returns undefined if room is undefined
+export function useIsEncrypted(cli: MatrixClient, room?: Room): boolean | undefined {
+ const [isEncrypted, setIsEncrypted] = useState(room ? cli.isRoomEncrypted(room.roomId) : undefined);
+
+ const update = useCallback((event: MatrixEvent) => {
+ if (room && event.getType() === "m.room.encryption") {
+ setIsEncrypted(cli.isRoomEncrypted(room.roomId));
+ }
+ }, [cli, room]);
+ useEventEmitter(room ? room.currentState : undefined, "RoomState.events", update);
+
+ return isEncrypted;
+}
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 442f07499c..95b6c23a77 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -62,11 +62,6 @@
"Server may be unavailable, overloaded, or you hit a bug.": "Server may be unavailable, overloaded, or you hit a bug.",
"The server does not support the room version specified.": "The server does not support the room version specified.",
"Failure to create room": "Failure to create room",
- "Cancel entering passphrase?": "Cancel entering passphrase?",
- "Are you sure you want to cancel entering passphrase?": "Are you sure you want to cancel entering passphrase?",
- "Go Back": "Go Back",
- "Cancel": "Cancel",
- "Setting up keys": "Setting up keys",
"Sun": "Sun",
"Mon": "Mon",
"Tue": "Tue",
@@ -142,6 +137,11 @@
"Missing room_id in request": "Missing room_id in request",
"Room %(roomId)s not visible": "Room %(roomId)s not visible",
"Missing user_id in request": "Missing user_id in request",
+ "Cancel entering passphrase?": "Cancel entering passphrase?",
+ "Are you sure you want to cancel entering passphrase?": "Are you sure you want to cancel entering passphrase?",
+ "Go Back": "Go Back",
+ "Cancel": "Cancel",
+ "Setting up keys": "Setting up keys",
"Messages": "Messages",
"Actions": "Actions",
"Advanced": "Advanced",
@@ -684,6 +684,7 @@
"Public Name": "Public Name",
"Last seen": "Last seen",
"Failed to set display name": "Failed to set display name",
+ "Encryption": "Encryption",
"Individually verify each session used by a user to mark it as trusted, not trusting cross-signed devices.": "Individually verify each session used by a user to mark it as trusted, not trusting cross-signed devices.",
"Securely cache encrypted messages locally for them to appear in search results, using ": "Securely cache encrypted messages locally for them to appear in search results, using ",
" to store messages from ": " to store messages from ",
@@ -907,10 +908,10 @@
"Message search": "Message search",
"Cross-signing": "Cross-signing",
"Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.": "Your server admin has disabled end-to-end encryption by default in private rooms & Direct Messages.",
- "Security & Privacy": "Security & Privacy",
"Where you’re logged in": "Where you’re logged in",
"Manage the names of and sign out of your sessions below or verify them in your User Profile.": "Manage the names of and sign out of your sessions below or verify them in your User Profile.",
"A session's public name is visible to people you communicate with": "A session's public name is visible to people you communicate with",
+ "Privacy": "Privacy",
"%(brand)s collects anonymous analytics to allow us to improve the application.": "%(brand)s collects anonymous analytics to allow us to improve the application.",
"Privacy is important to us, so we don't collect any personal or identifiable data for our analytics.": "Privacy is important to us, so we don't collect any personal or identifiable data for our analytics.",
"Learn more about how we use analytics.": "Learn more about how we use analytics.",
@@ -993,7 +994,7 @@
"Members only (since the point in time of selecting this option)": "Members only (since the point in time of selecting this option)",
"Members only (since they were invited)": "Members only (since they were invited)",
"Members only (since they joined)": "Members only (since they joined)",
- "Encryption": "Encryption",
+ "Security & Privacy": "Security & Privacy",
"Once enabled, encryption cannot be disabled.": "Once enabled, encryption cannot be disabled.",
"Encrypted": "Encrypted",
"Who can access this room?": "Who can access this room?",
@@ -1062,6 +1063,7 @@
"and %(count)s others...|other": "and %(count)s others...",
"and %(count)s others...|one": "and one other...",
"Invite to this room": "Invite to this room",
+ "Invite to this community": "Invite to this community",
"Invited": "Invited",
"Filter room members": "Filter room members",
"%(userName)s (power %(powerLevelNumber)s)": "%(userName)s (power %(powerLevelNumber)s)",
@@ -1200,7 +1202,6 @@
"%(count)s unread messages.|other": "%(count)s unread messages.",
"%(count)s unread messages.|one": "1 unread message.",
"Unread messages.": "Unread messages.",
- "Add a topic": "Add a topic",
"Upgrading this room will shut down the current instance of the room and create an upgraded room with the same name.": "Upgrading this room will shut down the current instance of the room and create an upgraded room with the same name.",
"This room has already been upgraded.": "This room has already been upgraded.",
"This room is running room version Chrome , Firefox , or Safari for the best experience.": "Please install Chrome , Firefox , or Safari for the best experience.",
- "With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!": "With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!",
- "I understand the risks and wish to continue": "I understand the risks and wish to continue",
"Couldn't load page": "Couldn't load page",
"You must register to use this functionality": "You must register to use this functionality",
"You must join the room to see its files": "You must join the room to see its files",
@@ -2119,14 +2112,18 @@
"Uploading %(filename)s and %(count)s others|other": "Uploading %(filename)s and %(count)s others",
"Uploading %(filename)s and %(count)s others|zero": "Uploading %(filename)s",
"Uploading %(filename)s and %(count)s others|one": "Uploading %(filename)s and %(count)s other",
- "Switch to light mode": "Switch to light mode",
- "Switch to dark mode": "Switch to dark mode",
- "Switch theme": "Switch theme",
+ "Failed to find the general chat for this community": "Failed to find the general chat for this community",
"Notification settings": "Notification settings",
"Security & privacy": "Security & privacy",
"All settings": "All settings",
"Feedback": "Feedback",
+ "Community settings": "Community settings",
+ "User settings": "User settings",
+ "Switch to light mode": "Switch to light mode",
+ "Switch to dark mode": "Switch to dark mode",
+ "Switch theme": "Switch theme",
"User menu": "User menu",
+ "Community and user menu": "Community and user menu",
"Could not load user profile": "Could not load user profile",
"Verify this login": "Verify this login",
"Session verified": "Session verified",
diff --git a/src/languageHandler.tsx b/src/languageHandler.tsx
index 59edc8766c..d9feec95b1 100644
--- a/src/languageHandler.tsx
+++ b/src/languageHandler.tsx
@@ -442,7 +442,7 @@ export function pickBestLanguage(langs: string[]): string {
}
function getLangsJson(): Promise
{_t("Encryption")}
+
+ {keyBackup}
+ {eventIndex}
+ {crossSigning}
+ {this._renderCurrentDeviceInfo()}
+
+ {_t("Privacy")}
+
{_t("Analytics")}
);
}
diff --git a/src/components/views/toasts/GenericExpiringToast.tsx b/src/components/views/toasts/GenericExpiringToast.tsx
index 83f43208c4..e63edd8e79 100644
--- a/src/components/views/toasts/GenericExpiringToast.tsx
+++ b/src/components/views/toasts/GenericExpiringToast.tsx
@@ -29,7 +29,15 @@ interface IProps extends IGenericToastProps {
const SECOND = 1000;
-const GenericExpiringToast: React.FC
{_t(
@@ -372,9 +375,12 @@ export default class SecurityUserSettingsTab extends React.Component {
- {this._renderIgnoredUsers()}
- {this._renderManageInvites()}
- {_t("Advanced")}
+
+ {this._renderIgnoredUsers()}
+ {this._renderManageInvites()}
+
{ description }
diff --git a/src/components/views/voip/CallView.tsx b/src/components/views/voip/CallView.tsx
index 8416f56fd9..1d3a62984a 100644
--- a/src/components/views/voip/CallView.tsx
+++ b/src/components/views/voip/CallView.tsx
@@ -97,10 +97,7 @@ export default class CallView extends React.Component {
if (this.props.room) {
const roomId = this.props.room.roomId;
call = CallHandler.getCallForRoom(roomId) ||
- (this.props.ConferenceHandler ?
- this.props.ConferenceHandler.getConferenceCallForRoom(roomId) :
- null
- );
+ (this.props.ConferenceHandler ? this.props.ConferenceHandler.getConferenceCallForRoom(roomId) : null);
if (this.call) {
this.setState({ call: call });
diff --git a/src/components/views/voip/IncomingCallBox.tsx b/src/components/views/voip/IncomingCallBox.tsx
index 00d49b20f5..b7cba7a70f 100644
--- a/src/components/views/voip/IncomingCallBox.tsx
+++ b/src/components/views/voip/IncomingCallBox.tsx
@@ -51,7 +51,7 @@ export default class IncomingCallBox extends React.Component {
private onAction = (payload: ActionPayload) => {
switch (payload.action) {
- case 'call_state':
+ case 'call_state': {
const call = CallHandler.getCall(payload.room_id);
if (call && call.call_state === 'ringing') {
this.setState({
@@ -62,6 +62,7 @@ export default class IncomingCallBox extends React.Component {
incomingCall: null,
});
}
+ }
}
};
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({