Avatar defaults and colors
This commit is contained in:
parent
a001882d58
commit
12d2b1bf7c
140 changed files with 4212 additions and 1084 deletions
81
ts/components/AvatarIconEditor.tsx
Normal file
81
ts/components/AvatarIconEditor.tsx
Normal file
|
@ -0,0 +1,81 @@
|
|||
// Copyright 2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
import { AvatarColorPicker } from './AvatarColorPicker';
|
||||
import { AvatarColorType } from '../types/Colors';
|
||||
import { AvatarDataType } from '../types/Avatar';
|
||||
import { AvatarModalButtons } from './AvatarModalButtons';
|
||||
import { AvatarPreview } from './AvatarPreview';
|
||||
import { LocalizerType } from '../types/Util';
|
||||
import { avatarDataToArrayBuffer } from '../util/avatarDataToArrayBuffer';
|
||||
|
||||
export type PropsType = {
|
||||
avatarData: AvatarDataType;
|
||||
i18n: LocalizerType;
|
||||
onClose: (avatarData?: AvatarDataType) => unknown;
|
||||
};
|
||||
|
||||
export const AvatarIconEditor = ({
|
||||
avatarData: initialAvatarData,
|
||||
i18n,
|
||||
onClose,
|
||||
}: PropsType): JSX.Element => {
|
||||
const [avatarBuffer, setAvatarBuffer] = useState<ArrayBuffer | undefined>();
|
||||
const [avatarData, setAvatarData] = useState<AvatarDataType>(
|
||||
initialAvatarData
|
||||
);
|
||||
|
||||
const onColorSelected = useCallback(
|
||||
(color: AvatarColorType) => {
|
||||
setAvatarData({
|
||||
...avatarData,
|
||||
color,
|
||||
});
|
||||
},
|
||||
[avatarData]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let shouldCancel = false;
|
||||
|
||||
async function loadAvatar() {
|
||||
const buffer = await avatarDataToArrayBuffer(avatarData);
|
||||
if (!shouldCancel) {
|
||||
setAvatarBuffer(buffer);
|
||||
}
|
||||
}
|
||||
loadAvatar();
|
||||
|
||||
return () => {
|
||||
shouldCancel = true;
|
||||
};
|
||||
}, [avatarData, setAvatarBuffer]);
|
||||
|
||||
const hasChanges = avatarData !== initialAvatarData;
|
||||
|
||||
return (
|
||||
<>
|
||||
<AvatarPreview
|
||||
avatarColor={avatarData.color}
|
||||
avatarValue={avatarBuffer}
|
||||
conversationTitle={avatarData.text}
|
||||
i18n={i18n}
|
||||
/>
|
||||
<hr className="AvatarEditor__divider" />
|
||||
<AvatarColorPicker i18n={i18n} onColorSelected={onColorSelected} />
|
||||
<AvatarModalButtons
|
||||
hasChanges={hasChanges}
|
||||
i18n={i18n}
|
||||
onCancel={onClose}
|
||||
onSave={() =>
|
||||
onClose({
|
||||
...avatarData,
|
||||
buffer: avatarBuffer,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue