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

Update usages of refs for React 19 compatibility (#29536)

Browse Source 
* Update usages of refs for React 19 compatibility

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

* Iterate

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

* Iterate

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

* Simplify

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

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-03-28 10:07:41 +00:00
committed by GitHub
parent d7730f417b
commit fac982811c
75 changed files with 378 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/structures/AutoHideScrollbar.tsx
View File

@@ -30,7 +30,7 @@ export default class AutoHideScrollbar<T extends keyof JSX.IntrinsicElements> ex
element: "div" as keyof ReactHTML,
};
public readonly containerRef: React.RefObject<HTMLDivElement> = React.createRef();
public readonly containerRef = React.createRef<HTMLDivElement>();
public componentDidMount(): void {
if (this.containerRef.current && this.props.onScroll) {

6
src/components/structures/ContextMenu.tsx
View File

@@ -582,13 +582,15 @@ export const alwaysAboveRightOf = (
type ContextMenuTuple<T> = [
boolean,
RefObject<T>,
RefObject<T | null>,
(ev?: SyntheticEvent) => void,
(ev?: SyntheticEvent) => void,
(val: boolean) => void,
];
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
export const useContextMenu = <T extends any = HTMLElement>(inputRef?: RefObject<T>): ContextMenuTuple<T> => {
export const useContextMenu = <T extends HTMLElement = HTMLElement>(
inputRef?: RefObject<T | null>,
): ContextMenuTuple<T> => {
let button = useRef<T>(null);
if (inputRef) {
// if we are given a ref, use it instead of ours

6
src/components/structures/LoggedInView.tsx
View File

@@ -124,9 +124,9 @@ class LoggedInView extends React.Component<IProps, IState> {
public static displayName = "LoggedInView";
protected readonly _matrixClient: MatrixClient;
protected readonly _roomView: React.RefObject<RoomView>;
protected readonly _resizeContainer: React.RefObject<HTMLDivElement>;
protected readonly resizeHandler: React.RefObject<HTMLDivElement>;
protected readonly _roomView: React.RefObject<RoomView | null>;
protected readonly _resizeContainer: React.RefObject<HTMLDivElement | null>;
protected readonly resizeHandler: React.RefObject<HTMLDivElement | null>;
protected layoutWatcherRef?: string;
protected compactLayoutWatcherRef?: string;
protected backgroundImageWatcherRef?: string;

6
src/components/structures/PipContainer.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 MutableRefObject, type ReactNode, useRef } from "react";
import React, { type RefObject, type ReactNode, useRef } from "react";
import { CallEvent, CallState, type MatrixCall } from "matrix-js-sdk/src/webrtc/call";
import { logger } from "matrix-js-sdk/src/logger";
import { type Optional } from "matrix-events-sdk";
@@ -34,7 +34,7 @@ const SHOW_CALL_IN_STATES = [
];
interface IProps {
movePersistedElement: MutableRefObject<(() => void) | undefined>;
movePersistedElement: RefObject<(() => void) | null>;
}
interface IState {
@@ -280,7 +280,7 @@ class PipContainerInner extends React.Component<IProps, IState> {
}
export const PipContainer: React.FC = () => {
const movePersistedElement = useRef<() => void>();
const movePersistedElement = useRef<() => void>(null);
return <PipContainerInner movePersistedElement={movePersistedElement} />;
};

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

@@ -59,7 +59,7 @@ export const RoomSearchView = forwardRef<ScrollPanel, Props>(
const aborted = useRef(false);
// A map from room ID to permalink creator
const permalinkCreators = useMemo(() => new Map<string, RoomPermalinkCreator>(), []);
const innerRef = useRef<ScrollPanel | null>();
const innerRef = useRef<ScrollPanel>(null);
useEffect(() => {
return () => {

2
src/components/structures/RoomView.tsx
View File

@@ -256,7 +256,7 @@ interface LocalRoomViewProps {
localRoom: LocalRoom;
resizeNotifier: ResizeNotifier;
permalinkCreator: RoomPermalinkCreator;
roomView: RefObject<HTMLElement>;
roomView: RefObject<HTMLElement | null>;
onFileDrop: (dataTransfer: DataTransfer) => Promise<void>;
mainSplitContentType: MainSplitContentType;
}

2
src/components/structures/SpaceHierarchy.tsx
View File

@@ -637,7 +637,7 @@ const useIntersectionObserver = (callback: () => void): ((element: HTMLDivElemen
}
};
const observerRef = useRef<IntersectionObserver>();
const observerRef = useRef<IntersectionObserver>(undefined);
return (element: HTMLDivElement) => {
if (observerRef.current) {
observerRef.current.disconnect();

2
src/components/structures/UserMenu.tsx
View File

@@ -81,7 +81,7 @@ export default class UserMenu extends React.Component<IProps, IState> {
private dispatcherRef?: string;
private themeWatcherRef?: string;
private readonly dndWatcherRef?: string;
private buttonRef: React.RefObject<HTMLButtonElement> = createRef();
private buttonRef = createRef<HTMLButtonElement>();
public constructor(props: IProps) {
super(props);

2
src/components/structures/WaitingForThirdPartyRoomView.tsx
View File

@@ -21,7 +21,7 @@ import SdkConfig from "../../SdkConfig";
import { useScopedRoomContext } from "../../contexts/ScopedRoomContext.tsx";
interface Props {
roomView: RefObject<HTMLElement>;
roomView: RefObject<HTMLElement | null>;
resizeNotifier: ResizeNotifier;
inviteEvent: MatrixEvent;
}

8
src/components/structures/auth/ForgotPassword.tsx
View File

@@ -388,7 +388,9 @@ export default class ForgotPassword extends React.Component<Props, State> {
label={_td("auth|change_password_new_label")}
value={this.state.password}
minScore={PASSWORD_MIN_SCORE}
fieldRef={(field) => (this.fieldPassword = field)}
fieldRef={(field) => {
this.fieldPassword = field;
}}
onChange={this.onInputChanged.bind(this, "password")}
autoComplete="new-password"
/>
@@ -399,7 +401,9 @@ export default class ForgotPassword extends React.Component<Props, State> {
labelInvalid={_td("auth|reset_password|passwords_mismatch")}
value={this.state.password2}
password={this.state.password}
fieldRef={(field) => (this.fieldPasswordConfirm = field)}
fieldRef={(field) => {
this.fieldPasswordConfirm = field;
}}
onChange={this.onInputChanged.bind(this, "password2")}
autoComplete="new-password"
/>

6
src/components/views/audio_messages/AudioPlayerBase.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, { createRef, type ReactNode, type RefObject } from "react";
import React, { createRef, type ReactNode } from "react";
import { logger } from "matrix-js-sdk/src/logger";
import { type Playback, type PlaybackState } from "../../../audio/Playback";
@@ -31,8 +31,8 @@ interface IState {
}
export default abstract class AudioPlayerBase<T extends IProps = IProps> extends React.PureComponent<T, IState> {
protected seekRef: RefObject<SeekBar> = createRef();
protected playPauseRef: RefObject<PlayPauseButton> = createRef();
protected seekRef = createRef<SeekBar>();
protected playPauseRef = createRef<PlayPauseButton>();
public constructor(props: T) {
super(props);

4
src/components/views/auth/EmailField.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 ComponentProps, PureComponent, type RefCallback, type RefObject } from "react";
import React, { type ComponentProps, PureComponent, type Ref } from "react";
import Field, { type IInputProps } from "../elements/Field";
import { _t, _td, type TranslationKey } from "../../../languageHandler";
@@ -15,7 +15,7 @@ import * as Email from "../../../email";
interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
id?: string;
fieldRef?: RefCallback<Field> | RefObject<Field>;
fieldRef?: Ref<Field>;
value: string;
autoFocus?: boolean;

4
src/components/views/auth/PassphraseConfirmField.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 ComponentProps, PureComponent, type RefCallback, type RefObject } from "react";
import React, { type ComponentProps, PureComponent, type Ref } from "react";
import Field, { type IInputProps } from "../elements/Field";
import withValidation, { type IFieldState, type IValidationResult } from "../elements/Validation";
@@ -14,7 +14,7 @@ import { _t, _td, type TranslationKey } from "../../../languageHandler";
interface IProps extends Omit<IInputProps, "onValidate" | "label" | "element"> {
id?: string;
fieldRef?: RefCallback<Field> | RefObject<Field>;
fieldRef?: Ref<Field>;
autoComplete?: string;
value: string;
password: string; // The password we're confirming

4
src/components/views/auth/PassphraseField.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 ComponentProps, PureComponent, type RefCallback, type RefObject } from "react";
import React, { type ComponentProps, PureComponent, type Ref } from "react";
import classNames from "classnames";
import type { ZxcvbnResult } from "@zxcvbn-ts/core";
@@ -22,7 +22,7 @@ interface IProps extends Omit<IInputProps, "onValidate" | "element"> {
className?: string;
minScore: 0 | 1 | 2 | 3 | 4;
value: string;
fieldRef?: RefCallback<Field> | RefObject<Field>;
fieldRef?: Ref<Field>;
// Additional strings such as a username used to catch bad passwords
userInputs?: string[];

4
src/components/views/auth/PasswordLogin.tsx
View File

@@ -427,7 +427,9 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
disabled={this.props.busy}
autoFocus={autoFocusPassword}
onValidate={this.onPasswordValidate}
ref={(field) => (this[LoginField.Password] = field)}
ref={(field) => {
this[LoginField.Password] = field;
}}
/>
{forgotPasswordJsx}
{!this.props.busy && (

20
src/components/views/auth/RegistrationForm.tsx
View File

@@ -456,7 +456,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
: _td("auth|registration|continue_without_email_field_label");
return (
<EmailField
fieldRef={(field) => (this[RegistrationField.Email] = field)}
fieldRef={(field) => {
this[RegistrationField.Email] = field;
}}
label={emailLabel}
value={this.state.email}
validationRules={this.validateEmailRules.bind(this)}
@@ -471,7 +473,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
return (
<PassphraseField
id="mx_RegistrationForm_password"
fieldRef={(field) => (this[RegistrationField.Password] = field)}
fieldRef={(field) => {
this[RegistrationField.Password] = field;
}}
minScore={PASSWORD_MIN_SCORE}
value={this.state.password}
onChange={this.onPasswordChange}
@@ -486,7 +490,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
return (
<PassphraseConfirmField
id="mx_RegistrationForm_passwordConfirm"
fieldRef={(field) => (this[RegistrationField.PasswordConfirm] = field)}
fieldRef={(field) => {
this[RegistrationField.PasswordConfirm] = field;
}}
autoComplete="new-password"
value={this.state.passwordConfirm}
password={this.state.password}
@@ -514,7 +520,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
);
return (
<Field
ref={(field) => (this[RegistrationField.PhoneNumber] = field)}
ref={(field) => {
this[RegistrationField.PhoneNumber] = field;
}}
type="text"
label={phoneLabel}
value={this.state.phoneNumber}
@@ -529,7 +537,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
return (
<Field
id="mx_RegistrationForm_username"
ref={(field) => (this[RegistrationField.Username] = field)}
ref={(field) => {
this[RegistrationField.Username] = field;
}}
type="text"
autoFocus={true}
label={_t("common|username")}

2
src/components/views/context_menus/DialpadContextMenu.tsx
View File

@@ -23,7 +23,7 @@ interface IState {
}
export default class DialpadContextMenu extends React.Component<IProps, IState> {
private numberEntryFieldRef: React.RefObject<Field> = createRef();
private numberEntryFieldRef = createRef<Field>();
public constructor(props: IProps) {
super(props);

2
src/components/views/dialogs/BugReportDialog.tsx
View File

@@ -47,7 +47,7 @@ interface IState {
export default class BugReportDialog extends React.Component<BugReportDialogProps, IState> {
private unmounted: boolean;
private issueRef: React.RefObject<Field>;
private issueRef: React.RefObject<Field | null>;
public constructor(props: BugReportDialogProps) {
super(props);

2
src/components/views/dialogs/InviteDialog.tsx
View File

@@ -343,7 +343,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
private debounceTimer: number | null = null; // actually number because we're in the browser
private editorRef = createRef<HTMLInputElement>();
private numberEntryFieldRef: React.RefObject<Field> = createRef();
private numberEntryFieldRef = createRef<Field>();
private unmounted = false;
private encryptionByDefault = false;
private profilesStore: UserProfilesStore;

2
src/components/views/dialogs/ModalWidgetDialog.tsx
View File

@@ -53,7 +53,7 @@ const MAX_BUTTONS = 3;
export default class ModalWidgetDialog extends React.PureComponent<IProps, IState> {
private readonly widget: Widget;
private readonly possibleButtons: ModalButtonID[];
private appFrame: React.RefObject<HTMLIFrameElement> = React.createRef();
private appFrame = React.createRef<HTMLIFrameElement>();
private readonly themeWatcher = new ThemeWatcher();
public state: IState = {

2
src/components/views/dialogs/ModuleUiDialog.tsx
View File

@@ -16,7 +16,7 @@ import ScrollableBaseModal, { type IScrollableBaseState } from "./ScrollableBase
import { _t } from "../../../languageHandler";
interface IProps<P extends DialogProps, C extends DialogContent<P>> {
contentFactory: (props: P, ref: React.RefObject<C>) => React.ReactNode;
contentFactory: (props: P, ref: React.RefObject<C | null>) => React.ReactNode;
additionalContentProps: Omit<P, keyof DialogProps> | undefined;
initialOptions: ModuleUiDialogOptions;
moduleApi: ModuleApi;

2
src/components/views/dialogs/ShareDialog.tsx
View File

@@ -103,7 +103,7 @@ export function ShareDialog({ target, customTitle, onFinished, permalinkCreator
const showQrCode = useSettingValue(UIFeature.ShareQRCode);
const showSocials = useSettingValue(UIFeature.ShareSocial);
const timeoutIdRef = useRef<number>();
const timeoutIdRef = useRef<number>(undefined);
const [isCopied, setIsCopied] = useState(false);
const [linkToSpecificEvent, setLinkToSpecificEvent] = useState(target instanceof MatrixEvent);

5
src/components/views/dialogs/spotlight/TooltipOption.tsx
View File

@@ -7,16 +7,15 @@ Please see LICENSE files in the repository root for full details.
*/
import classNames from "classnames";
import React, { type JSX, type ReactNode } from "react";
import React, { type JSX, type ReactNode, type RefObject } from "react";
import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex";
import AccessibleButton, { type ButtonProps } from "../../elements/AccessibleButton";
import { type Ref } from "../../../../accessibility/roving/types";
type TooltipOptionProps<T extends keyof HTMLElementTagNameMap> = ButtonProps<T> & {
className?: string;
endAdornment?: ReactNode;
inputRef?: Ref;
inputRef?: RefObject<HTMLElement | null>;
};
export const TooltipOption = <T extends keyof HTMLElementTagNameMap>({

4
src/components/views/elements/AppTile.tsx
View File

@@ -14,7 +14,7 @@ import React, {
type ContextType,
createRef,
type CSSProperties,
type MutableRefObject,
type RefObject,
type ReactNode,
} from "react";
import classNames from "classnames";
@@ -96,7 +96,7 @@ interface IProps {
widgetPageTitle?: string;
showLayoutButtons?: boolean;
// Handle to manually notify the PersistedElement that it needs to move
movePersistedElement?: MutableRefObject<(() => void) | undefined>;
movePersistedElement?: RefObject<(() => void) | null>;
// An element to render after the iframe as an overlay
overlay?: ReactNode;
// If defined this async method will be called when the widget requests to become sticky.

8
src/components/views/elements/Field.tsx
View File

@@ -13,7 +13,6 @@ import React, {
type RefObject,
createRef,
type ComponentProps,
type MutableRefObject,
type RefCallback,
type Ref,
} from "react";
@@ -122,8 +121,7 @@ interface IState {
export default class Field extends React.PureComponent<PropShapes, IState> {
private readonly id: string;
private readonly _inputRef: MutableRefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null> =
createRef();
private readonly _inputRef = createRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>();
/**
* When props.inputRef is a callback ref, we will pass callbackRef to the DOM element.
@@ -243,13 +241,13 @@ export default class Field extends React.PureComponent<PropShapes, IState> {
return valid;
}
private get inputRef(): RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> {
private get inputRef(): RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null> {
const inputRef = this.props.inputRef;
if (typeof inputRef === "function") {
// This is a callback ref, so return _inputRef which will point to the actual DOM element.
return this._inputRef;
}
return (inputRef ?? this._inputRef) as RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
return inputRef ?? this._inputRef;
}
private onTooltipOpenChange = (open: boolean): void => {

2
src/components/views/elements/ImageView.tsx
View File

@@ -585,7 +585,7 @@ export default class ImageView extends React.Component<IProps, IState> {
function DownloadButton({ url, fileName }: { url: string; fileName?: string }): JSX.Element {
const downloader = useRef(new FileDownloader()).current;
const [loading, setLoading] = useState(false);
const blobRef = useRef<Blob>();
const blobRef = useRef<Blob>(undefined);
function showError(e: unknown): void {
Modal.createDialog(ErrorDialog, {

4
src/components/views/elements/Measured.tsx
View File

@@ -11,7 +11,7 @@ import React, { type RefObject } from "react";
import UIStore, { UI_EVENTS } from "../../../stores/UIStore";
interface IProps {
sensor: RefObject<Element>;
sensor: RefObject<Element | null>;
breakpoint: number;
onMeasurement(narrow: boolean): void;
}
@@ -42,7 +42,7 @@ export default class Measured extends React.PureComponent<IProps> {
UIStore.instance.stopTrackingElementDimensions(`Measured${this.instanceId}`);
}
if (current) {
UIStore.instance.trackElementDimensions(`Measured${this.instanceId}`, this.props.sensor.current);
UIStore.instance.trackElementDimensions(`Measured${this.instanceId}`, current);
}
}

4
src/components/views/elements/PersistedElement.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, { type MutableRefObject, type ReactNode, StrictMode } from "react";
import React, { type RefObject, type ReactNode, StrictMode } from "react";
import { createRoot, type Root } from "react-dom/client";
import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
import { TooltipProvider } from "@vector-im/compound-web";
@@ -54,7 +54,7 @@ interface IProps {
style?: React.StyleHTMLAttributes<HTMLDivElement>;
// Handle to manually notify this PersistedElement that it needs to move
moveRef?: MutableRefObject<(() => void) | undefined>;
moveRef?: RefObject<(() => void) | null>;
children: ReactNode;
}

4
src/components/views/elements/PersistentApp.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, type ContextType, type CSSProperties, type MutableRefObject, type ReactNode } from "react";
import React, { type JSX, type ContextType, type CSSProperties, type RefObject, type ReactNode } from "react";
import { type Room } from "matrix-js-sdk/src/matrix";
import WidgetUtils from "../../../utils/WidgetUtils";
@@ -19,7 +19,7 @@ interface IProps {
persistentWidgetId: string;
persistentRoomId: string;
pointerEvents?: CSSProperties["pointerEvents"];
movePersistedElement: MutableRefObject<(() => void) | undefined>;
movePersistedElement: RefObject<(() => void) | null>;
children?: ReactNode;
}

2
src/components/views/elements/ResizeHandle.tsx
View File

@@ -13,7 +13,7 @@ interface IResizeHandleProps {
vertical?: boolean;
reverse?: boolean;
id?: string;
passRef?: React.RefObject<HTMLDivElement>;
passRef?: React.RefObject<HTMLDivElement | null>;
}
const ResizeHandle: React.FC<IResizeHandleProps> = ({ vertical, reverse, id, passRef }) => {

2
src/components/views/emojipicker/Category.tsx
View File

@@ -24,7 +24,7 @@ export interface ICategory {
name: string;
enabled: boolean;
visible: boolean;
ref: RefObject<HTMLButtonElement>;
ref: RefObject<HTMLButtonElement | null>;
}
interface IProps {

4
src/components/views/messages/MFileBody.tsx
View File

@@ -105,8 +105,8 @@ export default class MFileBody extends React.Component<IProps, IState> {
declare public context: React.ContextType<typeof RoomContext>;
public state: IState = {};
private iframe: React.RefObject<HTMLIFrameElement> = createRef();
private dummyLink: React.RefObject<HTMLAnchorElement> = createRef();
private iframe = createRef<HTMLIFrameElement>();
private dummyLink = createRef<HTMLAnchorElement>();
private userDidClick = false;
private fileDownloader: FileDownloader = new FileDownloader(() => this.iframe.current);

2
src/components/views/messages/MessageEvent.tsx
View File

@@ -77,7 +77,7 @@ const baseEvTypes = new Map<string, React.ComponentType<IBodyProps>>([
]);
export default class MessageEvent extends React.Component<IProps> implements IMediaBody, IOperableEventTile {
private body: React.RefObject<React.Component | IOperableEventTile> = createRef();
private body = createRef<React.Component | IOperableEventTile>();
private mediaHelper?: MediaEventHelper;
private bodyTypes = new Map<string, React.ComponentType<IBodyProps>>(baseBodyTypes.entries());
private evTypes = new Map<string, React.ComponentType<IBodyProps>>(baseEvTypes.entries());

4
src/components/views/pips/WidgetPip.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 FC, type MutableRefObject, useCallback, useMemo } from "react";
import React, { type FC, type RefObject, useCallback, useMemo } from "react";
import { type Room, RoomEvent } from "matrix-js-sdk/src/matrix";
import BackIcon from "@vector-im/compound-design-tokens/assets/web/icons/arrow-left";
@@ -33,7 +33,7 @@ interface Props {
room: Room;
viewingRoom: boolean;
onStartMoving: (e: React.MouseEvent<Element, MouseEvent>) => void;
movePersistedElement: MutableRefObject<(() => void) | undefined>;
movePersistedElement: RefObject<(() => void) | null>;
}
/**

2
src/components/views/rooms/Autocomplete.tsx
View File

@@ -50,7 +50,7 @@ export default class Autocomplete extends React.PureComponent<IProps, IState> {
public queryRequested?: string;
public debounceCompletionsRequest?: number;
private containerRef = createRef<HTMLDivElement>();
private completionRefs: Record<string, RefObject<HTMLElement>> = {};
private completionRefs: Record<string, RefObject<HTMLElement | null>> = {};
public static contextType = RoomContext;
declare public context: React.ContextType<typeof RoomContext>;

5
src/components/views/rooms/CollapsibleButton.tsx
View File

@@ -6,16 +6,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, { useContext } from "react";
import React, { type RefObject, useContext } from "react";
import classNames from "classnames";
import AccessibleButton, { type ButtonProps } from "../elements/AccessibleButton";
import { OverflowMenuContext } from "./MessageComposerButtons";
import { IconizedContextMenuOption } from "../context_menus/IconizedContextMenu";
import { type Ref } from "../../../accessibility/roving/types";
interface Props extends Omit<ButtonProps<"div">, "element"> {
inputRef?: Ref;
inputRef?: RefObject<HTMLElement | null>;
title: string;
iconClassName: string;
}

2
src/components/views/rooms/MessageComposer.tsx
View File

@@ -111,7 +111,7 @@ export class MessageComposer extends React.Component<IProps, IState> {
private dispatcherRef?: string;
private messageComposerInput = createRef<SendMessageComposerClass>();
private voiceRecordingButton = createRef<VoiceRecordComposerTile>();
private ref: React.RefObject<HTMLDivElement> = createRef();
private ref = createRef<HTMLDivElement>();
private instanceId: number;
private _voiceRecording: Optional<VoiceMessageRecording>;

4
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 MutableRefObject, useMemo } from "react";
import React, { type JSX, type ForwardedRef, forwardRef, type RefObject, useMemo } from "react";
import classNames from "classnames";
import type EditorStateTransfer from "../../../../utils/EditorStateTransfer";
@@ -27,7 +27,7 @@ const Content = forwardRef<HTMLElement, ContentProps>(function Content(
{ disabled = false, composerFunctions }: ContentProps,
forwardRef: ForwardedRef<HTMLElement>,
) {
useWysiwygEditActionHandler(disabled, forwardRef as MutableRefObject<HTMLElement>, composerFunctions);
useWysiwygEditActionHandler(disabled, forwardRef as RefObject<HTMLElement>, composerFunctions);
return null;
});

4
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 MutableRefObject, useMemo } from "react";
import React, { type JSX, type ForwardedRef, forwardRef, type RefObject, useMemo } from "react";
import { type IEventRelation } from "matrix-js-sdk/src/matrix";
import { useWysiwygSendActionHandler } from "./hooks/useWysiwygSendActionHandler";
@@ -28,7 +28,7 @@ const Content = forwardRef<HTMLElement, ContentProps>(function Content(
{ disabled = false, composerFunctions }: ContentProps,
forwardRef: ForwardedRef<HTMLElement>,
) {
useWysiwygSendActionHandler(disabled, forwardRef as MutableRefObject<HTMLElement>, composerFunctions);
useWysiwygSendActionHandler(disabled, forwardRef as RefObject<HTMLElement>, composerFunctions);
return null;
});

4
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 MutableRefObject, type ReactNode } from "react";
import React, { type CSSProperties, forwardRef, memo, type RefObject, type ReactNode } from "react";
import { useIsExpanded } from "../hooks/useIsExpanded";
import { useSelection } from "../hooks/useSelection";
@@ -26,7 +26,7 @@ export const Editor = memo(
{ disabled, placeholder, leftComponent, rightComponent }: EditorProps,
ref,
) {
const isExpanded = useIsExpanded(ref as MutableRefObject<HTMLDivElement | null>, HEIGHT_BREAKING_POINT);
const isExpanded = useIsExpanded(ref as RefObject<HTMLDivElement | null>, HEIGHT_BREAKING_POINT);
const { onFocus, onBlur, onInput } = useSelection();
return (

4
src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer.tsx
View File

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import classNames from "classnames";
import { type IEventRelation } from "matrix-js-sdk/src/matrix";
import React, { type JSX, type MutableRefObject, type ReactNode } from "react";
import React, { type JSX, type RefObject, type ReactNode } from "react";
import { useComposerFunctions } from "../hooks/useComposerFunctions";
import { useIsFocused } from "../hooks/useIsFocused";
@@ -29,7 +29,7 @@ interface PlainTextComposerProps {
className?: string;
leftComponent?: ReactNode;
rightComponent?: ReactNode;
children?: (ref: MutableRefObject<HTMLDivElement | null>, composerFunctions: ComposerFunctions) => ReactNode;
children?: (ref: RefObject<HTMLDivElement | null>, composerFunctions: ComposerFunctions) => ReactNode;
eventRelation?: IEventRelation;
}

4
src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer.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, { memo, type MutableRefObject, type ReactNode, useEffect, useMemo, useRef } from "react";
import React, { memo, type RefObject, type ReactNode, useEffect, useMemo, useRef } from "react";
import { type IEventRelation } from "matrix-js-sdk/src/matrix";
import { EMOTICON_TO_EMOJI } from "@matrix-org/emojibase-bindings";
import { useWysiwyg, type FormattingFunctions } from "@vector-im/matrix-wysiwyg";
@@ -35,7 +35,7 @@ interface WysiwygComposerProps {
className?: string;
leftComponent?: ReactNode;
rightComponent?: ReactNode;
children?: (ref: MutableRefObject<HTMLDivElement | null>, wysiwyg: FormattingFunctions) => ReactNode;
children?: (ref: RefObject<HTMLDivElement | null>, wysiwyg: FormattingFunctions) => ReactNode;
eventRelation?: IEventRelation;
}

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

@@ -11,7 +11,7 @@ import { type RefObject, useMemo } from "react";
import { setSelection } from "../utils/selection";
export function useComposerFunctions(
ref: RefObject<HTMLDivElement>,
ref: RefObject<HTMLDivElement | null>,
setContent: (content: string) => void,
): {
clear(): void;

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

@@ -29,7 +29,7 @@ import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.
export function useInputEventProcessor(
onSend: () => void,
autocompleteRef: React.RefObject<Autocomplete>,
autocompleteRef: React.RefObject<Autocomplete | null>,
initialContent?: string,
eventRelation?: IEventRelation,
): (event: WysiwygEvent, composer: Wysiwyg, editor: HTMLElement) => WysiwygEvent | null {
@@ -97,7 +97,7 @@ function handleKeyboardEvent(
roomContext: Pick<IRoomState, "liveTimeline" | "timelineRenderingType" | "room">,
composerContext: ComposerContextState,
mxClient: MatrixClient | undefined,
autocompleteRef: React.RefObject<Autocomplete>,
autocompleteRef: React.RefObject<Autocomplete | null>,
): KeyboardEvent | null {
const { editorStateTransfer } = composerContext;
const isEditing = Boolean(editorStateTransfer);

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

@@ -6,9 +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 MutableRefObject, useEffect, useState } from "react";
import { type RefObject, useEffect, useState } from "react";
export function useIsExpanded(ref: MutableRefObject<HTMLElement | null>, breakingPoint: number): boolean {
export function useIsExpanded(ref: RefObject<HTMLElement | null>, breakingPoint: number): boolean {
const [isExpanded, setIsExpanded] = useState(false);
useEffect(() => {
if (ref.current) {

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

@@ -13,7 +13,7 @@ export function useIsFocused(): {
onFocus(event: FocusEvent<HTMLElement>): void;
} {
const [isFocused, setIsFocused] = useState(false);
const timeoutIDRef = useRef<number>();
const timeoutIDRef = useRef<number>(undefined);
useEffect(() => () => clearTimeout(timeoutIDRef.current), [timeoutIDRef]);
const onFocus = useCallback(

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

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
import { type RefObject, useEffect } from "react";
export function usePlainTextInitialization(initialContent = "", ref: RefObject<HTMLElement>): void {
export function usePlainTextInitialization(initialContent = "", ref: RefObject<HTMLElement | null>): void {
useEffect(() => {
// always read and write the ref.current using .innerHTML for consistency in linebreak and HTML entity handling
if (ref.current) {

8
src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners.ts
View File

@@ -49,8 +49,8 @@ export function usePlainTextListeners(
eventRelation?: IEventRelation,
isAutoReplaceEmojiEnabled?: boolean,
): {
ref: RefObject<HTMLDivElement>;
autocompleteRef: React.RefObject<Autocomplete>;
ref: RefObject<HTMLDivElement | null>;
autocompleteRef: RefObject<Autocomplete | null>;
content?: string;
onBeforeInput(event: SyntheticEvent<HTMLDivElement, InputEvent | ClipboardEvent>): void;
onInput(event: SyntheticEvent<HTMLDivElement, InputEvent | ClipboardEvent>): void;
@@ -66,8 +66,8 @@ export function usePlainTextListeners(
const roomContext = useScopedRoomContext("room", "timelineRenderingType", "replyToEvent");
const mxClient = useMatrixClientContext();
const ref = useRef<HTMLDivElement | null>(null);
const autocompleteRef = useRef<Autocomplete | null>(null);
const ref = useRef<HTMLDivElement>(null);
const autocompleteRef = useRef<Autocomplete>(null);
const [content, setContent] = useState<string | undefined>(initialContent);
const send = useCallback(() => {

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

@@ -45,7 +45,7 @@ type SuggestionState = Suggestion | null;
* this will be an object representing that command or mention, otherwise it is null
*/
export function useSuggestion(
editorRef: React.RefObject<HTMLDivElement>,
editorRef: React.RefObject<HTMLDivElement | null>,
setText: (text?: string) => void,
isAutoReplaceEmojiEnabled?: boolean,
): {
@@ -105,7 +105,7 @@ export function useSuggestion(
* @param isAutoReplaceEmojiEnabled - whether plain text emoticons should be auto replaced with emojis
*/
export function processSelectionChange(
editorRef: React.RefObject<HTMLDivElement>,
editorRef: React.RefObject<HTMLDivElement | null>,
setSuggestionData: React.Dispatch<React.SetStateAction<SuggestionState>>,
isAutoReplaceEmojiEnabled?: boolean,
): void {

4
src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygSendActionHandler.ts
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 { type MutableRefObject, useCallback, useRef } from "react";
import { type RefObject, useCallback, useRef } from "react";
import defaultDispatcher from "../../../../../dispatcher/dispatcher";
import { Action } from "../../../../../dispatcher/actions";
@@ -22,7 +22,7 @@ import { useScopedRoomContext } from "../../../../../contexts/ScopedRoomContext.
export function useWysiwygSendActionHandler(
disabled: boolean,
composerElement: MutableRefObject<HTMLElement>,
composerElement: RefObject<HTMLElement>,
composerFunctions: ComposerFunctions,
): void {
const roomContext = useScopedRoomContext("timelineRenderingType");

10
src/components/views/rooms/wysiwyg_composer/hooks/utils.ts
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 { type MutableRefObject, type RefObject } from "react";
import { type RefObject } from "react";
import { type IEventRelation, type MatrixClient } from "matrix-js-sdk/src/matrix";
import { type WysiwygEvent } from "@vector-im/matrix-wysiwyg";
@@ -20,10 +20,10 @@ import ContentMessages from "../../../../../ContentMessages";
import { isNotNull } from "../../../../../Typeguards";
export function focusComposer(
composerElement: MutableRefObject<HTMLElement | null>,
composerElement: RefObject<HTMLElement | null>,
renderingType: TimelineRenderingType,
roomContext: Pick<IRoomState, "timelineRenderingType">,
timeoutId: MutableRefObject<number | null>,
timeoutId: RefObject<number | null>,
): void {
if (renderingType === roomContext.timelineRenderingType) {
// Immediately set the focus, so if you start typing it
@@ -62,13 +62,13 @@ export function setCursorPositionAtTheEnd(element: HTMLElement): void {
* @returns boolean - whether or not the autocomplete has handled the event
*/
export function handleEventWithAutocomplete(
autocompleteRef: RefObject<Autocomplete>,
autocompleteRef: RefObject<Autocomplete | null>,
// we get a React Keyboard event from plain text composer, a Keyboard Event from the rich text composer
event: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>,
): boolean {
const autocompleteIsOpen = autocompleteRef?.current && !autocompleteRef.current.state.hide;
if (!autocompleteIsOpen) {
if (!autocompleteRef.current || !autocompleteIsOpen) {
return false;
}

4
src/components/views/settings/AddRemoveThreepids.tsx
View File

@@ -40,7 +40,7 @@ interface ExistingThreepidProps {
const ExistingThreepid: React.FC<ExistingThreepidProps> = ({ mode, threepid, onChange, disabled }) => {
const [isConfirming, setIsConfirming] = useState(false);
const client = useMatrixClientContext();
const bindTask = useRef<AddThreepid | undefined>();
const bindTask = useRef<AddThreepid>(undefined);
const [isVerifyingBind, setIsVerifyingBind] = useState(false);
const [continueDisabled, setContinueDisabled] = useState(false);
@@ -289,7 +289,7 @@ const AddThreepidSection: React.FC<{ medium: "email" | "msisdn"; disabled?: bool
disabled,
onChange,
}) => {
const addTask = useRef<AddThreepid | undefined>();
const addTask = useRef<AddThreepid>(undefined);
const [newThreepidInput, setNewThreepidInput] = useState("");
const [phoneCountryInput, setPhoneCountryInput] = useState("");
const [verificationCodeInput, setVerificationCodeInput] = useState("");

12
src/components/views/settings/ChangePassword.tsx
View File

@@ -330,7 +330,9 @@ export default class ChangePassword extends React.Component<IProps, IState> {
<form className={this.props.className} onSubmit={this.onClickChange}>
<div className={rowClassName}>
<Field
ref={(field) => (this[FIELD_OLD_PASSWORD] = field)}
ref={(field) => {
this[FIELD_OLD_PASSWORD] = field;
}}
type="password"
label={_t("auth|change_password_current_label")}
value={this.state.oldPassword}
@@ -340,7 +342,9 @@ export default class ChangePassword extends React.Component<IProps, IState> {
</div>
<div className={rowClassName}>
<PassphraseField
fieldRef={(field) => (this[FIELD_NEW_PASSWORD] = field)}
fieldRef={(field) => {
this[FIELD_NEW_PASSWORD] = field;
}}
type="password"
label={_td("auth|change_password_new_label")}
minScore={PASSWORD_MIN_SCORE}
@@ -353,7 +357,9 @@ export default class ChangePassword extends React.Component<IProps, IState> {
</div>
<div className={rowClassName}>
<Field
ref={(field) => (this[FIELD_NEW_PASSWORD_CONFIRM] = field)}
ref={(field) => {
this[FIELD_NEW_PASSWORD_CONFIRM] = field;
}}
type="password"
label={_t("auth|change_password_confirm_label")}
value={this.state.newPasswordConfirm}

2
src/components/views/settings/tabs/user/SessionManagerTab.tsx
View File

@@ -143,7 +143,7 @@ const SessionManagerTab: React.FC<{
const [expandedDeviceIds, setExpandedDeviceIds] = useState<ExtendedDevice["device_id"][]>([]);
const [selectedDeviceIds, setSelectedDeviceIds] = useState<ExtendedDevice["device_id"][]>([]);
const filteredDeviceListRef = useRef<HTMLDivElement>(null);
const scrollIntoViewTimeoutRef = useRef<number>();
const scrollIntoViewTimeoutRef = useRef<number>(undefined);
const sdkContext = useContext(SDKContext);
const matrixClient = sdkContext.client!;

4
src/components/views/spaces/SpaceCreateMenu.tsx
View File

@@ -120,8 +120,8 @@ type BProps = Omit<ComponentProps<typeof SpaceBasicSettings>, "nameDisabled" | "
interface ISpaceCreateFormProps extends BProps {
busy: boolean;
alias: string;
nameFieldRef: RefObject<Field>;
aliasFieldRef: RefObject<RoomAliasField>;
nameFieldRef: RefObject<Field | null>;
aliasFieldRef: RefObject<RoomAliasField | null>;
showAliasField?: boolean;
children?: ReactNode;
onSubmit(e: SyntheticEvent): void;

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

@@ -56,7 +56,7 @@ type ButtonProps<T extends keyof HTMLElementTagNameMap> = Omit<
notificationState?: NotificationState;
isNarrow?: boolean;
size: string;
innerRef?: RefObject<HTMLDivElement>;
innerRef?: RefObject<HTMLDivElement | null>;
ContextMenuComponent?: ComponentType<ComponentProps<typeof SpaceContextMenu>>;
onClick?(ev?: ButtonEvent): void;
};

2
src/components/views/voip/DialPadModal.tsx
View File

@@ -23,7 +23,7 @@ interface IState {
}
export default class DialpadModal extends React.PureComponent<IProps, IState> {
private numberEntryFieldRef: React.RefObject<Field> = createRef();
private numberEntryFieldRef = createRef<Field>();
public constructor(props: IProps) {
super(props);