azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 4.76 kB
JavaScript
import{__extends}from"tslib";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";var DefaultCard=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.contactButtonRef=React.createRef(),e}return __extends(e,t),e.prototype.componentDidMount=function(){this.contactButtonRef.current&&this.contactButtonRef.current.focus()},e.prototype.render=function(){var e=this,t=this.props,a=t.identity,t=t.isPreviousHeader,r=a.displayName,n=a.department,i=a.jobTitle,o=a.mail,c=a.physicalDeliveryOfficeName,a=a.telephoneNumber;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,imageUrlResolver:this.props.imageUrlResolver}),React.createElement("div",{className:"flex-column flex-grow bolt-identity-card-name scroll-hidden"},React.createElement("div",{className:"word-wrap title-s"},r),""===i?void 0:React.createElement("div",{className:"text-ellipsis"},i),""===n?void 0:React.createElement("div",{className:"text-ellipsis"},n))),React.createElement("div",{className:"flex-column scroll-hidden"},(o||a||c)&&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:function(){e.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"},o&&React.createElement(CardContactLine,{iconName:"Mail",hiddenLabel:Resources.IdentityCardEmail,content:o,link:"mailto:".concat(o)}),o&&React.createElement(CardContactLine,{iconName:"Chat",content:Resources.IdentityCardStartChat,link:"sip:".concat(o)}),a&&React.createElement(CardContactLine,{iconName:"Phone",hiddenLabel:Resources.IdentityCardPhoneNumber,content:a,link:"tel:".concat(a)}),c&&React.createElement(CardContactLine,{iconName:"POI",hiddenLabel:Resources.IdentityCardLocation,content:c}))),this.renderDirectManagerElement()))},e.prototype.renderDirectManagerElement=function(){var e,t,a=this;return this.props.manager?(t={imageUrl:(e=this.props.manager).image,primaryText:e.displayName,secondaryText:e.jobTitle,tertiaryText:e.department},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:function(){a.props.showOrganizationCard&&a.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:function(){a.props.onClickEntity&&a.props.onClickEntity(e)},subtle:!0},React.createElement(Persona,{size:PersonaSize.size40,identity:e,imageUrlResolver:this.props.imageUrlResolver}),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?void 0:React.createElement("div",{className:"secondary-text flex-row text-ellipsis"},t.secondaryText))))))):React.createElement("div",null)},e}(React.Component);export{DefaultCard};