@atlaskit/avatar-group
Version:
An avatar group displays a number of avatars grouped together in a stack or grid.
84 lines (83 loc) • 3.28 kB
JavaScript
/* more-indicator.tsx generated by @compiled/babel-plugin v0.36.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./more-indicator.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef, useCallback } from 'react';
import { fg } from '@atlaskit/platform-feature-flags';
const boxShadowCssVar = '--avatar-box-shadow';
const styles = {
root: "_19itglyw _12ji1r31 _1qu2glyw _12y31o36 _1reo15vq _18m915vq _v564ieh6 _1e0c1txw _vchh1ntv _19pkv77o _2hwxv77o _otyrv77o _18u0v77o _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _4cvr1fhb _1bah1h6o _2lx21bp4 _80omtlke _bfhkm7j4 _syaz1fxt _16qs1nhn _t9ec1aqe _1ejjglyw _mizu194a _ra3xnqa1 _1ah3yh40 _128myh40 _irr315ej _30l31fxt _1di6ip91 _9h8h1fxt _1q8w1np6 _jlxit94y",
circle: "_2rko1q5u",
active: "_bfhkfg4m _16qsqz53 _syazaqb7 _t9ec1np6 _irr3i1yw _30l3aqb7 _1di619ru _9h8haqb7",
disabled: "_80om13gf _1peqs237 _1hfkvuon"
};
const widthHeightMap = {
xsmall: "_1bsb7vkz _4t3i7vkz",
small: "_1bsb1tcg _4t3i1tcg",
medium: "_1bsbzwfg _4t3izwfg",
large: "_1bsb1ylp _4t3i1ylp",
xlarge: "_1bsb16xz _4t3i16xz",
xxlarge: "_1bsb1qr7 _4t3i1qr7"
};
const borderRadiusMap = {
xsmall: "_2rkoyh40 _14mjyh40",
small: "_2rkoyh40 _14mjyh40",
medium: "_2rko1l7b _14mj1l7b",
large: "_2rko1l7b _14mj1l7b",
xlarge: "_2rkoi2wt _14mji2wt",
xxlarge: "_2rko1crf _14mj1crf"
};
const fontMap = {
small: "_11c81o8v",
medium: "_11c81o8v",
large: "_11c8dcr7",
xlarge: "_11c81ixg",
xxlarge: "_11c81ixg"
};
const MAX_DISPLAY_COUNT = 99;
const MoreIndicator = /*#__PURE__*/forwardRef(({
appearance = 'circle',
// eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
borderColor = fg('platform-component-visual-refresh') ? "var(--ds-surface, #FFFFFF)" : "var(--ds-border-inverse, #FFFFFF)",
size = 'medium',
count = 0,
testId,
onClick,
'aria-controls': ariaControls,
'aria-expanded': ariaExpanded,
'aria-haspopup': ariaHaspopup,
moreIndicatorLabel,
buttonProps = {},
isActive
}, ref) => {
const onClickHander = useCallback((event, analyticsEvent) => {
if (buttonProps.onClick) {
buttonProps.onClick(event);
}
onClick(event, analyticsEvent);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[buttonProps.onClick, onClick]);
const displayCount = count > MAX_DISPLAY_COUNT ? MAX_DISPLAY_COUNT : count;
const providedAriaLabel = moreIndicatorLabel || buttonProps['aria-label'];
const ariaLabel = providedAriaLabel ? providedAriaLabel : `${displayCount} more people`;
return /*#__PURE__*/React.createElement("button", _extends({
type: "submit"
}, buttonProps, {
onClick: onClickHander,
ref: ref,
"data-testid": testId,
"aria-controls": ariaControls,
"aria-expanded": ariaExpanded,
"aria-haspopup": ariaHaspopup,
"aria-label": ariaLabel,
style: {
[boxShadowCssVar]: `0 0 0 2px ${borderColor}`
},
className: ax([styles.root, borderRadiusMap[size], appearance === 'circle' && styles.circle, widthHeightMap[size], fontMap[size], isActive && styles.active])
}), "+", displayCount);
});
MoreIndicator.displayName = 'MoreIndicator';
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default MoreIndicator;