@atlaskit/profilecard
Version:
A React component to display a card with user information.
163 lines • 7.04 kB
JavaScript
/* main.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 = ["containerId", "teamId", "displayName", "description", "avatarImageUrl", "headerImageUrl", "memberAvatars", "memberCount", "cloudId", "userId", "isVerified", "teamProfileUrl"];
import "./main.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { useCallback, useMemo } from 'react';
import { FormattedMessage } from 'react-intl-next';
import AvatarGroup from '@atlaskit/avatar-group';
import Heading from '@atlaskit/heading';
import LinkItem from '@atlaskit/menu/link-item';
import { VerifiedTeamIcon } from '@atlaskit/people-teams-ui-public/verified-team-icon';
import { Box, Flex, Inline, Stack, Text } from '@atlaskit/primitives/compiled';
import { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics';
import TeamAvatar from '@atlaskit/teams-avatar';
import { TeamContainers, useTeamContainers } from '@atlaskit/teams-public';
import TeamAppTile from '../common/assets/TeamAppTile.svg';
import { TeamActions } from './team-actions';
import { TeamConnections } from './team-connections/main';
import { TeamContainersSkeleton } from './team-containers-skeleton';
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"
};
export var 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 = _objectWithoutProperties(_ref, _excluded);
var _useTeamContainers = useTeamContainers(teamId),
teamContainers = _useTeamContainers.teamContainers,
loading = _useTeamContainers.loading;
var _useAnalyticsEvents = 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 = useMemo(function () {
return teamContainers.filter(function (tc) {
return tc.id === containerId;
}).length < teamContainers.length;
}, [containerId, teamContainers]);
var onClick = useCallback(function () {
fireEvent('ui.button.clicked.viewTeamProfileButton', {});
}, [fireEvent]);
return /*#__PURE__*/React.createElement(Box, {
xcss: styles.wrapperStyles,
testId: "team-card-".concat(teamId)
}, /*#__PURE__*/React.createElement(Box, {
as: "img",
src: headerImageUrl,
xcss: styles.headerImageStyles,
testId: "profile-header-image",
alt: "team-header-image"
}), /*#__PURE__*/React.createElement(Stack, {
space: "space.200",
xcss: styles.containerStyles
}, /*#__PURE__*/React.createElement(Inline, {
spread: "space-between",
alignBlock: "center"
}, /*#__PURE__*/React.createElement(Box, {
xcss: styles.avatarImageStyles
}, /*#__PURE__*/React.createElement(TeamAvatar, {
size: "medium",
src: avatarImageUrl
}))), /*#__PURE__*/React.createElement(Stack, {
xcss: styles.teamInformationStyles,
space: "space.200"
}, /*#__PURE__*/React.createElement(Flex, {
justifyContent: "space-between"
}, /*#__PURE__*/React.createElement(Stack, {
space: "space.050"
}, /*#__PURE__*/React.createElement(Inline, {
alignBlock: "center"
}, /*#__PURE__*/React.createElement(Heading, {
size: "medium"
}, displayName), isVerified && /*#__PURE__*/React.createElement(VerifiedTeamIcon, {
showTooltip: true
})), /*#__PURE__*/React.createElement(Text, {
color: "color.text.subtlest"
}, typeof memberCount === 'string' ? /*#__PURE__*/React.createElement(FormattedMessage, {
defaultMessage: "Contributing team \u2022 {memberCount} members",
values: {
memberCount: memberCount
},
id: "people-and-teams.team-profile-card.large-member-count"
}) : /*#__PURE__*/React.createElement(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, _extends({
cloudId: cloudId,
teamId: teamId
}, props))), /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(AvatarGroup, {
appearance: "stack",
data: memberAvatars
})), description && /*#__PURE__*/React.createElement(Text, {
color: "color.text",
maxLines: 3
}, description)), /*#__PURE__*/React.createElement(Box, {
xcss: styles.teamConnectionStyles
}, /*#__PURE__*/React.createElement(Box, {
xcss: styles.connectionTitleStyles
}, /*#__PURE__*/React.createElement(FormattedMessage, {
defaultMessage: "Team links",
id: "people-and-teams.team-profile-card.team-connections"
})), /*#__PURE__*/React.createElement(Box, {
xcss: styles.teamConnectionItemsStyles
}, /*#__PURE__*/React.createElement(LinkItem, {
href: teamProfileUrl,
target: "_blank",
onClick: onClick,
description: /*#__PURE__*/React.createElement(FormattedMessage, {
defaultMessage: "Team profile",
id: "people-and-teams.team-profile-card.team-profile-description"
}),
iconBefore: /*#__PURE__*/React.createElement(TeamAvatar, {
size: "small",
src: avatarImageUrl
}),
iconAfter: /*#__PURE__*/React.createElement(Box, {
as: "img",
src: TeamAppTile,
testId: "team-app-tile",
alt: "team-app-tile",
xcss: styles.teamAppTileStyles
}),
testId: "team-profile-card-profile-link-item"
}, /*#__PURE__*/React.createElement(Text, {
maxLines: 1,
color: "color.text"
}, displayName)), (loading || hasOtherTeamConnections) && /*#__PURE__*/React.createElement(TeamContainers, {
teamId: teamId,
onAddAContainerClick: noop,
userId: userId,
cloudId: cloudId,
components: {
ContainerCard: TeamConnections,
TeamContainersSkeleton: TeamContainersSkeleton
},
filterContainerId: containerId,
isDisplayedOnProfileCard: true,
maxNumberOfContainersToShow: loading ? 0 : 9
})))));
};