import React, { memo } from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { GuestIcon, AdministratorIcon, OwnerIcon } from "./svg";
import {
EmptyIcon,
EditContainer,
AvatarWrapper,
RoleWrapper,
NamedAvatar,
StyledImage,
StyledAvatar,
StyledIconWrapper,
} from "./styled-avatar";
import IconButton from "../icon-button";
import commonIconsStyles from "../utils/common-icons-style";
const StyledGuestIcon = styled(GuestIcon)`
${commonIconsStyles}
`;
const StyledAdministratorIcon = styled(AdministratorIcon)`
${commonIconsStyles}
`;
const StyledOwnerIcon = styled(OwnerIcon)`
${commonIconsStyles}
`;
const getRoleIcon = (role) => {
switch (role) {
case "guest":
return ;
case "admin":
return ;
case "owner":
return ;
default:
return null;
}
};
const getInitials = (userName) =>
userName
.split(/\s/)
.reduce((response, word) => (response += word.slice(0, 1)), "")
.substring(0, 2);
const Initials = (props) => (
{getInitials(props.userName)}
);
Initials.propTypes = {
userName: PropTypes.string,
};
// eslint-disable-next-line react/display-name
const Avatar = (props) => {
//console.log("Avatar render");
const { size, source, userName, role, editing, editAction } = props;
let isDefault = false,
isIcon = false;
if (source?.includes("default_user_photo")) isDefault = true;
else if (source?.includes(".svg")) isIcon = true;
const avatarContent = source ? (
isIcon ? (
) : (
)
) : userName ? (
) : (
);
const roleIcon = getRoleIcon(role);
return (
{avatarContent}
{editing && size === "max" && (
)}
{roleIcon}
);
};
Avatar.propTypes = {
/** Size of avatar */
size: PropTypes.oneOf(["max", "big", "medium", "base", "small", "min"]),
/** Adds a user role table */
role: PropTypes.oneOf(["owner", "admin", "guest", "user"]),
/** Provide either a url to display as `Picture` or path to **.svg** file to display as `Icon` */
source: PropTypes.string,
/** Provide this and leave `source` empty to display as initials */
userName: PropTypes.string,
editing: PropTypes.bool,
/** Function called when the avatar change button is pressed */
editAction: PropTypes.func,
/** Accepts class */
className: PropTypes.string,
/** Accepts id */
id: PropTypes.string,
/** Accepts css style */
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
};
Avatar.defaultProps = {
size: "medium",
role: "",
source: "",
userName: "",
editing: false,
};
export default memo(Avatar);