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

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import*as React from"react";import{Coin,CoinSize}from"../../Coin";var Persona=function(r){function e(e){var t=r.call(this,e)||this;return t.showIdentityCard=function(){t.props.personaProvider&&t.props.personaProvider.renderIdentityCard&&t.setState({showIdentityCard:!0})},t.onClick=function(e){t.props.personaProvider&&t.props.personaProvider.renderIdentityCard&&t.setState({showIdentityCard:!0}),e.preventDefault()},t.hideIdentityCard=function(){t.setState({showIdentityCard:!1})},t.state={showIdentityCard:!1},t}return __extends(e,r),e.prototype.render=function(){var e=this.props.identity,e=e.image||e.imageUrl,e=this.getServerImageFromSize(e);return React.createElement(PersonaWrapper,__assign({},this.props,{imageUrl:e,onClick:this.onClick,onHideIdentityCard:this.hideIdentityCard,showIdentityCard:this.state.showIdentityCard}))},e.prototype.getServerImageFromSize=function(e){if(e){if(this.props.size){if(this.props.size<=CoinSize.size24)return e+(-1===e.indexOf("?")?"?size=0":"&size=0");if(this.props.size>CoinSize.size40)return e+(-1===e.indexOf("?")?"?size=2":"&size=2")}return e}},e}(React.Component),PersonaWrapper=function(e){var t=e.identity,r=e.imageUrlResolver,i=e.size,n=React.useState(),a=n[0],o=n[1];React.useEffect(function(){var e=getServerImageFromSize(t.image||t.imageUrl,i);r?r.resolveImageUrl(e).then(function(e){o(e)}).catch(function(){o(e)}):o(e)},[t,r,i]);return React.createElement(PurePersona,__assign({},e,{imageUrl:a,onImageLoad:function(){a&&null!=r&&r.onImageLoaded&&r.onImageLoaded(a)}}))},PurePersona=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.targetElement=React.createRef(),e}return __extends(e,t),e.prototype.render=function(){var e=this.props,t=e.ariaHidden,r=e.ariaLabel,i=e.className,n=e.identity,a=e.imageUrl,o=e.onClick,s=e.onHideIdentityCard,d=e.onImageLoad,p=e.personaProvider,c=e.role,m=e.showIdentityCard,l=e.size,e=e.tooltipProps,u=!!p&&!!p.renderIdentityCard;return React.createElement(React.Fragment,null,React.createElement("div",{"aria-hidden":t,ref:this.targetElement},React.createElement(Coin,{ariaLabel:r,className:i,dataIsFocusable:u,isTabStop:u,onClick:o,onImageLoad:d,displayName:n.displayName||"",imageUrl:a,role:c,size:l,tooltipProps:e})),m&&p&&p.renderIdentityCard&&p.renderIdentityCard(n,p,s,this.targetElement.current))},e}(React.Component);function getServerImageFromSize(e,t){if(e){if(t){if(t<=CoinSize.size24)return e+(-1===e.indexOf("?")?"?size=0":"&size=0");if(t>CoinSize.size40)return e+(-1===e.indexOf("?")?"?size=2":"&size=2")}return e}}export{Persona};