2017-04-17 17:14:17 +03:00
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2016-07-04 23:03:57 +03:00
|
|
|
import classnames from 'classnames';
|
2016-05-16 14:39:59 +03:00
|
|
|
import { themr } from 'react-css-themr';
|
2017-01-26 20:05:32 +03:00
|
|
|
import { AVATAR } from '../identifiers';
|
|
|
|
import InjectFontIcon from '../font_icon/FontIcon';
|
2015-11-18 00:24:22 +03:00
|
|
|
|
2016-05-28 18:44:29 +03:00
|
|
|
const factory = (FontIcon) => {
|
2017-01-26 20:05:32 +03:00
|
|
|
const Avatar = ({ alt, children, className, cover, icon, image, theme, title, ...other }) => (
|
|
|
|
<div data-react-toolbox="avatar" className={classnames(theme.avatar, className)} {...other}>
|
2016-05-28 18:44:29 +03:00
|
|
|
{children}
|
2017-01-26 20:05:32 +03:00
|
|
|
{cover && typeof image === 'string' && <span aria-label={alt} className={theme.image} style={{ backgroundImage: `url(${image})` }} />}
|
2017-09-18 21:02:40 +03:00
|
|
|
{!cover && (typeof image === 'string' ? <img alt={alt} className={theme.image} src={image} title={title} /> : image)}
|
2017-01-16 23:51:53 +03:00
|
|
|
{typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} alt={alt} /> : icon}
|
2016-05-28 18:44:29 +03:00
|
|
|
{title ? <span className={theme.letter}>{title[0]}</span> : null}
|
|
|
|
</div>
|
|
|
|
);
|
2015-11-18 00:24:22 +03:00
|
|
|
|
2016-05-28 18:44:29 +03:00
|
|
|
Avatar.propTypes = {
|
2017-01-16 23:51:53 +03:00
|
|
|
alt: PropTypes.string,
|
2016-05-28 18:44:29 +03:00
|
|
|
children: PropTypes.node,
|
|
|
|
className: PropTypes.string,
|
2016-07-10 15:23:40 +03:00
|
|
|
cover: PropTypes.bool,
|
2016-05-28 18:44:29 +03:00
|
|
|
icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
|
|
|
image: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
2016-06-04 00:44:33 +03:00
|
|
|
theme: PropTypes.shape({
|
|
|
|
avatar: PropTypes.string,
|
|
|
|
image: PropTypes.string,
|
2017-01-26 20:05:32 +03:00
|
|
|
letter: PropTypes.string,
|
2016-05-28 18:44:29 +03:00
|
|
|
}),
|
2017-01-26 20:05:32 +03:00
|
|
|
title: PropTypes.string,
|
2016-05-28 18:44:29 +03:00
|
|
|
};
|
|
|
|
|
2016-07-10 15:23:40 +03:00
|
|
|
Avatar.defaultProps = {
|
2017-01-16 23:51:53 +03:00
|
|
|
alt: '',
|
2017-01-26 20:05:32 +03:00
|
|
|
cover: false,
|
2016-07-10 15:23:40 +03:00
|
|
|
};
|
|
|
|
|
2016-05-28 18:44:29 +03:00
|
|
|
return Avatar;
|
2015-11-26 03:53:42 +03:00
|
|
|
};
|
2015-11-18 00:24:22 +03:00
|
|
|
|
2016-05-28 18:44:29 +03:00
|
|
|
const Avatar = factory(InjectFontIcon);
|
|
|
|
export default themr(AVATAR)(Avatar);
|
|
|
|
export { factory as avatarFactory };
|
|
|
|
export { Avatar };
|