@atlaskit/avatar-group
Version:
An avatar group displays a number of avatars grouped together in a stack or grid.
117 lines (115 loc) • 4.34 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["analyticsContext", "appearance", "as", "borderColor", "children", "href", "isDisabled", "key", "label", "name", "onClick", "presence", "size", "src", "stackIndex", "status", "tabIndex", "target", "testId"],
_excluded2 = ["children", "className", "disabled", "draggable", "onClick", "onDragStart", "onMouseDown", "ref", "tabIndex", "data-testid"];
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';
var AvatarGroupItem = /*#__PURE__*/forwardRef(function (props, ref) {
var avatar = props.avatar,
index = props.index,
onAvatarClick = props.onAvatarClick,
testId = props.testId;
var analyticsContext = avatar.analyticsContext,
appearance = avatar.appearance,
as = avatar.as,
borderColor = avatar.borderColor,
children = avatar.children,
href = avatar.href,
isDisabled = avatar.isDisabled,
key = avatar.key,
label = avatar.label,
name = avatar.name,
onClick = avatar.onClick,
presence = avatar.presence,
size = avatar.size,
src = avatar.src,
stackIndex = avatar.stackIndex,
status = avatar.status,
tabIndex = avatar.tabIndex,
target = avatar.target,
groupItemTestId = avatar.testId,
rest = _objectWithoutProperties(avatar, _excluded);
var itemRef = useRegisterItemWithFocusManager();
var CustomComponent = function CustomComponent(_ref) {
var children = _ref.children,
className = _ref.className,
disabled = _ref.disabled,
draggable = _ref.draggable,
onClick = _ref.onClick,
onDragStart = _ref.onDragStart,
onMouseDown = _ref.onMouseDown,
ref = _ref.ref,
tabIndex = _ref.tabIndex,
testId = _ref['data-testid'],
props = _objectWithoutProperties(_ref, _excluded2);
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);
};
var 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 && "".concat(testId, "--avatar")
}));
// onClick handler provided with avatar data takes precedence, same as with the normal avatar item
var 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: function onClick(event) {
return callback && callback(event, undefined, index);
}
}, name);
}
if (typeof callback === 'function') {
return /*#__PURE__*/React.createElement(ButtonItem, {
ref: mergeRefs([ref, itemRef]),
onClick: function onClick(event) {
return 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;