@atlaskit/profilecard
Version:
A React component to display a card with user information.
375 lines (373 loc) • 16.2 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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, { useCallback, useEffect, useRef, useState } from 'react';
import { FormattedMessage, useIntl } from 'react-intl-next';
import Avatar from '@atlaskit/avatar';
import AvatarGroup from '@atlaskit/avatar-group';
import Button, { IconButton, LinkButton } from '@atlaskit/button/new';
import MoreIcon from '@atlaskit/icon/core/show-more-horizontal';
import Lozenge from '@atlaskit/lozenge';
import { LinkItem, MenuGroup } from '@atlaskit/menu';
import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
import { fg } from '@atlaskit/platform-feature-flags';
import Popup from '@atlaskit/popup';
import { Inline, Text } from '@atlaskit/primitives/compiled';
import { layers } from '@atlaskit/theme/constants';
import Tooltip from '@atlaskit/tooltip';
import messages from '../../messages';
import { AnimatedKudosButton, AnimationWrapper, KudosBlobAnimation } from '../../styled/Card';
import { ErrorWrapper, TeamErrorText } from '../../styled/Error';
import { ActionButtons, ArchiveLozengeWrapper, AvatarSection, Description, DescriptionWrapper, MemberCount, MoreButton, TeamName, WrappedButton } from '../../styled/TeamCard';
import { CardContent, CardHeader, CardWrapper } from '../../styled/TeamTrigger';
import { PACKAGE_META_DATA } from '../../util/analytics';
import { isBasicClick } from '../../util/click';
import { getPageTime } from '../../util/performance';
import { ErrorIllustration } from '../Error';
import TeamForbiddenErrorState from './TeamForbiddenErrorState';
import TeamLoadingState from './TeamLoadingState';
var LARGE_MEMBER_COUNT = 50;
var GIVE_KUDOS_ACTION_ID = 'give-kudos';
var avatarGroupMaxCount = 9;
function onMemberClick(callback, userId, analytics, index, hasHref) {
return function (event) {
analytics('ui.teamProfileCard.clicked.avatar', function (duration) {
return _objectSpread({
duration: duration,
hasHref: hasHref,
hasOnClick: !!callback,
index: index,
firedAt: Math.round(getPageTime())
}, PACKAGE_META_DATA);
});
if (callback) {
callback(userId, event);
}
};
}
var TeamMembers = function TeamMembers(_ref) {
var analytics = _ref.analytics,
generateUserLink = _ref.generateUserLink,
members = _ref.members,
isArchived = _ref.isArchived,
onUserClick = _ref.onUserClick,
includingYou = _ref.includingYou,
isTriggeredByKeyboard = _ref.isTriggeredByKeyboard;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage;
var count = members ? members.length : 0;
var message = includingYou ? count >= LARGE_MEMBER_COUNT ? messages.membersMoreThan50IncludingYou : messages.memberCountIncludingYou : count >= LARGE_MEMBER_COUNT ? messages.membersMoreThan50 : messages.memberCount;
// Use a ref to track whether this is currently open, so we can fire events
// iff the more section is being opened (not closed).
var isMoreMembersOpen = useRef(false);
var avatarRef = useRef(null);
var ref = function ref(element) {
if (isTriggeredByKeyboard) {
var _avatarRef$current;
avatarRef.current = element;
(_avatarRef$current = avatarRef.current) === null || _avatarRef$current === void 0 || _avatarRef$current.focus();
}
};
var onMoreClick = useCallback(function () {
var isOpen = isMoreMembersOpen.current;
if (!isOpen) {
analytics('ui.teamProfileCard.clicked.moreMembers', function (duration) {
return _objectSpread({
duration: duration,
memberCount: count,
firedAt: Math.round(getPageTime())
}, PACKAGE_META_DATA);
});
}
isMoreMembersOpen.current = !isOpen;
}, [analytics, count]);
var showMoreButtonProps = {
onClick: onMoreClick,
'aria-label': formatMessage(messages.profileCardMoreMembersLabel, {
count: count - avatarGroupMaxCount + 1
})
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MemberCount, null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, message, {
values: {
count: count
}
}))), isArchived && /*#__PURE__*/React.createElement(ArchiveLozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
appearance: "default",
isBold: true
}, /*#__PURE__*/React.createElement(FormattedMessage, messages.archivedLozenge))), members && members.length > 0 && /*#__PURE__*/React.createElement(AvatarSection, null, /*#__PURE__*/React.createElement(AvatarGroup, {
appearance: "stack",
data: members.map(function (member, index) {
var href = generateUserLink === null || generateUserLink === void 0 ? void 0 : generateUserLink(member.id);
var onClick = onMemberClick(onUserClick, member.id, analytics, index, !!generateUserLink);
return {
key: member.id,
name: member.fullName,
src: member.avatarUrl,
href: href,
onClick: onClick
};
}),
maxCount: avatarGroupMaxCount,
showMoreButtonProps: showMoreButtonProps,
testId: "profilecard-avatar-group",
overrides: {
Avatar: {
render: function render(Component, props, index) {
return index === 0 ? /*#__PURE__*/React.createElement(Avatar, _extends({
ref: ref
}, props, {
testId: "first-member"
})) : /*#__PURE__*/React.createElement(Component, props);
}
}
}
})));
};
function onActionClick(action, analytics, index) {
return function (event) {
analytics('ui.teamProfileCard.clicked.action', function (duration) {
return _objectSpread({
duration: duration,
hasHref: !!action.link,
hasOnClick: !!action.callback,
index: index,
actionId: action.id || '',
firedAt: Math.round(getPageTime())
}, PACKAGE_META_DATA);
});
if (action.callback && isBasicClick(event)) {
event.preventDefault();
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
action.callback.apply(action, [event].concat(args));
}
};
}
var ActionButton = function ActionButton(_ref2) {
var action = _ref2.action,
analytics = _ref2.analytics,
index = _ref2.index;
var isGiveKudosActionButton = action.id === GIVE_KUDOS_ACTION_ID;
var actionButton = /*#__PURE__*/React.createElement(LinkButton, {
key: action.id || index,
onClick: onActionClick(action, analytics, index),
href: action.link || '',
target: action.target,
shouldFitContainer: true
}, action.label, isGiveKudosActionButton && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null)));
if (isGiveKudosActionButton) {
return /*#__PURE__*/React.createElement(AnimatedKudosButton, null, actionButton);
}
return /*#__PURE__*/React.createElement(WrappedButton, null, actionButton);
};
var ExtraActions = function ExtraActions(_ref3) {
var actions = _ref3.actions,
analytics = _ref3.analytics;
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isOpen = _useState2[0],
setOpen = _useState2[1];
var count = actions.length;
var onMoreClick = useCallback(function (shouldBeOpen) {
if (shouldBeOpen) {
// Only fire this event when OPENING the dropdown
analytics('ui.teamProfileCard.clicked.moreActions', function (duration) {
return _objectSpread({
duration: duration,
numActions: count + 2,
firedAt: Math.round(getPageTime())
}, PACKAGE_META_DATA);
});
}
setOpen(shouldBeOpen);
}, [analytics, count]);
if (!count) {
return null;
}
return /*#__PURE__*/React.createElement(MoreButton, null, /*#__PURE__*/React.createElement(Popup, {
isOpen: isOpen,
onClose: function onClose() {
return setOpen(false);
},
placement: "bottom-start",
content: function content() {
return /*#__PURE__*/React.createElement(MenuGroup, null, actions.map(function (action, index) {
return /*#__PURE__*/React.createElement(LinkItem, {
onClick: onActionClick(action, analytics, index + 2),
key: action.id || index,
href: action.link
}, action.label);
}));
},
trigger: function trigger(triggerProps) {
return /*#__PURE__*/React.createElement(IconButton, _extends({
testId: "more-actions-button"
}, triggerProps, {
isSelected: isOpen,
onClick: function onClick() {
return onMoreClick(!isOpen);
},
icon: MoreIcon,
label: "actions"
}));
},
zIndex: layers.modal(),
shouldRenderToParent: fg('enable_appropriate_reading_order_in_profile_card')
}));
};
var ButtonSection = function ButtonSection(_ref4) {
var actions = _ref4.actions,
analytics = _ref4.analytics;
if (!actions) {
return null;
}
var extraActions = actions.slice(2);
var initialActions = actions.slice(0, 2);
return /*#__PURE__*/React.createElement(ActionButtons, null, initialActions.map(function (action, index) {
return /*#__PURE__*/React.createElement(ActionButton, {
action: action,
analytics: analytics,
index: index,
key: index
});
}), extraActions && /*#__PURE__*/React.createElement(ExtraActions, {
actions: extraActions,
analytics: analytics
}));
};
var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
var actions = _ref5.actions,
analytics = _ref5.analytics,
team = _ref5.team,
viewingUserId = _ref5.viewingUserId,
generateUserLink = _ref5.generateUserLink,
onUserClick = _ref5.onUserClick,
viewProfileLink = _ref5.viewProfileLink,
viewProfileOnClick = _ref5.viewProfileOnClick,
isTriggeredByKeyboard = _ref5.isTriggeredByKeyboard;
var isTeamArchived = team.state === 'DISBANDED';
var allActions = [{
label: /*#__PURE__*/React.createElement(FormattedMessage, messages.teamViewProfile),
link: viewProfileLink,
callback: viewProfileOnClick,
id: 'view-profile'
}].concat(_toConsumableArray(isTeamArchived ? [] : actions || []));
var includingYou = team.members && team.members.some(function (member) {
return member.id === viewingUserId;
});
useEffect(function () {
analytics('ui.teamProfileCard.rendered.content', function (duration) {
var _team$members$length, _team$members;
return _objectSpread({
duration: duration,
numActions: allActions.length,
memberCount: (_team$members$length = (_team$members = team.members) === null || _team$members === void 0 ? void 0 : _team$members.length) !== null && _team$members$length !== void 0 ? _team$members$length : null,
includingYou: includingYou !== null && includingYou !== void 0 ? includingYou : null,
descriptionLength: team.description.length,
titleLength: team.displayName.length,
firedAt: Math.round(getPageTime())
}, PACKAGE_META_DATA);
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[analytics]);
return /*#__PURE__*/React.createElement(CardWrapper, {
testId: "team-profilecard"
}, /*#__PURE__*/React.createElement(CardHeader, {
image: team.largeHeaderImageUrl || team.smallHeaderImageUrl,
label: team.displayName,
isDisabled: isTeamArchived
}), /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(Tooltip, {
content: team.displayName
}, /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(TeamName, null, team.displayName), team.isVerified && /*#__PURE__*/React.createElement(VerifiedTeamIcon, null))), /*#__PURE__*/React.createElement(TeamMembers, {
analytics: analytics,
members: team.members,
isArchived: isTeamArchived,
generateUserLink: generateUserLink,
includingYou: includingYou,
onUserClick: onUserClick,
isTriggeredByKeyboard: isTriggeredByKeyboard
}), team.description.trim() && /*#__PURE__*/React.createElement(DescriptionWrapper, null, /*#__PURE__*/React.createElement(Description, null, team.description)), /*#__PURE__*/React.createElement(ButtonSection, {
actions: allActions,
analytics: analytics
})));
};
var ErrorMessage = function ErrorMessage(_ref6) {
var analytics = _ref6.analytics,
clientFetchProfile = _ref6.clientFetchProfile,
isLoading = _ref6.isLoading;
var hasRetry = !!clientFetchProfile;
useEffect(function () {
analytics('ui.teamProfileCard.rendered.error', function (duration) {
return _objectSpread({
duration: duration,
hasRetry: hasRetry,
firedAt: Math.round(getPageTime())
}, PACKAGE_META_DATA);
});
}, [analytics, hasRetry]);
var retry = useCallback(function () {
analytics('ui.teamProfileCard.clicked.errorRetry', function (duration) {
return _objectSpread({
duration: duration,
firedAt: Math.round(getPageTime())
}, PACKAGE_META_DATA);
});
if (clientFetchProfile) {
clientFetchProfile();
}
}, [analytics, clientFetchProfile]);
return /*#__PURE__*/React.createElement(ErrorWrapper, {
testId: "team-profilecard-error"
}, /*#__PURE__*/React.createElement(ErrorIllustration, null), /*#__PURE__*/React.createElement(Text, {
as: "p",
weight: "semibold"
}, /*#__PURE__*/React.createElement(FormattedMessage, messages.teamErrorTitle)), /*#__PURE__*/React.createElement(TeamErrorText, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.teamErrorText)), clientFetchProfile && /*#__PURE__*/React.createElement(ActionButtons, null, /*#__PURE__*/React.createElement(WrappedButton, null, /*#__PURE__*/React.createElement(Button, {
testId: "client-fetch-profile-button",
shouldFitContainer: true,
onClick: retry,
isLoading: isLoading
}, /*#__PURE__*/React.createElement(FormattedMessage, messages.teamErrorButton)))));
};
/**
* @deprecated This component is deprecated and will be removed soon. Please use `@atlassian/team-profilecard` instead.
*/
var TeamProfileCard = function TeamProfileCard(props) {
var analytics = props.analytics,
clientFetchProfile = props.clientFetchProfile,
hasError = props.hasError,
isLoading = props.isLoading,
team = props.team,
errorType = props.errorType;
if (hasError) {
if ((errorType === null || errorType === void 0 ? void 0 : errorType.reason) === 'TEAMS_FORBIDDEN') {
return /*#__PURE__*/React.createElement(TeamForbiddenErrorState, {
analytics: analytics
});
} else {
return /*#__PURE__*/React.createElement(CardWrapper, {
testId: "team-profilecard"
}, /*#__PURE__*/React.createElement(ErrorMessage, {
analytics: analytics,
clientFetchProfile: clientFetchProfile,
isLoading: isLoading
}));
}
}
if (isLoading) {
return /*#__PURE__*/React.createElement(TeamLoadingState, {
analytics: analytics
});
}
if (team) {
return /*#__PURE__*/React.createElement(TeamProfilecardContent, _objectSpread(_objectSpread({}, props), {}, {
team: team
}));
}
return null;
};
export default TeamProfileCard;