azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 5.06 kB
JavaScript
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";class IdentityCardContent extends React.Component{constructor(){super(...arguments),this.calloutAnchorOrigin={horizontal:Location.start,vertical:Location.start},this.determineAnchorOrigin=()=>{this.calloutAnchorOrigin=window.matchMedia("(max-width: 600px)").matches?{horizontal:Location.start,vertical:Location.start}:{horizontal:Location.end,vertical:Location.start}},this.onKeyDown=t=>{t.which===KeyCode.escape&&(this.onDismissCallout(),t.preventDefault())},this.onDismissCallout=()=>{this.props.onDismissCallback&&this.props.onDismissCallback()}}componentDidMount(){window.addEventListener("resize",this.determineAnchorOrigin),this.determineAnchorOrigin()}componentWillUnmount(){window.removeEventListener("resize",this.determineAnchorOrigin)}render(){var t=this.props.referenceHTMLComponent||this.props.target;return React.createElement(Callout,{onDismiss:this.onDismissCallout,anchorElement:t,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()))}renderCard(){var t,e,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"})):(t=Utils.isAdUser(this.props.dataProps.identity)||Utils.isAadUser(this.props.dataProps.identity)||Utils.isGroup(this.props.dataProps.identity),e=this.props.dataProps.header||void 0,(r=this.renderInnerCard())?React.createElement(FocusZone,{circularNavigation:!0,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},t&&e&&React.createElement(HeaderElement,{identity:e,onClickFunction:this.props.onHeaderClick}),r)):React.createElement("div",null))}renderInnerCard(){var{identity:t,successors:e,managerList:r,directReportList:i}=this.props.dataProps;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 a=Utils.isGroup(t),n=Utils.isVsdUser(t),o=Utils.isWmdUser(t),s=Utils.isAadUser(t),d=Utils.isAadServicePrincipal(t),c=Utils.isAdUser(t),l=Utils.isGithubUser(t);if(a)switch(this.props.dataProps.cardType){case CardType.Organization:return React.createElement(GroupMembersCard,{identity:t,members:e,onClickEntity:this.props.onClickEntity});case CardType.Default:return React.createElement(GroupCard,{identity:t,isPreviousHeader:!!this.props.dataProps.previousDataState||!!this.props.initialHeader,members:e,showOrganizationCard:this.props.onShowOrganizationCard})}else{if(l)return React.createElement(GitHubCard,{identity:t});if(n)return React.createElement(DefaultAbridgedCard,{identity:t});if(o)return React.createElement(DefaultSimpleCard,{identity:t});if(d)return React.createElement(ServicePrincipalCard,{identity:t});if(s||c)switch(this.props.dataProps.cardType){case CardType.Contact:return React.createElement(ContactCard,{identity:t});case CardType.Organization:return React.createElement(OrganizationCard,{identity:t,managerList:r,directReportList:i,onClickEntity:this.props.onClickEntity});default:CardType.Default;var p=r&&0<r.length?r[r.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})}}return React.createElement("div",null)}}export{IdentityCardContent};