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

React components for building web UI in Azure DevOps

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";class VssPersona extends React.Component{constructor(e){super(e),this.setTargetElement=e=>{this.targetElement=e},this.onImageError=e=>{this.props.showInitialsOnImageError?this.setState({imageError:!0}):this.props.onImageError&&this.props.onImageError(e)},this.handleKeyDown=e=>{e.keyCode!==KeyCode.enter&&e.keyCode!==KeyCode.space||this.showPersonaCard()},this.showPersonaCard=()=>{this.props.suppressPersonaCard||this.setState({showPersonaCard:!0})},this.hidePersonaCard=()=>{this.setState({showPersonaCard:!1})},this.state={imageError:!1,showPersonaCard:!1,imageUrlVal:this._getImageUrl(e)}}UNSAFE_componentWillReceiveProps(e){this.setState({showPersonaCard:!1,imageUrlVal:this._getImageUrl(e)})}shouldComponentUpdate(e,s){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===s.showPersonaCard)}render(){var{ariaLabel:e,identityDetailsProvider:s,size:t="medium",imgAltText:r="",imageUrl:a,displayName:i}=this.props,a=s?this.state.imageUrlVal:a,o={role:"img"},i=(this.props.dataIsFocusable&&(o["data-is-focusable"]=!0),this.props.isTabStop&&(o.tabIndex=0),!this.props.suppressPersonaCard&&this.props.identityDetailsProvider&&this.props.identityDetailsProvider.onRenderPersonaCard&&(o["aria-expanded"]=this.state.showPersonaCard,o.onKeyDown=this.handleKeyDown,o.onClick=this.showPersonaCard,o.role="button"),s?s.getDisplayName():i),e=(e?o["aria-label"]=e:i?o["aria-label"]=i:o["aria-hidden"]="true",void 0===i?void 0:getInitialsColorFromName(i)),e=void 0===a||this.state.imageError?React.createElement("div",{className:css("vss-Persona-content",t),style:e&&{background:getColorString(e)}},i?React.createElement("span",null,getInitialsFromName(i)):React.createElement(Icon,{iconName:"Contact"})):React.createElement("img",{className:"vss-Persona-content using-image",src:a,alt:r,onError:this.onImageError});return React.createElement(React.Fragment,null,React.createElement(Tooltip,{text:i,showOnFocus:!0},React.createElement("div",Object.assign({className:css("vss-Persona flex-noshrink",this.props.className,this.props.cssClass,t),ref:this.setTargetElement},o),e)),!this.props.suppressPersonaCard&&this.state.showPersonaCard&&s&&s.onRenderPersonaCard&&s.onRenderPersonaCard(this.targetElement,this.hidePersonaCard))}_getImageUrl(e){var{identityDetailsProvider:e,size:s="medium"}=e,s=this._getSize(s);return e&&e.getIdentityImageUrl(s)}_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};