@gravity-ui/uikit
Version:
Gravity UI base styling and components
42 lines (41 loc) • 2.2 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { block } from "../utils/cn.js";
import { AvatarStackItem } from "./AvatarStackItem.js";
import { AvatarStackMore } from "./AvatarStackMore.js";
import { AvatarStackMoreButton } from "./AvatarStackMoreButton.js";
import { AVATAR_STACK_DEFAULT_MAX } from "./constants.js";
import "./AvatarStack.css";
const b = block('avatar-stack');
const AvatarStackComponent = React.forwardRef(({ max = AVATAR_STACK_DEFAULT_MAX, total, overlapSize = 's', size, children, className, renderMore, }, ref) => {
const visibleItems = [];
/** All avatars amount */
const normalizedTotal = total ? Math.max(total, max) : React.Children.count(children);
/** Amount avatars to be visible (doesn't include badge with remaining avatars) */
let normalizedMax = max < 1 ? 1 : max;
// Skip rendering badge with +1, just show avatar instead
normalizedMax = normalizedTotal - normalizedMax > 1 ? normalizedMax : normalizedTotal;
/** Remaining avatars */
const moreItems = normalizedTotal - normalizedMax;
React.Children.forEach(children, (child) => {
if (!React.isValidElement(child)) {
return;
}
const item = _jsx(AvatarStackItem, { children: child }, visibleItems.length);
if (visibleItems.length < normalizedMax) {
visibleItems.unshift(item);
}
});
const hasMoreButton = moreItems > 0;
return (
// Safari remove role=list with some styles, applied to li items, so we need
// to restore role manually
// eslint-disable-next-line jsx-a11y/no-redundant-roles
_jsxs("ul", { className: b({ 'overlap-size': overlapSize }, className), role: 'list', ref: ref, children: [hasMoreButton ? (_jsx(AvatarStackItem, { children: renderMore ? (renderMore({ count: moreItems })) : (_jsx(AvatarStackMore, { count: moreItems, size: size })) }, "more-button")) : null, visibleItems] }));
});
AvatarStackComponent.displayName = 'AvatarStack';
export const AvatarStack = Object.assign(AvatarStackComponent, {
More: AvatarStackMore,
MoreButton: AvatarStackMoreButton,
});
//# sourceMappingURL=AvatarStack.js.map