jiti-meet/react/features/base/avatar/components/web/StatelessAvatar.js

151 lines
4.3 KiB
JavaScript
Raw Normal View History

2019-07-03 15:39:39 +00:00
// @flow
import React from 'react';
2019-08-30 16:39:06 +00:00
import { Icon } from '../../../icons';
2019-07-03 15:39:39 +00:00
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,
/**
* One of the expected status strings (e.g. 'available') to render a badge on the avatar, if necessary.
*/
status?: ?string
2019-07-03 15:39:39 +00:00
};
/**
* 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;
2019-08-30 16:39:06 +00:00
if (this._isIcon(url)) {
return (
<div
className = { `${this._getAvatarClassName()} ${this._getBadgeClassName()}` }
id = { this.props.id }
style = { this._getAvatarStyle(this.props.color) }>
<Icon
size = '50%'
src = { url } />
</div>
);
}
2019-07-03 15:39:39 +00:00
if (url) {
return (
<div className = { this._getBadgeClassName() }>
<img
className = { this._getAvatarClassName() }
id = { this.props.id }
onError = { this.props.onAvatarLoadError }
src = { url }
style = { this._getAvatarStyle() } />
</div>
2019-07-03 15:39:39 +00:00
);
}
if (initials) {
return (
<div
className = { `${this._getAvatarClassName()} ${this._getBadgeClassName()}` }
2019-07-03 15:39:39 +00:00
id = { this.props.id }
style = { this._getAvatarStyle(this.props.color) }>
2019-07-03 16:23:00 +00:00
<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>
2019-07-03 15:39:39 +00:00
</div>
);
}
// default avatar
return (
<div className = { this._getBadgeClassName() }>
<img
className = { this._getAvatarClassName('defaultAvatar') }
id = { this.props.id }
src = { this.props.defaultAvatar || 'images/avatar.png' }
style = { this._getAvatarStyle() } />
</div>
2019-07-03 15:39:39 +00:00
);
}
/**
* 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 || ''}`;
}
/**
* Generates a class name to render a badge on the avatar, if necessary.
*
* @returns {string}
*/
_getBadgeClassName() {
const { status } = this.props;
if (status) {
return `avatar-badge avatar-badge-${status}`;
}
return '';
}
2019-08-30 16:39:06 +00:00
_isIcon: (?string | ?Object) => boolean
2019-07-03 15:39:39 +00:00
}