New Group administration: update title and avatar

This commit is contained in:
Evan Hahn 2021-03-09 13:16:56 -06:00 committed by Josh Perez
parent 468d491d34
commit 9f5335b854
25 changed files with 806 additions and 61 deletions

View file

@ -9,12 +9,14 @@ import React, {
MouseEventHandler,
FunctionComponent,
} from 'react';
import classNames from 'classnames';
import { ContextMenu, MenuItem, ContextMenuTrigger } from 'react-contextmenu';
import loadImage, { LoadImageOptions } from 'blueimp-load-image';
import { noop } from 'lodash';
import { LocalizerType } from '../types/Util';
import { Spinner } from './Spinner';
import { canvasToArrayBuffer } from '../util/canvasToArrayBuffer';
type PropsType = {
// This ID needs to be globally unique across the app.
@ -23,6 +25,7 @@ type PropsType = {
i18n: LocalizerType;
onChange: (value: undefined | ArrayBuffer) => unknown;
value: undefined | ArrayBuffer;
variant?: AvatarInputVariant;
};
enum ImageStatus {
@ -31,12 +34,18 @@ enum ImageStatus {
HasImage = 'has-image',
}
export enum AvatarInputVariant {
Light = 'light',
Dark = 'dark',
}
export const AvatarInput: FunctionComponent<PropsType> = ({
contextMenuId,
disabled,
i18n,
onChange,
value,
variant = AvatarInputVariant.Light,
}) => {
const fileInputRef = useRef<null | HTMLInputElement>(null);
// Comes from a third-party dependency
@ -136,7 +145,10 @@ export const AvatarInput: FunctionComponent<PropsType> = ({
<button
type="button"
disabled={disabled || isLoading}
className="module-AvatarInput"
className={classNames(
'module-AvatarInput',
`module-AvatarInput--${variant}`
)}
onClick={onClick}
>
<div
@ -197,17 +209,5 @@ async function processFile(file: File): Promise<ArrayBuffer> {
throw new Error('Loaded image was not a canvas');
}
return (await canvasToBlob(image)).arrayBuffer();
}
function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
return new Promise((resolve, reject) => {
canvas.toBlob(blob => {
if (blob) {
resolve(blob);
} else {
reject(new Error("Couldn't convert the canvas to a Blob"));
}
}, 'image/webp');
});
return canvasToArrayBuffer(image);
}