69 lines
1.8 KiB
JavaScript
69 lines
1.8 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import './Avatar.scss';
|
|
|
|
import { twemojify } from '../../../util/twemojify';
|
|
|
|
import Text from '../text/Text';
|
|
import RawIcon from '../system-icons/RawIcon';
|
|
|
|
function Avatar({
|
|
text, bgColor, iconSrc, iconColor, imageSrc, size,
|
|
}) {
|
|
const [image, updateImage] = useState(imageSrc);
|
|
let textSize = 's1';
|
|
if (size === 'large') textSize = 'h1';
|
|
if (size === 'small') textSize = 'b1';
|
|
if (size === 'extra-small') textSize = 'b3';
|
|
|
|
useEffect(() => {
|
|
updateImage(imageSrc);
|
|
return () => updateImage(null);
|
|
}, [imageSrc]);
|
|
|
|
return (
|
|
<div className={`avatar-container avatar-container__${size} noselect`}>
|
|
{
|
|
image !== null
|
|
? <img draggable="false" src={image} onError={() => updateImage(null)} alt="avatar" />
|
|
: (
|
|
<span
|
|
style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
|
|
className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
|
|
>
|
|
{
|
|
iconSrc !== null
|
|
? <RawIcon size={size} src={iconSrc} color={iconColor} />
|
|
: text !== null && (
|
|
<Text variant={textSize} primary>
|
|
{twemojify([...text][0])}
|
|
</Text>
|
|
)
|
|
}
|
|
</span>
|
|
)
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Avatar.defaultProps = {
|
|
text: null,
|
|
bgColor: 'transparent',
|
|
iconSrc: null,
|
|
iconColor: null,
|
|
imageSrc: null,
|
|
size: 'normal',
|
|
};
|
|
|
|
Avatar.propTypes = {
|
|
text: PropTypes.string,
|
|
bgColor: PropTypes.string,
|
|
iconSrc: PropTypes.string,
|
|
iconColor: PropTypes.string,
|
|
imageSrc: PropTypes.string,
|
|
size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
|
|
};
|
|
|
|
export default Avatar;
|