@atlaskit/profilecard
Version:
A React component to display a card with user information.
172 lines (171 loc) • 8.56 kB
JavaScript
/* main.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.TeamProfileCard = void 0;
require("./main.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _reactIntlNext = require("react-intl-next");
var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
var _heading = _interopRequireDefault(require("@atlaskit/heading"));
var _linkItem = _interopRequireDefault(require("@atlaskit/menu/link-item"));
var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
var _compiled = require("@atlaskit/primitives/compiled");
var _teamsAppInternalAnalytics = require("@atlaskit/teams-app-internal-analytics");
var _teamsAvatar = _interopRequireDefault(require("@atlaskit/teams-avatar"));
var _teamsPublic = require("@atlaskit/teams-public");
var _TeamAppTile = _interopRequireDefault(require("../common/assets/TeamAppTile.svg"));
var _teamActions = require("./team-actions");
var _main = require("./team-connections/main");
var _teamContainersSkeleton = require("./team-containers-skeleton");
var _excluded = ["containerId", "teamId", "displayName", "description", "avatarImageUrl", "headerImageUrl", "memberAvatars", "memberCount", "cloudId", "userId", "isVerified", "teamProfileUrl"];
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 noop = function noop() {};
var styles = {
wrapperStyles: "_2rko1mok _v564nm7n _1reo15vq _18m915vq _1e0c1txw _2lx21bp4 _1bsb1gwv _1ul95x59 _4t3i1wug",
containerStyles: "_otyrpxbi",
avatarImageStyles: "_kqswstnw _18u01ejb",
headerImageStyles: "_5ral1dfr _s7n4jp4b _4t3i12am _1bsb1osq",
teamInformationStyles: "_18u01ejb _19pku2gc _2hwx1ejb",
teamConnectionStyles: "_18u0u2gc _2hwxu2gc",
teamConnectionItemsStyles: "_c71lx2si _18m91wug",
connectionTitleStyles: "_11c8i4vh _18u0pxbi _19pk1b66 _2hwxpxbi _otyr12x7 _syazazsu",
teamAppTileStyles: "_18u01wug _4t3i7vkz _1bsb7vkz"
};
var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref) {
var containerId = _ref.containerId,
teamId = _ref.teamId,
displayName = _ref.displayName,
description = _ref.description,
avatarImageUrl = _ref.avatarImageUrl,
headerImageUrl = _ref.headerImageUrl,
memberAvatars = _ref.memberAvatars,
memberCount = _ref.memberCount,
cloudId = _ref.cloudId,
userId = _ref.userId,
isVerified = _ref.isVerified,
teamProfileUrl = _ref.teamProfileUrl,
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var _useTeamContainers = (0, _teamsPublic.useTeamContainers)(teamId),
teamContainers = _useTeamContainers.teamContainers,
loading = _useTeamContainers.loading;
var _useAnalyticsEvents = (0, _teamsAppInternalAnalytics.useAnalyticsEvents)(),
fireEvent = _useAnalyticsEvents.fireEvent;
// Ensure that the current container is not the only connection for this team before showing the "Where we work" section
var hasOtherTeamConnections = (0, _react.useMemo)(function () {
return teamContainers.filter(function (tc) {
return tc.id === containerId;
}).length < teamContainers.length;
}, [containerId, teamContainers]);
var onClick = (0, _react.useCallback)(function () {
fireEvent('ui.button.clicked.viewTeamProfileButton', {});
}, [fireEvent]);
return /*#__PURE__*/React.createElement(_compiled.Box, {
xcss: styles.wrapperStyles,
testId: "team-card-".concat(teamId)
}, /*#__PURE__*/React.createElement(_compiled.Box, {
as: "img",
src: headerImageUrl,
xcss: styles.headerImageStyles,
testId: "profile-header-image",
alt: "team-header-image"
}), /*#__PURE__*/React.createElement(_compiled.Stack, {
space: "space.200",
xcss: styles.containerStyles
}, /*#__PURE__*/React.createElement(_compiled.Inline, {
spread: "space-between",
alignBlock: "center"
}, /*#__PURE__*/React.createElement(_compiled.Box, {
xcss: styles.avatarImageStyles
}, /*#__PURE__*/React.createElement(_teamsAvatar.default, {
size: "medium",
src: avatarImageUrl
}))), /*#__PURE__*/React.createElement(_compiled.Stack, {
xcss: styles.teamInformationStyles,
space: "space.200"
}, /*#__PURE__*/React.createElement(_compiled.Flex, {
justifyContent: "space-between"
}, /*#__PURE__*/React.createElement(_compiled.Stack, {
space: "space.050"
}, /*#__PURE__*/React.createElement(_compiled.Inline, {
alignBlock: "center"
}, /*#__PURE__*/React.createElement(_heading.default, {
size: "medium"
}, displayName), isVerified && /*#__PURE__*/React.createElement(_verifiedTeamIcon.VerifiedTeamIcon, {
showTooltip: true
})), /*#__PURE__*/React.createElement(_compiled.Text, {
color: "color.text.subtlest"
}, typeof memberCount === 'string' ? /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, {
defaultMessage: "Contributing team \u2022 {memberCount} members",
values: {
memberCount: memberCount
},
id: "people-and-teams.team-profile-card.large-member-count"
}) : /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, {
defaultMessage: "Contributing team \u2022 {count, plural, one {# member} other {# members}}",
values: {
count: memberCount
},
id: "people-and-teams.team-profile-card.member-count"
}))), /*#__PURE__*/React.createElement(_teamActions.TeamActions, (0, _extends2.default)({
cloudId: cloudId,
teamId: teamId
}, props))), /*#__PURE__*/React.createElement(_compiled.Inline, null, /*#__PURE__*/React.createElement(_avatarGroup.default, {
appearance: "stack",
data: memberAvatars
})), description && /*#__PURE__*/React.createElement(_compiled.Text, {
color: "color.text",
maxLines: 3
}, description)), /*#__PURE__*/React.createElement(_compiled.Box, {
xcss: styles.teamConnectionStyles
}, /*#__PURE__*/React.createElement(_compiled.Box, {
xcss: styles.connectionTitleStyles
}, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, {
defaultMessage: "Team links",
id: "people-and-teams.team-profile-card.team-connections"
})), /*#__PURE__*/React.createElement(_compiled.Box, {
xcss: styles.teamConnectionItemsStyles
}, /*#__PURE__*/React.createElement(_linkItem.default, {
href: teamProfileUrl,
target: "_blank",
onClick: onClick,
description: /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, {
defaultMessage: "Team profile",
id: "people-and-teams.team-profile-card.team-profile-description"
}),
iconBefore: /*#__PURE__*/React.createElement(_teamsAvatar.default, {
size: "small",
src: avatarImageUrl
}),
iconAfter: /*#__PURE__*/React.createElement(_compiled.Box, {
as: "img",
src: _TeamAppTile.default,
testId: "team-app-tile",
alt: "team-app-tile",
xcss: styles.teamAppTileStyles
}),
testId: "team-profile-card-profile-link-item"
}, /*#__PURE__*/React.createElement(_compiled.Text, {
maxLines: 1,
color: "color.text"
}, displayName)), (loading || hasOtherTeamConnections) && /*#__PURE__*/React.createElement(_teamsPublic.TeamContainers, {
teamId: teamId,
onAddAContainerClick: noop,
userId: userId,
cloudId: cloudId,
components: {
ContainerCard: _main.TeamConnections,
TeamContainersSkeleton: _teamContainersSkeleton.TeamContainersSkeleton
},
filterContainerId: containerId,
isDisplayedOnProfileCard: true,
maxNumberOfContainersToShow: loading ? 0 : 9
})))));
};