@atlaskit/profilecard
Version:
A React component to display a card with user information.
147 lines (146 loc) • 7.63 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ProfileCardDetails = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _reactIntlNext = require("react-intl-next");
var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
var _primitives = require("@atlaskit/primitives");
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"];
var detailedListWrapperStyles = (0, _primitives.xcss)({
margin: 'space.0',
padding: 'space.0'
});
var fullNameLabelStyles = (0, _primitives.xcss)({
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
});
var noMetaLabelStyles = (0, _primitives.xcss)({
marginTop: 'space.400',
marginRight: '0',
marginBottom: 'space.150',
marginLeft: '0'
});
var metaLabelStyles = (0, _primitives.xcss)({
marginTop: 'space.150',
marginRight: '0',
marginBottom: '0',
marginLeft: '0'
});
var disabledAccountStyles = (0, _primitives.xcss)({
color: 'color.text'
});
var activeAccountStyles = (0, _primitives.xcss)({
color: 'color.text.inverse'
});
var renderName = function renderName(nickname, fullName, meta) {
if (!fullName && !nickname) {
return null;
}
var isNicknameRedundant = !nickname || nickname === fullName;
var shownNickname = " (".concat(nickname, ") ");
var displayName = isNicknameRedundant ? fullName : "".concat(fullName).concat(shownNickname);
return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
xcss: [fullNameLabelStyles, activeAccountStyles, meta ? metaLabelStyles : noMetaLabelStyles],
testId: "profilecard-name",
id: "profilecard-name-label"
}, 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(_primitives.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 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, "APP"));
};
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(_primitives.Box, {
xcss: [fullNameLabelStyles, noMetaLabelStyles, disabledAccountStyles],
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;
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
}));
}
return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(props.nickname, props.fullName, meta), meta && /*#__PURE__*/_react.default.createElement(_Card.JobTitleLabel, null, meta), /*#__PURE__*/_react.default.createElement(CustomLozenges, {
lozenges: props.customLozenges
}), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
as: "dl",
xcss: detailedListWrapperStyles
}, /*#__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)), /*#__PURE__*/_react.default.createElement(_ReportingLinesDetails.default, {
reportingLines: props.reportingLines,
reportingLinesProfileUrl: props.reportingLinesProfileUrl,
onReportingLinesClick: props.onReportingLinesClick,
fireAnalyticsWithDuration: props.fireAnalyticsWithDuration
}));
};