@atlaskit/avatar-group
Version:
An avatar group displays a number of avatars grouped together in a stack or grid.
144 lines (142 loc) • 6.04 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
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 { fg } from '@atlaskit/platform-feature-flags';
import useRegisterItemWithFocusManager from './internal/hooks/use-register-item-with-focus-manager';
var AvatarGroupItem = /*#__PURE__*/forwardRef(function (props, ref) {
var avatar = props.avatar,
avatarComponent = props.avatarComponent,
index = props.index,
onAvatarClick = props.onAvatarClick,
testId = props.testId,
avatarOverrides = props.avatarOverrides,
role = props.role;
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,
role: role
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, props), children);
};
var AvatarComponent = fg('platform-avatar-group-pass-avatar-to-item') ? avatarComponent !== null && avatarComponent !== void 0 ? avatarComponent : Avatar : Avatar;
var AvatarIcon = avatarOverrides && fg('platform-avatar-group-pass-avatar-to-item') ? avatarOverrides.render(AvatarComponent, _objectSpread(_objectSpread({}, 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")
}), 0) : /*#__PURE__*/React.createElement(AvatarComponent, _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,
role: role,
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,
role: role
}, 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;