azure-devops-ui
Version:
React components for building web UI in Azure DevOps
43 lines (42 loc) • 1.76 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 { Icon } from '../../Icon';
import { Persona } from "../Persona/Persona";
import { PersonaSize } from "../Persona/Persona.Props";
export class IdentityCardHeaderElement extends React.Component {
constructor() {
super(...arguments);
this.personaElement = React.createRef();
}
componentDidMount() {
this.setFocus();
}
componentDidUpdate() {
this.setFocus();
}
// Render
render() {
const { identity } = this.props;
if (!identity) {
// Identity is empty in the case of previous
return React.createElement("div", null);
}
return (React.createElement("div", { className: "flex-row scroll-hidden" },
React.createElement(Button, { className: "bolt-identity-card-go-back-wrapper flex-row flex-grow scroll-hidden", onClick: this.props.onClickFunction, "aria-label": Resources.IdentityCardHeaderButtonLabel, ref: this.personaElement, primary: true },
React.createElement(Icon, { iconName: "ChevronLeftMed" }),
React.createElement(Persona, { className: "bolt-identity-card-go-back", size: PersonaSize.size24, identity: identity }),
React.createElement("div", { className: "bolt-identity-card-name text-ellipsis" }, identity.displayName))));
}
/**
* Sets the focus on this header.
*/
setFocus() {
if (this.personaElement.current) {
this.personaElement.current.focus();
}
}
}