124 lines
3.5 KiB
JavaScript
124 lines
3.5 KiB
JavaScript
// @flow
|
|
|
|
import React from 'react';
|
|
|
|
import AbstractStatelessAvatar, { type Props as AbstractProps } from '../AbstractStatelessAvatar';
|
|
|
|
type Props = AbstractProps & {
|
|
|
|
/**
|
|
* External class name passed through props.
|
|
*/
|
|
className?: string,
|
|
|
|
/**
|
|
* The default avatar URL if we want to override the app bundled one (e.g. AlwaysOnTop)
|
|
*/
|
|
defaultAvatar?: string,
|
|
|
|
/**
|
|
* ID of the component to be rendered.
|
|
*/
|
|
id?: string
|
|
};
|
|
|
|
/**
|
|
* Implements a stateless avatar component that renders an avatar purely from what gets passed through
|
|
* props.
|
|
*/
|
|
export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
|
|
/**
|
|
* Implements {@code Component#render}.
|
|
*
|
|
* @inheritdoc
|
|
*/
|
|
render() {
|
|
const { initials, url } = this.props;
|
|
const icon = this._parseIconUrl(url);
|
|
|
|
if (icon) {
|
|
return (
|
|
<div
|
|
className = { this._getAvatarClassName() }
|
|
id = { this.props.id }
|
|
style = { this._getAvatarStyle(this.props.color) }>
|
|
<i className = { `icon-${icon}` } />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (url) {
|
|
return (
|
|
<img
|
|
className = { this._getAvatarClassName() }
|
|
id = { this.props.id }
|
|
onError = { this.props.onAvatarLoadError }
|
|
src = { url }
|
|
style = { this._getAvatarStyle() } />
|
|
);
|
|
}
|
|
|
|
if (initials) {
|
|
return (
|
|
<div
|
|
className = { this._getAvatarClassName() }
|
|
id = { this.props.id }
|
|
style = { this._getAvatarStyle(this.props.color) }>
|
|
<svg
|
|
className = 'avatar-svg'
|
|
viewBox = '0 0 100 100'
|
|
xmlns = 'http://www.w3.org/2000/svg'
|
|
xmlnsXlink = 'http://www.w3.org/1999/xlink'>
|
|
<foreignObject
|
|
height = '100%'
|
|
width = '100%'>
|
|
<span
|
|
className = 'avatar-foreign'>
|
|
{ initials }
|
|
</span>
|
|
</foreignObject>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// default avatar
|
|
return (
|
|
<img
|
|
className = { this._getAvatarClassName('defaultAvatar') }
|
|
id = { this.props.id }
|
|
src = { this.props.defaultAvatar || 'images/avatar.png' }
|
|
style = { this._getAvatarStyle() } />
|
|
);
|
|
}
|
|
|
|
/**
|
|
* 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 || ''}`;
|
|
}
|
|
|
|
_parseIconUrl: ?string => ?string
|
|
}
|