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

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";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";var Coin=function(t){function e(e){var o=t.call(this,e)||this;return o.onImageError=function(e){o.setState({imageError:!0})},o.onLoad=function(e){o.props.onImageLoad&&o.props.onImageLoad(),o.setState({imageLoaded:!0})},o.handleKeyDown=function(e){e.keyCode!==KeyCode.enter&&e.keyCode!==KeyCode.space||o.props.onClick&&o.props.onClick()},o.state={imageError:!1,imageLoaded:!1,showIdentityCard:!1},o}return __extends(e,t),e.prototype.render=function(){var e=this.props,o=e.ariaLabel,t=e.className,a=e.displayName,r=e.dataIsFocusable,i=e.onClick,n=e.isTabStop,s=e.imgAltText,s=void 0===s?"":s,l=e.imageUrl,m=e.role,c=e.size,e=e.tooltipProps,c="size"+c,p={},r=(r&&(p["data-is-focusable"]=!0),n&&(p.tabIndex=0),p["aria-label"]=void 0!==o?o:a,i&&(p.onKeyDown=this.handleKeyDown,p.onClick=i,p.role="button"),"presentation"===m&&(p.role="presentation",p["aria-label"]=""),getInitialsColorFromName(a)),n=React.createElement("div",{className:css("bolt-coin-content",c),style:r&&{background:getColorString(r)}},React.createElement("span",null,getInitialsFromName(a))),o=void 0===l||this.state.imageError?n: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?"":s,onError:this.onImageError,onLoad:this.onLoad})),r=React.createElement("div",__assign({className:css("bolt-coin flex-noshrink",t,c,i&&"cursor-pointer")},p),o);return null!==e?React.createElement(Tooltip,__assign({text:a,showOnFocus:!0},e),r):r},e}(React.Component);export{Coin};