azure-devops-ui/Components/Coin/Coin.min.js

React components for building web UI in Azure DevOps

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";class Coin extends React.Component{constructor(e){super(e),this.onImageError=e=>{this.setState({imageError:!0})},this.onLoad=e=>{this.setState({imageLoaded:!0})},this.handleKeyDown=e=>{e.keyCode!==KeyCode.enter&&e.keyCode!==KeyCode.space||this.props.onClick&&this.props.onClick()},this.state={imageError:!1,imageLoaded:!1}}render(){var{ariaLabel:e,className:t,displayName:o,principalName:a,dataIsFocusable:i,onClick:r,isTabStop:s,imgAltText:n="",imageUrl:l,role:m,size:c,tooltipProps:p}=this.props,c="size"+c,a=a||o,d={},i=(i&&(d["data-is-focusable"]=!0),s&&(d.tabIndex=0),d["aria-label"]=void 0!==e?e:a,r&&(d.onKeyDown=this.handleKeyDown,d.onClick=r,d.role="button"),"presentation"===m&&(d.role="presentation",d["aria-label"]=""),getInitialsColorFromName(o)),s=React.createElement("div",{className:css("bolt-coin-content",c),style:i&&{background:getColorString(i)}},React.createElement("span",null,getInitialsFromName(o))),e=void 0===l||this.state.imageError?s:React.createElement(React.Fragment,null,React.createElement("img",{className:css("bolt-coin-content using-image",c,!this.state.imageLoaded&&"pending-load-image"),src:l,alt:"presentation"===m?"":n,onError:this.onImageError,onLoad:this.onLoad})),i=React.createElement("div",Object.assign({className:css("bolt-coin flex-noshrink",t,c,r&&"cursor-pointer")},d),e);return null!==p?React.createElement(Tooltip,Object.assign({text:a,showOnFocus:!0},p),i):i}}export{Coin};