@atlaskit/avatar-group
Version:
An avatar group displays a number of avatars grouped together in a stack or grid.
115 lines (113 loc) • 3.17 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import React, { forwardRef } from 'react';
import Avatar from '@atlaskit/avatar';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import { ButtonItem, CustomItem, LinkItem } from '@atlaskit/menu';
import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
const AvatarGroupItem = /*#__PURE__*/forwardRef((props, ref) => {
const {
avatar,
index,
onAvatarClick,
testId
} = props;
const {
analyticsContext,
appearance,
as,
borderColor,
children,
href,
isDisabled,
key,
label,
name,
onClick,
presence,
size,
src,
stackIndex,
status,
tabIndex,
target,
testId: groupItemTestId,
...rest
} = avatar;
const itemRef = useRegisterItemWithFocusManager();
const CustomComponent = ({
children,
className,
disabled,
draggable,
onClick,
onDragStart,
onMouseDown,
ref,
tabIndex,
'data-testid': testId,
...props
}) => {
return /*#__PURE__*/React.createElement("button", _extends({
type: "button"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
,
className: className,
disabled: disabled,
draggable: draggable,
onClick: onClick
// eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
,
onDragStart: onDragStart,
onMouseDown: onMouseDown,
ref: ref,
tabIndex: tabIndex,
"data-testid": testId
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, props), children);
};
const AvatarIcon = /*#__PURE__*/React.createElement(Avatar, _extends({}, rest, {
analyticsContext: analyticsContext,
appearance: appearance,
as: as,
borderColor: "transparent",
children: children,
isDisabled: isDisabled,
label: label,
name: "",
presence: presence,
size: "small",
src: src,
stackIndex: stackIndex,
status: status,
tabIndex: tabIndex,
testId: testId && `${testId}--avatar`
}));
// onClick handler provided with avatar data takes precedence, same as with the normal avatar item
const callback = onClick || onAvatarClick;
if (href) {
return /*#__PURE__*/React.createElement(LinkItem, {
ref: mergeRefs([ref, itemRef]),
href: href,
target: target,
rel: target === '_blank' ? 'noopener noreferrer' : undefined,
iconBefore: AvatarIcon,
testId: testId,
onClick: event => callback && callback(event, undefined, index)
}, name);
}
if (typeof callback === 'function') {
return /*#__PURE__*/React.createElement(ButtonItem, {
ref: mergeRefs([ref, itemRef]),
onClick: event => callback && callback(event, undefined, index),
iconBefore: AvatarIcon,
testId: testId
}, name);
}
return /*#__PURE__*/React.createElement(CustomItem, {
iconBefore: AvatarIcon,
component: CustomComponent,
testId: testId
}, name);
});
// eslint-disable-next-line @repo/internal/react/require-jsdoc
export default AvatarGroupItem;