2020-10-16 13:16:01 +00:00
|
|
|
import React, { memo } from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2021-02-20 14:54:12 +00:00
|
|
|
import styled from "styled-components";
|
2021-02-04 08:55:34 +00:00
|
|
|
|
|
|
|
import { GuestIcon, AdministratorIcon, OwnerIcon } from "./svg";
|
2020-12-01 08:05:39 +00:00
|
|
|
import {
|
2021-02-04 08:55:34 +00:00
|
|
|
EmptyIcon,
|
|
|
|
EditContainer,
|
|
|
|
AvatarWrapper,
|
|
|
|
RoleWrapper,
|
|
|
|
NamedAvatar,
|
|
|
|
StyledImage,
|
|
|
|
StyledAvatar,
|
2022-06-08 14:37:58 +00:00
|
|
|
StyledIconWrapper,
|
2021-02-04 08:55:34 +00:00
|
|
|
} from "./styled-avatar";
|
2021-10-19 21:41:42 +00:00
|
|
|
import IconButton from "../icon-button";
|
2021-02-24 17:11:23 +00:00
|
|
|
import commonIconsStyles from "../utils/common-icons-style";
|
2019-06-27 11:28:13 +00:00
|
|
|
|
2021-02-20 14:54:12 +00:00
|
|
|
const StyledGuestIcon = styled(GuestIcon)`
|
|
|
|
${commonIconsStyles}
|
|
|
|
`;
|
2021-03-04 23:52:14 +00:00
|
|
|
const StyledAdministratorIcon = styled(AdministratorIcon)`
|
2021-02-20 14:54:12 +00:00
|
|
|
${commonIconsStyles}
|
|
|
|
`;
|
|
|
|
const StyledOwnerIcon = styled(OwnerIcon)`
|
|
|
|
${commonIconsStyles}
|
|
|
|
`;
|
2020-10-16 13:16:01 +00:00
|
|
|
const getRoleIcon = (role) => {
|
2019-08-14 12:51:50 +00:00
|
|
|
switch (role) {
|
2020-10-16 13:16:01 +00:00
|
|
|
case "guest":
|
2021-12-13 10:01:05 +00:00
|
|
|
return <StyledGuestIcon size="scale" className="guest_icon" />;
|
2020-10-16 13:16:01 +00:00
|
|
|
case "admin":
|
2021-12-13 10:01:05 +00:00
|
|
|
return <StyledAdministratorIcon size="scale" className="admin_icon" />;
|
2020-10-16 13:16:01 +00:00
|
|
|
case "owner":
|
2021-12-13 10:01:05 +00:00
|
|
|
return <StyledOwnerIcon size="scale" className="owner_icon" />;
|
2019-08-14 12:51:50 +00:00
|
|
|
default:
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const getInitials = (userName) =>
|
2019-09-13 05:51:14 +00:00
|
|
|
userName
|
|
|
|
.split(/\s/)
|
2020-10-16 13:16:01 +00:00
|
|
|
.reduce((response, word) => (response += word.slice(0, 1)), "")
|
2019-09-13 05:51:14 +00:00
|
|
|
.substring(0, 2);
|
2019-08-14 12:51:50 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
const Initials = (props) => (
|
2019-08-14 12:51:50 +00:00
|
|
|
<NamedAvatar {...props}>{getInitials(props.userName)}</NamedAvatar>
|
|
|
|
);
|
|
|
|
|
2019-09-09 14:08:30 +00:00
|
|
|
Initials.propTypes = {
|
2020-10-16 13:16:01 +00:00
|
|
|
userName: PropTypes.string,
|
2019-09-09 14:08:30 +00:00
|
|
|
};
|
|
|
|
|
2019-09-10 07:36:55 +00:00
|
|
|
// eslint-disable-next-line react/display-name
|
2021-03-04 23:52:14 +00:00
|
|
|
const Avatar = (props) => {
|
2019-09-13 12:34:37 +00:00
|
|
|
//console.log("Avatar render");
|
2022-01-28 13:44:58 +00:00
|
|
|
const { size, source, userName, role, editing, editAction } = props;
|
2022-06-08 14:37:58 +00:00
|
|
|
let isDefault = false,
|
|
|
|
isIcon = false;
|
2022-03-29 08:20:57 +00:00
|
|
|
|
2022-04-08 10:32:01 +00:00
|
|
|
if (source?.includes("default_user_photo")) isDefault = true;
|
2022-06-08 14:37:58 +00:00
|
|
|
else if (source?.includes(".svg")) isIcon = true;
|
2020-10-16 13:16:01 +00:00
|
|
|
|
|
|
|
const avatarContent = source ? (
|
2022-06-08 14:37:58 +00:00
|
|
|
isIcon ? (
|
|
|
|
<StyledIconWrapper>
|
|
|
|
<IconButton iconName={source} className="icon" isDisabled={true} />
|
|
|
|
</StyledIconWrapper>
|
|
|
|
) : (
|
|
|
|
<StyledImage src={source} isDefault={isDefault} />
|
|
|
|
)
|
2020-10-16 13:16:01 +00:00
|
|
|
) : userName ? (
|
|
|
|
<Initials userName={userName} size={size} />
|
|
|
|
) : (
|
2021-09-13 09:54:59 +00:00
|
|
|
<EmptyIcon size="scale" />
|
2020-10-16 13:16:01 +00:00
|
|
|
);
|
2019-09-13 12:34:37 +00:00
|
|
|
|
|
|
|
const roleIcon = getRoleIcon(role);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<StyledAvatar {...props}>
|
2022-01-27 13:54:58 +00:00
|
|
|
<AvatarWrapper source={source} userName={userName}>
|
2019-09-13 12:34:37 +00:00
|
|
|
{avatarContent}
|
|
|
|
</AvatarWrapper>
|
2020-10-16 13:16:01 +00:00
|
|
|
{editing && size === "max" && (
|
2022-01-27 13:54:58 +00:00
|
|
|
<EditContainer>
|
2021-10-19 21:41:42 +00:00
|
|
|
<IconButton
|
2021-12-13 10:01:05 +00:00
|
|
|
className="edit_icon"
|
2021-10-19 21:41:42 +00:00
|
|
|
iconName="/static/images/pencil.react.svg"
|
|
|
|
onClick={editAction}
|
|
|
|
size={16}
|
|
|
|
/>
|
2020-10-16 13:16:01 +00:00
|
|
|
</EditContainer>
|
|
|
|
)}
|
|
|
|
<RoleWrapper size={size}>{roleIcon}</RoleWrapper>
|
2019-09-13 12:34:37 +00:00
|
|
|
</StyledAvatar>
|
|
|
|
);
|
2021-03-04 23:52:14 +00:00
|
|
|
};
|
2019-06-18 13:20:49 +00:00
|
|
|
|
|
|
|
Avatar.propTypes = {
|
2021-03-04 23:52:14 +00:00
|
|
|
/** Size of avatar */
|
2022-07-12 08:02:00 +00:00
|
|
|
size: PropTypes.oneOf(["max", "big", "medium", "base", "small", "min"]),
|
2021-03-04 23:52:14 +00:00
|
|
|
/** Adds a user role table */
|
2020-10-16 13:16:01 +00:00
|
|
|
role: PropTypes.oneOf(["owner", "admin", "guest", "user"]),
|
2022-06-08 14:37:58 +00:00
|
|
|
/** Provide either a url to display as `Picture` or path to **.svg** file to display as `Icon` */
|
2019-08-07 07:29:33 +00:00
|
|
|
source: PropTypes.string,
|
2022-06-08 14:37:58 +00:00
|
|
|
/** Provide this and leave `source` empty to display as initials */
|
2019-08-07 07:29:33 +00:00
|
|
|
userName: PropTypes.string,
|
2019-09-09 14:08:30 +00:00
|
|
|
editing: PropTypes.bool,
|
2021-03-04 23:52:14 +00:00
|
|
|
/** Function called when the avatar change button is pressed */
|
2019-11-22 12:33:41 +00:00
|
|
|
editAction: PropTypes.func,
|
2021-03-04 23:52:14 +00:00
|
|
|
/** Accepts class */
|
2019-11-22 12:33:41 +00:00
|
|
|
className: PropTypes.string,
|
2021-03-04 23:52:14 +00:00
|
|
|
/** Accepts id */
|
2019-11-22 12:33:41 +00:00
|
|
|
id: PropTypes.string,
|
2021-03-04 23:52:14 +00:00
|
|
|
/** Accepts css style */
|
2020-10-16 13:16:01 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2019-06-18 13:20:49 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
Avatar.defaultProps = {
|
2020-10-16 13:16:01 +00:00
|
|
|
size: "medium",
|
|
|
|
role: "",
|
|
|
|
source: "",
|
|
|
|
userName: "",
|
|
|
|
editing: false,
|
2019-06-18 13:20:49 +00:00
|
|
|
};
|
|
|
|
|
2021-03-04 23:52:14 +00:00
|
|
|
export default memo(Avatar);
|