azure-devops-ui
Version:
React components for building web UI in Azure DevOps
127 lines (126 loc) • 7.55 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";
/**
* The content of the callout for the persona card.
*/
export 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 = (ev) => {
if (ev.which === KeyCode.escape) {
this.onDismissCallout();
ev.preventDefault();
}
};
// State change helper methods
this.onDismissCallout = () => {
if (this.props.onDismissCallback) {
this.props.onDismissCallback();
}
};
}
componentDidMount() {
window.addEventListener('resize', this.determineAnchorOrigin);
this.determineAnchorOrigin();
}
componentWillUnmount() {
window.removeEventListener('resize', this.determineAnchorOrigin);
}
// Render
render() {
// Get target element
const targetElement = this.props.referenceHTMLComponent ? this.props.referenceHTMLComponent : this.props.target;
// Use component state information to render component
return (React.createElement(Callout, { onDismiss: this.onDismissCallout, anchorElement: targetElement, 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: true, lightDismiss: true, ref: this.props.calloutRef },
React.createElement("div", null, this.renderCard())));
}
renderCard() {
const cssClassName = "bolt-identity-card scroll-h-hidden";
if (this.props.working && !Utils.isCompleteIdentity(this.props.dataProps.identity)) {
// Still working to get initial data
return (React.createElement("div", { className: css(cssClassName, "loading flex-row justify-center") },
React.createElement(Spinner, { label: Resources.Loading, size: SpinnerSize.large, className: "bolt-identity-card-loading-spinner" })));
}
const isAdOrAadOrGroup = Utils.isAdUser(this.props.dataProps.identity) ||
Utils.isAadUser(this.props.dataProps.identity) ||
Utils.isGroup(this.props.dataProps.identity);
const headerIdentity = this.props.dataProps.header || undefined;
const innerCard = this.renderInnerCard();
return innerCard ? (React.createElement(FocusZone, { circularNavigation: true, direction: FocusZoneDirection.Vertical, focusOnMount: true, handleTabKey: true },
React.createElement("div", { className: "bolt-identity-card-focus-element", tabIndex: -1 }),
React.createElement("div", { className: cssClassName, onKeyDown: this.onKeyDown },
isAdOrAadOrGroup && headerIdentity && React.createElement(HeaderElement, { identity: headerIdentity, onClickFunction: this.props.onHeaderClick }),
innerCard))) : (React.createElement("div", null));
}
renderInnerCard() {
// Get component state data
const { identity, successors, managerList, directReportList } = this.props.dataProps;
if (!identity || this.props.showUnknownUser === true) {
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));
}
const isGroup = Utils.isGroup(identity);
const isVsdUser = Utils.isVsdUser(identity);
const isWmdUser = Utils.isWmdUser(identity);
const isAadUser = Utils.isAadUser(identity);
const isAadSp = Utils.isAadServicePrincipal(identity);
const isAdUser = Utils.isAdUser(identity);
const isGithubUser = Utils.isGithubUser(identity);
if (isGroup) {
switch (this.props.dataProps.cardType) {
case CardType.Organization:
return React.createElement(GroupMembersCard, { identity: identity, members: successors, onClickEntity: this.props.onClickEntity });
case CardType.Default:
return (React.createElement(GroupCard, { identity: identity, isPreviousHeader: !!this.props.dataProps.previousDataState || !!this.props.initialHeader, members: successors, showOrganizationCard: this.props.onShowOrganizationCard }));
}
}
else if (isGithubUser) {
return React.createElement(GitHubCard, { identity: identity });
}
else if (isVsdUser) {
return React.createElement(DefaultAbridgedCard, { identity: identity });
}
else if (isWmdUser) {
return React.createElement(DefaultSimpleCard, { identity: identity });
}
else if (isAadSp) {
return React.createElement(ServicePrincipalCard, { identity: identity });
}
else if (isAadUser || isAdUser) {
switch (this.props.dataProps.cardType) {
case CardType.Contact:
return React.createElement(ContactCard, { identity: identity });
case CardType.Organization:
return (React.createElement(OrganizationCard, { identity: identity, managerList: managerList, directReportList: directReportList, onClickEntity: this.props.onClickEntity }));
case CardType.Default:
default:
const manager = managerList && managerList.length > 0 ? managerList[managerList.length - 1] : undefined;
return (React.createElement(DefaultCard, { identity: identity, manager: manager, 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);
}
}