@gravity-ui/uikit
Version:
Gravity UI base styling and components
46 lines (45 loc) • 2.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.AvatarStack = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const cn_1 = require("../utils/cn.js");
const AvatarStackItem_1 = require("./AvatarStackItem.js");
const AvatarStackMore_1 = require("./AvatarStackMore.js");
const AvatarStackMoreButton_1 = require("./AvatarStackMoreButton.js");
const constants_1 = require("./constants.js");
require("./AvatarStack.css");
const b = (0, cn_1.block)('avatar-stack');
const AvatarStackComponent = React.forwardRef(({ max = constants_1.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 = (0, jsx_runtime_1.jsx)(AvatarStackItem_1.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
(0, jsx_runtime_1.jsxs)("ul", { className: b({ 'overlap-size': overlapSize }, className), role: 'list', ref: ref, children: [hasMoreButton ? ((0, jsx_runtime_1.jsx)(AvatarStackItem_1.AvatarStackItem, { children: renderMore ? (renderMore({ count: moreItems })) : ((0, jsx_runtime_1.jsx)(AvatarStackMore_1.AvatarStackMore, { count: moreItems, size: size })) }, "more-button")) : null, visibleItems] }));
});
AvatarStackComponent.displayName = 'AvatarStack';
exports.AvatarStack = Object.assign(AvatarStackComponent, {
More: AvatarStackMore_1.AvatarStackMore,
MoreButton: AvatarStackMoreButton_1.AvatarStackMoreButton,
});
//# sourceMappingURL=AvatarStack.js.map