azure-devops-ui/Components/IdentityCard/DefaultCard.min.js

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./IdentityCard.css";import*as React from"react";import*as Resources from"../../Resources.Persona";import{Button}from"../../Button";import{CardContactLine}from"./CardContactLine";import{Icon}from"../../Icon";import{Persona}from"../Persona/Persona";import{PersonaSize}from"../Persona/Persona.Props";import{css}from"../../Util";class DefaultCard extends React.Component{constructor(){super(...arguments),this.contactButtonRef=React.createRef()}componentDidMount(){this.contactButtonRef.current&&this.contactButtonRef.current.focus()}render(){var{identity:e,isPreviousHeader:t}=this.props,{displayName:e,department:a,jobTitle:r,mail:n,physicalDeliveryOfficeName:i,telephoneNumber:c}=e;return React.createElement("div",{className:css("bolt-identity-card-content flex-column scroll-hidden",t?"bolt-identity-default-card-with-header":"bolt-identity-default-card-without-header")},React.createElement("div",{className:"flex-row"},React.createElement(Persona,{className:"bolt-identity-card-persona-main",size:PersonaSize.size72,identity:this.props.identity}),React.createElement("div",{className:"flex-column flex-grow bolt-identity-card-name scroll-hidden"},React.createElement("div",{className:"word-wrap title-s"},e),r?React.createElement("div",{className:"text-ellipsis"},r):void 0,a?React.createElement("div",{className:"text-ellipsis"},a):void 0)),React.createElement("div",{className:"flex-column scroll-hidden"},(n||c||i)&&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-header-wrapper"},React.createElement(Button,{"aria-label":Resources.IdentityCardContact,className:"bolt-identity-default-card-header pointer bolt-profile-card-tab-element",onClick:()=>{this.props.showContactCard()},ref:this.contactButtonRef,role:"button",subtle:!0,text:Resources.IdentityCardContact},React.createElement(Icon,{iconName:"ChevronRight"}))),React.createElement("div",{className:"bolt-identity-default-card-contact-info-container flex-column scroll-hidden"},n&&React.createElement(CardContactLine,{iconName:"Mail",hiddenLabel:Resources.IdentityCardEmail,content:n,link:"mailto:"+n}),n&&React.createElement(CardContactLine,{iconName:"Chat",content:Resources.IdentityCardStartChat,link:"sip:"+n}),c&&React.createElement(CardContactLine,{iconName:"Phone",hiddenLabel:Resources.IdentityCardPhoneNumber,content:c,link:"tel:"+c}),i&&React.createElement(CardContactLine,{iconName:"POI",hiddenLabel:Resources.IdentityCardLocation,content:i}))),this.renderDirectManagerElement()))}renderDirectManagerElement(){if(!this.props.manager)return React.createElement("div",null);const e=this.props.manager;var t={imageUrl:e.image,primaryText:e.displayName,secondaryText:e.jobTitle,tertiaryText:e.department};return React.createElement("div",{className:"bolt-identity-default-card-direct-manager-wrapper"},React.createElement("hr",{className:"bolt-identity-card-hr"}),React.createElement("div",{className:"bolt-identity-default-card-header-wrapper"},React.createElement(Button,{"aria-label":Resources.IdentityCardOrganization,className:"bolt-identity-default-card-header pointer bolt-profile-card-tab-element",onClick:()=>{this.props.showOrganizationCard&&this.props.showOrganizationCard()},role:"button",text:Resources.IdentityCardOrganization,subtle:!0},React.createElement(Icon,{iconName:"ChevronRight"}))),React.createElement("div",{className:"bolt-identity-default-card-direct-manager"},React.createElement("div",{className:"bolt-identity-default-card-header-reportsto"},Resources.IdentityCardReportsTo),React.createElement("div",{className:"flex-row scroll-hidden bolt-identity-card-reports-to-wrapper"},React.createElement(Button,{className:"bolt-identity-card-persona-list-element bolt-profile-card-tab-element flex-shrink text-ellipsis","aria-label":e.displayName,key:e.entityId+e.signInAddress,onClick:()=>{this.props.onClickEntity&&this.props.onClickEntity(e)},subtle:!0},React.createElement(Persona,{size:PersonaSize.size40,identity:e}),React.createElement("div",{className:"bolt-identity-card-text flex-column scroll-hidden"},React.createElement("div",{className:"primary-text flex-row text-ellipsis"},t.primaryText),t.secondaryText?React.createElement("div",{className:"secondary-text flex-row text-ellipsis"},t.secondaryText):void 0)))))}}export{DefaultCard};