2019-09-12 11:46:48 +00:00
|
|
|
import React from 'react'
|
2019-08-08 09:24:20 +00:00
|
|
|
import styled, { css } from 'styled-components'
|
2019-06-18 13:20:49 +00:00
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
import { Icons } from '../icons'
|
2019-08-07 07:29:33 +00:00
|
|
|
import Link from '../link'
|
2019-09-12 11:46:48 +00:00
|
|
|
import isEqual from "lodash/isEqual";
|
2019-06-27 11:28:13 +00:00
|
|
|
|
|
|
|
const whiteColor = '#FFFFFF';
|
|
|
|
const avatarBackground = '#ECEEF1';
|
2019-08-07 07:29:33 +00:00
|
|
|
const namedAvatarBackground = '#2DA7DB';
|
2019-06-18 13:20:49 +00:00
|
|
|
|
2019-08-08 09:24:20 +00:00
|
|
|
const noneUserSelect = css`
|
|
|
|
-webkit-touch-callout: none;
|
|
|
|
-webkit-user-select: none;
|
|
|
|
-moz-user-select: none;
|
|
|
|
-ms-user-select: none;
|
|
|
|
user-select: none;
|
|
|
|
`;
|
|
|
|
|
2019-06-18 13:20:49 +00:00
|
|
|
const StyledAvatar = styled.div`
|
|
|
|
position: relative;
|
|
|
|
width: ${props =>
|
2019-08-08 08:15:45 +00:00
|
|
|
(props.size === 'max' && '160px') ||
|
|
|
|
(props.size === 'big' && '82px') ||
|
|
|
|
(props.size === 'medium' && '48px') ||
|
|
|
|
(props.size === 'small' && '32px')
|
2019-08-07 07:29:33 +00:00
|
|
|
};
|
2019-06-18 13:20:49 +00:00
|
|
|
height: ${props =>
|
2019-08-08 08:15:45 +00:00
|
|
|
(props.size === 'max' && '160px') ||
|
|
|
|
(props.size === 'big' && '82px') ||
|
|
|
|
(props.size === 'medium' && '48px') ||
|
|
|
|
(props.size === 'small' && '32px')
|
2019-08-07 07:29:33 +00:00
|
|
|
};
|
2019-06-27 11:28:13 +00:00
|
|
|
|
2019-08-07 07:29:33 +00:00
|
|
|
font-family: 'Open Sans',sans-serif,Arial;
|
2019-06-27 11:28:13 +00:00
|
|
|
font-style: normal;
|
2019-06-18 13:20:49 +00:00
|
|
|
`;
|
|
|
|
|
2019-06-27 11:28:13 +00:00
|
|
|
const RoleWrapper = styled.div`
|
2019-06-18 13:20:49 +00:00
|
|
|
position: absolute;
|
|
|
|
left: ${props =>
|
2019-08-08 08:15:45 +00:00
|
|
|
(props.size === 'max' && '0px') ||
|
|
|
|
(props.size === 'big' && '0px') ||
|
|
|
|
(props.size === 'medium' && '-2px') ||
|
|
|
|
(props.size === 'small' && '-2px')
|
2019-08-07 07:29:33 +00:00
|
|
|
};
|
2019-06-18 13:20:49 +00:00
|
|
|
bottom: ${props =>
|
2019-08-08 08:15:45 +00:00
|
|
|
(props.size === 'max' && '0px') ||
|
|
|
|
(props.size === 'big' && '5px') ||
|
|
|
|
(props.size === 'medium' && '3px') ||
|
|
|
|
(props.size === 'small' && '3px')
|
2019-08-07 07:29:33 +00:00
|
|
|
};
|
2019-06-18 13:20:49 +00:00
|
|
|
width: ${props =>
|
2019-08-08 08:15:45 +00:00
|
|
|
(props.size === 'max' && '24px') || '12px'};
|
2019-06-18 13:20:49 +00:00
|
|
|
height: ${props =>
|
2019-08-08 08:15:45 +00:00
|
|
|
(props.size === 'max' && '24px') || '12px'};
|
2019-06-18 13:20:49 +00:00
|
|
|
`;
|
|
|
|
|
2019-06-27 11:28:13 +00:00
|
|
|
const ImageStyled = styled.img`
|
2019-09-05 06:23:05 +00:00
|
|
|
width: 100%;
|
2019-06-27 11:28:13 +00:00
|
|
|
height: auto;
|
|
|
|
border-radius: 50%;
|
2019-08-08 09:24:20 +00:00
|
|
|
|
|
|
|
${noneUserSelect}
|
2019-06-27 11:28:13 +00:00
|
|
|
`;
|
|
|
|
|
2019-07-31 17:47:22 +00:00
|
|
|
const AvatarWrapper = styled.div`
|
2019-06-27 11:28:13 +00:00
|
|
|
border-radius: 50%;
|
|
|
|
height: 100%;
|
2019-08-07 07:29:33 +00:00
|
|
|
background-color: ${props =>
|
2019-08-08 08:15:45 +00:00
|
|
|
(props.source === ''
|
|
|
|
&& props.userName !== ''
|
|
|
|
&& namedAvatarBackground)
|
|
|
|
|| avatarBackground};
|
2019-06-18 13:20:49 +00:00
|
|
|
|
|
|
|
& > svg {
|
2019-06-27 11:28:13 +00:00
|
|
|
display: block;
|
|
|
|
width: 50% !important;
|
|
|
|
height: 100% !important;
|
|
|
|
margin: auto;
|
2019-06-18 13:20:49 +00:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2019-06-27 11:28:13 +00:00
|
|
|
const NamedAvatar = styled.div`
|
|
|
|
position: absolute;
|
|
|
|
left: 50%;
|
|
|
|
top: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
font-weight: 600;
|
|
|
|
font-size: ${props =>
|
2019-09-12 11:46:48 +00:00
|
|
|
(props.size === 'max' && '72px') ||
|
|
|
|
(props.size === 'big' && '34px') ||
|
|
|
|
(props.size === 'medium' && '20px') ||
|
|
|
|
(props.size === 'small' && '12px')
|
2019-08-08 08:15:45 +00:00
|
|
|
};
|
2019-06-27 11:28:13 +00:00
|
|
|
color: ${whiteColor};
|
2019-08-08 08:15:45 +00:00
|
|
|
|
2019-08-08 09:24:20 +00:00
|
|
|
${noneUserSelect}
|
2019-06-18 13:20:49 +00:00
|
|
|
`;
|
|
|
|
|
2019-06-27 11:28:13 +00:00
|
|
|
const EditContainer = styled.div`
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
top: 50%;
|
|
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
padding: 75% 16px 5px;
|
|
|
|
text-align: center;
|
|
|
|
line-height: 19px;
|
|
|
|
border-radius: 50%;
|
|
|
|
background: linear-gradient(180deg, rgba(6, 22, 38, 0) 24.48%, rgba(6, 22, 38, 0.75) 100%);
|
2019-07-10 14:05:34 +00:00
|
|
|
`;
|
2019-06-27 11:28:13 +00:00
|
|
|
|
2019-07-31 17:47:22 +00:00
|
|
|
const EmptyIcon = styled(Icons.CameraIcon)`
|
2019-08-07 07:29:33 +00:00
|
|
|
border-radius: 50%;
|
2019-07-31 17:47:22 +00:00
|
|
|
`;
|
|
|
|
|
2019-08-13 11:38:09 +00:00
|
|
|
const EditLink = styled.div`
|
|
|
|
padding-left: 10px;
|
|
|
|
padding-right: 10px;
|
|
|
|
|
2019-09-04 08:54:36 +00:00
|
|
|
a:hover {
|
|
|
|
border-bottom: none
|
|
|
|
}
|
|
|
|
|
2019-08-13 11:38:09 +00:00
|
|
|
span {
|
|
|
|
display: inline-block;
|
2019-08-13 12:19:48 +00:00
|
|
|
max-width: 100%;
|
2019-09-04 08:54:36 +00:00
|
|
|
text-decoration: underline dashed;
|
2019-08-13 11:38:09 +00:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2019-08-14 12:51:50 +00:00
|
|
|
const getRoleIcon = role => {
|
|
|
|
switch (role) {
|
|
|
|
case 'guest':
|
|
|
|
return <Icons.GuestIcon size='scale' />;
|
|
|
|
case 'admin':
|
|
|
|
return <Icons.AdministratorIcon size='scale' />;
|
|
|
|
case 'owner':
|
|
|
|
return <Icons.OwnerIcon size='scale' />;
|
|
|
|
default:
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const getInitials = userName =>
|
|
|
|
typeof userName === 'string'
|
|
|
|
? userName
|
|
|
|
.split(/\s/)
|
|
|
|
.reduce((response, word) => response += word.slice(0, 1), '')
|
|
|
|
.substring(0, 2)
|
|
|
|
: '';
|
|
|
|
|
|
|
|
const Initials = props => (
|
|
|
|
<NamedAvatar {...props}>{getInitials(props.userName)}</NamedAvatar>
|
|
|
|
);
|
|
|
|
|
2019-09-09 14:08:30 +00:00
|
|
|
Initials.propTypes = {
|
|
|
|
userName: PropTypes.string
|
|
|
|
};
|
|
|
|
|
2019-09-10 07:36:55 +00:00
|
|
|
// eslint-disable-next-line react/display-name
|
2019-09-12 11:46:48 +00:00
|
|
|
class Avatar extends React.Component {
|
|
|
|
|
|
|
|
shouldComponentUpdate(nextProps,nextState) {
|
|
|
|
return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
//console.log("Avatar render");
|
|
|
|
const { size, source, userName, role, editing, editLabel, editAction } = this.props;
|
|
|
|
|
|
|
|
const avatarContent = source
|
|
|
|
? <ImageStyled src={source} />
|
|
|
|
: userName
|
|
|
|
? <Initials userName={userName} size={size} />
|
|
|
|
: <EmptyIcon size='scale' />;
|
|
|
|
|
|
|
|
const roleIcon = getRoleIcon(role);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<StyledAvatar {...this.props}>
|
|
|
|
<AvatarWrapper source={source} userName={userName}>
|
|
|
|
{avatarContent}
|
|
|
|
</AvatarWrapper>
|
|
|
|
{editing && (size === 'max') &&
|
|
|
|
<EditContainer>
|
|
|
|
<EditLink>
|
|
|
|
<Link
|
|
|
|
type='action'
|
|
|
|
title={editLabel}
|
|
|
|
isTextOverflow={true}
|
|
|
|
fontSize={14}
|
|
|
|
color={whiteColor}
|
|
|
|
onClick={editAction}
|
|
|
|
>
|
|
|
|
{editLabel}
|
|
|
|
</Link>
|
|
|
|
</EditLink>
|
|
|
|
</EditContainer>}
|
|
|
|
<RoleWrapper size={size}>
|
|
|
|
{roleIcon}
|
|
|
|
</RoleWrapper>
|
|
|
|
</StyledAvatar>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2019-06-18 13:20:49 +00:00
|
|
|
|
|
|
|
Avatar.propTypes = {
|
2019-08-07 07:29:33 +00:00
|
|
|
size: PropTypes.oneOf(['max', 'big', 'medium', 'small']),
|
|
|
|
role: PropTypes.oneOf(['owner', 'admin', 'guest', 'user']),
|
|
|
|
source: PropTypes.string,
|
|
|
|
editLabel: PropTypes.string,
|
|
|
|
userName: PropTypes.string,
|
2019-09-09 14:08:30 +00:00
|
|
|
editing: PropTypes.bool,
|
|
|
|
editAction: PropTypes.func
|
2019-06-18 13:20:49 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
Avatar.defaultProps = {
|
2019-08-07 07:29:33 +00:00
|
|
|
size: 'medium',
|
|
|
|
role: '',
|
|
|
|
source: '',
|
|
|
|
editLabel: 'Edit photo',
|
|
|
|
userName: '',
|
|
|
|
editing: false
|
2019-06-18 13:20:49 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default Avatar;
|