143 lines
3.4 KiB
TypeScript
143 lines
3.4 KiB
TypeScript
import React from 'react';
|
|
import classNames from 'classnames';
|
|
|
|
import { AvatarPlaceHolder, ClosedGroupAvatar } from './AvatarPlaceHolder';
|
|
import { ConversationAttributes } from '../../js/models/conversations';
|
|
|
|
interface Props {
|
|
avatarPath?: string;
|
|
name?: string; // display name, profileName or phoneNumber, whatever is set first
|
|
pubkey: string;
|
|
size: number;
|
|
closedMemberConversations?: Array<ConversationAttributes>;
|
|
onAvatarClick?: () => void;
|
|
}
|
|
|
|
interface State {
|
|
imageBroken: boolean;
|
|
}
|
|
|
|
export class Avatar extends React.PureComponent<Props, State> {
|
|
public handleImageErrorBound: () => void;
|
|
public onAvatarClickBound: (e: any) => void;
|
|
|
|
public constructor(props: Props) {
|
|
super(props);
|
|
|
|
this.handleImageErrorBound = this.handleImageError.bind(this);
|
|
this.onAvatarClickBound = this.onAvatarClick.bind(this);
|
|
|
|
this.state = {
|
|
imageBroken: false,
|
|
};
|
|
}
|
|
|
|
public handleImageError() {
|
|
window.log.warn(
|
|
'Avatar: Image failed to load; failing over to placeholder'
|
|
);
|
|
this.setState({
|
|
imageBroken: true,
|
|
});
|
|
}
|
|
|
|
public renderIdenticon() {
|
|
const { size, name, pubkey } = this.props;
|
|
|
|
const userName = name || '0';
|
|
|
|
return (
|
|
<AvatarPlaceHolder
|
|
diameter={size}
|
|
name={userName}
|
|
pubkey={pubkey}
|
|
colors={this.getAvatarColors()}
|
|
borderColor={this.getAvatarBorderColor()}
|
|
/>
|
|
);
|
|
}
|
|
|
|
public renderImage() {
|
|
const { avatarPath, name } = this.props;
|
|
const { imageBroken } = this.state;
|
|
|
|
if (!avatarPath || imageBroken) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<img
|
|
onError={this.handleImageErrorBound}
|
|
alt={window.i18n('contactAvatarAlt', [name])}
|
|
src={avatarPath}
|
|
/>
|
|
);
|
|
}
|
|
|
|
public renderNoImage() {
|
|
const { closedMemberConversations, size } = this.props;
|
|
// if no image but we have conversations set for the group, renders group members avatars
|
|
if (closedMemberConversations) {
|
|
return (
|
|
<ClosedGroupAvatar
|
|
size={size}
|
|
conversations={closedMemberConversations}
|
|
i18n={window.i18n}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return this.renderIdenticon();
|
|
}
|
|
|
|
public render() {
|
|
const { avatarPath, size } = this.props;
|
|
const { imageBroken } = this.state;
|
|
const hasImage = avatarPath && !imageBroken;
|
|
|
|
if (
|
|
size !== 28 &&
|
|
size !== 36 &&
|
|
size !== 48 &&
|
|
size !== 64 &&
|
|
size !== 80 &&
|
|
size !== 300
|
|
) {
|
|
throw new Error(`Size ${size} is not supported!`);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
'module-avatar',
|
|
`module-avatar--${size}`,
|
|
hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image'
|
|
)}
|
|
onClick={e => {
|
|
this.onAvatarClickBound(e);
|
|
}}
|
|
role="button"
|
|
>
|
|
{hasImage ? this.renderImage() : this.renderNoImage()}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private onAvatarClick(e: any) {
|
|
if (this.props.onAvatarClick) {
|
|
e.stopPropagation();
|
|
this.props.onAvatarClick();
|
|
}
|
|
}
|
|
|
|
private getAvatarColors(): Array<string> {
|
|
// const theme = window.Events.getThemedSettings();
|
|
// defined in session-android as `profile_picture_placeholder_colors`
|
|
return ['#5ff8b0', '#26cdb9', '#f3c615', '#fcac5a'];
|
|
}
|
|
|
|
private getAvatarBorderColor(): string {
|
|
return '#00000059'; // borderAvatarColor in themes.scss
|
|
}
|
|
}
|