@atlaskit/profilecard
Version:
A React component to display a card with user information.
140 lines • 6.63 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["text"];
import React from 'react';
import { FormattedMessage } from 'react-intl-next';
import Lozenge from '@atlaskit/lozenge';
import { Box, Text, xcss } from '@atlaskit/primitives';
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 detailedListWrapperStyles = xcss({
margin: 'space.0',
padding: 'space.0'
});
var fullNameLabelStyles = 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 = xcss({
marginTop: 'space.400',
marginRight: '0',
marginBottom: 'space.150',
marginLeft: '0'
});
var metaLabelStyles = xcss({
marginTop: 'space.150',
marginRight: '0',
marginBottom: '0',
marginLeft: '0'
});
var disabledAccountStyles = xcss({
color: 'color.text'
});
var activeAccountStyles = 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.createElement(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 = 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 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, "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.createElement(FormattedMessage, messages.disabledAccountDefaultName);
return /*#__PURE__*/React.createElement(DetailsGroup, null, /*#__PURE__*/React.createElement(Box, {
xcss: [fullNameLabelStyles, noMetaLabelStyles, disabledAccountStyles],
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;
if (props.isBot) {
return /*#__PURE__*/React.createElement(BotProfileCardDetails, props);
}
if (status === 'inactive' || status === 'closed') {
return /*#__PURE__*/React.createElement(DisabledProfileCardDetails, _extends({}, props, {
status: status
}));
}
return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), /*#__PURE__*/React.createElement(CustomLozenges, {
lozenges: props.customLozenges
}), /*#__PURE__*/React.createElement(Box, {
as: "dl",
xcss: detailedListWrapperStyles
}, /*#__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)), /*#__PURE__*/React.createElement(ReportingLinesDetails, {
reportingLines: props.reportingLines,
reportingLinesProfileUrl: props.reportingLinesProfileUrl,
onReportingLinesClick: props.onReportingLinesClick,
fireAnalyticsWithDuration: props.fireAnalyticsWithDuration
}));
};