@atlaskit/profilecard
Version:
A React component to display a card with user information.
176 lines • 8.54 kB
JavaScript
/* ProfileCardDetails.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./ProfileCardDetails.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useRef } from 'react';
import { cx } from '@compiled/react';
import { FormattedMessage } from 'react-intl-next';
import Lozenge from '@atlaskit/lozenge';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box, Text } from '@atlaskit/primitives/compiled';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import Tooltip from '@atlaskit/tooltip';
import relativeDate from '../../internal/relative-date';
import messages from '../../messages';
import { AppTitleLabel, CustomLozengeContainer, DetailsGroup, DisabledInfo, JobTitleLabel, LozengeWrapper } from '../../styled/Card';
import { IconLabel } from '../Icon';
import ReportingLinesDetails from './ReportingLinesDetails';
const styles = {
detailedListWrapperNext: "_19pkxy5q _2hwxze3t _otyrze3t _18u0ze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t",
fullNameLabel: "_1reo15vq _18m915vq _11c81d4k _1bto1l2s _o5721q9c",
noMetaLabel: "_vvzr1d4k _1hpmxy5q _1bguutpp",
metaLabel: "_2hwxidpf _otyridpf _18u0idpf _vvzr1d4k _1hpmutpp",
disabledAccount: "_syazi7uo",
activeAccount: "_syaz15cr"
};
const renderName = (nickname, fullName, meta, nameRef, isRenderedInPortal, isTriggeredUsingKeyboard) => {
if (!fullName && !nickname) {
return null;
}
const isNicknameRedundant = !nickname || nickname === fullName;
const shownNickname = ` (${nickname}) `;
const displayName = isNicknameRedundant ? fullName : `${fullName}${shownNickname}`;
return fg('enable_profilecard_text_truncation_tooltip') ? /*#__PURE__*/React.createElement(Tooltip, {
content: displayName,
position: "top",
isScreenReaderAnnouncementDisabled: true,
canAppear: () => {
if (!(nameRef !== null && nameRef !== void 0 && nameRef.current)) {
return false;
}
// Only showing the tooltip when the element has been truncated (ellipsis)
return nameRef.current.scrollWidth > nameRef.current.clientWidth;
}
}, /*#__PURE__*/React.createElement(Box, {
ref: nameRef,
as: "h2",
xcss: cx(styles.fullNameLabel, styles.activeAccount, meta ? styles.metaLabel : styles.noMetaLabel),
testId: "profilecard-name",
id: "profilecard-name-label",
tabIndex: isTriggeredUsingKeyboard && isRenderedInPortal && expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true) ? -1 : undefined
}, displayName)) : /*#__PURE__*/React.createElement(Box, {
ref: nameRef,
as: "h2",
xcss: cx(styles.fullNameLabel, styles.activeAccount, meta ? styles.metaLabel : styles.noMetaLabel),
testId: "profilecard-name",
id: "profilecard-name-label",
tabIndex: isTriggeredUsingKeyboard && isRenderedInPortal && expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true) ? -1 : undefined
}, displayName);
};
const disabledAccountDesc = (statusModifiedDate, disabledAccountMessage, status = 'closed') => {
// consumer does not want to use built-in message
if (disabledAccountMessage) {
return disabledAccountMessage;
}
const date = statusModifiedDate ? new Date(statusModifiedDate * 1000) : null;
const relativeDateKey = relativeDate(date);
const msgKey = relativeDateKey ? `${status}AccountDescMsgHasDate${relativeDateKey}` : `${status}AccountDescMsgNoDate`;
const secondSentence = /*#__PURE__*/React.createElement(FormattedMessage, messages[msgKey]);
return /*#__PURE__*/React.createElement(Text, {
as: "p",
testId: "profilecard-disabled-account"
}, /*#__PURE__*/React.createElement(FormattedMessage, messages.generalDescMsgForDisabledUser), " ", secondSentence);
};
const CustomLozenges = ({
lozenges = []
}) => {
if (lozenges.length === 0) {
return null;
}
return /*#__PURE__*/React.createElement(CustomLozengeContainer, null, lozenges.map(({
text,
...otherProps
}, index) => /*#__PURE__*/React.createElement(Lozenge, _extends({}, otherProps, {
key: index
}), text)));
};
const ServiceAccountProfileCardDetails = props => {
const {
fullName,
nickname
} = props;
return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(nickname, fullName), /*#__PURE__*/React.createElement(AppTitleLabel, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.serviceAccountLabel)));
};
const BotProfileCardDetails = props => {
const {
fullName,
nickname
} = props;
return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(nickname, fullName), /*#__PURE__*/React.createElement(AppTitleLabel, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.botAccountLabel)));
};
const DisabledProfileCardDetails = props => {
const {
companyName,
disabledAccountMessage,
fullName,
hasDisabledAccountLozenge = true,
nickname,
status,
statusModifiedDate
} = props;
const name = status === 'inactive' ? fullName || nickname : nickname || /*#__PURE__*/React.createElement(FormattedMessage, messages.disabledAccountDefaultName);
return /*#__PURE__*/React.createElement(DetailsGroup, null, /*#__PURE__*/React.createElement(Box, {
as: "h2",
xcss: cx(styles.fullNameLabel, styles.noMetaLabel, styles.disabledAccount),
testId: "profilecard-name",
id: "profilecard-name-label"
}, name), hasDisabledAccountLozenge && /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
appearance: "default",
isBold: true
}, status === 'inactive' ? /*#__PURE__*/React.createElement(FormattedMessage, messages.inactiveAccountMsg) : /*#__PURE__*/React.createElement(FormattedMessage, messages.closedAccountMsg))), /*#__PURE__*/React.createElement(DisabledInfo, null, disabledAccountDesc(statusModifiedDate, disabledAccountMessage, status)), status === 'inactive' && /*#__PURE__*/React.createElement(IconLabel, {
icon: "companyName"
}, companyName));
};
export const ProfileCardDetails = props => {
const {
meta,
status,
isRenderedInPortal,
isTriggeredUsingKeyboard
} = props;
const nameRef = useRef(null);
React.useEffect(() => {
if (nameRef !== null && nameRef !== void 0 && nameRef.current && isRenderedInPortal && isTriggeredUsingKeyboard && expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true)) {
const rafId = requestAnimationFrame(() => {
var _nameRef$current;
(_nameRef$current = nameRef.current) === null || _nameRef$current === void 0 ? void 0 : _nameRef$current.focus();
});
return () => {
cancelAnimationFrame(rafId);
};
}
}, [isRenderedInPortal, isTriggeredUsingKeyboard]);
if (props.isServiceAccount) {
return /*#__PURE__*/React.createElement(ServiceAccountProfileCardDetails, props);
}
if (props.isBot) {
return /*#__PURE__*/React.createElement(BotProfileCardDetails, props);
}
if (status === 'inactive' || status === 'closed') {
return /*#__PURE__*/React.createElement(DisabledProfileCardDetails, _extends({}, props, {
status: status
}));
}
const lozenges = /*#__PURE__*/React.createElement(CustomLozenges, {
lozenges: props.customLozenges
});
return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta, nameRef, isRenderedInPortal, isTriggeredUsingKeyboard), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), meta && props.customLozenges && props.customLozenges.length > 0 ? /*#__PURE__*/React.createElement(Box, {
paddingBlockStart: "space.150"
}, lozenges) : lozenges, /*#__PURE__*/React.createElement(Box, {
xcss: styles.detailedListWrapperNext
}, /*#__PURE__*/React.createElement(IconLabel, {
icon: "email",
extraTopSpace: true
}, props.email), /*#__PURE__*/React.createElement(IconLabel, {
icon: "time"
}, props.timestring), /*#__PURE__*/React.createElement(IconLabel, {
icon: "companyName"
}, props.companyName), /*#__PURE__*/React.createElement(IconLabel, {
icon: "location"
}, props.location)), !(fg('jira_ai_profilecard_hide_reportinglines') && props.hideReportingLines) && /*#__PURE__*/React.createElement(ReportingLinesDetails, {
reportingLines: props.reportingLines,
reportingLinesProfileUrl: props.reportingLinesProfileUrl,
onReportingLinesClick: props.onReportingLinesClick,
fireAnalyticsWithDuration: props.fireAnalyticsWithDuration
}));
};