-
-
Notifications
You must be signed in to change notification settings - Fork 829
Migrate Avatar to new Compound component #11393
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -20,33 +20,36 @@ limitations under the License. | |
import React, { useCallback, useContext, useEffect, useState } from "react"; | ||
import classNames from "classnames"; | ||
import { ResizeMethod, ClientEvent } from "matrix-js-sdk/src/matrix"; | ||
import { Avatar } from "@vector-im/compound-web"; | ||
|
||
import * as AvatarLogic from "../../../Avatar"; | ||
import SettingsStore from "../../../settings/SettingsStore"; | ||
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton"; | ||
import { ButtonEvent } from "../elements/AccessibleButton"; | ||
import RoomContext from "../../../contexts/RoomContext"; | ||
import MatrixClientContext from "../../../contexts/MatrixClientContext"; | ||
import { useTypedEventEmitter } from "../../../hooks/useEventEmitter"; | ||
import { toPx } from "../../../utils/units"; | ||
import { _t } from "../../../languageHandler"; | ||
|
||
interface IProps { | ||
name?: string; // The name (first initial used as default) | ||
idName?: string; // ID for generating hash colours | ||
name?: React.ComponentProps<typeof Avatar>["name"]; // The name (first initial used as default) | ||
idName?: React.ComponentProps<typeof Avatar>["id"]; // ID for generating hash colours | ||
title?: string; // onHover title text | ||
url?: string | null; // highest priority of them all, shortcut to set in urls[0] | ||
urls?: string[]; // [highest_priority, ... , lowest_priority] | ||
type?: React.ComponentProps<typeof Avatar>["type"]; | ||
width: number; | ||
/** | ||
* @deprecated use `width` only, avatars have a 1:1 aspect ratio | ||
*/ | ||
height: number; | ||
// XXX: resizeMethod not actually used. | ||
/** | ||
* @deprecated only uses `crop` | ||
*/ | ||
resizeMethod?: ResizeMethod; | ||
defaultToInitialLetter?: boolean; // true to add default url | ||
onClick?: (ev: ButtonEvent) => void; | ||
inputRef?: React.RefObject<HTMLImageElement & HTMLSpanElement>; | ||
inputRef?: React.RefObject<HTMLSpanElement>; | ||
className?: string; | ||
tabIndex?: number; | ||
altText?: string; | ||
ariaLabel?: string; | ||
} | ||
|
||
const calculateUrls = (url?: string | null, urls?: string[], lowBandwidth = false): string[] => { | ||
|
@@ -108,119 +111,32 @@ const BaseAvatar: React.FC<IProps> = (props) => { | |
url, | ||
urls, | ||
width = 40, | ||
height = 40, | ||
resizeMethod = "crop", // eslint-disable-line @typescript-eslint/no-unused-vars | ||
defaultToInitialLetter = true, | ||
onClick, | ||
inputRef, | ||
className, | ||
type = "round", | ||
altText = _t("Avatar"), | ||
ariaLabel = _t("Avatar"), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Losing this seems bad, this is the aria-label for the button which wraps clickable avatars |
||
...otherProps | ||
} = props; | ||
|
||
const [imageUrl, onError] = useImageUrl({ url, urls }); | ||
|
||
if (!imageUrl && defaultToInitialLetter && name) { | ||
const initialLetter = AvatarLogic.getInitialLetter(name); | ||
const textNode = ( | ||
<span | ||
className="mx_BaseAvatar_initial" | ||
aria-hidden="true" | ||
style={{ | ||
fontSize: toPx(width * 0.65), | ||
width: toPx(width), | ||
lineHeight: toPx(height), | ||
}} | ||
> | ||
{initialLetter} | ||
</span> | ||
); | ||
const imgNode = ( | ||
<img | ||
loading="lazy" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Losing this seems bad There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Added to element-hq/compound-web#57 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Added to element-hq/compound-web#57 |
||
className="mx_BaseAvatar_image" | ||
src={AvatarLogic.defaultAvatarUrlForString(idName || name)} | ||
alt="" | ||
title={title} | ||
onError={onError} | ||
style={{ | ||
width: toPx(width), | ||
height: toPx(height), | ||
}} | ||
aria-hidden="true" | ||
data-testid="avatar-img" | ||
Comment on lines
-151
to
-152
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Losing these seems bad |
||
/> | ||
); | ||
|
||
if (onClick) { | ||
return ( | ||
<AccessibleButton | ||
aria-label={ariaLabel} | ||
aria-live="off" | ||
Comment on lines
-159
to
-160
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Losing these seems bad |
||
{...otherProps} | ||
element="span" | ||
className={classNames("mx_BaseAvatar", className)} | ||
onClick={onClick} | ||
inputRef={inputRef} | ||
> | ||
{textNode} | ||
{imgNode} | ||
</AccessibleButton> | ||
); | ||
} else { | ||
return ( | ||
<span | ||
className={classNames("mx_BaseAvatar", className)} | ||
ref={inputRef} | ||
{...otherProps} | ||
role="presentation" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Losing this seems bad |
||
> | ||
{textNode} | ||
{imgNode} | ||
</span> | ||
); | ||
} | ||
} | ||
|
||
if (onClick) { | ||
return ( | ||
<AccessibleButton | ||
className={classNames("mx_BaseAvatar mx_BaseAvatar_image", className)} | ||
element="img" | ||
src={imageUrl} | ||
onClick={onClick} | ||
onError={onError} | ||
style={{ | ||
width: toPx(width), | ||
height: toPx(height), | ||
}} | ||
title={title} | ||
alt={altText} | ||
inputRef={inputRef} | ||
data-testid="avatar-img" | ||
{...otherProps} | ||
/> | ||
); | ||
} else { | ||
return ( | ||
<img | ||
loading="lazy" | ||
className={classNames("mx_BaseAvatar mx_BaseAvatar_image", className)} | ||
src={imageUrl} | ||
onError={onError} | ||
style={{ | ||
width: toPx(width), | ||
height: toPx(height), | ||
}} | ||
title={title} | ||
alt="" | ||
ref={inputRef} | ||
data-testid="avatar-img" | ||
{...otherProps} | ||
/> | ||
); | ||
} | ||
return ( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Looks like There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks, not sure why ESLint was not shouting at me, back in use now. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The rule is disabled on this block There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Unfortunately https://github.com/matrix-org/matrix-react-sdk/pull/11393/files#diff-f61169b723cd2eea456ca1c6fa8879aaf150f49060d77d4d8bf42257093e078fR114 applies to the whole block not just that one line |
||
<Avatar | ||
ref={inputRef} | ||
src={imageUrl} | ||
id={idName ?? ""} | ||
name={name ?? ""} | ||
type={type} | ||
size={`${width}px`} | ||
className={classNames("mx_BaseAvatar", className)} | ||
aria-label={altText} | ||
onError={onError} | ||
title={title} | ||
{...otherProps} | ||
/> | ||
); | ||
}; | ||
|
||
export default BaseAvatar; | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -82,7 +82,7 @@ export default class RoomAvatarEvent extends React.Component<IProps> { | |
className="mx_RoomAvatarEvent_avatar" | ||
onClick={this.onAvatarClick} | ||
> | ||
<RoomAvatar width={14} height={14} oobData={oobData} /> | ||
<RoomAvatar width={16} oobData={oobData} /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can this happen in a different PR? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not quite, the new avatar uses There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
</AccessibleButton> | ||
), | ||
}, | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we just kill it? We're not a real SDK so don't need backwards compatibility, confusion is worse than bigger diffs
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done! I will rename
width
tosize
in a follow up PR