@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
66 lines (63 loc) • 2.07 kB
JavaScript
'use client';
import Block_default from "../Block/Block.mjs";
import Avatar_default from "../Avatar/index.mjs";
import Grid_default from "../Grid/Grid.mjs";
import { variants } from "./style.mjs";
import { useMemo } from "react";
import { jsx } from "react/jsx-runtime";
import { cx } from "antd-style";
//#region src/GroupAvatar/GroupAvatar.tsx
const GroupAvatar = ({ className, style, avatars = [], size = 32, grid = 2, cornerShape = "square", avatarShape = "square", ...rest }) => {
const calcSize = useMemo(() => {
const length = avatars.length;
const gridSize = grid === "auto" ? length > 4 ? 3 : 2 : grid;
const isCircle = cornerShape === "circle";
const avatarSize = Math.floor(size / gridSize * (isCircle ? .65 : .75));
const gapSize = Math.floor((size - avatarSize * gridSize) / (isCircle ? 6 : 4));
return {
avatarSize,
gapSize,
gridSize,
gridWidth: avatarSize * gridSize + gapSize,
maxItemWidth: avatarSize - 1
};
}, [
avatars,
grid,
size,
cornerShape
]);
const calcAvatars = useMemo(() => avatars?.slice(0, calcSize.gridSize * calcSize.gridSize), [avatars, calcSize.gridSize]);
const isSingle = calcAvatars?.length === 1;
return /* @__PURE__ */ jsx(Block_default, {
align: "center",
className: cx(variants({ cornerShape }), className),
height: size,
justify: "center",
style,
width: size,
...rest,
children: /* @__PURE__ */ jsx(Grid_default, {
gap: calcSize.gapSize,
maxItemWidth: 0,
rows: calcSize.gridSize,
width: calcSize.gridWidth,
children: calcAvatars.map((item, index) => {
if (typeof item === "string") return /* @__PURE__ */ jsx(Avatar_default, {
avatar: item,
shape: avatarShape,
size: isSingle ? size * .8 : calcSize.avatarSize
}, index);
return /* @__PURE__ */ jsx(Avatar_default, {
...item,
shape: avatarShape,
size: isSingle ? size * .8 : calcSize.avatarSize
}, index);
})
})
});
};
var GroupAvatar_default = GroupAvatar;
//#endregion
export { GroupAvatar_default as default };
//# sourceMappingURL=GroupAvatar.mjs.map