@activecollab/components
Version:
ActiveCollab Components
81 lines (80 loc) • 3.1 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _styled, { default as _styled2 } from "styled-components";
const _excluded = ["limit", "size", "children", "hasTooltip", "className"];
import React, { Children, cloneElement, useMemo, forwardRef } from "react";
import { AvatarGroupsStyles, LengthCountStyles } from "./Styles";
import { Tooltip } from "../Tooltip";
import { Typography } from "../Typography/Typography";
export const AvatarGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
var _Children$toArray;
let {
limit,
size = 34,
children,
hasTooltip = false,
className
} = _ref,
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
// always display counter with min +2 as +1 can takes space of an 1 more Avatar
const minChildren = Children.count(children) - limit > 1 ? false : true;
// gap between Avatars
const gap = 8;
const _children = minChildren ? Children.toArray(children) : Children.toArray(children).slice(0, limit);
const handleVariant = useMemo(() => {
if (size >= 34) return "Caption 1";
return "Caption 2";
}, [size]);
// get all names indexed above limit number from alt tag on Avatar for counter tooltip
const nameArr = (_Children$toArray = Children.toArray(children)) == null ? void 0 : _Children$toArray.slice(limit).map(item => {
const {
props
} = item;
return props.alt;
});
return /*#__PURE__*/React.createElement(AvatarGroupsStyles, _extends({
className: className,
hasTooltip: hasTooltip,
ref: ref
}, rest), _children.map((child, index) => {
const item = child;
const tooltipText = item.props.alt;
const alt = "Image of " + tooltipText;
return /*#__PURE__*/React.createElement(Tooltip, {
title: tooltipText ? tooltipText : "",
disable: !hasTooltip,
key: alt
}, /*#__PURE__*/cloneElement(item, _extends({}, item.props, {
size: size,
alt: alt,
style: {
// component preserves it's width
marginLeft: "-" + (index === 0 ? null : gap) + "px",
outline: "1px solid var(--page-paper-main)"
}
})));
}), limit >= Children.count(children) || minChildren ? null : /*#__PURE__*/React.createElement(_StyledTooltip, {
title: nameArr.join(",\n"),
disable: !hasTooltip
}, /*#__PURE__*/React.createElement(_StyledLengthCountStyles, {
size: size,
role: "status",
"aria-label": "Rest of the users",
$_css: "-" + gap + "px"
}, /*#__PURE__*/React.createElement(Typography, {
variant: handleVariant,
weight: "medium"
}, "+", Children.count(children) - limit))));
});
AvatarGroup.displayName = "AvatarGroup";
var _StyledTooltip = _styled(Tooltip)({
whiteSpace: "break-spaces",
lineHeight: "18px"
});
var _StyledLengthCountStyles = _styled2(LengthCountStyles).withConfig({
displayName: "AvatarGroup___StyledLengthCountStyles",
componentId: "sc-1rsx1j5-0"
})(p => ({
marginLeft: p.$_css
}));
//# sourceMappingURL=AvatarGroup.js.map