2016-03-24 16:03:30 +09:00
|
|
|
import React, { PropTypes, Component } from 'react';
|
2016-06-23 15:00:58 +09:00
|
|
|
import Users from 'meteor/nova:users';
|
2016-05-22 15:23:12 +09:00
|
|
|
|
2016-04-19 15:45:36 +09:00
|
|
|
const UsersAvatar = ({user, size, link}) => {
|
2016-03-24 16:03:30 +09:00
|
|
|
|
|
|
|
const sizes = {
|
|
|
|
small: "20px",
|
|
|
|
medium: "30px",
|
|
|
|
large: "50px"
|
|
|
|
}
|
|
|
|
|
|
|
|
const aStyle = {
|
|
|
|
borderRadius: "100%",
|
|
|
|
display: "inline-block",
|
|
|
|
height: sizes[size],
|
|
|
|
width: sizes[size]
|
|
|
|
};
|
|
|
|
|
|
|
|
const imgStyle = {
|
|
|
|
borderRadius: "100%",
|
2016-03-25 12:42:25 +09:00
|
|
|
display: "block",
|
|
|
|
height: sizes[size],
|
|
|
|
width: sizes[size]
|
2016-03-24 16:03:30 +09:00
|
|
|
};
|
|
|
|
|
2016-06-23 15:00:58 +09:00
|
|
|
const avatarUrl = Users.avatar.getUrl(user);
|
2016-05-22 15:46:44 +09:00
|
|
|
|
2016-06-23 15:00:58 +09:00
|
|
|
const img = <img alt={Users.getDisplayName(user)} style={imgStyle} className="avatar" src={avatarUrl}/>;
|
|
|
|
const initials = <span className="avatar-initials"><span>{Users.avatar.getInitials(user)}</span></span>;
|
2016-05-22 15:46:44 +09:00
|
|
|
|
|
|
|
const avatar = avatarUrl ? img : initials;
|
2016-03-25 12:42:25 +09:00
|
|
|
|
2016-05-22 15:46:44 +09:00
|
|
|
return link ? <a style={aStyle} className="users-avatar" href={Users.getProfileUrl(user)}>{avatar}</a> : avatar;
|
2016-03-25 12:42:25 +09:00
|
|
|
|
2016-03-24 16:03:30 +09:00
|
|
|
}
|
|
|
|
|
2016-04-19 15:45:36 +09:00
|
|
|
UsersAvatar.propTypes = {
|
2016-03-24 16:03:30 +09:00
|
|
|
user: React.PropTypes.object.isRequired,
|
2016-03-25 12:42:25 +09:00
|
|
|
size: React.PropTypes.string,
|
|
|
|
link: React.PropTypes.bool
|
2016-03-24 16:03:30 +09:00
|
|
|
}
|
|
|
|
|
2016-04-19 15:45:36 +09:00
|
|
|
UsersAvatar.defaultProps = {
|
2016-03-25 12:42:25 +09:00
|
|
|
size: "medium",
|
|
|
|
link: true
|
2016-03-24 16:03:30 +09:00
|
|
|
}
|
2016-03-19 18:19:28 +09:00
|
|
|
|
2016-05-22 16:42:24 +09:00
|
|
|
UsersAvatar.displayName = "UsersAvatar";
|
|
|
|
|
2016-04-19 15:45:36 +09:00
|
|
|
module.exports = UsersAvatar;
|
|
|
|
export default UsersAvatar;
|