Refactor some logic into common AvatarSetting component (#12544)
* Refactor some logic into common AvatarSetting component We duplicated some of the logic of setting avatars between profiles & rooms. This pulls some of that logic into the AvatarSetting component and hopefully make things a little simpler. * Unsed import * Convert JS based hover to CSS * Remove unnecessary container * Test avatar-as-file path * Test file upload * Unused imports * Add test for RoomProfileSettings * Test removing room avatar * Move upload control CSS too * Remove commented code Co-authored-by: Florian Duros <florianduros@element.io> * Prettier * Coments & move style to inline as per PR suggestion * Better test names Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Fix test Upload input doesn't have that class anymore --------- Co-authored-by: Florian Duros <florianduros@element.io> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
David Baker
GitHub
parent
f6e919021a
commit
3342aa5ff8
8 changed files with 296 additions and 164 deletions
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||
Copyright 2019, 2024 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
|
|
@ -14,51 +14,102 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { useRef, useState } from "react";
|
||||
import classNames from "classnames";
|
||||
import React, { createRef, useCallback, useEffect, useRef, useState } from "react";
|
||||
|
||||
import { _t } from "../../../languageHandler";
|
||||
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import { mediaFromMxc } from "../../../customisations/Media";
|
||||
import { chromeFileInputFix } from "../../../utils/BrowserWorkarounds";
|
||||
|
||||
interface IProps {
|
||||
avatarUrl?: string;
|
||||
avatarName: string; // name of user/room the avatar belongs to
|
||||
uploadAvatar?: (e: ButtonEvent) => void;
|
||||
removeAvatar?: (e: ButtonEvent) => void;
|
||||
/**
|
||||
* The current value of the avatar URL, as an mxc URL or a File.
|
||||
* Generally, an mxc URL would be specified until the user selects a file, then
|
||||
* the file supplied by the onChange callback would be supplied here until it's
|
||||
* saved.
|
||||
*/
|
||||
avatar?: string | File;
|
||||
|
||||
/**
|
||||
* If true, the user cannot change the avatar
|
||||
*/
|
||||
disabled?: boolean;
|
||||
|
||||
/**
|
||||
* Called when the user has selected a new avatar
|
||||
* The callback is passed a File object for the new avatar data
|
||||
*/
|
||||
onChange?: (f: File) => void;
|
||||
|
||||
/**
|
||||
* Called when the user wishes to remove the avatar
|
||||
*/
|
||||
removeAvatar?: () => void;
|
||||
|
||||
/**
|
||||
* The alt text for the avatar
|
||||
*/
|
||||
avatarAltText: string;
|
||||
}
|
||||
|
||||
const AvatarSetting: React.FC<IProps> = ({ avatarUrl, avatarAltText, avatarName, uploadAvatar, removeAvatar }) => {
|
||||
const [isHovering, setIsHovering] = useState(false);
|
||||
const hoveringProps = {
|
||||
onMouseEnter: () => setIsHovering(true),
|
||||
onMouseLeave: () => setIsHovering(false),
|
||||
};
|
||||
/**
|
||||
* Component for setting or removing an avatar on something (eg. a user or a room)
|
||||
*/
|
||||
const AvatarSetting: React.FC<IProps> = ({ avatar, avatarAltText, onChange, removeAvatar, disabled }) => {
|
||||
const fileInputRef = createRef<HTMLInputElement>();
|
||||
|
||||
// Real URL that we can supply to the img element, either a data URL or whatever mediaFromMxc gives
|
||||
// This represents whatever avatar the user has chosen at the time
|
||||
const [avatarURL, setAvatarURL] = useState<string | undefined>(undefined);
|
||||
useEffect(() => {
|
||||
if (avatar instanceof File) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
setAvatarURL(reader.result as string);
|
||||
};
|
||||
reader.readAsDataURL(avatar);
|
||||
} else if (avatar) {
|
||||
setAvatarURL(mediaFromMxc(avatar).getSquareThumbnailHttp(96) ?? undefined);
|
||||
} else {
|
||||
setAvatarURL(undefined);
|
||||
}
|
||||
}, [avatar]);
|
||||
|
||||
// TODO: Use useId() as soon as we're using React 18.
|
||||
// Prevents ID collisions when this component is used more than once on the same page.
|
||||
const a11yId = useRef(`hover-text-${Math.random()}`);
|
||||
|
||||
const onFileChanged = useCallback(
|
||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files) onChange?.(e.target.files[0]);
|
||||
},
|
||||
[onChange],
|
||||
);
|
||||
|
||||
const uploadAvatar = useCallback((): void => {
|
||||
fileInputRef.current?.click();
|
||||
}, [fileInputRef]);
|
||||
|
||||
let avatarElement = (
|
||||
<AccessibleButton
|
||||
element="div"
|
||||
onClick={uploadAvatar ?? null}
|
||||
className="mx_AvatarSetting_avatarPlaceholder"
|
||||
aria-labelledby={uploadAvatar ? a11yId.current : undefined}
|
||||
onClick={uploadAvatar}
|
||||
className="mx_AvatarSetting_avatarPlaceholder mx_AvatarSetting_avatarDisplay"
|
||||
aria-labelledby={disabled ? undefined : a11yId.current}
|
||||
// Inhibit tab stop as we have explicit upload/remove buttons
|
||||
tabIndex={-1}
|
||||
{...hoveringProps}
|
||||
/>
|
||||
);
|
||||
if (avatarUrl) {
|
||||
if (avatarURL) {
|
||||
avatarElement = (
|
||||
<AccessibleButton
|
||||
element="img"
|
||||
src={avatarUrl}
|
||||
className="mx_AvatarSetting_avatarDisplay"
|
||||
src={avatarURL}
|
||||
alt={avatarAltText}
|
||||
onClick={uploadAvatar ?? null}
|
||||
onClick={uploadAvatar}
|
||||
// Inhibit tab stop as we have explicit upload/remove buttons
|
||||
tabIndex={-1}
|
||||
{...hoveringProps}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -67,17 +118,27 @@ const AvatarSetting: React.FC<IProps> = ({ avatarUrl, avatarAltText, avatarName,
|
|||
if (uploadAvatar) {
|
||||
// insert an empty div to be the host for a css mask containing the upload.svg
|
||||
uploadAvatarBtn = (
|
||||
<AccessibleButton
|
||||
onClick={uploadAvatar}
|
||||
className="mx_AvatarSetting_uploadButton"
|
||||
aria-labelledby={a11yId.current}
|
||||
{...hoveringProps}
|
||||
/>
|
||||
<>
|
||||
<AccessibleButton
|
||||
onClick={uploadAvatar}
|
||||
className="mx_AvatarSetting_uploadButton"
|
||||
aria-labelledby={a11yId.current}
|
||||
/>
|
||||
<input
|
||||
type="file"
|
||||
style={{ display: "none" }}
|
||||
ref={fileInputRef}
|
||||
onClick={chromeFileInputFix}
|
||||
onChange={onFileChanged}
|
||||
accept="image/*"
|
||||
alt={_t("action|upload")}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
let removeAvatarBtn: JSX.Element | undefined;
|
||||
if (avatarUrl && removeAvatar) {
|
||||
if (avatarURL && removeAvatar && !disabled) {
|
||||
removeAvatarBtn = (
|
||||
<AccessibleButton onClick={removeAvatar} kind="link_sm">
|
||||
{_t("action|remove")}
|
||||
|
|
@ -85,16 +146,12 @@ const AvatarSetting: React.FC<IProps> = ({ avatarUrl, avatarAltText, avatarName,
|
|||
);
|
||||
}
|
||||
|
||||
const avatarClasses = classNames({
|
||||
mx_AvatarSetting_avatar: true,
|
||||
mx_AvatarSetting_avatar_hovering: isHovering && uploadAvatar,
|
||||
});
|
||||
return (
|
||||
<div className={avatarClasses} role="group" aria-label={avatarAltText}>
|
||||
<div className="mx_AvatarSetting_avatar" role="group" aria-label={avatarAltText}>
|
||||
{avatarElement}
|
||||
<div className="mx_AvatarSetting_hover" aria-hidden="true">
|
||||
<div className="mx_AvatarSetting_hoverBg" />
|
||||
{uploadAvatar && <span id={a11yId.current}>{_t("action|upload")}</span>}
|
||||
{!disabled && <span id={a11yId.current}>{_t("action|upload")}</span>}
|
||||
</div>
|
||||
{uploadAvatarBtn}
|
||||
{removeAvatarBtn}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue