@activecollab/components
Version:
ActiveCollab Components
82 lines (81 loc) • 2.93 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _styled2 from "styled-components";
import _styled from "styled-components";
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,
...rest
} = _ref;
// 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({
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, {
...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).withConfig({
displayName: "AvatarGroup___StyledTooltip",
componentId: "sc-1rsx1j5-0"
})({
whiteSpace: "break-spaces",
lineHeight: "18px"
});
var _StyledLengthCountStyles = _styled(LengthCountStyles).withConfig({
displayName: "AvatarGroup___StyledLengthCountStyles",
componentId: "sc-1rsx1j5-1"
})(p => ({
marginLeft: p.$_css
}));
//# sourceMappingURL=AvatarGroup.js.map