mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-22 17:25:50 +03:00
Code Issues Projects Releases Packages Wiki Activity

Use forwardRef in Avatar components to allow use with Compound Tooltips (#12063)

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2023-12-19 14:39:34 +00:00 committed by GitHub
parent 3acd648ed3
commit 22c511414b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/views/avatars/BaseAvatar.tsx
View file

@ -17,7 +17,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { useCallback, useContext, useEffect, useState } from "react"; import React, { forwardRef, useCallback, useContext, useEffect, useState } from "react";
import classNames from "classnames"; import classNames from "classnames";
import { ClientEvent } from "matrix-js-sdk/src/matrix"; import { ClientEvent } from "matrix-js-sdk/src/matrix";
import { Avatar } from "@vector-im/compound-web"; import { Avatar } from "@vector-im/compound-web";
@ -38,7 +38,6 @@ interface IProps {
type?: React.ComponentProps<typeof Avatar>["type"]; type?: React.ComponentProps<typeof Avatar>["type"];
size: string; size: string;
onClick?: (ev: ButtonEvent) => void; onClick?: (ev: ButtonEvent) => void;
inputRef?: React.RefObject<HTMLSpanElement>;
className?: string; className?: string;
tabIndex?: number; tabIndex?: number;
altText?: string; altText?: string;
@ -95,7 +94,7 @@ const useImageUrl = ({ url, urls }: { url?: string | null; urls?: string[] }): [
return [imageUrl, onError]; return [imageUrl, onError];
}; };
const BaseAvatar: React.FC<IProps> = (props) => { const BaseAvatar = forwardRef<HTMLElement, IProps>((props, ref) => {
const { const {
name, name,
idName, idName,
@ -104,7 +103,6 @@ const BaseAvatar: React.FC<IProps> = (props) => {
urls, urls,
size = "40px", size = "40px",
onClick, onClick,
inputRef,
className, className,
type = "round", type = "round",
altText = _t("common|avatar"), altText = _t("common|avatar"),
@ -127,7 +125,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
return ( return (
<Avatar <Avatar
ref={inputRef} ref={ref}
src={imageUrl} src={imageUrl}
id={idName ?? ""} id={idName ?? ""}
name={name ?? ""} name={name ?? ""}
@ -143,7 +141,7 @@ const BaseAvatar: React.FC<IProps> = (props) => {
data-testid="avatar-img" data-testid="avatar-img"
/> />
); );
}; });
export default BaseAvatar; export default BaseAvatar;
export type BaseAvatarType = React.FC<IProps>; export type BaseAvatarType = React.FC<IProps>;

32
src/components/views/avatars/MemberAvatar.tsx
View file

@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import React, { ReactNode, useContext } from "react"; import React, { forwardRef, ReactNode, Ref, useContext } from "react";
import { RoomMember, ResizeMethod } from "matrix-js-sdk/src/matrix"; import { RoomMember, ResizeMethod } from "matrix-js-sdk/src/matrix";
import dis from "../../../dispatcher/dispatcher"; import dis from "../../../dispatcher/dispatcher";
@ -42,16 +42,19 @@ interface IProps extends Omit<React.ComponentProps<typeof BaseAvatar>, "name" |
children?: ReactNode; children?: ReactNode;
} }
export default function MemberAvatar({ function MemberAvatar(
size, {
resizeMethod = "crop", size,
viewUserOnClick, resizeMethod = "crop",
forceHistorical, viewUserOnClick,
fallbackUserId, forceHistorical,
hideTitle, fallbackUserId,
member: propsMember, hideTitle,
...props member: propsMember,
}: IProps): JSX.Element { ...props
}: IProps,
ref: Ref<HTMLElement>,
): JSX.Element {
const card = useContext(CardContext); const card = useContext(CardContext);
const member = useRoomMemberProfile({ const member = useRoomMemberProfile({
@ -100,12 +103,9 @@ export default function MemberAvatar({
: props.onClick : props.onClick
} }
altText={_t("common|user_avatar")} altText={_t("common|user_avatar")}
ref={ref}
/> />
); );
} }
export class LegacyMemberAvatar extends React.Component<IProps> { export default forwardRef(MemberAvatar);
public render(): React.ReactNode {
return <MemberAvatar {...this.props}>{this.props.children}</MemberAvatar>;
}
}

4
src/components/views/rooms/ReadReceiptMarker.tsx
View file

@ -21,7 +21,7 @@ import { logger } from "matrix-js-sdk/src/logger";
import NodeAnimator from "../../../NodeAnimator"; import NodeAnimator from "../../../NodeAnimator";
import { toPx } from "../../../utils/units"; import { toPx } from "../../../utils/units";
import { LegacyMemberAvatar as MemberAvatar } from "../avatars/MemberAvatar"; import MemberAvatar from "../avatars/MemberAvatar";
import { READ_AVATAR_SIZE } from "./ReadReceiptGroup"; import { READ_AVATAR_SIZE } from "./ReadReceiptGroup";
export interface IReadReceiptInfo { export interface IReadReceiptInfo {
@ -216,7 +216,7 @@ export default class ReadReceiptMarker extends React.PureComponent<IProps, IStat
aria-live="off" aria-live="off"
size="14px" size="14px"
style={style} style={style}
inputRef={this.avatar as RefObject<HTMLImageElement>} ref={this.avatar}
hideTitle hideTitle
tabIndex={-1} tabIndex={-1}
/> />