azure-devops-ui/Components/IdentityPickerSuggestionsList/IdentityPickerSuggestionItem.min.js

React components for building web UI in Azure DevOps

import{__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./IdentityPickerSuggestionsList.css";import*as React from"react";import{Button}from"../../Button";import{Icon}from"../../Icon";import{Persona,PersonaSize}from"../../Persona";import*as Resources from"../../Resources.IdentityPicker";import{Tooltip}from"../../TooltipEx";import{getScopedGroupParts,getSignInAddress,isGithubUser,shouldShowIdentityCard}from"../IdentityPickerDropdown/IdentityPickerUtils";import{IdentityType}from"../IdentityPickerDropdown/SharedIdentityPicker.Props";var IdentityPickerSuggestionItem=function(t){function e(e){e=t.call(this,e)||this;return e.contactCardButtonRef=React.createRef(),e.state={focused:!1},e.onFocus=e.onFocus.bind(e),e.onBlur=e.onBlur.bind(e),e}return __extends(e,t),e.prototype.onFocus=function(){this.setState({focused:!0})},e.prototype.onBlur=function(){this.setState({focused:!1})},e.prototype.render=function(){var t=this,o=this.props.item,e=getSignInAddress(o),r=o.displayName,s=getScopedGroupParts(o);return s&&(r=s.name,e=e||s.scope),React.createElement("div",{className:"bolt-picker-suggesteditem flex-row flex-grow flex-center scroll-hidden",onFocus:this.onFocus,onBlur:this.onBlur},this.props.renderSuggestion&&o.entityType===IdentityType.Custom?this.props.renderSuggestion(this.props):React.createElement("div",{className:"bolt-picker-suggesteditem-text flex-row flex-grow flex-center text-ellipsis"},React.createElement(Persona,{ariaHidden:!0,className:"bolt-picker-persona text-ellipsis",identity:o,size:PersonaSize.size24}),React.createElement("div",{className:"bolt-picker-persona-name flex-column flex-grow"},r&&React.createElement(Tooltip,{text:o.displayName,overflowOnly:o.displayName===r},React.createElement("div",{className:"fontSizeM text-ellipsis"},r)),e?React.createElement("div",{className:"flex-row"},isGithubUser(o)&&React.createElement(Icon,{className:"bolt-identitypicker-github-icon flex-row flex-center justify-center",iconName:"GitHubLogo"}),React.createElement("div",{className:"fontSize secondary-text text-ellipsis"},e)):void 0)),!!this.props.onOpenPersonaCard&&shouldShowIdentityCard(o)&&React.createElement(Button,{ariaLabel:Resources.IdentityPickerProfileCardButtonTooltip,className:"bolt-contact-card-button flex-noshrink",iconProps:{iconName:"ContactCard",className:"flex-shrink"},onClick:function(e){t.props.onOpenPersonaCard&&t.props.onOpenPersonaCard(o),e.preventDefault()},onBlur:this.props.onBlur,onFocus:this.props.onFocus,ref:this.contactCardButtonRef,subtle:!0,tooltipProps:{text:Resources.IdentityPickerProfileCardButtonTooltip,showOnFocus:!0},tabIndex:this.state.focused?0:-1,ariaHidden:!this.state.focused}))},e.prototype.focus=function(){this.contactCardButtonRef.current&&this.contactCardButtonRef.current.focus()},e}(React.Component);export{IdentityPickerSuggestionItem};