99 lines
2.4 KiB
JavaScript
99 lines
2.4 KiB
JavaScript
// @flow
|
|
|
|
import React from 'react';
|
|
|
|
import { connect } from '../../../redux';
|
|
|
|
import AbstractAvatar, {
|
|
_mapStateToProps,
|
|
type Props as AbstractProps
|
|
} from '../AbstractAvatar';
|
|
|
|
type Props = AbstractProps & {
|
|
className?: string,
|
|
id: string
|
|
};
|
|
|
|
/**
|
|
* Implements an avatar as a React/Web {@link Component}.
|
|
*/
|
|
class Avatar extends AbstractAvatar<Props> {
|
|
/**
|
|
* Constructs a style object to be used on the avatars.
|
|
*
|
|
* @param {string?} color - The desired background color.
|
|
* @returns {Object}
|
|
*/
|
|
_getAvatarStyle(color) {
|
|
const { size } = this.props;
|
|
|
|
return {
|
|
backgroundColor: color || undefined,
|
|
fontSize: size ? size * 0.5 : '180%',
|
|
height: size || '100%',
|
|
width: size || '100%'
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Constructs a list of class names required for the avatar component.
|
|
*
|
|
* @param {string} additional - Any additional class to add.
|
|
* @returns {string}
|
|
*/
|
|
_getAvatarClassName(additional) {
|
|
return `avatar ${additional || ''} ${this.props.className || ''}`;
|
|
}
|
|
|
|
_onAvatarLoadError: () => void;
|
|
|
|
/**
|
|
* Implements {@code AbstractAvatar#_renderDefaultAvatar}.
|
|
*
|
|
* @inheritdoc
|
|
*/
|
|
_renderDefaultAvatar() {
|
|
return (
|
|
<img
|
|
className = { this._getAvatarClassName('defaultAvatar') }
|
|
id = { this.props.id }
|
|
src = '/images/avatar.png'
|
|
style = { this._getAvatarStyle() } />
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Implements {@code AbstractAvatar#_renderGravatar}.
|
|
*
|
|
* @inheritdoc
|
|
*/
|
|
_renderInitialsAvatar(initials, color) {
|
|
return (
|
|
<div
|
|
className = { this._getAvatarClassName() }
|
|
id = { this.props.id }
|
|
style = { this._getAvatarStyle(color) }>
|
|
{ initials }
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Implements {@code AbstractAvatar#_renderGravatar}.
|
|
*
|
|
* @inheritdoc
|
|
*/
|
|
_renderURLAvatar(uri) {
|
|
return (
|
|
<img
|
|
className = { this._getAvatarClassName() }
|
|
id = { this.props.id }
|
|
onError = { this._onAvatarLoadError }
|
|
src = { uri }
|
|
style = { this._getAvatarStyle() } />
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(_mapStateToProps)(Avatar);
|