+
-
),
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 (
{ completions }
);
diff --git a/src/autocomplete/CommunityProvider.tsx b/src/autocomplete/CommunityProvider.tsx
index f34fee890e..031fcd6169 100644
--- a/src/autocomplete/CommunityProvider.tsx
+++ b/src/autocomplete/CommunityProvider.tsx
@@ -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..eaca42b0dd 100644
--- a/src/autocomplete/EmojiProvider.tsx
+++ b/src/autocomplete/EmojiProvider.tsx
@@ -139,7 +139,11 @@ export default class EmojiProvider extends AutocompleteProvider {
renderCompletions(completions: React.ReactNode[]): React.ReactNode {
return (
-
+
{ completions }
);
diff --git a/src/autocomplete/RoomProvider.tsx b/src/autocomplete/RoomProvider.tsx
index b18b2d132c..defbc8c47f 100644
--- a/src/autocomplete/RoomProvider.tsx
+++ b/src/autocomplete/RoomProvider.tsx
@@ -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..3bde4b1d07 100644
--- a/src/autocomplete/UserProvider.tsx
+++ b/src/autocomplete/UserProvider.tsx
@@ -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;
@@ -171,7 +176,11 @@ export default class UserProvider extends AutocompleteProvider {
renderCompletions(completions: React.ReactNode[]): React.ReactNode {
return (
-
+ {
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 {
public render(): React.ReactNode {
const tagPanel = !this.state.showTagPanel ? null : (
{
}
};
- _calculateServerLimitToast(syncErrorData: IState["syncErrorData"], usageLimitEventContent?: IUsageLimit) {
- const error = syncErrorData && syncErrorData.error && syncErrorData.error.errcode === "M_RESOURCE_LIMIT_EXCEEDED";
+ _calculateServerLimitToast(syncError: IState["syncErrorData"], usageLimitEventContent?: IUsageLimit) {
+ const error = syncError && syncError.error && syncError.error.errcode === "M_RESOURCE_LIMIT_EXCEEDED";
if (error) {
- usageLimitEventContent = syncErrorData.error.data;
+ usageLimitEventContent = syncError.error.data;
}
if (usageLimitEventContent) {
@@ -620,18 +623,18 @@ class LoggedInView extends React.Component {
switch (this.props.page_type) {
case PageTypes.RoomView:
pageElement = ;
@@ -164,6 +167,7 @@ interface IState {
// the master view we are showing.
view: Views;
// What the LoggedInView would be showing if visible
+ // eslint-disable-next-line camelcase
page_type?: PageTypes;
// The ID of the room we're viewing. This is either populated directly
// in the case where we view a room by ID or by RoomView when it resolves
@@ -179,8 +183,11 @@ interface IState {
middleDisabled: boolean;
// the right panel's disabled state is tracked in its store.
// Parameters used in the registration dance with the IS
+ // eslint-disable-next-line camelcase
register_client_secret?: string;
+ // eslint-disable-next-line camelcase
register_session_id?: string;
+ // eslint-disable-next-line camelcase
register_id_sid?: string;
// When showing Modal dialogs we need to set aria-hidden on the root app element
// and disable it when there are no dialogs
@@ -340,6 +347,7 @@ export default class MatrixChat extends React.PureComponent {
}
// TODO: [REACT-WARNING] Replace with appropriate lifecycle stage
+ // eslint-disable-next-line camelcase
UNSAFE_componentWillUpdate(props, state) {
if (this.shouldTrackPageChange(this.state, state)) {
this.startPageChangeTimer();
@@ -609,8 +617,7 @@ export default class MatrixChat extends React.PureComponent {
const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog");
Modal.createTrackedDialog('User settings', '', UserSettingsDialog,
{initialTabId: tabPayload.initialTabId},
- /*className=*/null, /*isPriority=*/false, /*isStatic=*/true
- );
+ /*className=*/null, /*isPriority=*/false, /*isStatic=*/true);
// View the welcome or home page if we need something to look at
this.viewSomethingBehindModal();
@@ -620,7 +627,10 @@ export default class MatrixChat extends React.PureComponent {
this.createRoom(payload.public);
break;
case 'view_create_group': {
- const CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog");
+ let CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog")
+ if (SettingsStore.getValue("feature_communities_v2_prototypes")) {
+ CreateGroupDialog = CreateCommunityPrototypeDialog;
+ }
Modal.createTrackedDialog('Create Community', '', CreateGroupDialog);
break;
}
@@ -1076,7 +1086,7 @@ export default class MatrixChat extends React.PureComponent {
title: _t("Leave room"),
description: (
- { _t("Are you sure you want to leave the room '%(roomName)s'?", {roomName: roomToLeave.name}) }
+ { _t("Are you sure you want to leave the room '%(roomName)s'?", {roomName: roomToLeave.name}) }
{ warnings }
),
@@ -1429,7 +1439,6 @@ export default class MatrixChat extends React.PureComponent {
cli.on("crypto.warning", (type) => {
switch (type) {
case 'CRYPTO_WARNING_OLD_VERSION_DETECTED':
- const brand = SdkConfig.get().brand;
Modal.createTrackedDialog('Crypto migrated', '', ErrorDialog, {
title: _t('Old cryptography data detected'),
description: _t(
@@ -1440,7 +1449,7 @@ export default class MatrixChat extends React.PureComponent {
"in this version. This may also cause messages exchanged with this " +
"version to fail. If you experience problems, log out and back in " +
"again. To retain message history, export and re-import your keys.",
- { brand },
+ { brand: SdkConfig.get().brand },
),
});
break;
@@ -2049,3 +2058,12 @@ export default class MatrixChat extends React.PureComponent {
;
}
}
+
+export function isLoggedIn(): boolean {
+ // JRS: Maybe we should move the step that writes this to the window out of
+ // `element-web` and into this file? Better yet, we should probably create a
+ // store to hold this state.
+ // See also https://github.com/vector-im/element-web/issues/15034.
+ const app = window.matrixChat;
+ return app && (app as MatrixChat).state.view === Views.LOGGED_IN;
+}
diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js
index 5b12dae7df..11d3508ee5 100644
--- a/src/components/structures/RoomDirectory.js
+++ b/src/components/structures/RoomDirectory.js
@@ -30,6 +30,10 @@ import { instanceForInstanceId, protocolNameForInstanceId } from '../../utils/Di
import Analytics from '../../Analytics';
import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
import {ALL_ROOMS} from "../views/directory/NetworkDropdown";
+import SettingsStore from "../../settings/SettingsStore";
+import TagOrderStore from "../../stores/TagOrderStore";
+import GroupStore from "../../stores/GroupStore";
+import FlairStore from "../../stores/FlairStore";
const MAX_NAME_LENGTH = 80;
const MAX_TOPIC_LENGTH = 160;
@@ -46,6 +50,7 @@ export default createReactClass({
},
getInitialState: function() {
+ const selectedCommunityId = TagOrderStore.getSelectedTags()[0];
return {
publicRooms: [],
loading: true,
@@ -54,6 +59,10 @@ export default createReactClass({
instanceId: undefined,
roomServer: MatrixClientPeg.getHomeserverName(),
filterString: null,
+ selectedCommunityId: SettingsStore.getValue("feature_communities_v2_prototypes")
+ ? selectedCommunityId
+ : null,
+ communityName: null,
};
},
@@ -71,28 +80,39 @@ export default createReactClass({
this.setState({protocolsLoading: false});
return;
}
- MatrixClientPeg.get().getThirdpartyProtocols().then((response) => {
- this.protocols = response;
- this.setState({protocolsLoading: false});
- }, (err) => {
- console.warn(`error loading third party protocols: ${err}`);
- this.setState({protocolsLoading: false});
- if (MatrixClientPeg.get().isGuest()) {
- // Guests currently aren't allowed to use this API, so
- // ignore this as otherwise this error is literally the
- // thing you see when loading the client!
- return;
- }
- track('Failed to get protocol list from homeserver');
- const brand = SdkConfig.get().brand;
- this.setState({
- error: _t(
- '%(brand)s failed to get the protocol list from the homeserver. ' +
- 'The homeserver may be too old to support third party networks.',
- { brand },
- ),
+
+ if (!this.state.selectedCommunityId) {
+ MatrixClientPeg.get().getThirdpartyProtocols().then((response) => {
+ this.protocols = response;
+ this.setState({protocolsLoading: false});
+ }, (err) => {
+ console.warn(`error loading third party protocols: ${err}`);
+ this.setState({protocolsLoading: false});
+ if (MatrixClientPeg.get().isGuest()) {
+ // Guests currently aren't allowed to use this API, so
+ // ignore this as otherwise this error is literally the
+ // thing you see when loading the client!
+ return;
+ }
+ track('Failed to get protocol list from homeserver');
+ const brand = SdkConfig.get().brand;
+ this.setState({
+ error: _t(
+ '%(brand)s failed to get the protocol list from the homeserver. ' +
+ 'The homeserver may be too old to support third party networks.',
+ {brand},
+ ),
+ });
});
- });
+ } else {
+ // We don't use the protocols in the communities v2 prototype experience
+ this.setState({protocolsLoading: false});
+
+ // Grab the profile info async
+ FlairStore.getGroupProfileCached(MatrixClientPeg.get(), this.state.selectedCommunityId).then(profile => {
+ this.setState({communityName: profile.name});
+ });
+ }
this.refreshRoomList();
},
@@ -105,6 +125,33 @@ export default createReactClass({
},
refreshRoomList: function() {
+ if (this.state.selectedCommunityId) {
+ this.setState({
+ publicRooms: GroupStore.getGroupRooms(this.state.selectedCommunityId).map(r => {
+ return {
+ // Translate all the group properties to the directory format
+ room_id: r.roomId,
+ name: r.name,
+ topic: r.topic,
+ canonical_alias: r.canonicalAlias,
+ num_joined_members: r.numJoinedMembers,
+ avatarUrl: r.avatarUrl,
+ world_readable: r.worldReadable,
+ guest_can_join: r.guestsCanJoin,
+ };
+ }).filter(r => {
+ const filterString = this.state.filterString;
+ if (filterString) {
+ const containedIn = (s: string) => (s || "").toLowerCase().includes(filterString.toLowerCase());
+ return containedIn(r.name) || containedIn(r.topic) || containedIn(r.canonical_alias);
+ }
+ return true;
+ }),
+ loading: false,
+ });
+ return;
+ }
+
this.nextBatch = null;
this.setState({
publicRooms: [],
@@ -114,6 +161,7 @@ export default createReactClass({
},
getMoreRooms: function() {
+ if (this.state.selectedCommunityId) return Promise.resolve(); // no more rooms
if (!MatrixClientPeg.get()) return Promise.resolve();
this.setState({
@@ -239,7 +287,7 @@ export default createReactClass({
},
onRoomClicked: function(room, ev) {
- if (ev.shiftKey) {
+ if (ev.shiftKey && !this.state.selectedCommunityId) {
ev.preventDefault();
this.removeFromDirectory(room);
} else {
@@ -610,6 +658,18 @@ export default createReactClass({
}
}
+ let dropdown = (
+
0;
-
- let clearButton;
- if (itemsSelected) {
- clearButton =
- ;
- }
-
const classes = classNames('mx_TagPanel', {
mx_TagPanel_items_selected: itemsSelected,
});
- return
{ 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!", - ) } -
- -
-
);
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
{explanation}
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 {
});
let icon = (
-
+
);
let input = (
+
+
+ );
+ },
+
render() {
const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
- const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
const ActionButton = sdk.getComponent('elements.ActionButton');
- const TintableSvg = sdk.getComponent('elements.TintableSvg');
const tags = this.state.orderedTags.map((tag, index) => {
return +
-
+ { this.renderGlobalIcon() }
{ tags }
diff --git a/src/components/structures/UserMenu.tsx b/src/components/structures/UserMenu.tsx
index e782618872..69b9c3f26e 100644
--- a/src/components/structures/UserMenu.tsx
+++ b/src/components/structures/UserMenu.tsx
@@ -40,7 +40,7 @@ import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
import { SettingLevel } from "../../settings/SettingLevel";
import IconizedContextMenu, {
IconizedContextMenuOption,
- IconizedContextMenuOptionList
+ IconizedContextMenuOptionList,
} from "../views/context_menus/IconizedContextMenu";
interface IProps {
@@ -234,12 +234,12 @@ export default class UserMenu extends React.Component {
>
{
public render() {
const avatarSize = 32; // should match border-radius of the avatar
- let name = {OwnProfileStore.instance.displayName};
+ const displayName = OwnProfileStore.instance.displayName || MatrixClientPeg.get().getUserId();
+ const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize);
+
+ let name = {displayName};
let buttons = (
{/* masked image in CSS */}
@@ -324,9 +327,9 @@ export default class UserMenu extends React.Component {
{
+ // work out the full set of urls to try to load. This is formed like so:
+ // imageUrls: [ props.url, ...props.urls ]
+
+ let _urls = [];
+ if (!SettingsStore.getValue("lowBandwidth")) {
+ _urls = urls || [];
+
+ if (url) {
+ _urls.unshift(url); // put in urls[0]
+ }
+ }
+
+ // deduplicate URLs
+ return Array.from(new Set(_urls));
+};
+
const useImageUrl = ({url, urls}): [string, () => void] => {
- const [imageUrls, setUrls] = useState([]);
- const [urlsIndex, setIndex] = useState();
+ const [imageUrls, setUrls] = useState(calculateUrls(url, urls));
+ const [urlsIndex, setIndex] = useState(0);
const onError = useCallback(() => {
setIndex(i => i + 1); // try the next one
}, []);
- const memoizedUrls = useMemo(() => urls, [JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
- // work out the full set of urls to try to load. This is formed like so:
- // imageUrls: [ props.url, ...props.urls ]
-
- let _urls = [];
- if (!SettingsStore.getValue("lowBandwidth")) {
- _urls = memoizedUrls || [];
-
- if (url) {
- _urls.unshift(url); // put in urls[0]
- }
- }
-
- // deduplicate URLs
- _urls = Array.from(new Set(_urls));
-
+ setUrls(calculateUrls(url, urls));
setIndex(0);
- setUrls(_urls);
- }, [url, memoizedUrls]); // eslint-disable-line react-hooks/exhaustive-deps
+ }, [url, JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
const cli = useContext(MatrixClientContext);
const onClientSync = useCallback((syncState, prevState) => {
@@ -95,7 +96,7 @@ const BaseAvatar = (props: IProps) => {
urls,
width = 40,
height = 40,
- resizeMethod = "crop", // eslint-disable-line no-unused-vars
+ resizeMethod = "crop", // eslint-disable-line @typescript-eslint/no-unused-vars
defaultToInitialLetter = true,
onClick,
inputRef,
diff --git a/src/components/views/avatars/DecoratedRoomAvatar.tsx b/src/components/views/avatars/DecoratedRoomAvatar.tsx
index e6dadf676c..d7e012467b 100644
--- a/src/components/views/avatars/DecoratedRoomAvatar.tsx
+++ b/src/components/views/avatars/DecoratedRoomAvatar.tsx
@@ -126,7 +126,7 @@ export default class DecoratedRoomAvatar extends React.PureComponent {
if (this.isUnmounted) return;
- let newIcon = this.getPresenceIcon();
+ const newIcon = this.getPresenceIcon();
if (newIcon !== this.state.icon) this.setState({icon: newIcon});
};
diff --git a/src/components/views/avatars/GroupAvatar.tsx b/src/components/views/avatars/GroupAvatar.tsx
index e55e2e6fac..51327605c0 100644
--- a/src/components/views/avatars/GroupAvatar.tsx
+++ b/src/components/views/avatars/GroupAvatar.tsx
@@ -47,7 +47,7 @@ export default class GroupAvatar extends React.Component {
render() {
// extract the props we use from props so we can pass any others through
// should consider adding this as a global rule in js-sdk?
- /*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
+ /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
const {groupId, groupAvatarUrl, groupName, ...otherProps} = this.props;
return (
diff --git a/src/components/views/avatars/PulsedAvatar.tsx b/src/components/views/avatars/PulsedAvatar.tsx
index 94a6c87687..b4e876b9f6 100644
--- a/src/components/views/avatars/PulsedAvatar.tsx
+++ b/src/components/views/avatars/PulsedAvatar.tsx
@@ -25,4 +25,4 @@ const PulsedAvatar: React.FC = (props) => {
;
};
-export default PulsedAvatar;
\ No newline at end of file
+export default PulsedAvatar;
diff --git a/src/components/views/create_room/Presets.js b/src/components/views/create_room/Presets.js
deleted file mode 100644
index 0f18d11511..0000000000
--- a/src/components/views/create_room/Presets.js
+++ /dev/null
@@ -1,57 +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 from "react";
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import { _t } from '../../../languageHandler';
-
-const Presets = {
- PrivateChat: "private_chat",
- PublicChat: "public_chat",
- Custom: "custom",
-};
-
-export default createReactClass({
- displayName: 'CreateRoomPresets',
- propTypes: {
- onChange: PropTypes.func,
- preset: PropTypes.string,
- },
-
- Presets: Presets,
-
- getDefaultProps: function() {
- return {
- onChange: function() {},
- };
- },
-
- onValueChanged: function(ev) {
- this.props.onChange(ev.target.value);
- },
-
- render: function() {
- return (
-
- );
- },
-});
diff --git a/src/components/views/create_room/RoomAlias.js b/src/components/views/create_room/RoomAlias.js
deleted file mode 100644
index 5bdfdde08d..0000000000
--- a/src/components/views/create_room/RoomAlias.js
+++ /dev/null
@@ -1,106 +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 from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import { _t } from '../../../languageHandler';
-
-export default createReactClass({
- displayName: 'RoomAlias',
- propTypes: {
- // Specifying a homeserver will make magical things happen when you,
- // e.g. start typing in the room alias box.
- homeserver: PropTypes.string,
- alias: PropTypes.string,
- onChange: PropTypes.func,
- },
-
- getDefaultProps: function() {
- return {
- onChange: function() {},
- alias: '',
- };
- },
-
- getAliasLocalpart: function() {
- let room_alias = this.props.alias;
-
- if (room_alias && this.props.homeserver) {
- const suffix = ":" + this.props.homeserver;
- if (room_alias.startsWith("#") && room_alias.endsWith(suffix)) {
- room_alias = room_alias.slice(1, -suffix.length);
- }
- }
-
- return room_alias;
- },
-
- onValueChanged: function(ev) {
- this.props.onChange(ev.target.value);
- },
-
- onFocus: function(ev) {
- const target = ev.target;
- const curr_val = ev.target.value;
-
- if (this.props.homeserver) {
- if (curr_val == "") {
- const self = this;
- setTimeout(function() {
- target.value = "#:" + self.props.homeserver;
- target.setSelectionRange(1, 1);
- }, 0);
- } else {
- const suffix = ":" + this.props.homeserver;
- setTimeout(function() {
- target.setSelectionRange(
- curr_val.startsWith("#") ? 1 : 0,
- curr_val.endsWith(suffix) ? (target.value.length - suffix.length) : target.value.length,
- );
- }, 0);
- }
- }
- },
-
- onBlur: function(ev) {
- const curr_val = ev.target.value;
-
- if (this.props.homeserver) {
- if (curr_val == "#:" + this.props.homeserver) {
- ev.target.value = "";
- return;
- }
-
- if (curr_val != "") {
- let new_val = ev.target.value;
- const suffix = ":" + this.props.homeserver;
- if (!curr_val.startsWith("#")) new_val = "#" + new_val;
- if (!curr_val.endsWith(suffix)) new_val = new_val + suffix;
- ev.target.value = new_val;
- }
- }
- },
-
- render: function() {
- return (
-
- );
- },
-});
diff --git a/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx b/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx
new file mode 100644
index 0000000000..1c8a4ad6f6
--- /dev/null
+++ b/src/components/views/dialogs/CommunityPrototypeInviteDialog.tsx
@@ -0,0 +1,248 @@
+/*
+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, FormEvent } 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 { arrayFastClone } from "../../../utils/arrays";
+import SdkConfig from "../../../SdkConfig";
+import { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import InviteDialog from "./InviteDialog";
+import BaseAvatar from "../avatars/BaseAvatar";
+import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
+import {inviteMultipleToRoom, showAnyInviteErrors} from "../../../RoomInvite";
+import StyledCheckbox from "../elements/StyledCheckbox";
+import Modal from "../../../Modal";
+import ErrorDialog from "./ErrorDialog";
+
+interface IProps extends IDialogProps {
+ roomId: string;
+ communityName: string;
+}
+
+interface IPerson {
+ userId: string;
+ user: RoomMember;
+ lastActive: number;
+}
+
+interface IState {
+ emailTargets: string[];
+ userTargets: string[];
+ showPeople: boolean;
+ people: IPerson[];
+ numPeople: number;
+ busy: boolean;
+}
+
+export default class CommunityPrototypeInviteDialog extends React.PureComponent {
+ constructor(props: IProps) {
+ super(props);
+
+ this.state = {
+ emailTargets: [],
+ userTargets: [],
+ showPeople: false,
+ people: this.buildSuggestions(),
+ numPeople: 5, // arbitrary default
+ busy: false,
+ };
+ }
+
+ private buildSuggestions(): IPerson[] {
+ const alreadyInvited = new Set([MatrixClientPeg.get().getUserId(), SdkConfig.get()['welcomeUserId']]);
+ if (this.props.roomId) {
+ const room = MatrixClientPeg.get().getRoom(this.props.roomId);
+ if (!room) throw new Error("Room ID given to InviteDialog does not look like a room");
+ room.getMembersWithMembership('invite').forEach(m => alreadyInvited.add(m.userId));
+ room.getMembersWithMembership('join').forEach(m => alreadyInvited.add(m.userId));
+ // add banned users, so we don't try to invite them
+ room.getMembersWithMembership('ban').forEach(m => alreadyInvited.add(m.userId));
+ }
+
+ return InviteDialog.buildRecents(alreadyInvited);
+ }
+
+ private onSubmit = async (ev: FormEvent) => {
+ ev.preventDefault();
+ ev.stopPropagation();
+
+ this.setState({busy: true});
+ try {
+ const targets = [...this.state.emailTargets, ...this.state.userTargets];
+ const result = await inviteMultipleToRoom(this.props.roomId, targets);
+ const room = MatrixClientPeg.get().getRoom(this.props.roomId);
+ const success = showAnyInviteErrors(result.states, room, result.inviter);
+ if (success) {
+ this.props.onFinished(true);
+ } else {
+ this.setState({busy: false});
+ }
+ } catch (e) {
+ this.setState({busy: false});
+ console.error(e);
+ Modal.createTrackedDialog('Failed to invite', '', ErrorDialog, {
+ title: _t("Failed to invite"),
+ description: ((e && e.message) ? e.message : _t("Operation failed")),
+ });
+ }
+ };
+
+ private onAddressChange = (ev: ChangeEvent, index: number) => {
+ const targets = arrayFastClone(this.state.emailTargets);
+ if (index >= targets.length) {
+ targets.push(ev.target.value);
+ } else {
+ targets[index] = ev.target.value;
+ }
+ this.setState({emailTargets: targets});
+ };
+
+ private onAddressBlur = (index: number) => {
+ const targets = arrayFastClone(this.state.emailTargets);
+ if (index >= targets.length) return; // not important
+ if (targets[index].trim() === "") {
+ targets.splice(index, 1);
+ this.setState({emailTargets: targets});
+ }
+ };
+
+ private onShowPeopleClick = () => {
+ this.setState({showPeople: !this.state.showPeople});
+ };
+
+ private setPersonToggle = (person: IPerson, selected: boolean) => {
+ const targets = arrayFastClone(this.state.userTargets);
+ if (selected && !targets.includes(person.userId)) {
+ targets.push(person.userId);
+ } else if (!selected && targets.includes(person.userId)) {
+ targets.splice(targets.indexOf(person.userId), 1);
+ }
+ this.setState({userTargets: targets});
+ };
+
+ private renderPerson(person: IPerson, key: any) {
+ const avatarSize = 36;
+ return (
+ this.onAddressChange(e, i)}
+ label={_t("Email address")}
+ placeholder={_t("Email address")}
+ onBlur={() => this.onAddressBlur(i)}
+ />
+ ));
+ });
+
+ // Push a clean input
+ emailAddresses.push((
+ this.onAddressChange(e, emailAddresses.length)}
+ label={emailAddresses.length > 0 ? _t("Add another email") : _t("Email address")}
+ placeholder={emailAddresses.length > 0 ? _t("Add another email") : _t("Email address")}
+ />
+ ));
+
+ let peopleIntro = null;
+ const people = [];
+ if (this.state.showPeople) {
+ const humansToPresent = this.state.people.slice(0, this.state.numPeople);
+ humansToPresent.forEach((person, i) => {
+ people.push(this.renderPerson(person, i));
+ });
+ if (humansToPresent.length < this.state.people.length) {
+ people.push((
+ {_t("Show more")}
+ ));
+ }
+ }
+ if (this.state.people.length > 0) {
+ peopleIntro = (
+
+
+
+ );
+ }
+}
diff --git a/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx b/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx
new file mode 100644
index 0000000000..1d9d92b9c9
--- /dev/null
+++ b/src/components/views/dialogs/CreateCommunityPrototypeDialog.tsx
@@ -0,0 +1,227 @@
+/*
+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 InfoTooltip from "../elements/InfoTooltip";
+import dis from "../../../dispatcher/dispatcher";
+import {showCommunityRoomInviteDialog} from "../../../RoomInvite";
+import GroupStore from "../../../stores/GroupStore";
+
+interface IProps extends IDialogProps {
+}
+
+interface IState {
+ name: string;
+ localpart: string;
+ error: string;
+ busy: boolean;
+ avatarFile: File;
+ avatarPreview: string;
+}
+
+export default class CreateCommunityPrototypeDialog extends React.PureComponent {
+ private avatarUploadRef: React.RefObject = React.createRef();
+
+ constructor(props: IProps) {
+ super(props);
+
+ this.state = {
+ name: "",
+ localpart: "",
+ error: null,
+ busy: false,
+ avatarFile: null,
+ avatarPreview: null,
+ };
+ }
+
+ private onNameChange = (ev: ChangeEvent) => {
+ const localpart = (ev.target.value || "").toLowerCase().replace(/[^a-z0-9.\-_]/g, '-');
+ this.setState({name: ev.target.value, localpart});
+ };
+
+ private onSubmit = async (ev) => {
+ ev.preventDefault();
+ ev.stopPropagation();
+
+ if (this.state.busy) return;
+
+ // We'll create the community now to see if it's taken, leaving it active in
+ // the background for the user to look at while they invite people.
+ this.setState({busy: true});
+ try {
+ let avatarUrl = ''; // must be a string for synapse to accept it
+ if (this.state.avatarFile) {
+ avatarUrl = await MatrixClientPeg.get().uploadContent(this.state.avatarFile);
+ }
+
+ const result = await MatrixClientPeg.get().createGroup({
+ localpart: this.state.localpart,
+ profile: {
+ name: this.state.name,
+ avatar_url: avatarUrl,
+ },
+ });
+
+ // Ensure the tag gets selected now that we've created it
+ dis.dispatch({action: 'deselect_tags'}, true);
+ dis.dispatch({
+ action: 'select_tag',
+ tag: result.group_id,
+ });
+
+ // Close our own dialog before moving much further
+ this.props.onFinished(true);
+
+ if (result.room_id) {
+ // Force the group store to update as it might have missed the general chat
+ await GroupStore.refreshGroupRooms(result.group_id);
+ dis.dispatch({
+ action: 'view_room',
+ room_id: result.room_id,
+ });
+ showCommunityRoomInviteDialog(result.room_id, this.state.name);
+ } else {
+ dis.dispatch({
+ action: 'view_group',
+ group_id: result.group_id,
+ group_is_new: true,
+ });
+ }
+ } catch (e) {
+ console.error(e);
+ this.setState({
+ busy: false,
+ error: _t(
+ "There was an error creating your community. The name may be taken or the " +
+ "server is unable to process your request.",
+ ),
+ });
+ }
+ };
+
+ private onAvatarChanged = (e: ChangeEvent) => {
+ if (!e.target.files || !e.target.files.length) {
+ this.setState({avatarFile: null});
+ } else {
+ this.setState({busy: true});
+ const file = e.target.files[0];
+ const reader = new FileReader();
+ reader.onload = (ev: ProgressEvent) => {
+ this.setState({avatarFile: file, busy: false, avatarPreview: ev.target.result as string});
+ };
+ reader.readAsDataURL(file);
+ }
+ };
+
+ private onChangeAvatar = () => {
+ if (this.avatarUploadRef.current) this.avatarUploadRef.current.click();
+ };
+
+ public render() {
+ let communityId = null;
+ if (this.state.localpart) {
+ communityId = (
+
+ {_t("Community ID: +
;
+ if (!this.state.avatarPreview) {
+ preview =
+ }
+
+ return (
+
+
+
+ );
+ }
+}
diff --git a/src/components/views/dialogs/CreateRoomDialog.js b/src/components/views/dialogs/CreateRoomDialog.js
index ce7ac6e59c..4890626527 100644
--- a/src/components/views/dialogs/CreateRoomDialog.js
+++ b/src/components/views/dialogs/CreateRoomDialog.js
@@ -25,6 +25,8 @@ 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";
export default createReactClass({
displayName: 'CreateRoomDialog',
@@ -70,6 +72,10 @@ export default createReactClass({
opts.encryption = this.state.isEncrypted;
}
+ if (TagOrderStore.getSelectedPrototypeTag()) {
+ opts.associatedWithCommunity = TagOrderStore.getSelectedPrototypeTag();
+ }
+
return opts;
},
@@ -178,18 +184,25 @@ export default createReactClass({
const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch');
const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField');
- let publicPrivateLabel;
let aliasField;
if (this.state.isPublic) {
- publicPrivateLabel = (
this._aliasFieldRef = ref} onChange={this.onAliasChange} domain={domain} value={this.state.alias} />
);
- } else {
- publicPrivateLabel = (
{ this.state.detailsOpen ? _t('Hide advanced') : _t('Show advanced') }
-
diff --git a/src/components/views/dialogs/IDialogProps.ts b/src/components/views/dialogs/IDialogProps.ts
new file mode 100644
index 0000000000..1027ca7607
--- /dev/null
+++ b/src/components/views/dialogs/IDialogProps.ts
@@ -0,0 +1,19 @@
+/*
+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.
+*/
+
+export interface IDialogProps {
+ onFinished: (bool) => void;
+}
diff --git a/src/components/views/dialogs/InviteDialog.js b/src/components/views/dialogs/InviteDialog.js
index c90811ed5a..6cd0b22505 100644
--- a/src/components/views/dialogs/InviteDialog.js
+++ b/src/components/views/dialogs/InviteDialog.js
@@ -327,7 +327,7 @@ export default class InviteDialog extends React.PureComponent {
this.state = {
targets: [], // array of Member objects (see interface above)
filterText: "",
- recents: this._buildRecents(alreadyInvited),
+ recents: InviteDialog.buildRecents(alreadyInvited),
numRecentsShown: INITIAL_ROOMS_SHOWN,
suggestions: this._buildSuggestions(alreadyInvited),
numSuggestionsShown: INITIAL_ROOMS_SHOWN,
@@ -344,7 +344,7 @@ export default class InviteDialog extends React.PureComponent {
this._editorRef = createRef();
}
- _buildRecents(excludedTargetIds: Set): {userId: string, user: RoomMember, lastActive: number} {
+ static buildRecents(excludedTargetIds: Set): {userId: string, user: RoomMember, lastActive: number} {
const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
// Also pull in all the rooms tagged as DefaultTagID.DM so we don't miss anything. Sometimes the
diff --git a/src/components/views/dialogs/ServerOfflineDialog.tsx b/src/components/views/dialogs/ServerOfflineDialog.tsx
index f6767dcb8d..81f628343b 100644
--- a/src/components/views/dialogs/ServerOfflineDialog.tsx
+++ b/src/components/views/dialogs/ServerOfflineDialog.tsx
@@ -27,9 +27,9 @@ import Spinner from "../elements/Spinner";
import AccessibleButton from "../elements/AccessibleButton";
import { UPDATE_EVENT } from "../../../stores/AsyncStore";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
+import { IDialogProps } from "./IDialogProps";
-interface IProps {
- onFinished: (bool) => void;
+interface IProps extends IDialogProps {
}
export default class ServerOfflineDialog extends React.PureComponent {
diff --git a/src/components/views/dialogs/ShareDialog.tsx b/src/components/views/dialogs/ShareDialog.tsx
index dc2a987f13..e849f7efe3 100644
--- a/src/components/views/dialogs/ShareDialog.tsx
+++ b/src/components/views/dialogs/ShareDialog.tsx
@@ -31,6 +31,7 @@ import {toRightOf} from "../../structures/ContextMenu";
import {copyPlaintext, selectText} from "../../../utils/strings";
import StyledCheckbox from '../elements/StyledCheckbox';
import AccessibleTooltipButton from '../elements/AccessibleTooltipButton';
+import { IDialogProps } from "./IDialogProps";
const socials = [
{
@@ -60,8 +61,7 @@ const socials = [
},
];
-interface IProps {
- onFinished: () => void;
+interface IProps extends IDialogProps {
target: Room | User | Group | RoomMember | MatrixEvent;
permalinkCreator: RoomPermalinkCreator;
}
@@ -186,8 +186,8 @@ export default class ShareDialog extends React.PureComponent {
title = _t('Share Room Message');
checkbox =
{ _t('Link to selected message') }
@@ -198,16 +198,18 @@ export default class ShareDialog extends React.PureComponent {
const encodedUrl = encodeURIComponent(matrixToUrl);
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
- return
- { clearButton }
-
-
+ let createButton = (
+
-
{ provided.placeholder }
-
- {OwnProfileStore.instance.displayName}
-
+
+ {OwnProfileStore.instance.displayName}
+
- {MatrixClientPeg.get().getUserId()}
-
+ {MatrixClientPeg.get().getUserId()}
+
+ this.setPersonToggle(person, e.target.checked)} />
+
+ );
+ }
+
+ private onShowMorePeople = () => {
+ this.setState({numPeople: this.state.numPeople + 5}); // arbitrary increase
+ };
+
+ public render() {
+ const emailAddresses = [];
+ this.state.emailTargets.forEach((address, i) => {
+ emailAddresses.push((
+
+ {person.user.name}
+ {person.userId}
+
+
+ {_t("People you know on %(brand)s", {brand: SdkConfig.get().brand})}
+
+ {this.state.showPeople ? _t("Hide") : _t("Show")}
+
+
+ );
+ }
+
+ let buttonText = _t("Skip");
+ const targetCount = this.state.userTargets.length + this.state.emailTargets.length;
+ if (targetCount > 0) {
+ buttonText = _t("Send %(count)s invites", {count: targetCount});
+ }
+
+ return (
+ {_t("Set a room address to easily share your room with other people.")}
); const domain = MatrixClientPeg.get().getDomain(); aliasField = ({_t("This room is private, and can only be joined by invitation.")}
); + } + + let publicPrivateLabel ={_t( + "Private rooms can be found and joined by invitation only. Public rooms can be " + + "found and joined by anyone.", + )}
; + if (TagOrderStore.getSelectedPrototypeTag()) { + publicPrivateLabel ={_t( + "Private rooms can be found and joined by invitation only. Public rooms can be " + + "found and joined by anyone in this community.", + )}
; } let e2eeSection; @@ -212,7 +225,25 @@ export default createReactClass({ ; } - const title = this.state.isPublic ? _t('Create a public room') : _t('Create a private room'); + let federateLabel = _t( + "You might enable this if the room will only be used for collaborating with internal " + + "teams on your homeserver. This cannot be changed later.", + ); + if (SdkConfig.get().default_federate === false) { + // We only change the label if the default setting is different to avoid jarring text changes to the + // user. They will have read the implications of turning this off/on, so no need to rephrase for them. + federateLabel = _t( + "You might disable this if the room will be used for collaborating with external " + + "teams who have their own homeserver. This cannot be changed later.", + ); + } + + 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(); + title = _t("Create a room in %(communityName)s", {communityName: name}); + } return ({federateLabel}
-
{ matrixToUrl }
diff --git a/src/components/views/elements/AppTile.js b/src/components/views/elements/AppTile.js
index 1c55177fb1..01366091fd 100644
--- a/src/components/views/elements/AppTile.js
+++ b/src/components/views/elements/AppTile.js
@@ -735,7 +735,7 @@ export default class AppTile extends React.Component {
// Additional iframe feature pemissions
// (see - https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes and https://wicg.github.io/feature-policy/)
- const iframeFeatures = "microphone; camera; encrypted-media; autoplay;";
+ const iframeFeatures = "microphone; camera; encrypted-media; autoplay; display-capture;";
const appTileBodyClass = 'mx_AppTileBody' + (this.props.miniMode ? '_mini ' : ' ');
diff --git a/src/components/views/elements/Draggable.tsx b/src/components/views/elements/Draggable.tsx
index 3397fd901c..a6eb8323f3 100644
--- a/src/components/views/elements/Draggable.tsx
+++ b/src/components/views/elements/Draggable.tsx
@@ -34,7 +34,6 @@ export interface ILocationState {
}
export default class Draggable extends React.Component {
-
constructor(props: IProps) {
super(props);
@@ -77,5 +76,4 @@ export default class Draggable extends React.Component {
render() {
return ;
}
-
-}
\ No newline at end of file
+}
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
+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 from 'react';
+import classNames from 'classnames';
+
+import Tooltip from './Tooltip';
+import { _t } from "../../../languageHandler";
+
+interface ITooltipProps {
+ tooltip?: React.ReactNode;
+ tooltipClassName?: string;
+}
+
+interface IState {
+ hover: boolean;
+}
+
+export default class InfoTooltip extends React.PureComponent {
+ constructor(props: ITooltipProps) {
+ super(props);
+ this.state = {
+ hover: false,
+ };
+ }
+
+ onMouseOver = () => {
+ this.setState({
+ hover: true,
+ });
+ };
+
+ onMouseLeave = () => {
+ this.setState({
+ hover: false,
+ });
+ };
+
+ render() {
+ const {tooltip, children, tooltipClassName} = this.props;
+ const title = _t("Information");
+
+ // Tooltip are forced on the right for a more natural feel to them on info icons
+ const tip = this.state.hover ? = ({data, className, ...options}) => {
return () => {
cancelled = true;
};
- }, [JSON.stringify(data), options]);
+ }, [JSON.stringify(data), options]); // eslint-disable-line react-hooks/exhaustive-deps
return
+
+ {children}
+ {tip}
+
+ );
+ }
+}
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 ? 
: {
// 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
-
{} : 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