azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 5.72 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{Callout}from"../../Callout";import{FocusZone,FocusZoneDirection}from"../../FocusZone";import{Location}from"../../Utilities/Position";import{Spinner,SpinnerSize}from"../../Spinner";import{css,KeyCode}from"../../Util";import{ContactCard}from"./ContactCard";import{DefaultAbridgedCard}from"./DefaultAbridgedCard";import{DefaultCard}from"./DefaultCard";import{DefaultSimpleCard}from"./DefaultSimpleCard";import{GitHubCard}from"./GitHubCard";import{GroupCard}from"./GroupCard";import{GroupMembersCard}from"./GroupMembersCard";import{CardType}from"./IdentityCard.Props";import{IdentityCardHeaderElement as HeaderElement}from"./IdentityCardHeaderElement";import*as Utils from"./IdentityCardIdentityUtils";import{OrganizationCard}from"./OrganizationCard";import{ServicePrincipalCard}from"./ServicePrincipalCard";var IdentityCardContent=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.calloutAnchorOrigin={horizontal:Location.start,vertical:Location.start},t.determineAnchorOrigin=function(){t.calloutAnchorOrigin=window.matchMedia("(max-width: 600px)").matches?{horizontal:Location.start,vertical:Location.start}:{horizontal:Location.end,vertical:Location.start}},t.onKeyDown=function(e){e.which===KeyCode.escape&&(t.onDismissCallout(),e.preventDefault())},t.onDismissCallout=function(){t.props.onDismissCallback&&t.props.onDismissCallback()},t}return __extends(t,e),t.prototype.componentDidMount=function(){window.addEventListener("resize",this.determineAnchorOrigin),this.determineAnchorOrigin()},t.prototype.componentWillUnmount=function(){window.removeEventListener("resize",this.determineAnchorOrigin)},t.prototype.render=function(){var e=this.props.referenceHTMLComponent||this.props.target;return React.createElement(Callout,{onDismiss:this.onDismissCallout,anchorElement:e,anchorOrigin:this.calloutAnchorOrigin,calloutOrigin:{horizontal:Location.start,vertical:Location.start},ariaLabel:Resources.IdentityCardProfileCardAriaLabel,className:"bolt-identity-card-callout depth-8",contentClassName:"v-scroll-auto",escDismiss:!0,lightDismiss:!0,ref:this.props.calloutRef},React.createElement("div",null,this.renderCard()))},t.prototype.renderCard=function(){var e,t,r,i="bolt-identity-card scroll-h-hidden";return this.props.working&&!Utils.isCompleteIdentity(this.props.dataProps.identity)?React.createElement("div",{className:css(i,"loading flex-row justify-center")},React.createElement(Spinner,{label:Resources.Loading,size:SpinnerSize.large,className:"bolt-identity-card-loading-spinner"})):(e=Utils.isAdUser(this.props.dataProps.identity)||Utils.isAadUser(this.props.dataProps.identity)||Utils.isGroup(this.props.dataProps.identity),t=this.props.dataProps.header||void 0,(r=this.renderInnerCard())?React.createElement(FocusZone,{circularNavigation:!0,defaultActiveElement:".bolt-identity-card-focus-element",direction:FocusZoneDirection.Vertical,focusOnMount:!0,handleTabKey:!0},React.createElement("div",{className:"bolt-identity-card-focus-element",tabIndex:-1}),React.createElement("div",{className:i,onKeyDown:this.onKeyDown},e&&t&&React.createElement(HeaderElement,{identity:t,onClickFunction:this.props.onHeaderClick,imageUrlResolver:this.props.imageUrlResolver}),r)):React.createElement("div",null))},t.prototype.renderInnerCard=function(){var e=this.props.dataProps,t=e.identity,r=e.successors,i=e.managerList,o=e.directReportList;if(!t||!0===this.props.showUnknownUser)return React.createElement("div",{className:"bolt-identity-card-content bolt-identity-card-unknown-user-content flex-column flex-center justify-center title-xs scroll-hidden"},Resources.IdentityCardUnknownUser);var e=Utils.isGroup(t),a=Utils.isVsdUser(t),n=Utils.isWmdUser(t),s=Utils.isAadUser(t),l=Utils.isAadServicePrincipal(t),c=Utils.isAdUser(t),d=Utils.isGithubUser(t);if(e)switch(this.props.dataProps.cardType){case CardType.Organization:return React.createElement(GroupMembersCard,{identity:t,members:r,onClickEntity:this.props.onClickEntity,imageUrlResolver:this.props.imageUrlResolver});case CardType.Default:return React.createElement(GroupCard,{identity:t,isPreviousHeader:!!this.props.dataProps.previousDataState||!!this.props.initialHeader,members:r,showOrganizationCard:this.props.onShowOrganizationCard})}else{if(d)return React.createElement(GitHubCard,{identity:t,imageUrlResolver:this.props.imageUrlResolver});if(a)return React.createElement(DefaultAbridgedCard,{identity:t,imageUrlResolver:this.props.imageUrlResolver});if(n)return React.createElement(DefaultSimpleCard,{identity:t,imageUrlResolver:this.props.imageUrlResolver});if(l)return React.createElement(ServicePrincipalCard,{identity:t,imageUrlResolver:this.props.imageUrlResolver});if(s||c)switch(this.props.dataProps.cardType){case CardType.Contact:return React.createElement(ContactCard,{identity:t,imageUrlResolver:this.props.imageUrlResolver});case CardType.Organization:return React.createElement(OrganizationCard,{identity:t,managerList:i,directReportList:o,onClickEntity:this.props.onClickEntity,imageUrlResolver:this.props.imageUrlResolver});default:CardType.Default;var p=i&&0<i.length?i[i.length-1]:void 0;return React.createElement(DefaultCard,{identity:t,manager:p,isPreviousHeader:!!this.props.dataProps.previousDataState||!!this.props.initialHeader,showContactCard:this.props.onShowContactCard,showOrganizationCard:this.props.onShowOrganizationCard,onClickEntity:this.props.onClickEntity,imageUrlResolver:this.props.imageUrlResolver})}}return React.createElement("div",null)},t}(React.Component);export{IdentityCardContent};