azure-devops-ui
Version:
React components for building web UI in Azure DevOps
83 lines (82 loc) • 6.55 kB
JavaScript
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';
export class DefaultCard extends React.Component {
constructor() {
super(...arguments);
this.contactButtonRef = React.createRef();
}
// Setting the focus for the case of default card mounting when we come back via back header
componentDidMount() {
if (this.contactButtonRef.current) {
this.contactButtonRef.current.focus();
}
}
// Render
render() {
const { identity, isPreviousHeader } = this.props;
const { displayName, department, jobTitle, mail, physicalDeliveryOfficeName, telephoneNumber } = identity;
return (React.createElement("div", { className: css("bolt-identity-card-content flex-column scroll-hidden", isPreviousHeader ? "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" }, displayName),
jobTitle ? React.createElement("div", { className: "text-ellipsis" }, jobTitle) : undefined,
department ? React.createElement("div", { className: "text-ellipsis" }, department) : undefined)),
React.createElement("div", { className: "flex-column scroll-hidden" },
(mail || telephoneNumber || physicalDeliveryOfficeName) && (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: true, text: Resources.IdentityCardContact },
React.createElement(Icon, { iconName: "ChevronRight" }))),
React.createElement("div", { className: "bolt-identity-default-card-contact-info-container flex-column scroll-hidden" },
mail && React.createElement(CardContactLine, { iconName: "Mail", hiddenLabel: Resources.IdentityCardEmail, content: mail, link: `mailto:${mail}` }),
mail && React.createElement(CardContactLine, { iconName: "Chat", content: Resources.IdentityCardStartChat, link: `sip:${mail}` }),
telephoneNumber && React.createElement(CardContactLine, { iconName: "Phone", hiddenLabel: Resources.IdentityCardPhoneNumber, content: telephoneNumber, link: `tel:${telephoneNumber}` }),
physicalDeliveryOfficeName && React.createElement(CardContactLine, { iconName: "POI", hiddenLabel: Resources.IdentityCardLocation, content: physicalDeliveryOfficeName })))),
this.renderDirectManagerElement())));
}
/**
* Renders the direct manager for the persona.
* @param managerIdentity The manager persona.
*/
renderDirectManagerElement() {
if (!this.props.manager) {
return React.createElement("div", null);
}
const adjacentManager = this.props.manager;
const adjacentManagerData = {
imageUrl: adjacentManager.image,
primaryText: adjacentManager.displayName,
secondaryText: adjacentManager.jobTitle,
tertiaryText: adjacentManager.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: true },
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": adjacentManager.displayName, key: adjacentManager.entityId + adjacentManager.signInAddress, onClick: () => {
this.props.onClickEntity && this.props.onClickEntity(adjacentManager);
}, subtle: true },
React.createElement(Persona, { size: PersonaSize.size40, identity: adjacentManager }),
React.createElement("div", { className: "bolt-identity-card-text flex-column scroll-hidden" },
React.createElement("div", { className: "primary-text flex-row text-ellipsis" }, adjacentManagerData.primaryText),
adjacentManagerData.secondaryText ? (React.createElement("div", { className: "secondary-text flex-row text-ellipsis" }, adjacentManagerData.secondaryText)) : (undefined)))))));
}
}