nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Replace usage of forwardRef with React 19 ref prop (#29803)

Browse Source 
* Replace usage of `forwardRef` with React 19 ref prop

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add lint rule

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-04-24 13:31:37 +01:00
committed by GitHub
parent 5e7b58a722
commit 22d5c00174
48 changed files with 989 additions and 963 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
.eslintrc.js
View File

@@ -30,6 +30,10 @@ module.exports = {
["window.innerHeight", "window.innerWidth", "window.visualViewport"],
"Use UIStore to access window dimensions instead.",
),
...buildRestrictedPropertiesOptions(
["React.forwardRef", "*.forwardRef", "forwardRef"],
"Use ref props instead.",
),
...buildRestrictedPropertiesOptions(
["*.mxcUrlToHttp", "*.getHttpUriForMxc"],
"Use Media helper instead to centralise access for customisation.",
@@ -55,6 +59,11 @@ module.exports = {
"error",
{
paths: [
{
name: "react",
importNames: ["forwardRef"],
message: "Use ref props instead.",
},
{
name: "@testing-library/react",
message: "Please use jest-matrix-react instead",

9
src/@types/react.d.ts vendored
View File

@@ -6,16 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { type PropsWithChildren } from "react";
import type React from "react";
import { type ComponentType } from "react";
declare module "react" {
// Fix forwardRef types for Generic components - https://stackoverflow.com/a/58473012
function forwardRef<T, P extends object>(
render: (props: PropsWithChildren<P>, ref: React.ForwardedRef<T>) => React.ReactElement | null,
): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
// Fix lazy types - https://stackoverflow.com/a/71017028
function lazy<T extends ComponentType<any>>(factory: () => Promise<{ default: T }>): T;

10
src/accessibility/Toolbar.tsx
View File

@@ -6,18 +6,20 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { forwardRef } from "react";
import React, { type Ref, type JSX } from "react";
import { RovingTabIndexProvider } from "./RovingTabIndex";
import { getKeyBindingsManager } from "../KeyBindingsManager";
import { KeyBindingAction } from "./KeyboardShortcuts";
interface IProps extends Omit<React.HTMLProps<HTMLDivElement>, "onKeyDown"> {}
interface IProps extends Omit<React.HTMLProps<HTMLDivElement>, "onKeyDown"> {
ref?: Ref<HTMLDivElement>;
}
// This component implements the Toolbar design pattern from the WAI-ARIA Authoring Practices guidelines.
// https://www.w3.org/TR/wai-aria-practices-1.1/#toolbar
// All buttons passed in children must use RovingTabIndex to set `onFocus`, `isActive`, `ref`
const Toolbar = forwardRef<HTMLDivElement, IProps>(({ children, ...props }, ref) => {
const Toolbar = ({ children, ref, ...props }: IProps): JSX.Element => {
const onKeyDown = (ev: React.KeyboardEvent): void => {
const target = ev.target as HTMLElement;
// Don't interfere with input default keydown behaviour
@@ -55,6 +57,6 @@ const Toolbar = forwardRef<HTMLDivElement, IProps>(({ children, ...props }, ref)
)}
</RovingTabIndexProvider>
);
});
};
export default Toolbar;

18
src/accessibility/context_menu/ContextMenuButton.tsx
View File

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { forwardRef, type Ref } from "react";
import React, { type Ref, type JSX } from "react";
import AccessibleButton, { type ButtonProps } from "../../components/views/elements/AccessibleButton";
@@ -16,13 +16,19 @@ type Props<T extends keyof HTMLElementTagNameMap> = ButtonProps<T> & {
label?: string;
// whether the context menu is currently open
isExpanded: boolean;
ref?: Ref<HTMLElementTagNameMap[T]>;
};
// Semantic component for representing the AccessibleButton which launches a <ContextMenu />
export const ContextMenuButton = forwardRef(function <T extends keyof HTMLElementTagNameMap>(
{ label, isExpanded, children, onClick, onContextMenu, ...props }: Props<T>,
ref: Ref<HTMLElementTagNameMap[T]>,
) {
export const ContextMenuButton = function <T extends keyof HTMLElementTagNameMap>({
label,
isExpanded,
children,
onClick,
onContextMenu,
ref,
...props
}: Props<T>): JSX.Element {
return (
<AccessibleButton
{...props}
@@ -36,4 +42,4 @@ export const ContextMenuButton = forwardRef(function <T extends keyof HTMLElemen
{children}
</AccessibleButton>
);
});
};

16
src/accessibility/context_menu/ContextMenuTooltipButton.tsx
View File

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { forwardRef, type Ref } from "react";
import React, { type JSX } from "react";
import AccessibleButton, { type ButtonProps } from "../../components/views/elements/AccessibleButton";
@@ -18,10 +18,14 @@ type Props<T extends keyof HTMLElementTagNameMap> = ButtonProps<T> & {
};
// Semantic component for representing the AccessibleButton which launches a <ContextMenu />
export const ContextMenuTooltipButton = forwardRef(function <T extends keyof HTMLElementTagNameMap>(
{ isExpanded, children, onClick, onContextMenu, ...props }: Props<T>,
ref: Ref<HTMLElementTagNameMap[T]>,
) {
export const ContextMenuTooltipButton = function <T extends keyof HTMLElementTagNameMap>({
isExpanded,
children,
onClick,
onContextMenu,
ref,
...props
}: Props<T>): JSX.Element {
return (
<AccessibleButton
{...props}
@@ -35,4 +39,4 @@ export const ContextMenuTooltipButton = forwardRef(function <T extends keyof HTM
{children}
</AccessibleButton>
);
});
};

31
src/autocomplete/Components.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { forwardRef } from "react";
import React, { type Ref, type JSX } from "react";
import classNames from "classnames";
/* These were earlier stateless functional components but had to be converted
@@ -16,14 +16,24 @@ presumably wrap them in a <div> before rendering but I think this is the better
*/
interface ITextualCompletionProps {
title?: string;
subtitle?: string;
description?: string;
className?: string;
"title"?: string;
"subtitle"?: string;
"description"?: string;
"className"?: string;
"aria-selected"?: boolean;
"ref"?: Ref<HTMLDivElement>;
}
export const TextualCompletion = forwardRef<ITextualCompletionProps, any>((props, ref) => {
const { title, subtitle, description, className, "aria-selected": ariaSelectedAttribute, ...restProps } = props;
export const TextualCompletion = (props: ITextualCompletionProps): JSX.Element => {
const {
title,
subtitle,
description,
className,
"aria-selected": ariaSelectedAttribute,
ref,
...restProps
} = props;
return (
<div
{...restProps}
@@ -37,13 +47,13 @@ export const TextualCompletion = forwardRef<ITextualCompletionProps, any>((props
<span className="mx_Autocomplete_Completion_description">{description}</span>
</div>
);
});
};
interface IPillCompletionProps extends ITextualCompletionProps {
children?: React.ReactNode;
}
export const PillCompletion = forwardRef<IPillCompletionProps, any>((props, ref) => {
export const PillCompletion = (props: IPillCompletionProps): JSX.Element => {
const {
title,
subtitle,
@@ -51,6 +61,7 @@ export const PillCompletion = forwardRef<IPillCompletionProps, any>((props, ref)
className,
children,
"aria-selected": ariaSelectedAttribute,
ref,
...restProps
} = props;
return (
@@ -67,4 +78,4 @@ export const PillCompletion = forwardRef<IPillCompletionProps, any>((props, ref)
<span className="mx_Autocomplete_Completion_description">{description}</span>
</div>
);
});
};

2
src/autocomplete/UserProvider.tsx
View File

@@ -127,7 +127,7 @@ export default class UserProvider extends AutocompleteProvider {
suffix: selection.beginning && range!.start === 0 ? ": " : " ",
href: makeUserPermalink(user.userId),
component: (
<PillCompletion title={displayName} description={description}>
<PillCompletion title={displayName} description={description ?? undefined}>
<MemberAvatar member={user} size="24px" />
</PillCompletion>
),

4
src/components/structures/MatrixClientContextProvider.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type PropsWithChildren, useEffect, useState } from "react";
import React, { type PropsWithChildren, useEffect, useState, type JSX } from "react";
import { type MatrixClient } from "matrix-js-sdk/src/matrix";
import { CryptoEvent } from "matrix-js-sdk/src/crypto-api";
import { logger } from "matrix-js-sdk/src/logger";
@@ -85,7 +85,7 @@ interface Props {
* A React component which exposes a {@link MatrixClientContext} and a {@link LocalDeviceVerificationStateContext}
* to its children.
*/
export function MatrixClientContextProvider(props: PropsWithChildren<Props>): React.JSX.Element {
export function MatrixClientContextProvider(props: PropsWithChildren<Props>): JSX.Element {
const verificationState = useLocalVerificationState(props.client);
return (
<MatrixClientContext.Provider value={props.client}>

456
src/components/structures/RoomSearchView.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX, forwardRef, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
import React, { type JSX, type Ref, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
import {
type ISearchResults,
type IThreadBundledRelationship,
@@ -44,269 +44,275 @@ interface Props {
resizeNotifier: ResizeNotifier;
className: string;
onUpdate(inProgress: boolean, results: ISearchResults | null, error: Error | null): void;
ref?: Ref<ScrollPanel>;
}
// XXX: todo: merge overlapping results somehow?
// XXX: why doesn't searching on name work?
export const RoomSearchView = forwardRef<ScrollPanel, Props>(
({ term, scope, promise, abortController, resizeNotifier, className, onUpdate, inProgress }: Props, ref) => {
const client = useContext(MatrixClientContext);
const roomContext = useScopedRoomContext("showHiddenEvents");
const [highlights, setHighlights] = useState<string[] | null>(null);
const [results, setResults] = useState<ISearchResults | null>(null);
const aborted = useRef(false);
// A map from room ID to permalink creator
const permalinkCreators = useMemo(() => new Map<string, RoomPermalinkCreator>(), []);
const innerRef = useRef<ScrollPanel>(null);
export const RoomSearchView = ({
term,
scope,
promise,
abortController,
resizeNotifier,
className,
onUpdate,
inProgress,
ref,
}: Props): JSX.Element => {
const client = useContext(MatrixClientContext);
const roomContext = useScopedRoomContext("showHiddenEvents");
const [highlights, setHighlights] = useState<string[] | null>(null);
const [results, setResults] = useState<ISearchResults | null>(null);
const aborted = useRef(false);
// A map from room ID to permalink creator
const permalinkCreators = useMemo(() => new Map<string, RoomPermalinkCreator>(), []);
const innerRef = useRef<ScrollPanel>(null);
useEffect(() => {
return () => {
permalinkCreators.forEach((pc) => pc.stop());
permalinkCreators.clear();
};
}, [permalinkCreators]);
useEffect(() => {
return () => {
permalinkCreators.forEach((pc) => pc.stop());
permalinkCreators.clear();
};
}, [permalinkCreators]);
const handleSearchResult = useCallback(
(searchPromise: Promise<ISearchResults>): Promise<boolean> => {
onUpdate(true, null, null);
const handleSearchResult = useCallback(
(searchPromise: Promise<ISearchResults>): Promise<boolean> => {
onUpdate(true, null, null);
return searchPromise.then(
async (results): Promise<boolean> => {
debuglog("search complete");
if (aborted.current) {
logger.error("Discarding stale search results");
return false;
}
return searchPromise.then(
async (results): Promise<boolean> => {
debuglog("search complete");
if (aborted.current) {
logger.error("Discarding stale search results");
return false;
}
// postgres on synapse returns us precise details of the strings
// which actually got matched for highlighting.
//
// In either case, we want to highlight the literal search term
// whether it was used by the search engine or not.
// postgres on synapse returns us precise details of the strings
// which actually got matched for highlighting.
//
// In either case, we want to highlight the literal search term
// whether it was used by the search engine or not.
let highlights = results.highlights;
if (!highlights.includes(term)) {
highlights = highlights.concat(term);
}
let highlights = results.highlights;
if (!highlights.includes(term)) {
highlights = highlights.concat(term);
}
// For overlapping highlights,
// favour longer (more specific) terms first
highlights = highlights.sort(function (a, b) {
return b.length - a.length;
});
// For overlapping highlights,
// favour longer (more specific) terms first
highlights = highlights.sort(function (a, b) {
return b.length - a.length;
});
for (const result of results.results) {
for (const event of result.context.getTimeline()) {
const bundledRelationship =
event.getServerAggregatedRelation<IThreadBundledRelationship>(
THREAD_RELATION_TYPE.name,
);
if (!bundledRelationship || event.getThread()) continue;
const room = client.getRoom(event.getRoomId());
const thread = room?.findThreadForEvent(event);
if (thread) {
event.setThread(thread);
} else {
room?.createThread(event.getId()!, event, [], true);
}
for (const result of results.results) {
for (const event of result.context.getTimeline()) {
const bundledRelationship = event.getServerAggregatedRelation<IThreadBundledRelationship>(
THREAD_RELATION_TYPE.name,
);
if (!bundledRelationship || event.getThread()) continue;
const room = client.getRoom(event.getRoomId());
const thread = room?.findThreadForEvent(event);
if (thread) {
event.setThread(thread);
} else {
room?.createThread(event.getId()!, event, [], true);
}
}
}
setHighlights(highlights);
setResults({ ...results }); // copy to force a refresh
onUpdate(false, results, null);
setHighlights(highlights);
setResults({ ...results }); // copy to force a refresh
onUpdate(false, results, null);
return false;
},
(error) => {
if (aborted.current) {
logger.error("Discarding stale search results");
return false;
},
(error) => {
if (aborted.current) {
logger.error("Discarding stale search results");
return false;
}
logger.error("Search failed", error);
onUpdate(false, null, error);
return false;
},
);
},
[client, term, onUpdate],
);
// Mount & unmount effect
useEffect(() => {
aborted.current = false;
handleSearchResult(promise);
return () => {
aborted.current = true;
abortController?.abort();
};
}, []); // eslint-disable-line react-hooks/exhaustive-deps
// show searching spinner
if (results === null) {
return (
<div
className="mx_RoomView_messagePanel mx_RoomView_messagePanelSearchSpinner"
data-testid="messagePanelSearchSpinner"
/>
}
logger.error("Search failed", error);
onUpdate(false, null, error);
return false;
},
);
}
},
[client, term, onUpdate],
);
const onSearchResultsFillRequest = async (backwards: boolean): Promise<boolean> => {
if (!backwards) {
return false;
}
if (!results.next_batch) {
debuglog("no more search results");
return false;
}
debuglog("requesting more search results");
const searchPromise = searchPagination(client, results);
return handleSearchResult(searchPromise);
// Mount & unmount effect
useEffect(() => {
aborted.current = false;
handleSearchResult(promise);
return () => {
aborted.current = true;
abortController?.abort();
};
}, []); // eslint-disable-line react-hooks/exhaustive-deps
const ret: JSX.Element[] = [];
// show searching spinner
if (results === null) {
return (
<div
className="mx_RoomView_messagePanel mx_RoomView_messagePanelSearchSpinner"
data-testid="messagePanelSearchSpinner"
/>
);
}
if (inProgress) {
ret.push(
<li key="search-spinner">
<Spinner />
</li>,
);
const onSearchResultsFillRequest = async (backwards: boolean): Promise<boolean> => {
if (!backwards) {
return false;
}
if (!results.next_batch) {
if (!results?.results?.length) {
debuglog("no more search results");
return false;
}
debuglog("requesting more search results");
const searchPromise = searchPagination(client, results);
return handleSearchResult(searchPromise);
};
const ret: JSX.Element[] = [];
if (inProgress) {
ret.push(
<li key="search-spinner">
<Spinner />
</li>,
);
}
if (!results.next_batch) {
if (!results?.results?.length) {
ret.push(
<li key="search-top-marker">
<h2 className="mx_RoomView_topMarker">{_t("common|no_results")}</h2>
</li>,
);
} else {
ret.push(
<li key="search-top-marker">
<h2 className="mx_RoomView_topMarker">{_t("no_more_results")}</h2>
</li>,
);
}
}
const onRef = (e: ScrollPanel | null): void => {
if (typeof ref === "function") {
ref(e);
} else if (!!ref) {
ref.current = e;
}
innerRef.current = e;
};
let lastRoomId: string | undefined;
let mergedTimeline: MatrixEvent[] = [];
let ourEventsIndexes: number[] = [];
for (let i = (results?.results?.length || 0) - 1; i >= 0; i--) {
const result = results.results[i];
const mxEv = result.context.getEvent();
const roomId = mxEv.getRoomId()!;
const room = client.getRoom(roomId);
if (!room) {
// if we do not have the room in js-sdk stores then hide it as we cannot easily show it
// As per the spec, an all rooms search can create this condition,
// it happens with Seshat but not Synapse.
// It will make the result count not match the displayed count.
logger.log("Hiding search result from an unknown room", roomId);
continue;
}
if (!haveRendererForEvent(mxEv, client, roomContext.showHiddenEvents)) {
// XXX: can this ever happen? It will make the result count
// not match the displayed count.
continue;
}
if (scope === SearchScope.All) {
if (roomId !== lastRoomId) {
ret.push(
<li key="search-top-marker">
<h2 className="mx_RoomView_topMarker">{_t("common|no_results")}</h2>
</li>,
);
} else {
ret.push(
<li key="search-top-marker">
<h2 className="mx_RoomView_topMarker">{_t("no_more_results")}</h2>
<li key={mxEv.getId() + "-room"}>
<h2>
{_t("common|room")}: {room.name}
</h2>
</li>,
);
lastRoomId = roomId;
}
}
const onRef = (e: ScrollPanel | null): void => {
if (typeof ref === "function") {
ref(e);
} else if (!!ref) {
ref.current = e;
}
innerRef.current = e;
};
const resultLink = "#/room/" + roomId + "/" + mxEv.getId();
let lastRoomId: string | undefined;
let mergedTimeline: MatrixEvent[] = [];
let ourEventsIndexes: number[] = [];
for (let i = (results?.results?.length || 0) - 1; i >= 0; i--) {
const result = results.results[i];
const mxEv = result.context.getEvent();
const roomId = mxEv.getRoomId()!;
const room = client.getRoom(roomId);
if (!room) {
// if we do not have the room in js-sdk stores then hide it as we cannot easily show it
// As per the spec, an all rooms search can create this condition,
// it happens with Seshat but not Synapse.
// It will make the result count not match the displayed count.
logger.log("Hiding search result from an unknown room", roomId);
continue;
}
if (!haveRendererForEvent(mxEv, client, roomContext.showHiddenEvents)) {
// XXX: can this ever happen? It will make the result count
// not match the displayed count.
continue;
}
if (scope === SearchScope.All) {
if (roomId !== lastRoomId) {
ret.push(
<li key={mxEv.getId() + "-room"}>
<h2>
{_t("common|room")}: {room.name}
</h2>
</li>,
);
lastRoomId = roomId;
}
}
const resultLink = "#/room/" + roomId + "/" + mxEv.getId();
// merging two successive search result if the query is present in both of them
const currentTimeline = result.context.getTimeline();
const nextTimeline = i > 0 ? results.results[i - 1].context.getTimeline() : [];
if (i > 0 && currentTimeline[currentTimeline.length - 1].getId() == nextTimeline[0].getId()) {
// if this is the first searchResult we merge then add all values of the current searchResult
if (mergedTimeline.length == 0) {
for (let j = mergedTimeline.length == 0 ? 0 : 1; j < result.context.getTimeline().length; j++) {
mergedTimeline.push(currentTimeline[j]);
}
ourEventsIndexes.push(result.context.getOurEventIndex());
}
// merge the events of the next searchResult
for (let j = 1; j < nextTimeline.length; j++) {
mergedTimeline.push(nextTimeline[j]);
}
// add the index of the matching event of the next searchResult
ourEventsIndexes.push(
ourEventsIndexes[ourEventsIndexes.length - 1] +
results.results[i - 1].context.getOurEventIndex() +
1,
);
continue;
}
// merging two successive search result if the query is present in both of them
const currentTimeline = result.context.getTimeline();
const nextTimeline = i > 0 ? results.results[i - 1].context.getTimeline() : [];
if (i > 0 && currentTimeline[currentTimeline.length - 1].getId() == nextTimeline[0].getId()) {
// if this is the first searchResult we merge then add all values of the current searchResult
if (mergedTimeline.length == 0) {
mergedTimeline = result.context.getTimeline();
ourEventsIndexes = [];
for (let j = mergedTimeline.length == 0 ? 0 : 1; j < result.context.getTimeline().length; j++) {
mergedTimeline.push(currentTimeline[j]);
}
ourEventsIndexes.push(result.context.getOurEventIndex());
}
let permalinkCreator = permalinkCreators.get(roomId);
if (!permalinkCreator) {
permalinkCreator = new RoomPermalinkCreator(room);
permalinkCreator.start();
permalinkCreators.set(roomId, permalinkCreator);
// merge the events of the next searchResult
for (let j = 1; j < nextTimeline.length; j++) {
mergedTimeline.push(nextTimeline[j]);
}
ret.push(
<SearchResultTile
key={mxEv.getId()}
timeline={mergedTimeline}
ourEventsIndexes={ourEventsIndexes}
searchHighlights={highlights ?? []}
resultLink={resultLink}
permalinkCreator={permalinkCreator}
/>,
// add the index of the matching event of the next searchResult
ourEventsIndexes.push(
ourEventsIndexes[ourEventsIndexes.length - 1] + results.results[i - 1].context.getOurEventIndex() + 1,
);
ourEventsIndexes = [];
mergedTimeline = [];
continue;
}
return (
<ScrollPanel
ref={onRef}
className={"mx_RoomView_searchResultsPanel " + className}
onFillRequest={onSearchResultsFillRequest}
resizeNotifier={resizeNotifier}
>
<li className="mx_RoomView_scrollheader" />
{ret}
</ScrollPanel>
if (mergedTimeline.length == 0) {
mergedTimeline = result.context.getTimeline();
ourEventsIndexes = [];
ourEventsIndexes.push(result.context.getOurEventIndex());
}
let permalinkCreator = permalinkCreators.get(roomId);
if (!permalinkCreator) {
permalinkCreator = new RoomPermalinkCreator(room);
permalinkCreator.start();
permalinkCreators.set(roomId, permalinkCreator);
}
ret.push(
<SearchResultTile
key={mxEv.getId()}
timeline={mergedTimeline}
ourEventsIndexes={ourEventsIndexes}
searchHighlights={highlights ?? []}
resultLink={resultLink}
permalinkCreator={permalinkCreator}
/>,
);
},
);
ourEventsIndexes = [];
mergedTimeline = [];
}
return (
<ScrollPanel
ref={onRef}
className={"mx_RoomView_searchResultsPanel " + className}
onFillRequest={onSearchResultsFillRequest}
resizeNotifier={resizeNotifier}
>
<li className="mx_RoomView_scrollheader" />
{ret}
</ScrollPanel>
);
};

6
src/components/structures/auth/LoginSplashView.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import React, { type JSX } from "react";
import { type MatrixClient } from "matrix-js-sdk/src/matrix";
import { CryptoEvent } from "matrix-js-sdk/src/crypto-api";
@@ -43,13 +43,13 @@ type MigrationState = {
/**
* The view that is displayed after we have logged in, before the first /sync is completed.
*/
export function LoginSplashView(props: Props): React.JSX.Element {
export function LoginSplashView(props: Props): JSX.Element {
const migrationState = useTypedEventEmitterState(
props.matrixClient,
CryptoEvent.LegacyCryptoStoreMigrationProgress,
(progress?: number, total?: number): MigrationState => ({ progress: progress ?? -1, totalSteps: total ?? -1 }),
);
let errorBox: React.JSX.Element | undefined;
let errorBox: JSX.Element | undefined;
if (props.syncError) {
errorBox = <div className="mx_LoginSplashView_syncError">{messageForSyncError(props.syncError)}</div>;
}

8
src/components/views/avatars/BaseAvatar.tsx
View File

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type AriaRole, forwardRef, useCallback, useContext, useEffect, useState } from "react";
import React, { type AriaRole, type JSX, type Ref, useCallback, useContext, useEffect, useState } from "react";
import classNames from "classnames";
import { ClientEvent, type SyncState } from "matrix-js-sdk/src/matrix";
import { Avatar } from "@vector-im/compound-web";
@@ -34,6 +34,7 @@ interface IProps {
tabIndex?: number;
altText?: string;
role?: AriaRole;
ref?: Ref<HTMLElement>;
}
const calculateUrls = (url?: string | null, urls?: string[], lowBandwidth = false): string[] => {
@@ -87,7 +88,7 @@ const useImageUrl = ({ url, urls }: { url?: string | null; urls?: string[] }): [
return [imageUrl, onError];
};
const BaseAvatar = forwardRef<HTMLElement, IProps>((props, ref) => {
const BaseAvatar = (props: IProps): JSX.Element => {
const {
name,
idName,
@@ -99,6 +100,7 @@ const BaseAvatar = forwardRef<HTMLElement, IProps>((props, ref) => {
className,
type = "round",
altText = _t("common|avatar"),
ref,
...otherProps
} = props;
@@ -134,7 +136,7 @@ const BaseAvatar = forwardRef<HTMLElement, IProps>((props, ref) => {
data-testid="avatar-img"
/>
);
});
};
export default BaseAvatar;
export type BaseAvatarType = React.FC<IProps>;

29
src/components/views/avatars/MemberAvatar.tsx
View File

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX, forwardRef, type ReactNode, type Ref, useContext } from "react";
import React, { type JSX, type ReactNode, type Ref, useContext } from "react";
import { type RoomMember, type ResizeMethod } from "matrix-js-sdk/src/matrix";
import dis from "../../../dispatcher/dispatcher";
@@ -33,21 +33,20 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
forceHistorical?: boolean; // true to deny `useOnlyCurrentProfiles` usage. Default false.
hideTitle?: boolean;
children?: ReactNode;
ref?: Ref<HTMLElement>;
}
function MemberAvatar(
{
size,
resizeMethod = "crop",
viewUserOnClick,
forceHistorical,
fallbackUserId,
hideTitle,
member: propsMember,
...props
}: IProps,
ref: Ref<HTMLElement>,
): JSX.Element {
export default function MemberAvatar({
size,
resizeMethod = "crop",
viewUserOnClick,
forceHistorical,
fallbackUserId,
hideTitle,
member: propsMember,
ref,
...props
}: IProps): JSX.Element {
const cli = useContext(MatrixClientContext);
const card = useContext(CardContext);
@@ -101,5 +100,3 @@ function MemberAvatar(
/>
);
}
export default forwardRef(MemberAvatar);

51
src/components/views/elements/AccessibleButton.tsx
View File

@@ -10,8 +10,6 @@ import React, {
type JSX,
type ComponentProps,
type ComponentPropsWithoutRef,
forwardRef,
type FunctionComponent,
type ReactElement,
type KeyboardEvent,
type Ref,
@@ -100,6 +98,8 @@ type Props<T extends ElementType = "div"> = {
* Whether the tooltip should be disabled.
*/
disableTooltip?: TooltipProps["disabled"];
ref?: Ref<HTMLElementTagNameMap[T]>;
};
export type ButtonProps<T extends ElementType> = Props<T> & Omit<ComponentPropsWithoutRef<T>, keyof Props<T>>;
@@ -119,28 +119,26 @@ type RenderedElementProps<T extends ElementType> = React.InputHTMLAttributes<Ele
* @param {Object} props react element properties
* @returns {Object} rendered react
*/
const AccessibleButton = forwardRef(function <T extends ElementType = typeof defaultElement>(
{
element,
onClick,
children,
kind,
disabled,
className,
onKeyDown,
onKeyUp,
triggerOnMouseDown,
title,
caption,
placement = "right",
onTooltipOpenChange,
disableTooltip,
role = "button",
tabIndex = 0,
...restProps
}: ButtonProps<T>,
ref: Ref<HTMLElementTagNameMap[T]>,
): JSX.Element {
const AccessibleButton = function AccessibleButton<T extends ElementType = typeof defaultElement>({
element,
onClick,
children,
kind,
disabled,
className,
onKeyDown,
onKeyUp,
triggerOnMouseDown,
title,
caption,
placement = "right",
onTooltipOpenChange,
disableTooltip,
role = "button",
tabIndex = 0,
ref,
...restProps
}: ButtonProps<T>): JSX.Element {
const newProps = {
...restProps,
tabIndex,
@@ -226,10 +224,7 @@ const AccessibleButton = forwardRef(function <T extends ElementType = typeof def
);
}
return button;
});
// Type assertion required due to forwardRef type workaround in react.d.ts
(AccessibleButton as FunctionComponent).displayName = "AccessibleButton";
};
interface RefProp<T extends ElementType> {
ref?: Ref<HTMLElementTagNameMap[T]>;

7
src/components/views/location/Marker.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type ReactNode, useState } from "react";
import React, { type JSX, type ReactNode, type Ref, useState } from "react";
import classNames from "classnames";
import { type RoomMember } from "matrix-js-sdk/src/matrix";
import LocationIcon from "@vector-im/compound-design-tokens/assets/web/icons/location-pin-solid";
@@ -21,6 +21,7 @@ interface Props {
// use member text color as background
useMemberColor?: boolean;
tooltip?: ReactNode;
ref?: Ref<HTMLDivElement>;
}
/**
@@ -55,7 +56,7 @@ const OptionalTooltip: React.FC<{
/**
* Generic location marker
*/
const Marker = React.forwardRef<HTMLDivElement, Props>(({ id, roomMember, useMemberColor, tooltip }, ref) => {
const Marker = ({ id, roomMember, useMemberColor, tooltip, ref }: Props): JSX.Element => {
const memberColorClass = useMemberColor && roomMember ? getUserNameColorClass(roomMember.userId) : "";
return (
<div
@@ -82,6 +83,6 @@ const Marker = React.forwardRef<HTMLDivElement, Props>(({ id, roomMember, useMem
</OptionalTooltip>
</div>
);
});
};
export default Marker;

100
src/components/views/messages/CallEvent.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { forwardRef, useCallback, useContext, useMemo } from "react";
import React, { type Ref, useCallback, useContext, useMemo, type JSX } from "react";
import type { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
import { ConnectionState, type ElementCall } from "../../../models/Call";
@@ -37,60 +37,69 @@ interface ActiveCallEventProps {
buttonKind: AccessibleButtonKind;
buttonDisabledTooltip?: string;
onButtonClick: ((ev: ButtonEvent) => void) | null;
ref?: Ref<HTMLDivElement>;
}
const ActiveCallEvent = forwardRef<any, ActiveCallEventProps>(
({ mxEvent, call, participatingMembers, buttonText, buttonKind, buttonDisabledTooltip, onButtonClick }, ref) => {
const senderName = useMemo(() => mxEvent.sender?.name ?? mxEvent.getSender(), [mxEvent]);
const ActiveCallEvent = ({
mxEvent,
call,
participatingMembers,
buttonText,
buttonKind,
buttonDisabledTooltip,
onButtonClick,
ref,
}: ActiveCallEventProps): JSX.Element => {
const senderName = useMemo(() => mxEvent.sender?.name ?? mxEvent.getSender(), [mxEvent]);
const facePileMembers = useMemo(() => participatingMembers.slice(0, MAX_FACES), [participatingMembers]);
const facePileOverflow = participatingMembers.length > facePileMembers.length;
const facePileMembers = useMemo(() => participatingMembers.slice(0, MAX_FACES), [participatingMembers]);
const facePileOverflow = participatingMembers.length > facePileMembers.length;
return (
<div className="mx_CallEvent_wrapper" ref={ref}>
<div className="mx_CallEvent mx_CallEvent_active">
<MemberAvatar
member={mxEvent.sender}
fallbackUserId={mxEvent.getSender()}
viewUserOnClick
size="24px"
/>
<div className="mx_CallEvent_columns">
<div className="mx_CallEvent_details">
<span className="mx_CallEvent_title">
{_t("timeline|m.call|video_call_started_text", { name: senderName })}
</span>
<LiveContentSummary
type={LiveContentType.Video}
text={_t("voip|video_call")}
active={false}
participantCount={participatingMembers.length}
/>
<FacePile members={facePileMembers} size="24px" overflow={facePileOverflow} />
</div>
{call && <SessionDuration session={call.session} />}
<AccessibleButton
className="mx_CallEvent_button"
kind={buttonKind}
disabled={onButtonClick === null || buttonDisabledTooltip !== undefined}
onClick={onButtonClick}
title={buttonDisabledTooltip}
>
{buttonText}
</AccessibleButton>
return (
<div className="mx_CallEvent_wrapper" ref={ref}>
<div className="mx_CallEvent mx_CallEvent_active">
<MemberAvatar
member={mxEvent.sender}
fallbackUserId={mxEvent.getSender()}
viewUserOnClick
size="24px"
/>
<div className="mx_CallEvent_columns">
<div className="mx_CallEvent_details">
<span className="mx_CallEvent_title">
{_t("timeline|m.call|video_call_started_text", { name: senderName })}
</span>
<LiveContentSummary
type={LiveContentType.Video}
text={_t("voip|video_call")}
active={false}
participantCount={participatingMembers.length}
/>
<FacePile members={facePileMembers} size="24px" overflow={facePileOverflow} />
</div>
{call && <SessionDuration session={call.session} />}
<AccessibleButton
className="mx_CallEvent_button"
kind={buttonKind}
disabled={onButtonClick === null || buttonDisabledTooltip !== undefined}
onClick={onButtonClick}
title={buttonDisabledTooltip}
>
{buttonText}
</AccessibleButton>
</div>
</div>
);
},
);
</div>
);
};
interface ActiveLoadedCallEventProps {
mxEvent: MatrixEvent;
call: ElementCall;
ref?: Ref<HTMLDivElement>;
}
const ActiveLoadedCallEvent = forwardRef<any, ActiveLoadedCallEventProps>(({ mxEvent, call }, ref) => {
const ActiveLoadedCallEvent = ({ mxEvent, call, ref }: ActiveLoadedCallEventProps): JSX.Element => {
const connectionState = useConnectionState(call);
const participatingMembers = useParticipatingMembers(call);
const joinCallButtonDisabledTooltip = useJoinCallButtonDisabledTooltip(call);
@@ -141,16 +150,17 @@ const ActiveLoadedCallEvent = forwardRef<any, ActiveLoadedCallEventProps>(({ mxE
onButtonClick={onButtonClick}
/>
);
});
};
interface CallEventProps {
mxEvent: MatrixEvent;
ref?: Ref<HTMLDivElement>;
}
/**
* An event tile representing an active or historical Element call.
*/
export const CallEvent = forwardRef<any, CallEventProps>(({ mxEvent }, ref) => {
export const CallEvent = ({ mxEvent, ref }: CallEventProps): JSX.Element => {
const client = useContext(MatrixClientContext);
const call = useCall(mxEvent.getRoomId()!);
const latestEvent = client
@@ -187,4 +197,4 @@ export const CallEvent = forwardRef<any, CallEventProps>(({ mxEvent }, ref) => {
}
return <ActiveLoadedCallEvent mxEvent={mxEvent} call={call as ElementCall} ref={ref} />;
});
};

8
src/components/views/messages/DecryptionFailureBody.tsx
View File

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import classNames from "classnames";
import React, { forwardRef, type ForwardRefExoticComponent, useContext } from "react";
import React, { type JSX, useContext } from "react";
import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
import { DecryptionFailureCode } from "matrix-js-sdk/src/crypto-api";
import { BlockIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -16,7 +16,7 @@ import { _t } from "../../../languageHandler";
import { type IBodyProps } from "./IBodyProps";
import { LocalDeviceVerificationStateContext } from "../../../contexts/LocalDeviceVerificationStateContext";
function getErrorMessage(mxEvent: MatrixEvent, isVerified: boolean | undefined): string | React.JSX.Element {
function getErrorMessage(mxEvent: MatrixEvent, isVerified: boolean | undefined): string | JSX.Element {
switch (mxEvent.decryptionFailureReason) {
case DecryptionFailureCode.MEGOLM_KEY_WITHHELD_FOR_UNVERIFIED_DEVICE:
return _t("timeline|decryption_failure|blocked");
@@ -72,7 +72,7 @@ function errorClassName(mxEvent: MatrixEvent): string | null {
}
// A placeholder element for messages that could not be decrypted
export const DecryptionFailureBody = forwardRef<HTMLDivElement, IBodyProps>(({ mxEvent }, ref): React.JSX.Element => {
export const DecryptionFailureBody = ({ mxEvent, ref }: IBodyProps): JSX.Element => {
const verificationState = useContext(LocalDeviceVerificationStateContext);
const classes = classNames("mx_DecryptionFailureBody", "mx_EventTile_content", errorClassName(mxEvent));
@@ -81,4 +81,4 @@ export const DecryptionFailureBody = forwardRef<HTMLDivElement, IBodyProps>(({ m
{getErrorMessage(mxEvent, verificationState)}
</div>
);
}) as ForwardRefExoticComponent<IBodyProps>;
};

7
src/components/views/messages/EncryptionEvent.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX, forwardRef } from "react";
import React, { type JSX, type Ref, type ReactNode } from "react";
import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
import type { RoomEncryptionEventContent } from "matrix-js-sdk/src/types";
@@ -22,9 +22,10 @@ import { useIsEncrypted } from "../../../hooks/useIsEncrypted.ts";
interface IProps {
mxEvent: MatrixEvent;
timestamp?: JSX.Element;
ref?: Ref<HTMLDivElement>;
}
const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent, timestamp }, ref) => {
const EncryptionEvent = ({ mxEvent, timestamp, ref }: IProps): ReactNode => {
const cli = useMatrixClientContext();
const roomId = mxEvent.getRoomId()!;
const isRoomEncrypted = useIsEncrypted(cli, cli.getRoom(roomId) || undefined);
@@ -80,6 +81,6 @@ const EncryptionEvent = forwardRef<HTMLDivElement, IProps>(({ mxEvent, timestamp
timestamp={timestamp}
/>
);
});
};
export default EncryptionEvent;

81
src/components/views/messages/EventContentBody.tsx
View File

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { memo, forwardRef, useContext, useMemo } from "react";
import React, { memo, useContext, useMemo, type Ref } from "react";
import { type IContent, type MatrixEvent, MsgType, PushRuleKind } from "matrix-js-sdk/src/matrix";
import parse from "html-react-parser";
import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
@@ -139,6 +139,7 @@ interface Props extends ReplacerOptions {
* Whether to include the `dir="auto"` attribute on the rendered element
*/
includeDir?: boolean;
ref?: Ref<HTMLElement>;
}
/**
@@ -148,52 +149,50 @@ interface Props extends ReplacerOptions {
* Returns a div or span depending on `as`, the `dir` on a `div` is always set to `"auto"` but set by `includeDir` otherwise.
*/
const EventContentBody = memo(
forwardRef<HTMLElement, Props>(
({ as, mxEvent, stripReply, content, linkify, highlights, includeDir = true, ...options }, ref) => {
const enableBigEmoji = useSettingValue("TextualBody.enableBigEmoji");
const [mediaIsVisible] = useMediaVisible(mxEvent?.getId(), mxEvent?.getRoomId());
({ as, mxEvent, stripReply, content, linkify, highlights, includeDir = true, ref, ...options }: Props) => {
const enableBigEmoji = useSettingValue("TextualBody.enableBigEmoji");
const [mediaIsVisible] = useMediaVisible(mxEvent?.getId(), mxEvent?.getRoomId());
const replacer = useReplacer(content, mxEvent, options);
const linkifyOptions = useMemo(
() => ({
render: replacerToRenderFunction(replacer),
const replacer = useReplacer(content, mxEvent, options);
const linkifyOptions = useMemo(
() => ({
render: replacerToRenderFunction(replacer),
}),
[replacer],
);
const isEmote = content.msgtype === MsgType.Emote;
const { strippedBody, formattedBody, emojiBodyElements, className } = useMemo(
() =>
bodyToNode(content, highlights, {
disableBigEmoji: isEmote || !enableBigEmoji,
// Part of Replies fallback support
stripReplyFallback: stripReply,
mediaIsVisible,
}),
[replacer],
);
[content, mediaIsVisible, enableBigEmoji, highlights, isEmote, stripReply],
);
const isEmote = content.msgtype === MsgType.Emote;
if (as === "div") includeDir = true; // force dir="auto" on divs
const { strippedBody, formattedBody, emojiBodyElements, className } = useMemo(
() =>
bodyToNode(content, highlights, {
disableBigEmoji: isEmote || !enableBigEmoji,
// Part of Replies fallback support
stripReplyFallback: stripReply,
mediaIsVisible,
}),
[content, mediaIsVisible, enableBigEmoji, highlights, isEmote, stripReply],
);
const As = as;
const body = formattedBody ? (
<As ref={ref as any} className={className} dir={includeDir ? "auto" : undefined}>
{parse(formattedBody, {
replace: replacer,
})}
</As>
) : (
<As ref={ref as any} className={className} dir={includeDir ? "auto" : undefined}>
{applyReplacerOnString(emojiBodyElements || strippedBody, replacer)}
</As>
);
if (as === "div") includeDir = true; // force dir="auto" on divs
if (!linkify) return body;
const As = as;
const body = formattedBody ? (
<As ref={ref as any} className={className} dir={includeDir ? "auto" : undefined}>
{parse(formattedBody, {
replace: replacer,
})}
</As>
) : (
<As ref={ref as any} className={className} dir={includeDir ? "auto" : undefined}>
{applyReplacerOnString(emojiBodyElements || strippedBody, replacer)}
</As>
);
if (!linkify) return body;
return <Linkify options={linkifyOptions}>{body}</Linkify>;
},
),
return <Linkify options={linkifyOptions}>{body}</Linkify>;
},
);
export default EventContentBody;

25
src/components/views/messages/EventTileBubble.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX, forwardRef, type ReactNode } from "react";
import React, { type JSX, type ReactNode, type Ref } from "react";
import classNames from "classnames";
interface IProps {
@@ -15,19 +15,18 @@ interface IProps {
timestamp?: JSX.Element;
subtitle?: ReactNode;
children?: JSX.Element;
ref?: Ref<HTMLDivElement>;
}
const EventTileBubble = forwardRef<HTMLDivElement, IProps>(
({ className, title, timestamp, subtitle, children }, ref) => {
return (
<div className={classNames("mx_EventTileBubble", className)} ref={ref}>
<div className="mx_EventTileBubble_title">{title}</div>
{subtitle && <div className="mx_EventTileBubble_subtitle">{subtitle}</div>}
{children}
{timestamp}
</div>
);
},
);
const EventTileBubble = ({ className, title, timestamp, subtitle, children, ref }: IProps): JSX.Element => {
return (
<div className={classNames("mx_EventTileBubble", className)} ref={ref}>
<div className="mx_EventTileBubble_title">{title}</div>
{subtitle && <div className="mx_EventTileBubble_subtitle">{subtitle}</div>}
{children}
{timestamp}
</div>
);
};
export default EventTileBubble;

11
src/components/views/messages/HiddenBody.tsx
View File

@@ -6,23 +6,18 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
import React, { type JSX } from "react";
import { _t } from "../../../languageHandler";
import { type IBodyProps } from "./IBodyProps";
interface IProps {
mxEvent: MatrixEvent;
}
/**
* A message hidden from the user pending moderation.
*
* Note: This component must not be used when the user is the author of the message
* or has a sufficient powerlevel to see the message.
*/
const HiddenBody = React.forwardRef<any, IProps | IBodyProps>(({ mxEvent }, ref) => {
const HiddenBody = ({ mxEvent, ref }: IBodyProps): JSX.Element => {
let text;
const visibility = mxEvent.messageVisibility();
switch (visibility.visible) {
@@ -42,6 +37,6 @@ const HiddenBody = React.forwardRef<any, IProps | IBodyProps>(({ mxEvent }, ref)
{text}
</span>
);
});
};
export default HiddenBody;

3
src/components/views/messages/IBodyProps.ts
View File

@@ -6,7 +6,6 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { type LegacyRef } from "react";
import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
import type React from "react";
@@ -44,7 +43,7 @@ export interface IBodyProps {
// helper function to access relations for this event
getRelationsForEvent?: GetRelationsForEvent;
ref?: React.RefObject<any> | LegacyRef<any>;
ref?: React.RefObject<any>;
// Set to `true` to disable interactions (e.g. video controls) and to remove controls from the tab order.
// This may be useful when displaying a preview of the event.

6
src/components/views/messages/MBeaconBody.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX, type ForwardRefExoticComponent, useCallback, useContext, useEffect, useState } from "react";
import React, { type JSX, useCallback, useContext, useEffect, useState } from "react";
import {
type Beacon,
BeaconEvent,
@@ -122,7 +122,7 @@ const useHandleBeaconRedaction = (
}, [event, onBeforeBeaconInfoRedaction]);
};
const MBeaconBody = React.forwardRef<HTMLDivElement, IBodyProps>(({ mxEvent, getRelationsForEvent }, ref) => {
const MBeaconBody = ({ mxEvent, getRelationsForEvent, ref }: IBodyProps): JSX.Element => {
const { beacon, isLive, latestLocationState, waitingToStart } = useBeaconState(mxEvent);
const mapId = useUniqueId(mxEvent.getId()!);
@@ -225,6 +225,6 @@ const MBeaconBody = React.forwardRef<HTMLDivElement, IBodyProps>(({ mxEvent, get
)}
</div>
);
}) as ForwardRefExoticComponent<IBodyProps>;
};
export default MBeaconBody;

6
src/components/views/messages/MPollEndBody.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { useEffect, useState, useContext, type ForwardRefExoticComponent } from "react";
import React, { useEffect, useState, useContext, type JSX } from "react";
import { MatrixEvent, M_TEXT } from "matrix-js-sdk/src/matrix";
import { logger } from "matrix-js-sdk/src/logger";
@@ -85,7 +85,7 @@ const usePollStartEvent = (event: MatrixEvent): { pollStartEvent?: MatrixEvent;
return { pollStartEvent, isLoadingPollStartEvent };
};
export const MPollEndBody = React.forwardRef<any, IBodyProps>(({ mxEvent, ...props }, ref) => {
export const MPollEndBody = ({ mxEvent, ref, ...props }: IBodyProps): JSX.Element => {
const cli = useMatrixClientContext();
const { pollStartEvent, isLoadingPollStartEvent } = usePollStartEvent(mxEvent);
@@ -105,4 +105,4 @@ export const MPollEndBody = React.forwardRef<any, IBodyProps>(({ mxEvent, ...pro
<MPollBody mxEvent={pollStartEvent} {...props} />
</div>
);
}) as ForwardRefExoticComponent<IBodyProps>;
};

6
src/components/views/messages/RedactedBody.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type ForwardRefExoticComponent, useContext } from "react";
import React, { useContext, type JSX } from "react";
import { type MatrixClient } from "matrix-js-sdk/src/matrix";
import { _t } from "../../../languageHandler";
@@ -15,7 +15,7 @@ import { formatFullDate } from "../../../DateUtils";
import SettingsStore from "../../../settings/SettingsStore";
import { type IBodyProps } from "./IBodyProps";
const RedactedBody = React.forwardRef<any, IBodyProps>(({ mxEvent }, ref) => {
const RedactedBody = ({ mxEvent, ref }: IBodyProps): JSX.Element => {
const cli: MatrixClient = useContext(MatrixClientContext);
let text = _t("timeline|self_redaction");
const unsigned = mxEvent.getUnsigned();
@@ -37,6 +37,6 @@ const RedactedBody = React.forwardRef<any, IBodyProps>(({ mxEvent }, ref) => {
{text}
</span>
);
}) as ForwardRefExoticComponent<IBodyProps>;
};
export default RedactedBody;

7
src/components/views/messages/UnknownBody.tsx
View File

@@ -7,16 +7,15 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { forwardRef, type ForwardRefExoticComponent } from "react";
import React, { type JSX } from "react";
import { type IBodyProps } from "./IBodyProps";
export default forwardRef<HTMLDivElement, IBodyProps>(({ mxEvent, children }, ref) => {
export default ({ mxEvent, ref }: IBodyProps): JSX.Element => {
const text = mxEvent.getContent().body;
return (
<div className="mx_UnknownBody" ref={ref}>
{text}
{children}
</div>
);
}) as ForwardRefExoticComponent<IBodyProps>;
};

198
src/components/views/right_panel/BaseCard.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { forwardRef, type ReactNode, type KeyboardEvent, type Ref, type MouseEvent } from "react";
import React, { type ReactNode, type KeyboardEvent, type Ref, type MouseEvent } from "react";
import classNames from "classnames";
import { IconButton, Text } from "@vector-im/compound-web";
import CloseIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
@@ -44,106 +44,102 @@ function closeRightPanel(ev: MouseEvent<HTMLButtonElement>): void {
RightPanelStore.instance.popCard();
}
const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
(
{
closeLabel,
onClose,
onBack,
className,
id,
ariaLabelledBy,
role,
hideHeaderButtons,
header,
footer,
withoutScrollContainer,
children,
onKeyDown,
closeButtonRef,
},
ref,
) => {
let backButton;
const cardHistory = RightPanelStore.instance.roomPhaseHistory;
if (cardHistory.length > 1 && !hideHeaderButtons) {
const prevCard = cardHistory[cardHistory.length - 2];
const onBackClick = (ev: MouseEvent<HTMLButtonElement>): void => {
onBack?.(ev);
RightPanelStore.instance.popCard();
};
const label = backLabelForPhase(prevCard.phase) ?? _t("action|back");
backButton = (
<IconButton
size="28px"
data-testid="base-card-back-button"
onClick={onBackClick}
tooltip={label}
subtleBackground
>
<ChevronLeftIcon />
</IconButton>
);
}
let closeButton;
if (!hideHeaderButtons) {
closeButton = (
<IconButton
size="28px"
data-testid="base-card-close-button"
onClick={onClose ?? closeRightPanel}
ref={closeButtonRef}
tooltip={closeLabel ?? _t("action|close")}
subtleBackground
>
<CloseIcon />
</IconButton>
);
}
if (!withoutScrollContainer) {
children = <AutoHideScrollbar>{children}</AutoHideScrollbar>;
}
const shouldRenderHeader = header || !hideHeaderButtons;
return (
<CardContext.Provider value={{ isCard: true }}>
<div
id={id}
aria-labelledby={ariaLabelledBy}
role={role}
className={classNames("mx_BaseCard", className)}
ref={ref}
onKeyDown={onKeyDown}
>
{shouldRenderHeader && (
<div className="mx_BaseCard_header">
{backButton}
{typeof header === "string" ? (
<div className="mx_BaseCard_header_title">
<Text
size="md"
weight="medium"
className="mx_BaseCard_header_title_heading"
role="heading"
>
{header}
</Text>
</div>
) : (
(header ?? <div className="mx_BaseCard_header_spacer" />)
)}
{closeButton}
</div>
)}
{children}
{footer && <div className="mx_BaseCard_footer">{footer}</div>}
</div>
</CardContext.Provider>
const BaseCard: React.FC<IProps> = ({
closeLabel,
onClose,
onBack,
className,
id,
ariaLabelledBy,
role,
hideHeaderButtons,
header,
footer,
withoutScrollContainer,
children,
onKeyDown,
closeButtonRef,
ref,
}: IProps) => {
let backButton;
const cardHistory = RightPanelStore.instance.roomPhaseHistory;
if (cardHistory.length > 1 && !hideHeaderButtons) {
const prevCard = cardHistory[cardHistory.length - 2];
const onBackClick = (ev: MouseEvent<HTMLButtonElement>): void => {
onBack?.(ev);
RightPanelStore.instance.popCard();
};
const label = backLabelForPhase(prevCard.phase) ?? _t("action|back");
backButton = (
<IconButton
size="28px"
data-testid="base-card-back-button"
onClick={onBackClick}
tooltip={label}
subtleBackground
>
<ChevronLeftIcon />
</IconButton>
);
},
);
}
let closeButton;
if (!hideHeaderButtons) {
closeButton = (
<IconButton
size="28px"
data-testid="base-card-close-button"
onClick={onClose ?? closeRightPanel}
ref={closeButtonRef}
tooltip={closeLabel ?? _t("action|close")}
subtleBackground
>
<CloseIcon />
</IconButton>
);
}
if (!withoutScrollContainer) {
children = <AutoHideScrollbar>{children}</AutoHideScrollbar>;
}
const shouldRenderHeader = header || !hideHeaderButtons;
return (
<CardContext.Provider value={{ isCard: true }}>
<div
id={id}
aria-labelledby={ariaLabelledBy}
role={role}
className={classNames("mx_BaseCard", className)}
ref={ref}
onKeyDown={onKeyDown}
>
{shouldRenderHeader && (
<div className="mx_BaseCard_header">
{backButton}
{typeof header === "string" ? (
<div className="mx_BaseCard_header_title">
<Text
size="md"
weight="medium"
className="mx_BaseCard_header_title_heading"
role="heading"
>
{header}
</Text>
</div>
) : (
(header ?? <div className="mx_BaseCard_header_spacer" />)
)}
{closeButton}
</div>
)}
{children}
{footer && <div className="mx_BaseCard_footer">{footer}</div>}
</div>
</CardContext.Provider>
);
};
export default BaseCard;

16
src/components/views/rooms/EventTile.tsx
View File

@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { createRef, forwardRef, type JSX, type MouseEvent, type ReactNode } from "react";
import React, { createRef, type JSX, type Ref, type MouseEvent, type ReactNode } from "react";
import classNames from "classnames";
import {
EventStatus,
@@ -228,6 +228,8 @@ export interface EventTileProps {
// The following properties are used by EventTilePreview to disable tab indexes within the event tile
hideTimestamp?: boolean;
inhibitInteraction?: boolean;
ref?: Ref<UnwrappedEventTile>;
}
interface IState {
@@ -1482,15 +1484,13 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
}
// Wrap all event tiles with the tile error boundary so that any throws even during construction are captured
const SafeEventTile = forwardRef<UnwrappedEventTile, EventTileProps>((props, ref) => {
const SafeEventTile = (props: EventTileProps): JSX.Element => {
return (
<>
<TileErrorBoundary mxEvent={props.mxEvent} layout={props.layout ?? Layout.Group}>
<UnwrappedEventTile ref={ref} {...props} />
</TileErrorBoundary>
</>
<TileErrorBoundary mxEvent={props.mxEvent} layout={props.layout ?? Layout.Group}>
<UnwrappedEventTile {...props} />
</TileErrorBoundary>
);
});
};
export default SafeEventTile;
function E2ePadlockUnencrypted(props: Omit<IE2ePadlockProps, "title" | "icon">): JSX.Element {

6
src/components/views/rooms/MemberList/MemberListView.tsx
View File

@@ -6,7 +6,7 @@ Please see LICENSE files in the repository root for full details.
*/
import { Form } from "@vector-im/compound-web";
import React from "react";
import React, { type JSX } from "react";
import { List, type ListRowProps } from "react-virtualized/dist/commonjs/List";
import { AutoSizer } from "react-virtualized";
@@ -33,7 +33,7 @@ const MemberListView: React.FC<IProps> = (props: IProps) => {
const totalRows = vm.members.length;
const getRowComponent = (item: MemberWithSeparator): React.JSX.Element => {
const getRowComponent = (item: MemberWithSeparator): JSX.Element => {
if (item === SEPARATOR) {
return <hr className="mx_MemberListView_separator" />;
} else if (item.member) {
@@ -64,7 +64,7 @@ const MemberListView: React.FC<IProps> = (props: IProps) => {
}
};
const rowRenderer = ({ key, index, style }: ListRowProps): React.JSX.Element => {
const rowRenderer = ({ key, index, style }: ListRowProps): JSX.Element => {
if (index === totalRows) {
// We've rendered all the members,
// now we render an empty div to add some space to the end of the list.

4
src/components/views/rooms/MemberList/tiles/common/E2EIconView.tsx
View File

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import React, { type JSX } from "react";
import { Tooltip } from "@vector-im/compound-web";
import VerifiedIcon from "@vector-im/compound-design-tokens/assets/web/icons/verified";
import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error-solid";
@@ -14,7 +14,7 @@ import { _t } from "../../../../../../languageHandler";
import { E2EStatus } from "../../../../../../utils/ShieldUtils";
import { crossSigningUserTitles } from "../../../E2EIcon";
function getIconFromStatus(status: E2EStatus): React.JSX.Element | undefined {
function getIconFromStatus(status: E2EStatus): JSX.Element | undefined {
switch (status) {
case E2EStatus.Normal:
return undefined;

4
src/components/views/rooms/MemberList/tiles/common/PresenceIconView.tsx
View File

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import React, { type JSX } from "react";
import OnlineOrUnavailableIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-solid-8x8";
import OfflineIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-outline-8x8";
import DNDIcon from "@vector-im/compound-design-tokens/assets/web/icons/presence-strikethrough-8x8";
@@ -19,7 +19,7 @@ interface Props {
export const BUSY_PRESENCE_NAME = new UnstableValue("busy", "org.matrix.msc3026.busy");
function getIconForPresenceState(state: string): React.JSX.Element {
function getIconForPresenceState(state: string): JSX.Element {
switch (state) {
case "online":
return <OnlineOrUnavailableIcon height="8px" width="8px" className="mx_PresenceIconView_online" />;

103
src/components/views/rooms/NotificationBadge/StatelessNotificationBadge.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { forwardRef } from "react";
import React, { type Ref, type JSX, type ReactNode } from "react";
import classNames from "classnames";
import { formatCount } from "../../../../utils/FormattingUtils";
@@ -26,6 +26,8 @@ interface Props {
* for the difference between the two.
*/
forceDot?: boolean;
children?: ReactNode;
ref?: Ref<HTMLDivElement>;
}
interface ClickableProps extends Props {
@@ -45,61 +47,66 @@ interface ClickableProps extends Props {
* notifications in the room list, it may have a green badge with the number of unread notifications,
* but somewhere else it may just have a green dot as a more compact representation of the same information.
*/
export const StatelessNotificationBadge = forwardRef<HTMLDivElement, XOR<Props, ClickableProps>>(
({ symbol, count, level, knocked, forceDot = false, ...props }, ref) => {
const hideBold = useSettingValue("feature_hidebold");
export const StatelessNotificationBadge = ({
symbol,
count,
level,
knocked,
forceDot = false,
...props
}: XOR<Props, ClickableProps>): JSX.Element => {
const hideBold = useSettingValue("feature_hidebold");
// Don't show a badge if we don't need to
if ((level === NotificationLevel.None || (hideBold && level == NotificationLevel.Activity)) && !knocked) {
return <></>;
}
// Don't show a badge if we don't need to
if ((level === NotificationLevel.None || (hideBold && level == NotificationLevel.Activity)) && !knocked) {
return <></>;
}
const hasUnreadCount = level >= NotificationLevel.Notification && (!!count || !!symbol);
const hasUnreadCount = level >= NotificationLevel.Notification && (!!count || !!symbol);
const isEmptyBadge = symbol === null && count === 0;
const isEmptyBadge = symbol === null && count === 0;
if (symbol === null && count > 0) {
symbol = formatCount(count);
}
if (symbol === null && count > 0) {
symbol = formatCount(count);
}
// We show a dot if either:
// * The props force us to, or
// * It's just an activity-level notification or (in theory) lower and the room isn't knocked
const badgeType =
forceDot || (level <= NotificationLevel.Activity && !knocked)
? "dot"
: !symbol || symbol.length < 3
? "badge_2char"
: "badge_3char";
// We show a dot if either:
// * The props force us to, or
// * It's just an activity-level notification or (in theory) lower and the room isn't knocked
const badgeType =
forceDot || (level <= NotificationLevel.Activity && !knocked)
? "dot"
: !symbol || symbol.length < 3
? "badge_2char"
: "badge_3char";
const classes = classNames({
"mx_NotificationBadge": true,
"mx_NotificationBadge_visible": isEmptyBadge || knocked ? true : hasUnreadCount,
"mx_NotificationBadge_level_notification": level == NotificationLevel.Notification,
"mx_NotificationBadge_level_highlight": level >= NotificationLevel.Highlight,
"mx_NotificationBadge_knocked": knocked,
const classes = classNames({
"mx_NotificationBadge": true,
"mx_NotificationBadge_visible": isEmptyBadge || knocked ? true : hasUnreadCount,
"mx_NotificationBadge_level_notification": level == NotificationLevel.Notification,
"mx_NotificationBadge_level_highlight": level >= NotificationLevel.Highlight,
"mx_NotificationBadge_knocked": knocked,
// Exactly one of mx_NotificationBadge_dot, mx_NotificationBadge_2char, mx_NotificationBadge_3char
"mx_NotificationBadge_dot": badgeType === "dot",
"mx_NotificationBadge_2char": badgeType === "badge_2char",
"mx_NotificationBadge_3char": badgeType === "badge_3char",
// Badges with text should always use light colors
"cpd-theme-light": badgeType !== "dot",
});
if (props.onClick) {
return (
<AccessibleButton {...props} className={classes} onClick={props.onClick} ref={ref}>
<span className="mx_NotificationBadge_count">{symbol}</span>
{props.children}
</AccessibleButton>
);
}
// Exactly one of mx_NotificationBadge_dot, mx_NotificationBadge_2char, mx_NotificationBadge_3char
"mx_NotificationBadge_dot": badgeType === "dot",
"mx_NotificationBadge_2char": badgeType === "badge_2char",
"mx_NotificationBadge_3char": badgeType === "badge_3char",
// Badges with text should always use light colors
"cpd-theme-light": badgeType !== "dot",
});
if (props.onClick) {
return (
<div className={classes} ref={ref}>
<AccessibleButton {...props} className={classes} onClick={props.onClick} ref={props.ref}>
<span className="mx_NotificationBadge_count">{symbol}</span>
</div>
{props.children}
</AccessibleButton>
);
},
);
}
return (
<div className={classes} ref={props.ref}>
<span className="mx_NotificationBadge_count">{symbol}</span>
</div>
);
};

36
src/components/views/rooms/RoomListPanel/RoomListItemMenuView.tsx
View File

@@ -5,7 +5,7 @@
* Please see LICENSE files in the repository root for full details.
*/
import React, { type ComponentProps, forwardRef, type JSX, useState } from "react";
import React, { type ComponentProps, type JSX, type Ref, useState } from "react";
import { IconButton, Menu, MenuItem, Separator, ToggleMenuItem, Tooltip } from "@vector-im/compound-web";
import MarkAsReadIcon from "@vector-im/compound-design-tokens/assets/web/icons/mark-as-read";
import MarkAsUnreadIcon from "@vector-im/compound-design-tokens/assets/web/icons/mark-as-unread";
@@ -147,22 +147,22 @@ function MoreOptionsMenu({ vm, setMenuOpen }: MoreOptionsMenuProps): JSX.Element
);
}
interface MoreOptionsButtonProps extends ComponentProps<typeof IconButton> {}
interface MoreOptionsButtonProps extends ComponentProps<typeof IconButton> {
ref?: Ref<HTMLButtonElement>;
}
/**
* A button to trigger the more options menu.
*/
export const MoreOptionsButton = forwardRef<HTMLButtonElement, MoreOptionsButtonProps>(
function MoreOptionsButton(props, ref) {
return (
<Tooltip label={_t("room_list|room|more_options")}>
<IconButton aria-label={_t("room_list|room|more_options")} {...props} ref={ref}>
<OverflowIcon />
</IconButton>
</Tooltip>
);
},
);
export const MoreOptionsButton = function MoreOptionsButton(props: MoreOptionsButtonProps): JSX.Element {
return (
<Tooltip label={_t("room_list|room|more_options")}>
<IconButton aria-label={_t("room_list|room|more_options")} {...props}>
<OverflowIcon />
</IconButton>
</Tooltip>
);
};
interface NotificationMenuProps {
/**
@@ -238,15 +238,17 @@ interface NotificationButtonProps extends ComponentProps<typeof IconButton> {
* Whether the room is muted.
*/
isRoomMuted: boolean;
ref?: Ref<HTMLButtonElement>;
}
/**
* A button to trigger the notification menu.
*/
export const NotificationButton = forwardRef<HTMLButtonElement, NotificationButtonProps>(function MoreOptionsButton(
{ isRoomMuted, ...props },
export const NotificationButton = function MoreOptionsButton({
isRoomMuted,
ref,
) {
...props
}: NotificationButtonProps): JSX.Element {
return (
<Tooltip label={_t("room_list|notification_options")}>
<IconButton aria-label={_t("room_list|notification_options")} {...props} ref={ref}>
@@ -254,4 +256,4 @@ export const NotificationButton = forwardRef<HTMLButtonElement, NotificationButt
</IconButton>
</Tooltip>
);
});
};

12
src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX, type ForwardedRef, forwardRef, type RefObject, useMemo } from "react";
import React, { type JSX, type RefObject, useMemo, type ReactNode } from "react";
import classNames from "classnames";
import type EditorStateTransfer from "../../../../utils/EditorStateTransfer";
@@ -21,15 +21,13 @@ import { type ComposerFunctions } from "./types";
interface ContentProps {
disabled?: boolean;
composerFunctions: ComposerFunctions;
ref?: RefObject<HTMLElement | null>;
}
const Content = forwardRef<HTMLElement, ContentProps>(function Content(
{ disabled = false, composerFunctions }: ContentProps,
forwardRef: ForwardedRef<HTMLElement>,
) {
useWysiwygEditActionHandler(disabled, forwardRef as RefObject<HTMLElement>, composerFunctions);
const Content = function Content({ disabled = false, composerFunctions, ref }: ContentProps): ReactNode {
useWysiwygEditActionHandler(disabled, ref, composerFunctions);
return null;
});
};
interface EditWysiwygComposerProps {
disabled?: boolean;

12
src/components/views/rooms/wysiwyg_composer/SendWysiwygComposer.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX, type ForwardedRef, forwardRef, type RefObject, useMemo } from "react";
import React, { type JSX, type RefObject, useMemo, type ReactNode } from "react";
import { type IEventRelation } from "matrix-js-sdk/src/matrix";
import { useWysiwygSendActionHandler } from "./hooks/useWysiwygSendActionHandler";
@@ -22,15 +22,13 @@ import { ComposerContext, getDefaultContextValue } from "./ComposerContext";
interface ContentProps {
disabled?: boolean;
composerFunctions: ComposerFunctions;
ref?: RefObject<HTMLElement | null>;
}
const Content = forwardRef<HTMLElement, ContentProps>(function Content(
{ disabled = false, composerFunctions }: ContentProps,
forwardRef: ForwardedRef<HTMLElement>,
) {
useWysiwygSendActionHandler(disabled, forwardRef as RefObject<HTMLElement>, composerFunctions);
const Content = function Content({ disabled = false, composerFunctions, ref }: ContentProps): ReactNode {
useWysiwygSendActionHandler(disabled, ref, composerFunctions);
return null;
});
};
export interface SendWysiwygComposerProps {
initialContent?: string;

68
src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
View File

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import classNames from "classnames";
import React, { type CSSProperties, forwardRef, memo, type RefObject, type ReactNode } from "react";
import React, { type CSSProperties, memo, type RefObject, type ReactNode } from "react";
import { useIsExpanded } from "../hooks/useIsExpanded";
import { useSelection } from "../hooks/useSelection";
@@ -19,44 +19,36 @@ interface EditorProps {
placeholder?: string;
leftComponent?: ReactNode;
rightComponent?: ReactNode;
ref?: RefObject<HTMLDivElement | null>;
}
export const Editor = memo(
forwardRef<HTMLDivElement | null, EditorProps>(function Editor(
{ disabled, placeholder, leftComponent, rightComponent }: EditorProps,
ref,
) {
const isExpanded = useIsExpanded(ref as RefObject<HTMLDivElement | null>, HEIGHT_BREAKING_POINT);
const { onFocus, onBlur, onInput } = useSelection();
export const Editor = memo(function Editor({ disabled, placeholder, leftComponent, rightComponent, ref }: EditorProps) {
const isExpanded = useIsExpanded(ref, HEIGHT_BREAKING_POINT);
const { onFocus, onBlur, onInput } = useSelection();
return (
<div
data-testid="WysiwygComposerEditor"
className="mx_WysiwygComposer_Editor"
data-is-expanded={isExpanded}
>
{leftComponent}
<div className="mx_WysiwygComposer_Editor_container">
<div
className={classNames("mx_WysiwygComposer_Editor_content", {
mx_WysiwygComposer_Editor_content_placeholder: Boolean(placeholder),
})}
style={{ "--placeholder": `"${placeholder}"` } as CSSProperties}
ref={ref}
contentEditable={!disabled}
role="textbox"
aria-multiline="true"
aria-autocomplete="list"
aria-haspopup="listbox"
dir="auto"
aria-disabled={disabled}
onFocus={onFocus}
onBlur={onBlur}
onInput={onInput}
/>
</div>
{rightComponent}
return (
<div data-testid="WysiwygComposerEditor" className="mx_WysiwygComposer_Editor" data-is-expanded={isExpanded}>
{leftComponent}
<div className="mx_WysiwygComposer_Editor_container">
<div
className={classNames("mx_WysiwygComposer_Editor_content", {
mx_WysiwygComposer_Editor_content_placeholder: Boolean(placeholder),
})}
style={{ "--placeholder": `"${placeholder}"` } as CSSProperties}
ref={ref}
contentEditable={!disabled}
role="textbox"
aria-multiline="true"
aria-autocomplete="list"
aria-haspopup="listbox"
dir="auto"
aria-disabled={disabled}
onFocus={onFocus}
onBlur={onBlur}
onInput={onInput}
/>
</div>
);
}),
);
{rightComponent}
</div>
);
});

121
src/components/views/rooms/wysiwyg_composer/components/WysiwygAutocomplete.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type JSX, type ForwardedRef, forwardRef, type FunctionComponent } from "react";
import React, { type JSX, type Ref, type FunctionComponent } from "react";
import { type FormattingFunctions, type MappedSuggestion } from "@vector-im/matrix-wysiwyg";
import { logger } from "matrix-js-sdk/src/logger";
@@ -39,6 +39,8 @@ interface WysiwygAutocompleteProps {
* Handler purely for the at-room mentions special case
*/
handleAtRoomMention: FormattingFunctions["mentionAtRoom"];
ref?: Ref<Autocomplete>;
}
/**
@@ -48,69 +50,70 @@ interface WysiwygAutocompleteProps {
*
* @param props.ref - the ref will be attached to the rendered `<Autocomplete />` component
*/
const WysiwygAutocomplete = forwardRef(
(
{ suggestion, handleMention, handleCommand, handleAtRoomMention }: WysiwygAutocompleteProps,
ref: ForwardedRef<Autocomplete>,
): JSX.Element | null => {
const { room } = useScopedRoomContext("room");
const client = useMatrixClientContext();
const WysiwygAutocomplete = ({
suggestion,
handleMention,
handleCommand,
handleAtRoomMention,
ref,
}: WysiwygAutocompleteProps): JSX.Element | null => {
const { room } = useScopedRoomContext("room");
const client = useMatrixClientContext();
function handleConfirm(completion: ICompletion): void {
if (client === undefined || room === undefined) {
return;
}
switch (completion.type) {
case "command": {
// TODO determine if utils in SlashCommands.tsx are required.
// Trim the completion as some include trailing spaces, but we always insert a
// trailing space in the rust model anyway
handleCommand(completion.completion.trim());
return;
}
case "at-room": {
handleAtRoomMention(getMentionAttributes(completion, client, room));
return;
}
case "room":
case "user": {
if (typeof completion.href === "string") {
handleMention(
completion.href,
getMentionDisplayText(completion, client),
getMentionAttributes(completion, client, room),
);
}
return;
}
// TODO - handle "community" type
default:
return;
}
function handleConfirm(completion: ICompletion): void {
if (client === undefined || room === undefined) {
return;
}
if (!room) return null;
switch (completion.type) {
case "command": {
// TODO determine if utils in SlashCommands.tsx are required.
// Trim the completion as some include trailing spaces, but we always insert a
// trailing space in the rust model anyway
handleCommand(completion.completion.trim());
return;
}
case "at-room": {
handleAtRoomMention(getMentionAttributes(completion, client, room));
return;
}
case "room":
case "user": {
if (typeof completion.href === "string") {
handleMention(
completion.href,
getMentionDisplayText(completion, client),
getMentionAttributes(completion, client, room),
);
}
return;
}
// TODO - handle "community" type
default:
return;
}
}
const autoCompleteQuery = buildQuery(suggestion);
// debug for https://github.com/vector-im/element-web/issues/26037
logger.log(`## 26037 ## Rendering Autocomplete for WysiwygAutocomplete with query: "${autoCompleteQuery}"`);
if (!room) return null;
// TODO - determine if we show all of the /command suggestions, there are some options in the
// list which don't seem to make sense in this context, specifically /html and /plain
return (
<div className="mx_WysiwygComposer_AutoCompleteWrapper" data-testid="autocomplete-wrapper">
<Autocomplete
ref={ref}
query={autoCompleteQuery}
onConfirm={handleConfirm}
selection={{ start: 0, end: 0 }}
room={room}
/>
</div>
);
},
);
const autoCompleteQuery = buildQuery(suggestion);
// debug for https://github.com/vector-im/element-web/issues/26037
logger.log(`## 26037 ## Rendering Autocomplete for WysiwygAutocomplete with query: "${autoCompleteQuery}"`);
// TODO - determine if we show all of the /command suggestions, there are some options in the
// list which don't seem to make sense in this context, specifically /html and /plain
return (
<div className="mx_WysiwygComposer_AutoCompleteWrapper" data-testid="autocomplete-wrapper">
<Autocomplete
ref={ref}
query={autoCompleteQuery}
onConfirm={handleConfirm}
selection={{ start: 0, end: 0 }}
room={room}
/>
</div>
);
};
(WysiwygAutocomplete as FunctionComponent).displayName = "WysiwygAutocomplete";

4
src/components/views/rooms/wysiwyg_composer/hooks/useIsExpanded.ts
View File

@@ -8,10 +8,10 @@ Please see LICENSE files in the repository root for full details.
import { type RefObject, useEffect, useState } from "react";
export function useIsExpanded(ref: RefObject<HTMLElement | null>, breakingPoint: number): boolean {
export function useIsExpanded(ref: RefObject<HTMLElement | null> | undefined, breakingPoint: number): boolean {
const [isExpanded, setIsExpanded] = useState(false);
useEffect(() => {
if (ref.current) {
if (ref?.current) {
const editor = ref.current;
const resizeObserver = new ResizeObserver((entries) => {
requestAnimationFrame(() => {

4
src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts
View File

@@ -22,7 +22,7 @@ import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.
export function useWysiwygEditActionHandler(
disabled: boolean,
composerElement: RefObject<HTMLElement>,
composerElement: RefObject<HTMLElement | null> | undefined,
composerFunctions: ComposerFunctions,
): void {
const roomContext = useScopedRoomContext("timelineRenderingType");
@@ -33,7 +33,7 @@ export function useWysiwygEditActionHandler(
(payload: ActionPayload) => {
// don't let the user into the composer if it is disabled - all of these branches lead
// to the cursor being in the composer
if (disabled || !composerElement.current) return;
if (disabled || !composerElement?.current) return;
const context = payload.context ?? TimelineRenderingType.Room;

2
src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts
View File

@@ -22,7 +22,7 @@ import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.
export function useWysiwygSendActionHandler(
disabled: boolean,
composerElement: RefObject<HTMLElement>,
composerElement: RefObject<HTMLElement | null> | undefined,
composerFunctions: ComposerFunctions,
): void {
const roomContext = useScopedRoomContext("timelineRenderingType");

2
src/components/views/settings/devices/DeviceExpandDetailsButton.tsx
View File

@@ -15,7 +15,7 @@ import AccessibleButton, { type ButtonProps } from "../../elements/AccessibleBut
type Props<T extends keyof HTMLElementTagNameMap> = Omit<
ButtonProps<T>,
"aria-label" | "title" | "kind" | "className" | "element"
"aria-label" | "title" | "kind" | "className" | "element" | "ref"
> & {
isExpanded: boolean;
};

279
src/components/views/settings/devices/FilteredDeviceList.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type ForwardedRef, forwardRef } from "react";
import React, { type JSX, type Ref } from "react";
import { type IPusher, PUSHER_DEVICE_ID, type LocalNotificationSettings } from "matrix-js-sdk/src/matrix";
import { _t } from "../../../../languageHandler";
@@ -47,6 +47,7 @@ interface Props {
* Changes sign out button to be a manage button
*/
delegatedAuthAccountUrl?: string;
ref?: Ref<HTMLDivElement>;
}
const isDeviceSelected = (
@@ -237,152 +238,148 @@ const DeviceListItem: React.FC<{
* Filtered list of devices
* Sorted by latest activity descending
*/
export const FilteredDeviceList = forwardRef(
(
{
devices,
pushers,
localNotificationSettings,
filter,
expandedDeviceIds,
signingOutDeviceIds,
selectedDeviceIds,
onFilterChange,
onDeviceExpandToggle,
saveDeviceName,
onSignOutDevices,
onRequestDeviceVerification,
setPushNotifications,
setSelectedDeviceIds,
supportsMSC3881,
delegatedAuthAccountUrl,
}: Props,
ref: ForwardedRef<HTMLDivElement>,
) => {
const sortedDevices = getFilteredSortedDevices(devices, filter);
export const FilteredDeviceList = ({
devices,
pushers,
localNotificationSettings,
filter,
expandedDeviceIds,
signingOutDeviceIds,
selectedDeviceIds,
onFilterChange,
onDeviceExpandToggle,
saveDeviceName,
onSignOutDevices,
onRequestDeviceVerification,
setPushNotifications,
setSelectedDeviceIds,
supportsMSC3881,
delegatedAuthAccountUrl,
ref,
}: Props): JSX.Element => {
const sortedDevices = getFilteredSortedDevices(devices, filter);
function getPusherForDevice(device: ExtendedDevice): IPusher | undefined {
return pushers.find((pusher) => pusher[PUSHER_DEVICE_ID.name] === device.device_id);
function getPusherForDevice(device: ExtendedDevice): IPusher | undefined {
return pushers.find((pusher) => pusher[PUSHER_DEVICE_ID.name] === device.device_id);
}
const toggleSelection = (deviceId: ExtendedDevice["device_id"]): void => {
if (isDeviceSelected(deviceId, selectedDeviceIds)) {
// remove from selection
setSelectedDeviceIds(selectedDeviceIds.filter((id) => id !== deviceId));
} else {
setSelectedDeviceIds([...selectedDeviceIds, deviceId]);
}
};
const toggleSelection = (deviceId: ExtendedDevice["device_id"]): void => {
if (isDeviceSelected(deviceId, selectedDeviceIds)) {
// remove from selection
setSelectedDeviceIds(selectedDeviceIds.filter((id) => id !== deviceId));
} else {
setSelectedDeviceIds([...selectedDeviceIds, deviceId]);
}
};
const options: FilterDropdownOption<DeviceFilterKey>[] = [
{ id: ALL_FILTER_ID, label: _t("settings|sessions|filter_all") },
{
id: DeviceSecurityVariation.Verified,
label: _t("common|verified"),
description: _t("settings|sessions|filter_verified_description"),
},
{
id: DeviceSecurityVariation.Unverified,
label: _t("common|unverified"),
description: _t("settings|sessions|filter_unverified_description"),
},
{
id: DeviceSecurityVariation.Inactive,
label: _t("settings|sessions|filter_inactive"),
description: _t("settings|sessions|filter_inactive_description", {
inactiveAgeDays: INACTIVE_DEVICE_AGE_DAYS,
}),
},
];
const options: FilterDropdownOption<DeviceFilterKey>[] = [
{ id: ALL_FILTER_ID, label: _t("settings|sessions|filter_all") },
{
id: DeviceSecurityVariation.Verified,
label: _t("common|verified"),
description: _t("settings|sessions|filter_verified_description"),
},
{
id: DeviceSecurityVariation.Unverified,
label: _t("common|unverified"),
description: _t("settings|sessions|filter_unverified_description"),
},
{
id: DeviceSecurityVariation.Inactive,
label: _t("settings|sessions|filter_inactive"),
description: _t("settings|sessions|filter_inactive_description", {
inactiveAgeDays: INACTIVE_DEVICE_AGE_DAYS,
}),
},
];
const onFilterOptionChange = (filterId: DeviceFilterKey): void => {
onFilterChange(filterId === ALL_FILTER_ID ? undefined : (filterId as FilterVariation));
};
const onFilterOptionChange = (filterId: DeviceFilterKey): void => {
onFilterChange(filterId === ALL_FILTER_ID ? undefined : (filterId as FilterVariation));
};
const isAllSelected = selectedDeviceIds.length >= sortedDevices.length;
const toggleSelectAll = (): void => {
if (isAllSelected) {
setSelectedDeviceIds([]);
} else {
setSelectedDeviceIds(sortedDevices.map((device) => device.device_id));
}
};
const isAllSelected = selectedDeviceIds.length >= sortedDevices.length;
const toggleSelectAll = (): void => {
if (isAllSelected) {
setSelectedDeviceIds([]);
} else {
setSelectedDeviceIds(sortedDevices.map((device) => device.device_id));
}
};
const isSigningOut = !!signingOutDeviceIds.length;
const isSigningOut = !!signingOutDeviceIds.length;
return (
<div className="mx_FilteredDeviceList" ref={ref}>
<FilteredDeviceListHeader
selectedDeviceCount={selectedDeviceIds.length}
isAllSelected={isAllSelected}
toggleSelectAll={toggleSelectAll}
isSelectDisabled={!!delegatedAuthAccountUrl}
>
{selectedDeviceIds.length ? (
<>
<AccessibleButton
data-testid="sign-out-selection-cta"
kind="danger_inline"
disabled={isSigningOut}
onClick={() => onSignOutDevices(selectedDeviceIds)}
className="mx_FilteredDeviceList_headerButton"
>
{isSigningOut && <Spinner w={16} h={16} />}
{_t("action|sign_out")}
</AccessibleButton>
<AccessibleButton
data-testid="cancel-selection-cta"
kind="content_inline"
disabled={isSigningOut}
onClick={() => setSelectedDeviceIds([])}
className="mx_FilteredDeviceList_headerButton"
>
{_t("action|cancel")}
</AccessibleButton>
</>
) : (
<FilterDropdown<DeviceFilterKey>
id="device-list-filter"
label={_t("settings|sessions|filter_label")}
value={filter || ALL_FILTER_ID}
onOptionChange={onFilterOptionChange}
options={options}
selectedLabel={_t("action|show")}
/>
)}
</FilteredDeviceListHeader>
{!!sortedDevices.length ? (
<FilterSecurityCard filter={filter} />
return (
<div className="mx_FilteredDeviceList" ref={ref}>
<FilteredDeviceListHeader
selectedDeviceCount={selectedDeviceIds.length}
isAllSelected={isAllSelected}
toggleSelectAll={toggleSelectAll}
isSelectDisabled={!!delegatedAuthAccountUrl}
>
{selectedDeviceIds.length ? (
<>
<AccessibleButton
data-testid="sign-out-selection-cta"
kind="danger_inline"
disabled={isSigningOut}
onClick={() => onSignOutDevices(selectedDeviceIds)}
className="mx_FilteredDeviceList_headerButton"
>
{isSigningOut && <Spinner w={16} h={16} />}
{_t("action|sign_out")}
</AccessibleButton>
<AccessibleButton
data-testid="cancel-selection-cta"
kind="content_inline"
disabled={isSigningOut}
onClick={() => setSelectedDeviceIds([])}
className="mx_FilteredDeviceList_headerButton"
>
{_t("action|cancel")}
</AccessibleButton>
</>
) : (
<NoResults filter={filter} clearFilter={() => onFilterChange(undefined)} />
<FilterDropdown<DeviceFilterKey>
id="device-list-filter"
label={_t("settings|sessions|filter_label")}
value={filter || ALL_FILTER_ID}
onOptionChange={onFilterOptionChange}
options={options}
selectedLabel={_t("action|show")}
/>
)}
<ol className="mx_FilteredDeviceList_list">
{sortedDevices.map((device) => (
<DeviceListItem
key={device.device_id}
device={device}
pusher={getPusherForDevice(device)}
localNotificationSettings={localNotificationSettings.get(device.device_id)}
isExpanded={expandedDeviceIds.includes(device.device_id)}
isSigningOut={signingOutDeviceIds.includes(device.device_id)}
isSelected={isDeviceSelected(device.device_id, selectedDeviceIds)}
isSelectDisabled={!!delegatedAuthAccountUrl}
onDeviceExpandToggle={() => onDeviceExpandToggle(device.device_id)}
onSignOutDevice={() => onSignOutDevices([device.device_id])}
saveDeviceName={(deviceName: string) => saveDeviceName(device.device_id, deviceName)}
onRequestDeviceVerification={
onRequestDeviceVerification
? () => onRequestDeviceVerification(device.device_id)
: undefined
}
setPushNotifications={setPushNotifications}
toggleSelected={() => toggleSelection(device.device_id)}
supportsMSC3881={supportsMSC3881}
delegatedAuthAccountUrl={delegatedAuthAccountUrl}
/>
))}
</ol>
</div>
);
},
);
</FilteredDeviceListHeader>
{!!sortedDevices.length ? (
<FilterSecurityCard filter={filter} />
) : (
<NoResults filter={filter} clearFilter={() => onFilterChange(undefined)} />
)}
<ol className="mx_FilteredDeviceList_list">
{sortedDevices.map((device) => (
<DeviceListItem
key={device.device_id}
device={device}
pusher={getPusherForDevice(device)}
localNotificationSettings={localNotificationSettings.get(device.device_id)}
isExpanded={expandedDeviceIds.includes(device.device_id)}
isSigningOut={signingOutDeviceIds.includes(device.device_id)}
isSelected={isDeviceSelected(device.device_id, selectedDeviceIds)}
isSelectDisabled={!!delegatedAuthAccountUrl}
onDeviceExpandToggle={() => onDeviceExpandToggle(device.device_id)}
onSignOutDevice={() => onSignOutDevices([device.device_id])}
saveDeviceName={(deviceName: string) => saveDeviceName(device.device_id, deviceName)}
onRequestDeviceVerification={
onRequestDeviceVerification
? () => onRequestDeviceVerification(device.device_id)
: undefined
}
setPushNotifications={setPushNotifications}
toggleSelected={() => toggleSelection(device.device_id)}
supportsMSC3881={supportsMSC3881}
delegatedAuthAccountUrl={delegatedAuthAccountUrl}
/>
))}
</ol>
</div>
);
};

2
src/components/views/spaces/SpaceTreeLevel.tsx
View File

@@ -45,7 +45,7 @@ import { KeyBindingAction } from "../../../accessibility/KeyboardShortcuts";
type ButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<
AccessibleButtonProps<T>,
"title" | "onClick" | "size" | "element"
"title" | "onClick" | "size" | "element" | "ref"
> & {
space?: Room;
spaceKey?: SpaceKey;

74
src/components/views/spaces/threads-activity-centre/ThreadsActivityCentreButton.tsx
View File

@@ -6,7 +6,7 @@
* Please see LICENSE files in the repository root for full details.
*/
import React, { type ComponentProps, forwardRef } from "react";
import React, { type ComponentProps, type Ref, type JSX } from "react";
import ThreadsSolidIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads-solid";
import classNames from "classnames";
import { IconButton, Text, Tooltip } from "@vector-im/compound-web";
@@ -28,44 +28,46 @@ interface ThreadsActivityCentreButtonProps extends ComponentProps<typeof IconBut
* The notification level of the threads.
*/
notificationLevel: NotificationLevel;
ref?: Ref<HTMLButtonElement>;
}
/**
* A button to open the thread activity centre.
*/
export const ThreadsActivityCentreButton = forwardRef<HTMLButtonElement, ThreadsActivityCentreButtonProps>(
function ThreadsActivityCentreButton(
{ displayLabel, notificationLevel, disableTooltip, ...props },
ref,
): React.JSX.Element {
// Disable tooltip when the label is displayed
const openTooltip = disableTooltip || displayLabel ? false : undefined;
export const ThreadsActivityCentreButton = function ThreadsActivityCentreButton({
displayLabel,
notificationLevel,
disableTooltip,
ref,
...props
}: ThreadsActivityCentreButtonProps): JSX.Element {
// Disable tooltip when the label is displayed
const openTooltip = disableTooltip || displayLabel ? false : undefined;
return (
<Tooltip label={_t("common|threads")} placement="right" open={openTooltip}>
<IconButton
aria-label={_t("common|threads")}
className={classNames("mx_ThreadsActivityCentreButton", { expanded: displayLabel })}
indicator={notificationLevelToIndicator(notificationLevel)}
{...props}
ref={ref}
>
<>
<ThreadsSolidIcon className="mx_ThreadsActivityCentreButton_Icon" />
{/* This is dirty, but we need to add the label to the indicator icon */}
{displayLabel && (
<Text
className="mx_ThreadsActivityCentreButton_Text"
as="span"
size="md"
title={_t("common|threads")}
>
{_t("common|threads")}
</Text>
)}
</>
</IconButton>
</Tooltip>
);
},
);
return (
<Tooltip label={_t("common|threads")} placement="right" open={openTooltip}>
<IconButton
aria-label={_t("common|threads")}
className={classNames("mx_ThreadsActivityCentreButton", { expanded: displayLabel })}
indicator={notificationLevelToIndicator(notificationLevel)}
{...props}
ref={ref}
>
<>
<ThreadsSolidIcon className="mx_ThreadsActivityCentreButton_Icon" />
{/* This is dirty, but we need to add the label to the indicator icon */}
{displayLabel && (
<Text
className="mx_ThreadsActivityCentreButton_Text"
as="span"
size="md"
title={_t("common|threads")}
>
{_t("common|threads")}
</Text>
)}
</>
</IconButton>
</Tooltip>
);
};

53
src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx
View File

@@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { createRef, useState, forwardRef } from "react";
import React, { createRef, useState, type Ref, type FC } from "react";
import classNames from "classnames";
import { type MatrixCall } from "matrix-js-sdk/src/webrtc/call";
@@ -41,31 +41,40 @@ type ButtonProps = Omit<AccessibleButtonProps<"div">, "title" | "element"> & {
offLabel?: string;
forceHide?: boolean;
onHover?: (hovering: boolean) => void;
ref?: Ref<HTMLElement>;
};
const LegacyCallViewToggleButton = forwardRef<HTMLElement, ButtonProps>(
({ children, state: isOn, className, onLabel, offLabel, forceHide, onHover, ...props }, ref) => {
const classes = classNames("mx_LegacyCallViewButtons_button", className, {
mx_LegacyCallViewButtons_button_on: isOn,
mx_LegacyCallViewButtons_button_off: !isOn,
});
const LegacyCallViewToggleButton: FC<ButtonProps> = ({
children,
state: isOn,
className,
onLabel,
offLabel,
forceHide,
onHover,
ref,
...props
}) => {
const classes = classNames("mx_LegacyCallViewButtons_button", className, {
mx_LegacyCallViewButtons_button_on: isOn,
mx_LegacyCallViewButtons_button_off: !isOn,
});
const title = forceHide ? undefined : isOn ? onLabel : offLabel;
const title = forceHide ? undefined : isOn ? onLabel : offLabel;
return (
<AccessibleButton
ref={ref}
className={classes}
title={title}
placement="top"
onTooltipOpenChange={onHover}
{...props}
>
{children}
</AccessibleButton>
);
},
);
return (
<AccessibleButton
ref={ref}
className={classes}
title={title}
placement="top"
onTooltipOpenChange={onHover}
{...props}
>
{children}
</AccessibleButton>
);
};
interface IDropdownButtonProps extends ButtonProps {
deviceKinds: MediaDeviceKindEnum[];

26
src/contexts/MatrixClientContext.tsx
View File

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import React, { type ComponentClass, createContext, forwardRef, useContext } from "react";
import React, { type ComponentClass, createContext, useContext } from "react";
import { type MatrixClient } from "matrix-js-sdk/src/matrix";
// This context is available to components under LoggedInView,
@@ -24,22 +24,16 @@ export function useMatrixClientContext(): MatrixClient {
return useContext(MatrixClientContext);
}
const matrixHOC = <ComposedComponentProps extends object>(
ComposedComponent: ComponentClass<ComposedComponentProps>,
): ((
props: Omit<ComposedComponentProps, "mxClient"> & React.RefAttributes<InstanceType<typeof ComposedComponent>>,
) => React.ReactElement | null) => {
type ComposedComponentInstance = InstanceType<typeof ComposedComponent>;
// eslint-disable-next-line react-hooks/rules-of-hooks
const TypedComponent = ComposedComponent;
return forwardRef<ComposedComponentInstance, Omit<ComposedComponentProps, "mxClient">>((props, ref) => {
const matrixHOC =
<ComposedComponentProps extends object>(
ComposedComponent: ComponentClass<ComposedComponentProps>,
): ((
props: Omit<ComposedComponentProps, "mxClient"> & React.RefAttributes<InstanceType<typeof ComposedComponent>>,
) => React.ReactElement | null) =>
(props) => {
const client = useContext(MatrixClientContext);
// @ts-ignore
return <TypedComponent ref={ref} {...props} mxClient={client} />;
});
};
return <ComposedComponent {...props} mxClient={client} />;
};
export const withMatrixClientHOC = matrixHOC;

2
src/events/EventTileFactory.tsx
View File

@@ -69,7 +69,7 @@ export interface EventTileTypeProps
}
type FactoryProps = Omit<EventTileTypeProps, "ref">;
type Factory<X = FactoryProps> = (ref: Optional<React.RefObject<any>>, props: X) => JSX.Element;
type Factory<X = FactoryProps> = (ref: React.RefObject<any> | undefined, props: X) => JSX.Element;
export const MessageEventFactory: Factory = (ref, props) => <MessageEvent ref={ref} {...props} />;
const LegacyCallEventFactory: Factory<FactoryProps & { callEventGrouper: LegacyCallEventGrouper }> = (ref, props) => (

4
test/unit-tests/components/views/rooms/memberlist/MemberListHeaderView-test.tsx
View File

@@ -11,8 +11,8 @@ import { act, fireEvent, screen, waitFor } from "jest-matrix-react";
import { RoomMember, User, RoomEvent } from "matrix-js-sdk/src/matrix";
import { KnownMembership } from "matrix-js-sdk/src/types";
import { mocked } from "jest-mock";
import { type JSX } from "react";
import type React from "react";
import { shouldShowComponent } from "../../../../../../src/customisations/helpers/UIComponents";
import defaultDispatcher from "../../../../../../src/dispatcher/dispatcher";
import { type Rendered, renderMemberList } from "./common";
@@ -21,7 +21,7 @@ jest.mock("../../../../../../src/customisations/helpers/UIComponents", () => ({
shouldShowComponent: jest.fn(),
}));
type Children = (args: { height: number; width: number }) => React.JSX.Element;
type Children = (args: { height: number; width: number }) => JSX.Element;
jest.mock("react-virtualized", () => {
const ReactVirtualized = jest.requireActual("react-virtualized");
return {

4
test/unit-tests/components/views/rooms/memberlist/MemberListView-test.tsx
View File

@@ -10,8 +10,8 @@ Please see LICENSE files in the repository root for full details.
import { act } from "react";
import { waitFor } from "jest-matrix-react";
import { type Room, type RoomMember, MatrixEvent } from "matrix-js-sdk/src/matrix";
import { type JSX } from "react";
import type React from "react";
import { filterConsole } from "../../../../../test-utils";
import { type Rendered, renderMemberList } from "./common";
@@ -19,7 +19,7 @@ jest.mock("../../../../../../src/customisations/helpers/UIComponents", () => ({
shouldShowComponent: jest.fn(),
}));
type Children = (args: { height: number; width: number }) => React.JSX.Element;
type Children = (args: { height: number; width: number }) => JSX.Element;
jest.mock("react-virtualized", () => {
const ReactVirtualized = jest.requireActual("react-virtualized");
return {