azure-devops-ui
Version:
React components for building web UI in Azure DevOps
36 lines (35 loc) • 2.08 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./IdentityCard.css";
import * as React from "react";
import { css } from '../../Util';
import { Persona } from "../Persona/Persona";
import { PersonaSize } from "../Persona/Persona.Props";
import { CardContactLine } from "./CardContactLine";
export class ServicePrincipalCard 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 } = this.props;
const { displayName, mail, originId } = identity;
return (React.createElement("div", { className: css("bolt-identity-card-content flex-column scroll-hidden", "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),
React.createElement("div", { className: "word-wrap" }, mail))),
React.createElement("div", { className: "flex-column scroll-hidden" },
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-contact-info-container flex-column scroll-hidden" }, originId && React.createElement(CardContactLine, { iconName: "ContactCard", content: originId }))))));
}
}