azure-devops-ui
Version:
React components for building web UI in Azure DevOps
70 lines (69 loc) • 3.73 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./Coin.css";
import * as React from "react";
import { Tooltip } from '../../TooltipEx';
import { css, KeyCode } from '../../Util';
import { getColorString } from '../../Utilities/Color';
import { getInitialsColorFromName, getInitialsFromName } from "./Coin.Initials";
/**
* Renders a user's profile/identity/avatar image.
*/
export class Coin extends React.Component {
constructor(props) {
super(props);
this.onImageError = (event) => {
this.setState({ imageError: true });
};
this.onLoad = (event) => {
this.setState({ imageLoaded: true });
};
this.handleKeyDown = (e) => {
if (e.keyCode === KeyCode.enter || e.keyCode === KeyCode.space) {
this.props.onClick && this.props.onClick();
}
};
this.state = {
imageError: false,
imageLoaded: false
};
}
render() {
const { ariaLabel, className, displayName, principalName, dataIsFocusable, onClick, isTabStop, imgAltText = "", imageUrl, role, size, tooltipProps } = this.props;
const sizeClass = "size" + size;
const principalOrDisplayName = principalName ? principalName : displayName;
// Set the focus and aria-expand attributes based on props passed
const additionalAttributes = {};
if (dataIsFocusable) {
additionalAttributes["data-is-focusable"] = true;
}
if (isTabStop) {
additionalAttributes["tabIndex"] = 0;
}
additionalAttributes["aria-label"] = ariaLabel !== undefined ? ariaLabel : principalOrDisplayName;
// Setting the aria related properties and user action delegates only if there is a renderIdentityCard callback
if (onClick) {
additionalAttributes["onKeyDown"] = this.handleKeyDown;
additionalAttributes["onClick"] = onClick;
additionalAttributes["role"] = "button";
}
if (role === "presentation") {
additionalAttributes["role"] = "presentation";
// Remove aria-label if we're setting role to presentation.
additionalAttributes["aria-label"] = "";
}
const backgroundColor = getInitialsColorFromName(displayName);
const initialsIdentity = (React.createElement("div", { className: css("bolt-coin-content", sizeClass), style: backgroundColor && { background: getColorString(backgroundColor) } },
React.createElement("span", null, getInitialsFromName(displayName))));
const imageElement = imageUrl !== undefined && !this.state.imageError ? (React.createElement(React.Fragment, null,
React.createElement("img", { className: css("bolt-coin-content using-image", sizeClass, !this.state.imageLoaded && "pending-load-image"), src: imageUrl, alt: role === "presentation" ? "" : imgAltText, onError: this.onImageError, onLoad: this.onLoad }))) : (initialsIdentity);
// 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
const content = (React.createElement("div", Object.assign({ className: css("bolt-coin flex-noshrink", className, sizeClass, onClick && "cursor-pointer") }, additionalAttributes), imageElement));
if (tooltipProps !== null) {
return (React.createElement(Tooltip, Object.assign({ text: principalOrDisplayName, showOnFocus: true }, tooltipProps), content));
}
else {
return content;
}
}
}