@atlaskit/profilecard
Version:
A React component to display a card with user information.
110 lines • 5.28 kB
JavaScript
/* ReportingLinesDetails.tsx generated by @compiled/babel-plugin v0.36.1 */
import "./ReportingLinesDetails.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { FormattedMessage, useIntl } from 'react-intl-next';
import Avatar from '@atlaskit/avatar';
import AvatarGroup from '@atlaskit/avatar-group';
import ButtonLegacy from '@atlaskit/button';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box, xcss } from '@atlaskit/primitives';
import { Pressable } from '@atlaskit/primitives/compiled';
import messages from '../../messages';
import { ManagerName, ManagerSection, OffsetWrapper, ReportingLinesSection } from '../../styled/ReportingLines';
import { reportingLinesClicked } from '../../util/analytics';
function getProfileHref(userId, profileUrl) {
return profileUrl ? profileUrl + userId : undefined;
}
const reportingLinesHeadingDefaultStyles = xcss({
color: 'color.text',
font: 'font.heading.xxsmall',
fontWeight: 'font.weight.semibold',
marginBottom: 'space.100'
});
const reportingLinesHeadingStyles = xcss({
marginBottom: '0'
});
const styles = {
reportingLinesButton: "_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _bfhksm61 _irr3166n"
};
const avatarGroupMaxCount = 5;
const ReportingLinesDetails = props => {
var _manager$pii, _manager$pii2, _manager$pii3, _manager$pii4;
const {
formatMessage
} = useIntl();
const {
fireAnalyticsWithDuration,
reportingLines = {},
reportingLinesProfileUrl,
onReportingLinesClick
} = props;
const {
managers = [],
reports = []
} = reportingLines;
const manager = managers.length >= 1 ? managers[0] : undefined;
const hasReports = reports.length > 0;
const getReportingLinesOnClick = (user, userType) => onReportingLinesClick ? () => {
fireAnalyticsWithDuration(duration => reportingLinesClicked({
duration,
userType
}));
onReportingLinesClick(user);
} : undefined;
const onReportingLinksClick = (user, userType, href) => {
if (href) {
window.location.href = href;
}
if (onReportingLinesClick) {
onReportingLinesClick(user);
}
fireAnalyticsWithDuration(duration => reportingLinesClicked({
duration,
userType
}));
};
const showMoreButtonProps = fg('platform_profilecard-enable_reporting_lines_label') ? {
'aria-label': formatMessage(messages.profileCardMoreReportingLinesLabel, {
count: reports.length - avatarGroupMaxCount + 1
})
} : undefined;
return /*#__PURE__*/React.createElement(React.Fragment, null, manager && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(Box, {
xcss: [reportingLinesHeadingDefaultStyles, reportingLinesHeadingStyles]
}, /*#__PURE__*/React.createElement(FormattedMessage, messages.managerSectionHeading)), /*#__PURE__*/React.createElement(OffsetWrapper, null, fg('ptc_migrate_buttons') ? /*#__PURE__*/React.createElement(Pressable, {
onClick: () => onReportingLinksClick(manager, 'manager', getProfileHref(manager.accountIdentifier, reportingLinesProfileUrl)),
isDisabled: !onReportingLinesClick,
xcss: styles.reportingLinesButton
}, /*#__PURE__*/React.createElement(ManagerSection, null, /*#__PURE__*/React.createElement(Avatar, {
size: "xsmall",
src: (_manager$pii = manager.pii) === null || _manager$pii === void 0 ? void 0 : _manager$pii.picture
}), /*#__PURE__*/React.createElement(ManagerName, null, (_manager$pii2 = manager.pii) === null || _manager$pii2 === void 0 ? void 0 : _manager$pii2.name))) : /*#__PURE__*/React.createElement(ButtonLegacy, {
appearance: "subtle",
spacing: "none",
href: getProfileHref(manager.accountIdentifier, reportingLinesProfileUrl),
onClick: getReportingLinesOnClick(manager, 'manager'),
isDisabled: !onReportingLinesClick
}, /*#__PURE__*/React.createElement(ManagerSection, null, /*#__PURE__*/React.createElement(Avatar, {
size: "xsmall",
src: (_manager$pii3 = manager.pii) === null || _manager$pii3 === void 0 ? void 0 : _manager$pii3.picture
}), /*#__PURE__*/React.createElement(ManagerName, null, (_manager$pii4 = manager.pii) === null || _manager$pii4 === void 0 ? void 0 : _manager$pii4.name))))), hasReports && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(Box, {
xcss: reportingLinesHeadingDefaultStyles
}, /*#__PURE__*/React.createElement(FormattedMessage, messages.directReportsSectionHeading)), /*#__PURE__*/React.createElement(AvatarGroup, {
appearance: "stack",
size: "small",
data: reports.map(member => {
var _member$pii, _member$pii2;
return {
key: member.accountIdentifier,
name: ((_member$pii = member.pii) === null || _member$pii === void 0 ? void 0 : _member$pii.name) || '',
src: (_member$pii2 = member.pii) === null || _member$pii2 === void 0 ? void 0 : _member$pii2.picture,
href: getProfileHref(member.accountIdentifier, reportingLinesProfileUrl),
onClick: getReportingLinesOnClick(member, 'direct-report')
};
}),
maxCount: avatarGroupMaxCount,
testId: "profilecard-reports-avatar-group",
showMoreButtonProps: showMoreButtonProps
})));
};
export default ReportingLinesDetails;