mirror of
https://github.com/array-in-a-matrix/xinny.git
synced 2024-05-19 12:50:17 -04:00
70 lines
1.8 KiB
JavaScript
70 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import './Avatar.scss';
|
|
|
|
import Text from '../text/Text';
|
|
import RawIcon from '../system-icons/RawIcon';
|
|
|
|
import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
|
|
import { avatarInitials } from '../../../util/common';
|
|
|
|
const Avatar = React.forwardRef(({ text, bgColor, iconSrc, iconColor, imageSrc, size }, ref) => {
|
|
let textSize = 's1';
|
|
if (size === 'large') textSize = 'h1';
|
|
if (size === 'small') textSize = 'b1';
|
|
if (size === 'extra-small') textSize = 'b3';
|
|
|
|
return (
|
|
<div ref={ref} className={`avatar-container avatar-container__${size} noselect`}>
|
|
{imageSrc !== null ? (
|
|
<img
|
|
draggable="false"
|
|
src={imageSrc}
|
|
onLoad={(e) => {
|
|
e.target.style.backgroundColor = 'transparent';
|
|
}}
|
|
onError={(e) => {
|
|
e.target.src = ImageBrokenSVG;
|
|
}}
|
|
alt=""
|
|
/>
|
|
) : (
|
|
<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>
|
|
{avatarInitials(text)}
|
|
</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;
|