azure-devops-ui
Version:
React components for building web UI in Azure DevOps
63 lines (62 loc) • 3.17 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import * as React from "react";
import { Coin, CoinSize } from '../../Coin';
import { getUniquefiedIdentityName } from '../../Utilities/PersonaHelper';
/**
* Renders a user's profile/identity/avatar image.
*/
export class Persona extends React.Component {
constructor(props) {
super(props);
this.targetElement = React.createRef();
this.showIdentityCard = () => {
if (this.props.personaProvider && this.props.personaProvider.renderIdentityCard) {
this.setState({ showIdentityCard: true });
}
};
this.onClick = (ev) => {
if (this.props.personaProvider && this.props.personaProvider.renderIdentityCard) {
this.setState({ showIdentityCard: true });
}
ev.preventDefault();
};
this.hideIdentityCard = () => {
this.setState({ showIdentityCard: false });
};
this.state = {
imageError: false,
imageLoaded: false,
showIdentityCard: false
};
}
render() {
const { ariaLabel, ariaHidden, className, personaProvider, identity, role, size, tooltipProps } = this.props;
const canShowPersonaCard = !!personaProvider && !!personaProvider.renderIdentityCard;
const image = identity.image || identity.imageUrl;
// "entityId" is a required property of IIdentity and is not presented on "IBasicIdentityRef", can be used to differentiate those interfaces
const principalName = ("entityId" in identity) ? getUniquefiedIdentityName(identity) : "";
// Getting the reference to the div around the image because the Callout within IdentityCard has positioning problems in some cases when passing in img element as the target
return (React.createElement(React.Fragment, null,
React.createElement("div", { "aria-hidden": ariaHidden, ref: this.targetElement },
React.createElement(Coin, { ariaLabel: ariaLabel, className: className, dataIsFocusable: canShowPersonaCard, isTabStop: canShowPersonaCard, onClick: canShowPersonaCard ? this.onClick : undefined, displayName: identity.displayName || "", principalName: principalName, imageUrl: this.getServerImageFromSize(image), role: role, size: size, tooltipProps: tooltipProps })),
this.state.showIdentityCard &&
personaProvider &&
personaProvider.renderIdentityCard &&
personaProvider.renderIdentityCard(identity, personaProvider, this.hideIdentityCard, this.targetElement.current)));
}
getServerImageFromSize(url) {
if (!url) {
return undefined;
}
if (this.props.size) {
if (this.props.size <= CoinSize.size24) {
return url + (url.indexOf("?") === -1 ? "?size=0" : "&size=0");
}
else if (this.props.size > CoinSize.size40) {
return url + (url.indexOf("?") === -1 ? "?size=2" : "&size=2");
}
}
return url;
}
}