azure-devops-ui
Version:
React components for building web UI in Azure DevOps
45 lines (44 loc) • 3.3 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./IdentityCard.css";
import * as React from "react";
import { format } from '../../Core/Util/String';
import { Button } from '../../Button';
import { Icon } from '../../Icon';
import * as Resources from '../../Resources.Persona';
import { Tooltip } from '../../TooltipEx';
import { Persona } from "../Persona/Persona";
import { PersonaSize } from "../Persona/Persona.Props";
import { CardContactLine } from "./CardContactLine";
export const GroupCard = (props) => {
const { identity, members, showOrganizationCard } = props;
const { displayName, mail, physicalDeliveryOfficeName, telephoneNumber } = identity;
const hiddenFocusElement = React.useRef(null);
const renderContactInformation = mail || telephoneNumber || physicalDeliveryOfficeName;
// onMount
React.useEffect(() => {
if (!renderContactInformation) {
hiddenFocusElement.current && hiddenFocusElement.current.focus();
}
}, []);
const memberButtonText = format(Resources.IdentityCardMembersCount, members ? members.length : 0);
return (React.createElement("div", { className: "bolt-identity-default-card-without-header bolt-identity-card-content" },
React.createElement("div", { ref: hiddenFocusElement, tabIndex: -1 }),
React.createElement("div", { className: "flex-row" },
React.createElement(Persona, { className: "bolt-identity-card-persona-main", size: PersonaSize.size72, identity: identity }),
React.createElement("div", { className: "flex-column flex-grow bolt-identity-card-name scroll-hidden" },
React.createElement(Tooltip, { text: displayName, overflowOnly: true },
React.createElement("div", { className: "word-wrap title-s" }, displayName)),
members && members.length > 0 ? (React.createElement("div", { className: "word-wrap" }, format(Resources.IdentityCardMembers, members.length))) : (undefined))),
React.createElement("div", null,
renderContactInformation && (React.createElement("div", { className: "bolt-identity-default-card-info-wrapper" },
React.createElement("hr", { className: "bolt-identity-card-hr" }),
React.createElement("div", { className: "bolt-identity-default-card-contact-info-container" }, mail && React.createElement(CardContactLine, { iconName: "Mail", content: mail, link: `mailto:${mail}` })))),
members && members.length > 0 ? (React.createElement("div", { className: "bolt-identity-default-card-member-list-wrapper " },
React.createElement("hr", { className: "bolt-identity-card-hr" }),
React.createElement("div", { className: "bolt-identity-default-card-header-wrapper" },
React.createElement(Button, { "aria-label": memberButtonText, className: "bolt-identity-default-card-header pointer bolt-profile-card-tab-element flex-center", onClick: () => {
showOrganizationCard && showOrganizationCard();
}, role: "button", text: memberButtonText, subtle: true },
React.createElement(Icon, { iconName: "ChevronRight" }))))) : (undefined))));
};