- { _t("A confirmation email has been sent to %(emailAddress)s",
+ }
+ hideServerPicker={true}
+ />
+
{ _t("To create your account, open the link in the email we just sent to %(emailAddress)s.",
{ emailAddress: { this.props.inputs.emailAddress } },
- ) }
-
- { _t("Open the link in the email to continue registration.") }
+ ) }
+ { this.state.requesting ? (
+ { _t("Did not receive it? Resend it", {}, {
+ a: (text: string) =>
+ null}
+ disabled
+ >{ text }
+ ,
+ }) }
+ ) : { _t("Did not receive it? Resend it", {}, {
+ a: (text: string) => this.setState({ requested: false })
+ : undefined}
+ onClick={async () => {
+ this.setState({ requesting: true });
+ try {
+ await this.props.requestEmailToken?.();
+ } catch (e) {
+ logger.warn("Email token request failed: ", e);
+ } finally {
+ this.setState({ requested: true, requesting: false });
+ }
+ }}
+ >{ text },
+ }) }
}
{ errorSection }
);
@@ -560,7 +624,9 @@ export class MsisdnAuthEntry extends React.Component;
+ return (
+
+ );
} else {
const enableSubmit = Boolean(this.state.token);
const submitClasses = classNames({
@@ -726,13 +792,15 @@ export class SSOAuthEntry extends React.Component
- { errorSection }
-
- { cancelButton }
- { continueButton }
-
- ;
+ return (
+
+ { errorSection }
+
+ { cancelButton }
+ { continueButton }
+
+
+ );
}
}
@@ -817,6 +885,7 @@ export interface IStageComponentProps extends IAuthEntryProps {
fail?(e: Error): void;
setEmailSid?(sid: string): void;
onCancel?(): void;
+ requestEmailToken?(): Promise;
}
export interface IStageComponent extends React.ComponentClass> {
diff --git a/src/components/views/beacon/BeaconMarker.tsx b/src/components/views/beacon/BeaconMarker.tsx
index f7f284b88ed..644482e48b3 100644
--- a/src/components/views/beacon/BeaconMarker.tsx
+++ b/src/components/views/beacon/BeaconMarker.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, { useContext } from 'react';
+import React, { ReactNode, useContext } from 'react';
import maplibregl from 'maplibre-gl';
import {
Beacon,
@@ -29,12 +29,13 @@ import SmartMarker from '../location/SmartMarker';
interface Props {
map: maplibregl.Map;
beacon: Beacon;
+ tooltip?: ReactNode;
}
/**
* Updates a map SmartMarker with latest location from given beacon
*/
-const BeaconMarker: React.FC = ({ map, beacon }) => {
+const BeaconMarker: React.FC = ({ map, beacon, tooltip }) => {
const latestLocationState = useEventEmitterState(
beacon,
BeaconEvent.LocationUpdate,
@@ -58,6 +59,7 @@ const BeaconMarker: React.FC = ({ map, beacon }) => {
id={beacon.identifier}
geoUri={geoUri}
roomMember={markerRoomMember}
+ tooltip={tooltip}
useMemberColor
/>;
};
diff --git a/src/components/views/beacon/BeaconStatusTooltip.tsx b/src/components/views/beacon/BeaconStatusTooltip.tsx
new file mode 100644
index 00000000000..bc9f3609395
--- /dev/null
+++ b/src/components/views/beacon/BeaconStatusTooltip.tsx
@@ -0,0 +1,61 @@
+/*
+Copyright 2022 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, { useContext } from 'react';
+import { Beacon } from 'matrix-js-sdk/src/matrix';
+import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';
+
+import MatrixClientContext from '../../../contexts/MatrixClientContext';
+import CopyableText from '../elements/CopyableText';
+import BeaconStatus from './BeaconStatus';
+import { BeaconDisplayStatus } from './displayStatus';
+
+interface Props {
+ beacon: Beacon;
+}
+
+const useBeaconName = (beacon: Beacon): string => {
+ const matrixClient = useContext(MatrixClientContext);
+
+ if (beacon.beaconInfo.assetType !== LocationAssetType.Self) {
+ return beacon.beaconInfo.description;
+ }
+ const room = matrixClient.getRoom(beacon.roomId);
+ const member = room?.getMember(beacon.beaconInfoOwner);
+
+ return member?.rawDisplayName || beacon.beaconInfoOwner;
+};
+
+const BeaconStatusTooltip: React.FC = ({ beacon }) => {
+ const label = useBeaconName(beacon);
+
+ return
+
+ beacon.latestLocationState?.uri}
+ />
+
+
;
+};
+
+export default BeaconStatusTooltip;
diff --git a/src/components/views/beacon/BeaconViewDialog.tsx b/src/components/views/beacon/BeaconViewDialog.tsx
index e6c4a423fe9..a7cdb242d37 100644
--- a/src/components/views/beacon/BeaconViewDialog.tsx
+++ b/src/components/views/beacon/BeaconViewDialog.tsx
@@ -37,6 +37,7 @@ import { _t } from '../../../languageHandler';
import AccessibleButton from '../elements/AccessibleButton';
import DialogSidebar from './DialogSidebar';
import DialogOwnBeaconStatus from './DialogOwnBeaconStatus';
+import BeaconStatusTooltip from './BeaconStatusTooltip';
interface IProps extends IDialogProps {
roomId: Room['roomId'];
@@ -103,6 +104,7 @@ const BeaconViewDialog: React.FC = ({
key={beacon.identifier}
map={map}
beacon={beacon}
+ tooltip={}
/>) }
diff --git a/src/components/views/beacon/LeftPanelLiveShareWarning.tsx b/src/components/views/beacon/LeftPanelLiveShareWarning.tsx
index 43b00a8fa76..b2686285925 100644
--- a/src/components/views/beacon/LeftPanelLiveShareWarning.tsx
+++ b/src/components/views/beacon/LeftPanelLiveShareWarning.tsx
@@ -15,8 +15,8 @@ limitations under the License.
*/
import classNames from 'classnames';
-import React from 'react';
-import { BeaconIdentifier, Room } from 'matrix-js-sdk/src/matrix';
+import React, { useEffect } from 'react';
+import { Beacon, BeaconIdentifier, Room } from 'matrix-js-sdk/src/matrix';
import { useEventEmitterState } from '../../../hooks/useEventEmitter';
import { _t } from '../../../languageHandler';
@@ -56,11 +56,30 @@ const getLabel = (hasStoppingErrors: boolean, hasLocationErrors: boolean): strin
return _t('An error occurred while stopping your live location');
}
if (hasLocationErrors) {
- return _t('An error occured whilst sharing your live location');
+ return _t('An error occurred whilst sharing your live location');
}
return _t('You are sharing your live location');
};
+const useLivenessMonitor = (liveBeaconIds: BeaconIdentifier[], beacons: Map): void => {
+ useEffect(() => {
+ // chromium sets the minimum timer interval to 1000ms
+ // for inactive tabs
+ // refresh beacon monitors when the tab becomes active again
+ const onPageVisibilityChanged = () => {
+ if (document.visibilityState === 'visible') {
+ liveBeaconIds.forEach(identifier => beacons.get(identifier)?.monitorLiveness());
+ }
+ };
+ if (liveBeaconIds.length) {
+ document.addEventListener("visibilitychange", onPageVisibilityChanged);
+ }
+ return () => {
+ document.removeEventListener("visibilitychange", onPageVisibilityChanged);
+ };
+ }, [liveBeaconIds, beacons]);
+};
+
const LeftPanelLiveShareWarning: React.FC = ({ isMinimized }) => {
const isMonitoringLiveLocation = useEventEmitterState(
OwnBeaconStore.instance,
@@ -91,6 +110,8 @@ const LeftPanelLiveShareWarning: React.FC = ({ isMinimized }) => {
const hasLocationPublishErrors = !!beaconIdsWithLocationPublishError.length;
const hasStoppingErrors = !!beaconIdsWithStoppingError.length;
+ useLivenessMonitor(liveBeaconIds, OwnBeaconStore.instance.beacons);
+
if (!isMonitoringLiveLocation) {
return null;
}
diff --git a/src/components/views/beacon/RoomLiveShareWarning.tsx b/src/components/views/beacon/RoomLiveShareWarning.tsx
index 2fe76a10e88..ecd200cf96f 100644
--- a/src/components/views/beacon/RoomLiveShareWarning.tsx
+++ b/src/components/views/beacon/RoomLiveShareWarning.tsx
@@ -29,7 +29,7 @@ import LiveTimeRemaining from './LiveTimeRemaining';
const getLabel = (hasLocationPublishError: boolean, hasStopSharingError: boolean): string => {
if (hasLocationPublishError) {
- return _t('An error occured whilst sharing your live location, please try again');
+ return _t('An error occurred whilst sharing your live location, please try again');
}
if (hasStopSharingError) {
return _t('An error occurred while stopping your live location, please try again');
diff --git a/src/components/views/beta/BetaCard.tsx b/src/components/views/beta/BetaCard.tsx
index 4639886b701..c2a0e282953 100644
--- a/src/components/views/beta/BetaCard.tsx
+++ b/src/components/views/beta/BetaCard.tsx
@@ -60,7 +60,6 @@ export const BetaPill = ({
}
onClick={onClick}
- yOffset={-10}
>
{ _t("Beta") }
;
diff --git a/src/components/views/context_menus/DeviceContextMenu.tsx b/src/components/views/context_menus/DeviceContextMenu.tsx
new file mode 100644
index 00000000000..04463e81ff0
--- /dev/null
+++ b/src/components/views/context_menus/DeviceContextMenu.tsx
@@ -0,0 +1,89 @@
+/*
+Copyright 2021 Šimon Brandner
+
+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, { useEffect, useState } from "react";
+
+import MediaDeviceHandler, { MediaDeviceKindEnum } from "../../../MediaDeviceHandler";
+import IconizedContextMenu, { IconizedContextMenuOptionList, IconizedContextMenuRadio } from "./IconizedContextMenu";
+import { IProps as IContextMenuProps } from "../../structures/ContextMenu";
+import { _t, _td } from "../../../languageHandler";
+
+const SECTION_NAMES: Record = {
+ [MediaDeviceKindEnum.AudioInput]: _td("Input devices"),
+ [MediaDeviceKindEnum.AudioOutput]: _td("Output devices"),
+ [MediaDeviceKindEnum.VideoInput]: _td("Cameras"),
+};
+
+interface IDeviceContextMenuDeviceProps {
+ label: string;
+ selected: boolean;
+ onClick: () => void;
+}
+
+const DeviceContextMenuDevice: React.FC = ({ label, selected, onClick }) => {
+ return ;
+};
+
+interface IDeviceContextMenuSectionProps {
+ deviceKind: MediaDeviceKindEnum;
+}
+
+const DeviceContextMenuSection: React.FC = ({ deviceKind }) => {
+ const [devices, setDevices] = useState([]);
+ const [selectedDevice, setSelectedDevice] = useState(MediaDeviceHandler.getDevice(deviceKind));
+
+ useEffect(() => {
+ const getDevices = async () => {
+ return setDevices((await MediaDeviceHandler.getDevices())[deviceKind]);
+ };
+ getDevices();
+ }, [deviceKind]);
+
+ const onDeviceClick = (deviceId: string): void => {
+ MediaDeviceHandler.instance.setDevice(deviceId, deviceKind);
+ setSelectedDevice(deviceId);
+ };
+
+ return
+ { devices.map(({ label, deviceId }) => {
+ return onDeviceClick(deviceId)}
+ />;
+ }) }
+ ;
+};
+
+interface IProps extends IContextMenuProps {
+ deviceKinds: MediaDeviceKind[];
+}
+
+const DeviceContextMenu: React.FC = ({ deviceKinds, ...props }) => {
+ return
+ { deviceKinds.map((kind) => {
+ return ;
+ }) }
+ ;
+};
+
+export default DeviceContextMenu;
diff --git a/src/components/views/context_menus/IconizedContextMenu.tsx b/src/components/views/context_menus/IconizedContextMenu.tsx
index 2c6bdb3776b..9b7896790ef 100644
--- a/src/components/views/context_menus/IconizedContextMenu.tsx
+++ b/src/components/views/context_menus/IconizedContextMenu.tsx
@@ -33,6 +33,7 @@ interface IProps extends IContextMenuProps {
interface IOptionListProps {
first?: boolean;
red?: boolean;
+ label?: string;
className?: string;
}
@@ -126,13 +127,20 @@ export const IconizedContextMenuOption: React.FC = ({
;
};
-export const IconizedContextMenuOptionList: React.FC = ({ first, red, className, children }) => {
+export const IconizedContextMenuOptionList: React.FC = ({
+ first,
+ red,
+ className,
+ label,
+ children,
+}) => {
const classes = classNames("mx_IconizedContextMenu_optionList", className, {
mx_IconizedContextMenu_optionList_notFirst: !first,
mx_IconizedContextMenu_optionList_red: red,
});
return
+ { label &&
{ label }
}
{ children }
{ _t("Options") }
+
;
}
diff --git a/src/components/views/dialogs/ExportDialog.tsx b/src/components/views/dialogs/ExportDialog.tsx
index 6881c1c52d8..1a8d1020cd6 100644
--- a/src/components/views/dialogs/ExportDialog.tsx
+++ b/src/components/views/dialogs/ExportDialog.tsx
@@ -200,7 +200,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => {
}, {
key: "number",
test: ({ value }) => {
- const parsedSize = parseInt(value as string, 10);
+ const parsedSize = parseInt(value, 10);
return validateNumberInRange(1, 2000)(parsedSize);
},
invalid: () => {
@@ -238,7 +238,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => {
}, {
key: "number",
test: ({ value }) => {
- const parsedSize = parseInt(value as string, 10);
+ const parsedSize = parseInt(value, 10);
return validateNumberInRange(1, 10 ** 8)(parsedSize);
},
invalid: () => {
@@ -263,7 +263,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => {
else onFinished(false);
};
- const confirmCanel = async () => {
+ const confirmCancel = async () => {
await exporter?.cancelExport();
setExportCancelled(true);
setExporting(false);
@@ -346,7 +346,7 @@ const ExportDialog: React.FC = ({ room, onFinished }) => {
hasCancel={true}
cancelButton={_t("Continue")}
onCancel={() => setCancelWarning(false)}
- onPrimaryButtonClick={confirmCanel}
+ onPrimaryButtonClick={confirmCancel}
/>
);
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
index 3c482bf0438..7b01e721692 100644
--- a/src/components/views/dialogs/ForwardDialog.tsx
+++ b/src/components/views/dialogs/ForwardDialog.tsx
@@ -21,6 +21,8 @@ import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { EventType } from "matrix-js-sdk/src/@types/event";
+import { ILocationContent, LocationAssetType, M_TIMESTAMP } from "matrix-js-sdk/src/@types/location";
+import { makeLocationContent } from "matrix-js-sdk/src/content-helpers";
import { _t } from "../../../languageHandler";
import dis from "../../../dispatcher/dispatcher";
@@ -47,6 +49,8 @@ import { Action } from "../../../dispatcher/actions";
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { ButtonEvent } from "../elements/AccessibleButton";
import { roomContextDetailsText } from "../../../utils/i18n-helpers";
+import { isLocationEvent } from "../../../utils/EventUtils";
+import { isSelfLocation, locationEventGeoUri } from "../../../utils/location";
const AVATAR_SIZE = 30;
@@ -131,8 +135,7 @@ const Entry: React.FC = ({ room, type, content, matrixClient: cli,
@@ -147,7 +150,6 @@ const Entry: React.FC = ({ room, type, content, matrixClient: cli,
onClick={send}
disabled={disabled}
title={title}
- yOffset={-20}
alignment={Alignment.Top}
>
{ _t("Send") }
@@ -156,6 +158,34 @@ const Entry: React.FC = ({ room, type, content, matrixClient: cli,
;
};
+const getStrippedEventContent = (event: MatrixEvent): IContent => {
+ const {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ "m.relates_to": _, // strip relations - in future we will attach a relation pointing at the original event
+ // We're taking a shallow copy here to avoid https://github.com/vector-im/element-web/issues/10924
+ ...content
+ } = event.getContent();
+
+ // self location shares should have their description removed
+ // and become 'pin' share type
+ if (isLocationEvent(event) && isSelfLocation(content as ILocationContent)) {
+ const timestamp = M_TIMESTAMP.findIn(content);
+ const geoUri = locationEventGeoUri(event);
+ return {
+ ...content,
+ ...makeLocationContent(
+ undefined, // text
+ geoUri,
+ timestamp || Date.now(),
+ undefined, // description
+ LocationAssetType.Pin,
+ ),
+ };
+ }
+
+ return content;
+};
+
const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCreator, onFinished }) => {
const userId = cli.getUserId();
const [profileInfo, setProfileInfo] = useState({});
@@ -163,12 +193,7 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr
cli.getProfileInfo(userId).then(info => setProfileInfo(info));
}, [cli, userId]);
- const {
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
- "m.relates_to": _, // strip relations - in future we will attach a relation pointing at the original event
- // We're taking a shallow copy here to avoid https://github.com/vector-im/element-web/issues/10924
- ...content
- } = event.getContent();
+ const content = getStrippedEventContent(event);
// For the message preview we fake the sender as ourselves
const mockEvent = new MatrixEvent({
@@ -262,6 +287,7 @@ const ForwardDialog: React.FC = ({ matrixClient: cli, event, permalinkCr
{ rooms.length > 0 ? (
rooms.slice(start, end).map(room =>
diff --git a/src/components/views/dialogs/KeySignatureUploadFailedDialog.tsx b/src/components/views/dialogs/KeySignatureUploadFailedDialog.tsx
index 381c96dc660..72ce6bd3ba1 100644
--- a/src/components/views/dialogs/KeySignatureUploadFailedDialog.tsx
+++ b/src/components/views/dialogs/KeySignatureUploadFailedDialog.tsx
@@ -29,7 +29,7 @@ interface IProps extends IDialogProps {
error: string;
}>>;
source: string;
- continuation: () => void;
+ continuation: () => Promise;
}
const KeySignatureUploadFailedDialog: React.FC = ({
diff --git a/src/components/views/dialogs/MessageEditHistoryDialog.tsx b/src/components/views/dialogs/MessageEditHistoryDialog.tsx
index 2dedfb52937..0f51530a128 100644
--- a/src/components/views/dialogs/MessageEditHistoryDialog.tsx
+++ b/src/components/views/dialogs/MessageEditHistoryDialog.tsx
@@ -138,7 +138,8 @@ export default class MessageEditHistoryDialog extends React.PureComponent));
+ />
+ ));
lastEvent = e;
});
return nodes;
diff --git a/src/components/views/dialogs/ShareDialog.tsx b/src/components/views/dialogs/ShareDialog.tsx
index cb06d09d802..f07964650f3 100644
--- a/src/components/views/dialogs/ShareDialog.tsx
+++ b/src/components/views/dialogs/ShareDialog.tsx
@@ -52,7 +52,7 @@ const socials = [
}, {
name: 'Reddit',
img: require("../../../../res/img/social/reddit.png"),
- url: (url) => `http://www.reddit.com/submit?url=${url}`,
+ url: (url) => `https://www.reddit.com/submit?url=${url}`,
}, {
name: 'email',
img: require("../../../../res/img/social/email-1.png"),
diff --git a/src/components/views/dialogs/SpotlightDialog.tsx b/src/components/views/dialogs/SpotlightDialog.tsx
index f579e262875..f5efc0b8dc8 100644
--- a/src/components/views/dialogs/SpotlightDialog.tsx
+++ b/src/components/views/dialogs/SpotlightDialog.tsx
@@ -74,6 +74,7 @@ import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
import { PosthogAnalytics } from "../../../PosthogAnalytics";
import { getCachedRoomIDForAlias } from "../../../RoomAliasCache";
import { roomContextDetailsText, spaceContextDetailsText } from "../../../utils/i18n-helpers";
+import { RecentAlgorithm } from "../../../stores/room-list/algorithms/tag-sorting/RecentAlgorithm";
const MAX_RECENT_SEARCHES = 10;
const SECTION_LIMIT = 50; // only show 50 results per section for performance reasons
@@ -210,6 +211,8 @@ type Result = IRoomResult | IResult;
const isRoomResult = (result: any): result is IRoomResult => !!result?.room;
+const recentAlgorithm = new RecentAlgorithm();
+
export const useWebSearchMetrics = (numResults: number, queryLength: number, viaSpotlight: boolean): void => {
useEffect(() => {
if (!queryLength) return;
@@ -280,6 +283,7 @@ const SpotlightDialog: React.FC = ({ initialText = "", onFinished }) =>
const results: [Result[], Result[], Result[]] = [[], [], []];
+ // Group results in their respective sections
possibleResults.forEach(entry => {
if (isRoomResult(entry)) {
if (!entry.room.normalizedName.includes(normalizedQuery) &&
@@ -295,8 +299,25 @@ const SpotlightDialog: React.FC = ({ initialText = "", onFinished }) =>
results[entry.section].push(entry);
});
+ // Sort results by most recent activity
+
+ const myUserId = cli.getUserId();
+ for (const resultArray of results) {
+ resultArray.sort((a: Result, b: Result) => {
+ // This is not a room result, it should appear at the bottom of
+ // the list
+ if (!(a as IRoomResult).room) return 1;
+ if (!(b as IRoomResult).room) return -1;
+
+ const roomA = (a as IRoomResult).room;
+ const roomB = (b as IRoomResult).room;
+
+ return recentAlgorithm.getLastTs(roomB, myUserId) - recentAlgorithm.getLastTs(roomA, myUserId);
+ });
+ }
+
return results;
- }, [possibleResults, trimmedQuery]);
+ }, [possibleResults, trimmedQuery, cli]);
const numResults = trimmedQuery ? people.length + rooms.length + spaces.length : 0;
useWebSearchMetrics(numResults, query.length, true);
@@ -367,16 +388,16 @@ const SpotlightDialog: React.FC = ({ initialText = "", onFinished }) =>
);
}
- const otherResult = (result as IResult);
+ // IResult case
return (
);
};
diff --git a/src/components/views/dialogs/TabbedIntegrationManagerDialog.tsx b/src/components/views/dialogs/TabbedIntegrationManagerDialog.tsx
deleted file mode 100644
index 5a5d6e38229..00000000000
--- a/src/components/views/dialogs/TabbedIntegrationManagerDialog.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-/*
-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 { Room } from "matrix-js-sdk/src/models/room";
-import classNames from 'classnames';
-import { logger } from "matrix-js-sdk/src/logger";
-
-import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
-import { dialogTermsInteractionCallback, TermsNotSignedError } from "../../../Terms";
-import * as ScalarMessaging from "../../../ScalarMessaging";
-import { IntegrationManagerInstance } from "../../../integrations/IntegrationManagerInstance";
-import ScalarAuthClient from "../../../ScalarAuthClient";
-import AccessibleButton from "../elements/AccessibleButton";
-import IntegrationManager from "../settings/IntegrationManager";
-import { IDialogProps } from "./IDialogProps";
-
-interface IProps extends IDialogProps {
- /**
- * Optional room where the integration manager should be open to
- */
- room?: Room;
-
- /**
- * Optional screen to open on the integration manager
- */
- screen?: string;
-
- /**
- * Optional integration ID to open in the integration manager
- */
- integrationId?: string;
-}
-
-interface IState {
- managers: IntegrationManagerInstance[];
- busy: boolean;
- currentIndex: number;
- currentConnected: boolean;
- currentLoading: boolean;
- currentScalarClient: ScalarAuthClient;
-}
-
-export default class TabbedIntegrationManagerDialog extends React.Component {
- constructor(props: IProps) {
- super(props);
-
- this.state = {
- managers: IntegrationManagers.sharedInstance().getOrderedManagers(),
- busy: true,
- currentIndex: 0,
- currentConnected: false,
- currentLoading: true,
- currentScalarClient: null,
- };
- }
-
- public componentDidMount(): void {
- this.openManager(0, true);
- }
-
- private openManager = async (i: number, force = false): Promise => {
- if (i === this.state.currentIndex && !force) return;
-
- const manager = this.state.managers[i];
- const client = manager.getScalarClient();
- this.setState({
- busy: true,
- currentIndex: i,
- currentLoading: true,
- currentConnected: false,
- currentScalarClient: client,
- });
-
- ScalarMessaging.setOpenManagerUrl(manager.uiUrl);
-
- client.setTermsInteractionCallback((policyInfo, agreedUrls) => {
- // To avoid visual glitching of two modals stacking briefly, we customise the
- // terms dialog sizing when it will appear for the integration manager so that
- // it gets the same basic size as the IM's own modal.
- return dialogTermsInteractionCallback(
- policyInfo, agreedUrls, 'mx_TermsDialog_forIntegrationManager',
- );
- });
-
- try {
- await client.connect();
- if (!client.hasCredentials()) {
- this.setState({
- busy: false,
- currentLoading: false,
- currentConnected: false,
- });
- } else {
- this.setState({
- busy: false,
- currentLoading: false,
- currentConnected: true,
- });
- }
- } catch (e) {
- if (e instanceof TermsNotSignedError) {
- return;
- }
-
- logger.error(e);
- this.setState({
- busy: false,
- currentLoading: false,
- currentConnected: false,
- });
- }
- };
-
- private renderTabs(): JSX.Element[] {
- return this.state.managers.map((m, i) => {
- const classes = classNames({
- 'mx_TabbedIntegrationManagerDialog_tab': true,
- 'mx_TabbedIntegrationManagerDialog_currentTab': this.state.currentIndex === i,
- });
- return (
- this.openManager(i)}
- key={`tab_${i}`}
- disabled={this.state.busy}
- >
- { m.name }
-
- );
- });
- }
-
- public renderTab(): JSX.Element {
- let uiUrl = null;
- if (this.state.currentScalarClient) {
- uiUrl = this.state.currentScalarClient.getScalarInterfaceUrlForRoom(
- this.props.room,
- this.props.screen,
- this.props.integrationId,
- );
- }
- return {/* no-op */}}
- />;
- }
-
- public render(): JSX.Element {
- return (
-
-
- { this.renderTabs() }
-
-
- { this.renderTab() }
-
-
{ additive }
- { cancelButton }
- { this.props.children }
-
+
+ { cancelButton }
+ { this.props.children }
+
+
);
}
diff --git a/src/components/views/elements/ErrorBoundary.tsx b/src/components/views/elements/ErrorBoundary.tsx
index 89e351bb797..825ff604c7f 100644
--- a/src/components/views/elements/ErrorBoundary.tsx
+++ b/src/components/views/elements/ErrorBoundary.tsx
@@ -53,7 +53,7 @@ export default class ErrorBoundary extends React.PureComponent<{}, IState> {
// in their own `console.error` invocation.
logger.error(error);
logger.error(
- "The above error occured while React was rendering the following components:",
+ "The above error occurred while React was rendering the following components:",
componentStack,
);
}
diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx
index 566eddbe07e..92a175a1cb4 100644
--- a/src/components/views/elements/FacePile.tsx
+++ b/src/components/views/elements/FacePile.tsx
@@ -31,10 +31,16 @@ interface IProps extends HTMLAttributes {
const FacePile: FC = ({ members, faceSize, overflow, tooltip, children, ...props }) => {
const faces = members.map(
- tooltip ?
- m => :
- m =>
-
+ tooltip
+ ? m =>
+ : m =>
+
,
);
@@ -45,7 +51,7 @@ const FacePile: FC = ({ members, faceSize, overflow, tooltip, children,
return
{ tooltip ? (
-
+
{ pileContents }
) : (
diff --git a/src/components/views/elements/Field.tsx b/src/components/views/elements/Field.tsx
index 3942a9eb1d4..8e4b896efd6 100644
--- a/src/components/views/elements/Field.tsx
+++ b/src/components/views/elements/Field.tsx
@@ -19,7 +19,6 @@ import classNames from 'classnames';
import { debounce } from "lodash";
import { IFieldState, IValidationResult } from "./Validation";
-import { ComponentClass } from "../../../@types/common";
import Tooltip from "./Tooltip";
// Invoke validation from user input (when typing, etc.) at most once every N ms.
@@ -83,7 +82,6 @@ export interface IInputProps extends IProps, InputHTMLAttributes;
// The element to create. Defaults to "input".
element?: "input";
- componentClass?: undefined;
// The input's value. This is a controlled component, so the value is required.
value: string;
}
@@ -93,7 +91,6 @@ interface ISelectProps extends IProps, SelectHTMLAttributes {
inputRef?: RefObject;
// To define options for a select, use
element: "select";
- componentClass?: undefined;
// The select's value. This is a controlled component, so the value is required.
value: string;
}
@@ -102,7 +99,6 @@ interface ITextareaProps extends IProps, TextareaHTMLAttributes;
element: "textarea";
- componentClass?: undefined;
// The textarea's value. This is a controlled component, so the value is required.
value: string;
}
@@ -111,8 +107,6 @@ export interface INativeOnChangeInputProps extends IProps, InputHTMLAttributes;
element: "input";
- // The custom component to render
- componentClass: ComponentClass;
// The input's value. This is a controlled component, so the value is required.
value: string;
}
@@ -248,7 +242,7 @@ export default class Field extends React.PureComponent {
public render() {
/* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */
- const { element, componentClass, inputRef, prefixComponent, postfixComponent, className, onValidate, children,
+ const { element, inputRef, prefixComponent, postfixComponent, className, onValidate, children,
tooltipContent, forceValidity, tooltipClassName, list, validateOnBlur, validateOnChange, validateOnFocus,
usePlaceholderAsHint, forceTooltipVisible,
...inputProps } = this.props;
@@ -265,7 +259,7 @@ export default class Field extends React.PureComponent {
// Appease typescript's inference
const inputProps_ = { ...inputProps, ref: this.inputRef, list };
- const fieldInput = React.createElement(this.props.componentClass || this.props.element, inputProps_, children);
+ const fieldInput = React.createElement(this.props.element, inputProps_, children);
let prefixContainer = null;
if (prefixComponent) {
diff --git a/src/components/views/elements/IRCTimelineProfileResizer.tsx b/src/components/views/elements/IRCTimelineProfileResizer.tsx
index c0e37d93d74..61fee35bdd7 100644
--- a/src/components/views/elements/IRCTimelineProfileResizer.tsx
+++ b/src/components/views/elements/IRCTimelineProfileResizer.tsx
@@ -44,7 +44,7 @@ export default class IRCTimelineProfileResizer extends React.Component this.updateCSSWidth(this.state.width));
}
diff --git a/src/components/views/elements/ImageView.tsx b/src/components/views/elements/ImageView.tsx
index fd24bc745a9..9bb1b551d59 100644
--- a/src/components/views/elements/ImageView.tsx
+++ b/src/components/views/elements/ImageView.tsx
@@ -38,6 +38,7 @@ import UIStore from '../../../stores/UIStore';
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
import { getKeyBindingsManager } from "../../../KeyBindingsManager";
+import { presentableTextForFile } from "../../../utils/FileUtils";
// Max scale to keep gaps around the image
const MAX_SCALE = 0.95;
@@ -534,6 +535,15 @@ export default class ImageView extends React.Component {
);
}
+ let title: JSX.Element;
+ if (this.props.mxEvent?.getContent()) {
+ title = (
+
+ { presentableTextForFile(this.props.mxEvent?.getContent(), _t("Image"), true) }
+
+ );
+ }
+
return (
{
>
{ info }
+ { title }
{ zoomOutButton }
{ zoomInButton }
diff --git a/src/components/views/elements/InteractiveTooltip.tsx b/src/components/views/elements/InteractiveTooltip.tsx
index 62d0c43d06a..ca8ae4c8fd5 100644
--- a/src/components/views/elements/InteractiveTooltip.tsx
+++ b/src/components/views/elements/InteractiveTooltip.tsx
@@ -352,10 +352,10 @@ export default class InteractiveTooltip extends React.Component
const targetRect = this.target.getBoundingClientRect();
if (this.props.direction === Direction.Left) {
- const targetLeft = targetRect.left + window.pageXOffset;
+ const targetLeft = targetRect.left + window.scrollX;
return !contentRect || (targetLeft - contentRect.width > MIN_SAFE_DISTANCE_TO_WINDOW_EDGE);
} else {
- const targetRight = targetRect.right + window.pageXOffset;
+ const targetRight = targetRect.right + window.scrollX;
const spaceOnRight = UIStore.instance.windowWidth - targetRight;
return contentRect && (spaceOnRight - contentRect.width < MIN_SAFE_DISTANCE_TO_WINDOW_EDGE);
}
@@ -366,10 +366,10 @@ export default class InteractiveTooltip extends React.Component
const targetRect = this.target.getBoundingClientRect();
if (this.props.direction === Direction.Top) {
- const targetTop = targetRect.top + window.pageYOffset;
+ const targetTop = targetRect.top + window.scrollY;
return !contentRect || (targetTop - contentRect.height > MIN_SAFE_DISTANCE_TO_WINDOW_EDGE);
} else {
- const targetBottom = targetRect.bottom + window.pageYOffset;
+ const targetBottom = targetRect.bottom + window.scrollY;
const spaceBelow = UIStore.instance.windowHeight - targetBottom;
return contentRect && (spaceBelow - contentRect.height < MIN_SAFE_DISTANCE_TO_WINDOW_EDGE);
}
@@ -429,10 +429,10 @@ export default class InteractiveTooltip extends React.Component
const targetRect = this.target.getBoundingClientRect();
// The window X and Y offsets are to adjust position when zoomed in to page
- const targetLeft = targetRect.left + window.pageXOffset;
- const targetRight = targetRect.right + window.pageXOffset;
- const targetBottom = targetRect.bottom + window.pageYOffset;
- const targetTop = targetRect.top + window.pageYOffset;
+ const targetLeft = targetRect.left + window.scrollX;
+ const targetRight = targetRect.right + window.scrollX;
+ const targetBottom = targetRect.bottom + window.scrollY;
+ const targetTop = targetRect.top + window.scrollY;
// Place the tooltip above the target by default. If we find that the
// tooltip content would extend past the safe area towards the window
diff --git a/src/components/views/elements/LanguageDropdown.tsx b/src/components/views/elements/LanguageDropdown.tsx
index 7d19dbfce18..cf1dfedcce7 100644
--- a/src/components/views/elements/LanguageDropdown.tsx
+++ b/src/components/views/elements/LanguageDropdown.tsx
@@ -99,7 +99,7 @@ export default class LanguageDropdown extends React.Component {
});
// default value here too, otherwise we need to handle null / undefined
- // values between mounting and the initial value propgating
+ // values between mounting and the initial value propagating
let language = SettingsStore.getValue("language", null, /*excludeDefault:*/true);
let value = null;
if (language) {
diff --git a/src/components/views/elements/Linkify.tsx b/src/components/views/elements/Linkify.tsx
new file mode 100644
index 00000000000..4d75fb79218
--- /dev/null
+++ b/src/components/views/elements/Linkify.tsx
@@ -0,0 +1,44 @@
+/*
+Copyright 2022 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, { useLayoutEffect, useRef } from "react";
+
+import { linkifyElement } from "../../../HtmlUtils";
+
+interface Props {
+ as?: string;
+ children: React.ReactNode;
+ onClick?: (ev: MouseEvent) => void;
+}
+
+export function Linkify({
+ as = "div",
+ children,
+ onClick,
+}: Props): JSX.Element {
+ const ref = useRef();
+
+ useLayoutEffect(() => {
+ linkifyElement(ref.current);
+ }, [children]);
+
+ return React.createElement(as, {
+ children,
+ ref,
+ onClick,
+ });
+}
+
diff --git a/src/components/views/elements/MiniAvatarUploader.tsx b/src/components/views/elements/MiniAvatarUploader.tsx
index 43e66db09c1..c501c92ac9f 100644
--- a/src/components/views/elements/MiniAvatarUploader.tsx
+++ b/src/components/views/elements/MiniAvatarUploader.tsx
@@ -14,18 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, { useContext, useRef, useState } from 'react';
-import { EventType } from 'matrix-js-sdk/src/@types/event';
import classNames from 'classnames';
+import { EventType } from 'matrix-js-sdk/src/@types/event';
+import React, { useContext, useRef, useState, MouseEvent } from 'react';
-import AccessibleButton from "./AccessibleButton";
-import Spinner from "./Spinner";
+import Analytics from "../../../Analytics";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import RoomContext from "../../../contexts/RoomContext";
import { useTimeout } from "../../../hooks/useTimeout";
-import Analytics from "../../../Analytics";
import { TranslatedString } from '../../../languageHandler';
-import RoomContext from "../../../contexts/RoomContext";
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
+import AccessibleButton from "./AccessibleButton";
+import Spinner from "./Spinner";
export const AVATAR_SIZE = 52;
@@ -34,9 +34,13 @@ interface IProps {
noAvatarLabel?: TranslatedString;
hasAvatarLabel?: TranslatedString;
setAvatarUrl(url: string): Promise;
+ isUserAvatar?: boolean;
+ onClick?(ev: MouseEvent): void;
}
-const MiniAvatarUploader: React.FC = ({ hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, children }) => {
+const MiniAvatarUploader: React.FC = ({
+ hasAvatar, hasAvatarLabel, noAvatarLabel, setAvatarUrl, isUserAvatar, children, onClick,
+}) => {
const cli = useContext(MatrixClientContext);
const [busy, setBusy] = useState(false);
const [hover, setHover] = useState(false);
@@ -54,7 +58,7 @@ const MiniAvatarUploader: React.FC = ({ hasAvatar, hasAvatarLabel, noAva
const label = (hasAvatar || busy) ? hasAvatarLabel : noAvatarLabel;
const { room } = useContext(RoomContext);
- const canSetAvatar = room?.currentState.maySendStateEvent(EventType.RoomAvatar, cli.getUserId());
+ const canSetAvatar = isUserAvatar || room?.currentState?.maySendStateEvent(EventType.RoomAvatar, cli.getUserId());
if (!canSetAvatar) return { children };
const visible = !!label && (hover || show);
@@ -63,7 +67,10 @@ const MiniAvatarUploader: React.FC = ({ hasAvatar, hasAvatarLabel, noAva
type="file"
ref={uploadRef}
className="mx_MiniAvatarUploader_input"
- onClick={chromeFileInputFix}
+ onClick={(ev) => {
+ chromeFileInputFix(ev);
+ onClick?.(ev);
+ }}
onChange={async (ev) => {
if (!ev.target.files?.length) return;
setBusy(true);
diff --git a/src/components/views/elements/NativeOnChangeInput.tsx b/src/components/views/elements/NativeOnChangeInput.tsx
deleted file mode 100644
index 0937fd8de9f..00000000000
--- a/src/components/views/elements/NativeOnChangeInput.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
-Copyright 2022 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 { useCombinedRefs } from "../../../hooks/useCombinedRefs";
-
-interface IProps extends Omit, 'onChange' | 'onInput'> {
- onChange?: (event: Event) => void;
- onInput?: (event: Event) => void;
-}
-
-/**
-* This component restores the native 'onChange' and 'onInput' behavior of
-* JavaScript which have important differences for certain types. This is
-* necessary because in React, the `onChange` handler behaves like the native
-* `oninput` handler and there is no way to tell the difference between an
-* `input` vs `change` event.
-*
-* via https://stackoverflow.com/a/62383569/796832 and
-* https://github.com/facebook/react/issues/9657#issuecomment-643970199
-*
-* See:
-* - https://reactjs.org/docs/dom-elements.html#onchange
-* - https://github.com/facebook/react/issues/3964
-* - https://github.com/facebook/react/issues/9657
-* - https://github.com/facebook/react/issues/14857
-*
-* Examples:
-*
-* We use this for the date picker so we can distinguish from
-* a final date picker selection (onChange) vs navigating the months in the date
-* picker (onInput).
-*
-* This is also potentially useful for because the native
-* events behave in such a way that moving the slider around triggers an onInput
-* event and releasing it triggers onChange.
-*/
-const NativeOnChangeInput: React.FC = React.forwardRef((props: IProps, ref) => {
- const registerCallbacks = (input: HTMLInputElement | null) => {
- if (input) {
- input.onchange = props.onChange;
- input.oninput = props.onInput;
- }
- };
-
- return {}}
- onInput={() => {}}
- />;
-});
-
-export default NativeOnChangeInput;
diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.tsx
similarity index 71%
rename from src/components/views/elements/Pill.js
rename to src/components/views/elements/Pill.tsx
index 7d5a9973c7f..f344f894569 100644
--- a/src/components/views/elements/Pill.js
+++ b/src/components/views/elements/Pill.tsx
@@ -13,67 +13,82 @@ 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 { Room } from 'matrix-js-sdk/src/models/room';
import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
-import PropTypes from 'prop-types';
import { logger } from "matrix-js-sdk/src/logger";
+import { MatrixClient } from 'matrix-js-sdk/src/client';
import dis from '../../../dispatcher/dispatcher';
import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { getPrimaryPermalinkEntity, parsePermalink } from "../../../utils/permalinks/Permalinks";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import { Action } from "../../../dispatcher/actions";
-import Tooltip from './Tooltip';
-import RoomAvatar from "../avatars/RoomAvatar";
-import MemberAvatar from "../avatars/MemberAvatar";
+import Tooltip, { Alignment } from './Tooltip';
+import RoomAvatar from '../avatars/RoomAvatar';
+import MemberAvatar from '../avatars/MemberAvatar';
+
+export enum PillType {
+ UserMention = 'TYPE_USER_MENTION',
+ RoomMention = 'TYPE_ROOM_MENTION',
+ AtRoomMention = 'TYPE_AT_ROOM_MENTION', // '@room' mention
+}
+
+interface IProps {
+ // The Type of this Pill. If url is given, this is auto-detected.
+ type?: PillType;
+ // The URL to pillify (no validation is done)
+ url?: string;
+ // Whether the pill is in a message
+ inMessage?: boolean;
+ // The room in which this pill is being rendered
+ room?: Room;
+ // Whether to include an avatar in the pill
+ shouldShowPillAvatar?: boolean;
+}
+
+interface IState {
+ // ID/alias of the room/user
+ resourceId: string;
+ // Type of pill
+ pillType: string;
+ // The member related to the user pill
+ member?: RoomMember;
+ // The room related to the room pill
+ room?: Room;
+ // Is the user hovering the pill
+ hover: boolean;
+}
-class Pill extends React.Component {
- static roomNotifPos(text) {
+export default class Pill extends React.Component {
+ private unmounted = true;
+ private matrixClient: MatrixClient;
+
+ public static roomNotifPos(text: string): number {
return text.indexOf("@room");
}
- static roomNotifLen() {
+ public static roomNotifLen(): number {
return "@room".length;
}
- static TYPE_USER_MENTION = 'TYPE_USER_MENTION';
- static TYPE_ROOM_MENTION = 'TYPE_ROOM_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)
- url: PropTypes.string,
- // Whether the pill is in a message
- inMessage: PropTypes.bool,
- // The room in which this pill is being rendered
- room: PropTypes.instanceOf(Room),
- // Whether to include an avatar in the pill
- shouldShowPillAvatar: PropTypes.bool,
- // Whether to render this pill as if it were highlit by a selection
- isSelected: PropTypes.bool,
- };
-
- state = {
- // ID/alias of the room/user
- resourceId: null,
- // Type of pill
- pillType: null,
+ constructor(props: IProps) {
+ super(props);
- // The member related to the user pill
- member: null,
- // The room related to the room pill
- room: null,
- // Is the user hovering the pill
- hover: false,
- };
+ this.state = {
+ resourceId: null,
+ pillType: null,
+ member: null,
+ room: null,
+ hover: false,
+ };
+ }
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
- // eslint-disable-next-line camelcase
- async UNSAFE_componentWillReceiveProps(nextProps) {
+ // eslint-disable-next-line camelcase, @typescript-eslint/naming-convention
+ public async UNSAFE_componentWillReceiveProps(nextProps: IProps): Promise {
let resourceId;
let prefix;
@@ -89,28 +104,28 @@ class Pill extends React.Component {
}
const pillType = this.props.type || {
- '@': Pill.TYPE_USER_MENTION,
- '#': Pill.TYPE_ROOM_MENTION,
- '!': Pill.TYPE_ROOM_MENTION,
+ '@': PillType.UserMention,
+ '#': PillType.RoomMention,
+ '!': PillType.RoomMention,
}[prefix];
let member;
let room;
switch (pillType) {
- case Pill.TYPE_AT_ROOM_MENTION: {
+ case PillType.AtRoomMention: {
room = nextProps.room;
}
break;
- case Pill.TYPE_USER_MENTION: {
+ case PillType.UserMention: {
const localMember = nextProps.room ? nextProps.room.getMember(resourceId) : undefined;
member = localMember;
if (!localMember) {
member = new RoomMember(null, resourceId);
this.doProfileLookup(resourceId, member);
}
- break;
}
- case Pill.TYPE_ROOM_MENTION: {
+ break;
+ case PillType.RoomMention: {
const localRoom = resourceId[0] === '#' ?
MatrixClientPeg.get().getRooms().find((r) => {
return r.getCanonicalAlias() === resourceId ||
@@ -122,39 +137,39 @@ class Pill extends React.Component {
// a room avatar and name.
// this.doRoomProfileLookup(resourceId, member);
}
- break;
}
+ break;
}
this.setState({ resourceId, pillType, member, room });
}
- componentDidMount() {
- this._unmounted = false;
- this._matrixClient = MatrixClientPeg.get();
+ public componentDidMount(): void {
+ this.unmounted = false;
+ this.matrixClient = MatrixClientPeg.get();
// eslint-disable-next-line new-cap
this.UNSAFE_componentWillReceiveProps(this.props); // HACK: We shouldn't be calling lifecycle functions ourselves.
}
- componentWillUnmount() {
- this._unmounted = true;
+ public componentWillUnmount(): void {
+ this.unmounted = true;
}
- onMouseOver = () => {
+ private onMouseOver = (): void => {
this.setState({
hover: true,
});
};
- onMouseLeave = () => {
+ private onMouseLeave = (): void => {
this.setState({
hover: false,
});
};
- doProfileLookup(userId, member) {
+ private doProfileLookup(userId: string, member): void {
MatrixClientPeg.get().getProfileInfo(userId).then((resp) => {
- if (this._unmounted) {
+ if (this.unmounted) {
return;
}
member.name = resp.displayname;
@@ -173,7 +188,7 @@ class Pill extends React.Component {
});
}
- onUserPillClicked = (e) => {
+ private onUserPillClicked = (e): void => {
e.preventDefault();
dis.dispatch({
action: Action.ViewUser,
@@ -181,7 +196,7 @@ class Pill extends React.Component {
});
};
- render() {
+ public render(): JSX.Element {
const resource = this.state.resourceId;
let avatar = null;
@@ -191,7 +206,7 @@ class Pill extends React.Component {
let href = this.props.url;
let onClick;
switch (this.state.pillType) {
- case Pill.TYPE_AT_ROOM_MENTION: {
+ case PillType.AtRoomMention: {
const room = this.props.room;
if (room) {
linkText = "@room";
@@ -200,9 +215,9 @@ class Pill extends React.Component {
}
pillClass = 'mx_AtRoomPill';
}
- break;
}
- case Pill.TYPE_USER_MENTION: {
+ break;
+ case PillType.UserMention: {
// If this user is not a member of this room, default to the empty member
const member = this.state.member;
if (member) {
@@ -210,15 +225,15 @@ class Pill extends React.Component {
member.rawDisplayName = member.rawDisplayName || '';
linkText = member.rawDisplayName;
if (this.props.shouldShowPillAvatar) {
- avatar = ;
+ avatar = ;
}
pillClass = 'mx_UserPill';
href = null;
onClick = this.onUserPillClicked;
}
- break;
}
- case Pill.TYPE_ROOM_MENTION: {
+ break;
+ case PillType.RoomMention: {
const room = this.state.room;
if (room) {
linkText = room.name || resource;
@@ -226,31 +241,27 @@ class Pill extends React.Component {
avatar = ;
}
}
- pillClass = 'mx_RoomPill';
- break;
+ pillClass = room?.isSpaceRoom() ? "mx_SpacePill" : "mx_RoomPill";
}
+ break;
}
const classes = classNames("mx_Pill", pillClass, {
"mx_UserPill_me": userId === MatrixClientPeg.get().getUserId(),
- "mx_UserPill_selected": this.props.isSelected,
});
if (this.state.pillType) {
- const { yOffset } = this.props;
-
let tip;
if (this.state.hover && resource) {
- tip = ;
+ tip = ;
}
- return
+ return
{ this.props.inMessage ?
@@ -260,7 +271,6 @@ class Pill extends React.Component {
:
@@ -275,5 +285,3 @@ class Pill extends React.Component {
}
}
}
-
-export default Pill;
diff --git a/src/components/views/elements/ReplyChain.tsx b/src/components/views/elements/ReplyChain.tsx
index 3897e75d6d6..f6d32dc1a3d 100644
--- a/src/components/views/elements/ReplyChain.tsx
+++ b/src/components/views/elements/ReplyChain.tsx
@@ -31,8 +31,8 @@ import { getUserNameColorClass } from "../../../utils/FormattingUtils";
import { Action } from "../../../dispatcher/actions";
import Spinner from './Spinner';
import ReplyTile from "../rooms/ReplyTile";
-import Pill from './Pill';
import { UserNameColorMode } from '../../../settings/enums/UserNameColorMode';
+import Pill, { PillType } from './Pill';
import { ButtonEvent } from './AccessibleButton';
import { getParentEventId, shouldDisplayReply } from '../../../utils/Reply';
import RoomContext from "../../../contexts/RoomContext";
@@ -170,7 +170,7 @@ export default class ReplyChain extends React.Component {
await this.matrixClient.getEventTimeline(this.room.getUnfilteredTimelineSet(), eventId);
} catch (e) {
// if it fails catch the error and return early, there's no point trying to find the event in this case.
- // Return null as it is falsey and thus should be treated as an error (as the event cannot be resolved).
+ // Return null as it is falsy and thus should be treated as an error (as the event cannot be resolved).
return null;
}
return this.room.findEventById(eventId);
@@ -228,7 +228,7 @@ export default class ReplyChain extends React.Component {
),
'pill': (
= (
// reverse members in tooltip order to make the order between the two match up.
const commaSeparatedMembers = shownMembers.map(m => m.name).reverse().join(", ");
- let tooltip: ReactNode;
- if (props.onClick) {
- let subText: string;
- if (isJoined) {
- subText = _t("Including you, %(commaSeparatedMembers)s", { commaSeparatedMembers });
- } else {
- subText = _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers });
- }
-
- tooltip =
-
- { _t("View all %(count)s members", { count }) }
-
-
- { subText }
-
-
+
+ { props.onClick
+ ? _t("View all %(count)s members", { count })
+ : _t("%(count)s members", { count }) }
+
+
+ { isJoined
+ ? _t("Including you, %(commaSeparatedMembers)s", { commaSeparatedMembers })
+ : _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers }) }
+
+
+
{
+ if ((ev.target as HTMLElement).tagName.toUpperCase() === "A") {
+ modal.close();
+ }
+ }}
+ >
+ { topic }
+
+ { canSetTopic &&
{
+ modal.close();
+ dis.dispatch({ action: "open_room_settings" });
+ }}>
+ { _t("Edit topic") }
+ }
+
+
+
+ { topic }
+
+
+
;
+}
diff --git a/src/components/views/elements/SSOButtons.tsx b/src/components/views/elements/SSOButtons.tsx
index b11e74e1e27..16f860792bb 100644
--- a/src/components/views/elements/SSOButtons.tsx
+++ b/src/components/views/elements/SSOButtons.tsx
@@ -29,7 +29,7 @@ import { mediaFromMxc } from "../../../customisations/Media";
import { PosthogAnalytics } from "../../../PosthogAnalytics";
interface ISSOButtonProps extends Omit {
- idp: IIdentityProvider;
+ idp?: IIdentityProvider;
mini?: boolean;
}
@@ -84,7 +84,7 @@ const SSOButton: React.FC = ({
const label = idp ? _t("Continue with %(provider)s", { provider: idp.name }) : _t("Sign in with single sign-on");
const onClick = () => {
- const authenticationType = getAuthenticationType(idp.brand);
+ const authenticationType = getAuthenticationType(idp?.brand ?? "");
PosthogAnalytics.instance.setAuthenticationType(authenticationType);
PlatformPeg.get().startSingleSignOn(matrixClient, loginType, fragmentAfterLogin, idp?.id);
};
diff --git a/src/components/views/elements/DesktopBuildsNotice.tsx b/src/components/views/elements/SearchWarning.tsx
similarity index 74%
rename from src/components/views/elements/DesktopBuildsNotice.tsx
rename to src/components/views/elements/SearchWarning.tsx
index cb664f02d01..ef2486b0b74 100644
--- a/src/components/views/elements/DesktopBuildsNotice.tsx
+++ b/src/components/views/elements/SearchWarning.tsx
@@ -35,28 +35,30 @@ interface IProps {
kind: WarningKind;
}
-export default function DesktopBuildsNotice({ isRoomEncrypted, kind }: IProps) {
+export default function SearchWarning({ isRoomEncrypted, kind }: IProps) {
if (!isRoomEncrypted) return null;
if (EventIndexPeg.get()) return null;
if (EventIndexPeg.error) {
- return <>
- { _t("Message search initialisation failed, check your settings for more information", {}, {
- a: sub => (
- {
- evt.preventDefault();
- dis.dispatch({
- action: Action.ViewUserSettings,
- initialTabId: UserTab.Security,
- });
- }}
- >
- { sub }
- ),
- }) }
- ;
+ return (
+
+ { _t("Message search initialisation failed, check
your settings for more information", {}, {
+ a: sub => (
+
{
+ evt.preventDefault();
+ dis.dispatch({
+ action: Action.ViewUserSettings,
+ initialTabId: UserTab.Security,
+ });
+ }}
+ >
+ { sub }
+ ),
+ }) }
+
+
{ logo }
{ text }
diff --git a/src/components/views/elements/SpellCheckLanguagesDropdown.tsx b/src/components/views/elements/SpellCheckLanguagesDropdown.tsx
index 126898a4ff1..a269ac00106 100644
--- a/src/components/views/elements/SpellCheckLanguagesDropdown.tsx
+++ b/src/components/views/elements/SpellCheckLanguagesDropdown.tsx
@@ -99,7 +99,7 @@ export default class SpellCheckLanguagesDropdown extends React.Component
{
public static readonly defaultProps = {
visible: true,
- yOffset: 0,
alignment: Alignment.Natural,
};
@@ -102,50 +97,49 @@ export default class Tooltip extends React.Component {
// positioned, also taking into account any window zoom
private updatePosition(style: CSSProperties) {
const parentBox = this.parent.getBoundingClientRect();
- let offset = 0;
- if (parentBox.height > MIN_TOOLTIP_HEIGHT) {
- offset = Math.floor((parentBox.height - MIN_TOOLTIP_HEIGHT) / 2);
- } else {
- // The tooltip is larger than the parent height: figure out what offset
- // we need so that we're still centered.
- offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT);
- }
const width = UIStore.instance.windowWidth;
+ const spacing = 6;
const parentWidth = (
this.props.maxParentWidth
? Math.min(parentBox.width, this.props.maxParentWidth)
: parentBox.width
);
- const baseTop = (parentBox.top - 2 + this.props.yOffset) + window.pageYOffset;
- const top = baseTop + offset;
- const right = width - parentBox.left - window.pageXOffset;
- const left = parentBox.right + window.pageXOffset;
+ const baseTop = parentBox.top + window.scrollY;
+ const centerTop = parentBox.top + window.scrollY + (parentBox.height / 2);
+ const right = width - parentBox.left - window.scrollX;
+ const left = parentBox.right + window.scrollX;
const horizontalCenter = (
- parentBox.left - window.pageXOffset + (parentWidth / 2)
+ parentBox.left - window.scrollX + (parentWidth / 2)
);
+
switch (this.props.alignment) {
case Alignment.Natural:
if (parentBox.right > width / 2) {
- style.right = right;
- style.top = top;
+ style.right = right + spacing;
+ style.top = centerTop;
+ style.transform = "translateY(-50%)";
break;
}
// fall through to Right
case Alignment.Right:
- style.left = left;
- style.top = top;
+ style.left = left + spacing;
+ style.top = centerTop;
+ style.transform = "translateY(-50%)";
break;
case Alignment.Left:
- style.right = right;
- style.top = top;
+ style.right = right + spacing;
+ style.top = centerTop;
+ style.transform = "translateY(-50%)";
break;
case Alignment.Top:
- style.top = baseTop - 16;
+ style.top = baseTop - spacing;
style.left = horizontalCenter;
+ style.transform = "translate(-50%, -100%)";
break;
case Alignment.Bottom:
- style.top = baseTop + parentBox.height;
+ style.top = baseTop + parentBox.height + spacing;
style.left = horizontalCenter;
+ style.transform = "translate(-50%)";
break;
case Alignment.InnerBottom:
style.top = baseTop + parentBox.height - 50;
@@ -153,14 +147,10 @@ export default class Tooltip extends React.Component {
style.transform = "translate(-50%)";
break;
case Alignment.TopRight:
- style.top = baseTop - 5;
- style.right = width - parentBox.right - window.pageXOffset;
- style.transform = "translate(5px, -100%)";
+ style.top = baseTop - spacing;
+ style.right = width - parentBox.right - window.scrollX;
+ style.transform = "translateY(-100%)";
break;
- case Alignment.TopCenter:
- style.top = baseTop - 5;
- style.left = horizontalCenter;
- style.transform = "translate(-50%, -100%)";
}
return style;
diff --git a/src/components/views/elements/TooltipTarget.tsx b/src/components/views/elements/TooltipTarget.tsx
index 5d30bf25396..69b4e98568b 100644
--- a/src/components/views/elements/TooltipTarget.tsx
+++ b/src/components/views/elements/TooltipTarget.tsx
@@ -14,12 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, { useState, HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
+import useFocus from "../../../hooks/useFocus";
+import useHover from "../../../hooks/useHover";
import Tooltip, { ITooltipProps } from './Tooltip';
interface IProps extends HTMLAttributes, Omit {
tooltipTargetClassName?: string;
+ ignoreHover?: (ev: React.MouseEvent) => boolean;
}
/**
@@ -34,38 +37,33 @@ const TooltipTarget: React.FC = ({
id,
label,
alignment,
- yOffset,
tooltipClassName,
maxParentWidth,
+ ignoreHover,
...rest
}) => {
- const [isVisible, setIsVisible] = useState(false);
-
- const show = () => setIsVisible(true);
- const hide = () => setIsVisible(false);
+ const [isFocused, focusProps] = useFocus();
+ const [isHovering, hoverProps] = useHover(ignoreHover || (() => false));
// No need to fill up the DOM with hidden tooltip elements. Only add the
// tooltip when we're hovering over the item (performance)
- const tooltip = isVisible && ;
return (
{ children }
diff --git a/src/components/views/elements/TruncatedList.tsx b/src/components/views/elements/TruncatedList.tsx
index 56d05515df7..57ae784caac 100644
--- a/src/components/views/elements/TruncatedList.tsx
+++ b/src/components/views/elements/TruncatedList.tsx
@@ -52,7 +52,7 @@ export default class TruncatedList extends React.Component
{
return this.props.getChildren(start, end);
} else {
// XXX: I'm not sure why anything would pass null into this, it seems
- // like a bizzare case to handle, but I'm preserving the behaviour.
+ // like a bizarre case to handle, but I'm preserving the behaviour.
// (see commit 38d5c7d5c5d5a34dc16ef5d46278315f5c57f542)
return React.Children.toArray(this.props.children).filter((c) => {
return c != null;
diff --git a/src/components/views/emojipicker/Category.tsx b/src/components/views/emojipicker/Category.tsx
index 7cd5b96bee8..d4ea4e89ffb 100644
--- a/src/components/views/emojipicker/Category.tsx
+++ b/src/components/views/emojipicker/Category.tsx
@@ -52,7 +52,7 @@ class Category extends React.PureComponent {
const { onClick, onMouseEnter, onMouseLeave, selectedEmojis, emojis } = this.props;
const emojisForRow = emojis.slice(rowIndex * 8, (rowIndex + 1) * 8);
return ({
- emojisForRow.map(emoji => ((
+ emojisForRow.map(emoji => (
{
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
/>
- )))
+ ))
}
);
};
diff --git a/src/components/views/emojipicker/EmojiPicker.tsx b/src/components/views/emojipicker/EmojiPicker.tsx
index 2d45c01003a..7485bae3640 100644
--- a/src/components/views/emojipicker/EmojiPicker.tsx
+++ b/src/components/views/emojipicker/EmojiPicker.tsx
@@ -255,7 +255,7 @@ class EmojiPicker extends React.Component {
>
{ this.categories.map(category => {
const emojis = this.memoizedDataByCategory[category.id];
- const categoryElement = ((
+ const categoryElement = (
{
onMouseLeave={this.onHoverEmojiEnd}
selectedEmojis={this.props.selectedEmojis}
/>
- ));
+ );
const height = EmojiPicker.categoryHeightForEmojiCount(emojis.length);
heightBefore += height;
return categoryElement;
diff --git a/src/components/views/emojipicker/QuickReactions.tsx b/src/components/views/emojipicker/QuickReactions.tsx
index c0336a759de..f53b30f565d 100644
--- a/src/components/views/emojipicker/QuickReactions.tsx
+++ b/src/components/views/emojipicker/QuickReactions.tsx
@@ -72,7 +72,7 @@ class QuickReactions extends React.Component {
}
- { QUICK_REACTIONS.map(emoji => ((
+ { QUICK_REACTIONS.map(emoji => (
{
onMouseLeave={this.onMouseLeave}
selectedEmojis={this.props.selectedEmojis}
/>
- ))) }
+ )) }
);
diff --git a/src/components/views/location/LocationButton.tsx b/src/components/views/location/LocationButton.tsx
index e6a6f8d92e7..b119268588f 100644
--- a/src/components/views/location/LocationButton.tsx
+++ b/src/components/views/location/LocationButton.tsx
@@ -58,7 +58,6 @@ export const LocationButton: React.FC = ({ roomId, sender, menuPosition,
const className = classNames(
"mx_MessageComposer_button",
- "mx_MessageComposer_location",
{
"mx_MessageComposer_button_highlight": menuDisplayed,
},
@@ -67,6 +66,7 @@ export const LocationButton: React.FC = ({ roomId, sender, menuPosition,
return
diff --git a/src/components/views/location/LocationShareMenu.tsx b/src/components/views/location/LocationShareMenu.tsx
index 8be6c070db2..795a7802375 100644
--- a/src/components/views/location/LocationShareMenu.tsx
+++ b/src/components/views/location/LocationShareMenu.tsx
@@ -21,11 +21,10 @@ import { IEventRelation } from 'matrix-js-sdk/src/models/event';
import MatrixClientContext from '../../../contexts/MatrixClientContext';
import ContextMenu, { AboveLeftOf } from '../../structures/ContextMenu';
import LocationPicker, { ILocationPickerProps } from "./LocationPicker";
-import { shareLiveLocation, shareLocation } from './shareLocation';
+import { shareLiveLocation, shareLocation, LocationShareType } from './shareLocation';
import SettingsStore from '../../../settings/SettingsStore';
import ShareDialogButtons from './ShareDialogButtons';
import ShareType from './ShareType';
-import { LocationShareType } from './shareLocation';
import { OwnProfileStore } from '../../../stores/OwnProfileStore';
import { EnableLiveShare } from './EnableLiveShare';
import { useFeatureEnabled } from '../../../hooks/useSettings';
diff --git a/src/components/views/location/Marker.tsx b/src/components/views/location/Marker.tsx
index bacade71cf4..075d2d092ef 100644
--- a/src/components/views/location/Marker.tsx
+++ b/src/components/views/location/Marker.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from 'react';
+import React, { ReactNode, useState } from 'react';
import classNames from 'classnames';
import { RoomMember } from 'matrix-js-sdk/src/matrix';
@@ -28,12 +28,39 @@ interface Props {
roomMember?: RoomMember;
// use member text color as background
useMemberColor?: boolean;
+ tooltip?: ReactNode;
}
+/**
+ * Wrap with tooltip handlers when
+ * tooltip is truthy
+ */
+const OptionalTooltip: React.FC<{
+ tooltip?: ReactNode; children: ReactNode;
+}> = ({ tooltip, children }) => {
+ const [isVisible, setIsVisible] = useState(false);
+ if (!tooltip) {
+ return <>{ children };
+ }
+
+ const show = () => setIsVisible(true);
+ const hide = () => setIsVisible(false);
+ const toggleVisibility = (e: React.MouseEvent) => {
+ // stop map from zooming in on click
+ e.stopPropagation();
+ setIsVisible(!isVisible);
+ };
+
+ return
+ { children }
+ { isVisible && tooltip }
+
;
+};
+
/**
* Generic location marker
*/
-const Marker = React.forwardRef(({ id, roomMember, useMemberColor }, ref) => {
+const Marker = React.forwardRef(({ id, roomMember, useMemberColor, tooltip }, ref) => {
const memberColorClass = useMemberColor && roomMember ? getUserNameColorClass(roomMember.userId) : '';
return (({ id, roomMember, useMem
"mx_Marker_defaultColor": !memberColorClass,
})}
>
-
- { roomMember ?
-
- :
- }
-
+
+
+ { roomMember ?
+
+ :
+ }
+
+