@atlaskit/profilecard
Version:
A React component to display a card with user information.
173 lines • 9.45 kB
JavaScript
/* ProfileCardDetails.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["text"];
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';
var 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"
};
var renderName = function renderName(nickname, fullName, meta, nameRef, isRenderedInPortal, isTriggeredUsingKeyboard) {
if (!fullName && !nickname) {
return null;
}
var isNicknameRedundant = !nickname || nickname === fullName;
var shownNickname = " (".concat(nickname, ") ");
var displayName = isNicknameRedundant ? fullName : "".concat(fullName).concat(shownNickname);
return fg('enable_profilecard_text_truncation_tooltip') ? /*#__PURE__*/React.createElement(Tooltip, {
content: displayName,
position: "top",
isScreenReaderAnnouncementDisabled: true,
canAppear: function 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);
};
var disabledAccountDesc = function disabledAccountDesc(statusModifiedDate, disabledAccountMessage) {
var status = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'closed';
// consumer does not want to use built-in message
if (disabledAccountMessage) {
return disabledAccountMessage;
}
var date = statusModifiedDate ? new Date(statusModifiedDate * 1000) : null;
var relativeDateKey = relativeDate(date);
var msgKey = relativeDateKey ? "".concat(status, "AccountDescMsgHasDate").concat(relativeDateKey) : "".concat(status, "AccountDescMsgNoDate");
var 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);
};
var CustomLozenges = function CustomLozenges(_ref) {
var _ref$lozenges = _ref.lozenges,
lozenges = _ref$lozenges === void 0 ? [] : _ref$lozenges;
if (lozenges.length === 0) {
return null;
}
return /*#__PURE__*/React.createElement(CustomLozengeContainer, null, lozenges.map(function (_ref2, index) {
var text = _ref2.text,
otherProps = _objectWithoutProperties(_ref2, _excluded);
return /*#__PURE__*/React.createElement(Lozenge, _extends({}, otherProps, {
key: index
}), text);
}));
};
var ServiceAccountProfileCardDetails = function ServiceAccountProfileCardDetails(props) {
var fullName = props.fullName,
nickname = props.nickname;
return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(nickname, fullName), /*#__PURE__*/React.createElement(AppTitleLabel, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.serviceAccountLabel)));
};
var BotProfileCardDetails = function BotProfileCardDetails(props) {
var fullName = props.fullName,
nickname = props.nickname;
return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(nickname, fullName), /*#__PURE__*/React.createElement(AppTitleLabel, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.botAccountLabel)));
};
var DisabledProfileCardDetails = function DisabledProfileCardDetails(props) {
var companyName = props.companyName,
disabledAccountMessage = props.disabledAccountMessage,
fullName = props.fullName,
_props$hasDisabledAcc = props.hasDisabledAccountLozenge,
hasDisabledAccountLozenge = _props$hasDisabledAcc === void 0 ? true : _props$hasDisabledAcc,
nickname = props.nickname,
status = props.status,
statusModifiedDate = props.statusModifiedDate;
var 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 var ProfileCardDetails = function ProfileCardDetails(props) {
var meta = props.meta,
status = props.status,
isRenderedInPortal = props.isRenderedInPortal,
isTriggeredUsingKeyboard = props.isTriggeredUsingKeyboard;
var nameRef = useRef(null);
React.useEffect(function () {
if (nameRef !== null && nameRef !== void 0 && nameRef.current && isRenderedInPortal && isTriggeredUsingKeyboard && expValEquals('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true)) {
var rafId = requestAnimationFrame(function () {
var _nameRef$current;
(_nameRef$current = nameRef.current) === null || _nameRef$current === void 0 || _nameRef$current.focus();
});
return function () {
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
}));
}
var 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
}));
};