azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 2.33 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";var GroupCard=function(e){var t=e.identity,a=e.members,r=e.showOrganizationCard,o=t.displayName,n=t.mail,c=t.physicalDeliveryOfficeName,i=t.telephoneNumber,l=React.useRef(null),m=n||i||c,i=(React.useEffect(function(){m||l.current&&l.current.focus()},[]),format(Resources.IdentityCardMembersCount,a?a.length:0));return React.createElement("div",{className:"bolt-identity-default-card-without-header bolt-identity-card-content"},React.createElement("div",{ref:l,tabIndex:-1}),React.createElement("div",{className:"flex-row"},React.createElement(Persona,{className:"bolt-identity-card-persona-main",size:PersonaSize.size72,identity:t,imageUrlResolver:e.imageUrlResolver}),React.createElement("div",{className:"flex-column flex-grow bolt-identity-card-name scroll-hidden"},React.createElement(Tooltip,{text:o,overflowOnly:!0},React.createElement("div",{className:"word-wrap title-s"},o)),a&&0<a.length?React.createElement("div",{className:"word-wrap"},format(Resources.IdentityCardMembers,a.length)):void 0)),React.createElement("div",null,m&&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"},n&&React.createElement(CardContactLine,{iconName:"Mail",content:n,link:"mailto:".concat(n)}))),a&&0<a.length?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":i,className:"bolt-identity-default-card-header pointer bolt-profile-card-tab-element flex-center",onClick:function(){r&&r()},role:"button",text:i,subtle:!0},React.createElement(Icon,{iconName:"ChevronRight"})))):void 0))};export{GroupCard};