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

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>
);
};