@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
53 lines (52 loc) • 2.12 kB
JavaScript
import { HvAvatarGroupProvider } from "./AvatarGroupContext.js";
import { HvAvatar } from "../Avatar/Avatar.js";
import { useClasses } from "./AvatarGroup.styles.js";
import { mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { Children, forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/AvatarGroup/AvatarGroup.tsx
var getSpacingValue = (spacing, size) => {
switch (size) {
case "xl": return spacing === "compact" ? 40 : 16;
case "lg":
case "md": return spacing === "compact" ? 32 : 20;
default: return spacing === "compact" ? 24 : 12;
}
};
/**
*The Avatar Group displays a collection of avatars, often used to represent groups or teams.
*/
var HvAvatarGroup = forwardRef(function HvAvatarGroup(props, ref) {
const { className, style, classes: classesProp, children, size = "sm", spacing = "loose", direction = "row", maxVisible = 3, overflowComponent, highlight = false, toBack = false, ...others } = useDefaultProps("HvAvatarGroup", props);
const { classes, cx } = useClasses(classesProp);
const totalChildren = Children.count(children);
const willOverflow = totalChildren > maxVisible;
const overflowValue = totalChildren - maxVisible;
const childrenToShow = Children.toArray(children).slice(0, maxVisible);
if (toBack) childrenToShow.reverse();
const overflowElement = /* @__PURE__ */ jsx("div", { children: overflowComponent?.(overflowValue) || /* @__PURE__ */ jsx(HvAvatar, {
size,
avatarProps: { ["data-color"]: "neutral" },
backgroundColor: "border",
children: `+${overflowValue}`
}) });
return /* @__PURE__ */ jsx("div", {
className: cx(classes.root, classes[direction], {
[classes.highlight]: highlight,
[classes.toBack]: toBack
}, className),
style: mergeStyles(style, { "--spacing": `-${getSpacingValue(spacing, size)}px` }),
ref,
...others,
children: /* @__PURE__ */ jsxs(HvAvatarGroupProvider, {
size,
children: [
toBack && willOverflow && overflowElement,
childrenToShow,
!toBack && willOverflow && overflowElement
]
})
});
});
//#endregion
export { HvAvatarGroup };