@atlaskit/profilecard
Version:
A React component to display a card with user information.
182 lines (181 loc) • 11.4 kB
JavaScript
/* ProfileCardDetails.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ProfileCardDetails = void 0;
require("./ProfileCardDetails.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@compiled/react");
var _reactIntlNext = require("react-intl-next");
var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _compiled = require("@atlaskit/primitives/compiled");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _relativeDate = _interopRequireDefault(require("../../internal/relative-date"));
var _messages = _interopRequireDefault(require("../../messages"));
var _Card = require("../../styled/Card");
var _Icon = require("../Icon");
var _ReportingLinesDetails = _interopRequireDefault(require("./ReportingLinesDetails"));
var _excluded = ["text"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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 (0, _platformFeatureFlags.fg)('enable_profilecard_text_truncation_tooltip') ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
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.default.createElement(_compiled.Box, {
ref: nameRef,
as: "h2",
xcss: (0, _react2.cx)(styles.fullNameLabel, styles.activeAccount, meta ? styles.metaLabel : styles.noMetaLabel),
testId: "profilecard-name",
id: "profilecard-name-label",
tabIndex: isTriggeredUsingKeyboard && isRenderedInPortal && (0, _expValEquals.expValEquals)('editor_a11y_7152_profile_card_tab_order', 'isEnabled', true) ? -1 : undefined
}, displayName)) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
ref: nameRef,
as: "h2",
xcss: (0, _react2.cx)(styles.fullNameLabel, styles.activeAccount, meta ? styles.metaLabel : styles.noMetaLabel),
testId: "profilecard-name",
id: "profilecard-name-label",
tabIndex: isTriggeredUsingKeyboard && isRenderedInPortal && (0, _expValEquals.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 = (0, _relativeDate.default)(date);
var msgKey = relativeDateKey ? "".concat(status, "AccountDescMsgHasDate").concat(relativeDateKey) : "".concat(status, "AccountDescMsgNoDate");
var secondSentence = /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default[msgKey]);
return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
as: "p",
testId: "profilecard-disabled-account"
}, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.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.default.createElement(_Card.CustomLozengeContainer, null, lozenges.map(function (_ref2, index) {
var text = _ref2.text,
otherProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
return /*#__PURE__*/_react.default.createElement(_lozenge.default, (0, _extends2.default)({}, otherProps, {
key: index
}), text);
}));
};
var ServiceAccountProfileCardDetails = function ServiceAccountProfileCardDetails(props) {
var fullName = props.fullName,
nickname = props.nickname;
return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(nickname, fullName), /*#__PURE__*/_react.default.createElement(_Card.AppTitleLabel, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.serviceAccountLabel)));
};
var BotProfileCardDetails = function BotProfileCardDetails(props) {
var fullName = props.fullName,
nickname = props.nickname;
return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(nickname, fullName), /*#__PURE__*/_react.default.createElement(_Card.AppTitleLabel, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.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.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.disabledAccountDefaultName);
return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
as: "h2",
xcss: (0, _react2.cx)(styles.fullNameLabel, styles.noMetaLabel, styles.disabledAccount),
testId: "profilecard-name",
id: "profilecard-name-label"
}, name), hasDisabledAccountLozenge && /*#__PURE__*/_react.default.createElement(_Card.LozengeWrapper, null, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
appearance: "default",
isBold: true
}, status === 'inactive' ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.inactiveAccountMsg) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.closedAccountMsg))), /*#__PURE__*/_react.default.createElement(_Card.DisabledInfo, null, disabledAccountDesc(statusModifiedDate, disabledAccountMessage, status)), status === 'inactive' && /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
icon: "companyName"
}, companyName));
};
var ProfileCardDetails = exports.ProfileCardDetails = function ProfileCardDetails(props) {
var meta = props.meta,
status = props.status,
isRenderedInPortal = props.isRenderedInPortal,
isTriggeredUsingKeyboard = props.isTriggeredUsingKeyboard;
var nameRef = (0, _react.useRef)(null);
_react.default.useEffect(function () {
if (nameRef !== null && nameRef !== void 0 && nameRef.current && isRenderedInPortal && isTriggeredUsingKeyboard && (0, _expValEquals.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.default.createElement(ServiceAccountProfileCardDetails, props);
}
if (props.isBot) {
return /*#__PURE__*/_react.default.createElement(BotProfileCardDetails, props);
}
if (status === 'inactive' || status === 'closed') {
return /*#__PURE__*/_react.default.createElement(DisabledProfileCardDetails, (0, _extends2.default)({}, props, {
status: status
}));
}
var lozenges = /*#__PURE__*/_react.default.createElement(CustomLozenges, {
lozenges: props.customLozenges
});
return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(props.nickname, props.fullName, meta, nameRef, isRenderedInPortal, isTriggeredUsingKeyboard), meta && /*#__PURE__*/_react.default.createElement(_Card.JobTitleLabel, null, meta), meta && props.customLozenges && props.customLozenges.length > 0 ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
paddingBlockStart: "space.150"
}, lozenges) : lozenges, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
xcss: styles.detailedListWrapperNext
}, /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
icon: "email",
extraTopSpace: true
}, props.email), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
icon: "time"
}, props.timestring), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
icon: "companyName"
}, props.companyName), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
icon: "location"
}, props.location)), !((0, _platformFeatureFlags.fg)('jira_ai_profilecard_hide_reportinglines') && props.hideReportingLines) && /*#__PURE__*/_react.default.createElement(_ReportingLinesDetails.default, {
reportingLines: props.reportingLines,
reportingLinesProfileUrl: props.reportingLinesProfileUrl,
onReportingLinesClick: props.onReportingLinesClick,
fireAnalyticsWithDuration: props.fireAnalyticsWithDuration
}));
};