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

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./VssPersona.css";import*as React from"react";import{Icon}from"../../Icon";import{Tooltip}from"../../TooltipEx";import{css,KeyCode}from"../../Util";import{getColorString}from"../../Utilities/Color";import{getInitialsColorFromName,getInitialsFromName}from"./VssPersona.Initials";var VssPersona=function(t){function e(e){var r=t.call(this,e)||this;return r.setTargetElement=function(e){r.targetElement=e},r.onImageError=function(e){r.props.showInitialsOnImageError?r.setState({imageError:!0}):r.props.onImageError&&r.props.onImageError(e)},r.onImageLoad=function(e){r.props.onLoad&&r.props.onLoad(e)},r.handleKeyDown=function(e){e.keyCode!==KeyCode.enter&&e.keyCode!==KeyCode.space||r.showPersonaCard()},r.showPersonaCard=function(){r.props.suppressPersonaCard||r.setState({showPersonaCard:!0})},r.hidePersonaCard=function(){r.setState({showPersonaCard:!1})},r.state={imageError:!1,showPersonaCard:!1,imageUrlVal:r._getImageUrl(e)},r}return __extends(e,t),e.prototype.UNSAFE_componentWillReceiveProps=function(e){this.setState({showPersonaCard:!1,imageUrlVal:this._getImageUrl(e)})},e.prototype.shouldComponentUpdate=function(e,r){return!(e.identityDetailsProvider||this.props.imageUrl===e.imageUrl&&this.props.displayName===e.displayName)||!(!this.props.identityDetailsProvider&&!e.identityDetailsProvider||this.props.identityDetailsProvider&&e.identityDetailsProvider&&this.props.size===e.size&&this.props.cssClass===e.cssClass&&this.props.identityDetailsProvider===e.identityDetailsProvider&&this.state.showPersonaCard===r.showPersonaCard)},e.prototype.render=function(){var e=this.props,r=e.ariaLabel,t=e.identityDetailsProvider,s=e.size,s=void 0===s?"medium":s,a=e.imgAltText,a=void 0===a?"":a,o=e.imageUrl,e=e.displayName,o=t?this.state.imageUrlVal:o,i={role:"img"},e=(this.props.dataIsFocusable&&(i["data-is-focusable"]=!0),this.props.isTabStop&&(i.tabIndex=0),!this.props.suppressPersonaCard&&this.props.identityDetailsProvider&&this.props.identityDetailsProvider.onRenderPersonaCard&&(i["aria-expanded"]=this.state.showPersonaCard,i.onKeyDown=this.handleKeyDown,i.onClick=this.showPersonaCard,i.role="button"),t?t.getDisplayName():e),r=(r?i["aria-label"]=r:e?i["aria-label"]=e:i["aria-hidden"]="true",void 0===e?void 0:getInitialsColorFromName(e)),r=void 0===o||this.state.imageError?React.createElement("div",{className:css("vss-Persona-content",s),style:r&&{background:getColorString(r)}},e?React.createElement("span",null,getInitialsFromName(e)):React.createElement(Icon,{iconName:"Contact"})):React.createElement("img",{className:"vss-Persona-content using-image",src:o,alt:a,onError:this.onImageError,onLoad:this.onImageLoad});return React.createElement(React.Fragment,null,React.createElement(Tooltip,{text:e,showOnFocus:!0},React.createElement("div",__assign({className:css("vss-Persona flex-noshrink",this.props.className,this.props.cssClass,s),ref:this.setTargetElement},i),r)),!this.props.suppressPersonaCard&&this.state.showPersonaCard&&t&&t.onRenderPersonaCard&&t.onRenderPersonaCard(this.targetElement,this.hidePersonaCard))},e.prototype._getImageUrl=function(e){var r=e.identityDetailsProvider,e=e.size,e=getSize(void 0===e?"medium":e);return r&&r.getIdentityImageUrl(e)},e}(React.Component);function getSize(e){switch(e){case"extra-extra-small":return 16;case"extra-small":return 18;case"extra-small-plus":return 20;case"small":return 24;case"small-plus":return 28;case"medium":return 32;case"medium-plus":return 40;default:case"large":return 48;case"extra-large":return 72;case"extra-extra-large":return 100}}export{VssPersona,getSize};