@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
72 lines (71 loc) • 2.68 kB
JavaScript
import { HvIcon } from "../icons.js";
import { useAvatarGroupContext } from "../AvatarGroup/AvatarGroupContext.js";
import { useImageLoaded } from "../hooks/useImageLoaded.js";
import { useClasses } from "./Avatar.styles.js";
import { getColor } from "@hitachivantara/uikit-styles";
import { mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import MuiAvatar from "@mui/material/Avatar";
//#region src/Avatar/Avatar.tsx
var decreaseSizeMap = {
xl: "lg",
lg: "md",
md: "sm",
sm: "xs",
xs: "xs"
};
/**
* Avatars represent a user or brand and can display an image, icon, or initials.
*/
var HvAvatar = forwardRef(function HvAvatar(props, ref) {
const { className, style, classes: classesProp, children: childrenProp, component = "div", size: sizeProp, backgroundColor, color: colorProp, src, srcSet, sizes, alt, imgProps, status, badge, variant = "circular", avatarProps, ...others } = useDefaultProps("HvAvatar", props);
const { classes, cx } = useClasses(classesProp);
const color = props.backgroundColor ? props.color || "bgContainer" : colorProp;
const avatarGroupContext = useAvatarGroupContext();
const size = sizeProp || avatarGroupContext?.size || "sm";
let children;
const imageLoaded = useImageLoaded(src, srcSet);
const hasImgNotFailing = (src || srcSet) && imageLoaded !== "error";
if (hasImgNotFailing) children = /* @__PURE__ */ jsx("img", {
alt,
src,
srcSet,
sizes,
className: classes.img,
...imgProps
});
else if (childrenProp != null) children = childrenProp;
else if (alt) [children] = alt;
else children = /* @__PURE__ */ jsx(HvIcon, {
name: "User",
size: decreaseSizeMap[size],
className: classes.fallback
});
const statusColor = getColor(status, "positive");
return /* @__PURE__ */ jsxs("div", {
ref,
className: cx(classes.container, classes[variant]),
style: mergeStyles(void 0, { boxShadow: status && `inset 0px 0px 0px 2px ${statusColor}` }),
...others,
children: [badge && /* @__PURE__ */ jsx("div", {
className: classes.badge,
style: { backgroundColor: getColor(badge, "positive") }
}), /* @__PURE__ */ jsx(MuiAvatar, {
component,
className: cx(classes.root, classes.avatar, classes[size], className),
"data-color": color,
style: mergeStyles(style, {
"--bgColor": !hasImgNotFailing && getColor(backgroundColor, "text"),
"--textColor": !hasImgNotFailing && getColor(color, "bgContainer"),
borderRadius: component != null && typeof component !== "string" && "50%"
}),
variant,
size,
...avatarProps,
children
})]
});
});
//#endregion
export { HvAvatar };