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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./IdentityPickerSuggestionsList.css";import*as React from"react";import{format}from"../../Core/Util/String";import{Button}from"../../Button";import{Icon}from"../../Icon";import{Persona,PersonaSize}from"../../Persona";import*as Resources from"../../Resources.IdentityPicker";import{Tooltip}from"../../TooltipEx";import{KeyCode}from"../../Util";import{getScopedGroupParts,getSignInAddress,isGithubUser,isRemoveMRUFixEnabled,shouldShowIdentityCard}from"../IdentityPickerDropdown/IdentityPickerUtils";import{IdentityType}from"../IdentityPickerDropdown/SharedIdentityPicker.Props";class IdentityPickerSuggestionItem extends React.Component{constructor(e){super(e),this.contactCardButtonRef=React.createRef(),this.removeButtonRef=React.createRef(),this.handleButtonKeyDown=(t,o)=>e=>{isRemoveMRUFixEnabled()&&e.which===t&&o.current&&(o.current.focus(),e.preventDefault(),e.stopPropagation(),document.dispatchEvent(new CustomEvent("vss-telemetry-proxy",{detail:{area:"vss-identity-picker",component:"IdentityPickerSuggestionItem",feature:"IdentityPicker.MRU",level:3,method:"handleButtonKeyDown",message:"Navigate between MRU buttons with arrow keys"},bubbles:!0})))},this.onRemoveButtonKeyDown=this.handleButtonKeyDown(KeyCode.rightArrow,this.contactCardButtonRef),this.onContactCardButtonKeyDown=this.handleButtonKeyDown(KeyCode.leftArrow,this.removeButtonRef),this.state={focused:!1},this.onFocus=this.onFocus.bind(this),this.onBlur=this.onBlur.bind(this)}onFocus(){this.setState({focused:!0})}onBlur(){this.setState({focused:!1})}render(){const t=this.props.item;var e=isRemoveMRUFixEnabled()&&!!this.props.onRemoveFromMRU&&t.isMru;let o=getSignInAddress(t),s=t.displayName;var n=getScopedGroupParts(t);return n&&(s=n.name,o=o||n.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&&t.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:t,size:PersonaSize.size24}),React.createElement("div",{className:"bolt-picker-persona-name flex-column flex-grow"},s&&React.createElement(Tooltip,{text:t.displayName,overflowOnly:t.displayName===s},React.createElement("div",{className:"fontSizeM text-ellipsis"},s)),o?React.createElement("div",{className:"flex-row"},isGithubUser(t)&&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"},o)):void 0)),e&&React.createElement(Button,{ariaLabel:format(Resources.RemoveFromRecent,s),className:"identity-picker-delete-icon",iconProps:{iconName:"Cancel",className:"flex-shrink"},onClick:e=>{this.props.onRemoveFromMRU&&this.props.onRemoveFromMRU(t),e.preventDefault(),e.stopPropagation(),document.dispatchEvent(new CustomEvent("vss-telemetry-proxy",{detail:{area:"vss-identity-picker",component:"IdentityPickerSuggestionItem",feature:"IdentityPicker.MRU",level:3,method:"onRemoveButtonClick",message:"Remove button clicked to remove identity from MRU"},bubbles:!0}))},onBlur:this.props.onBlur,onFocus:this.props.onFocus,onKeyDown:this.onRemoveButtonKeyDown,ref:this.removeButtonRef,subtle:!0,tooltipProps:{text:format(Resources.RemoveFromRecent,s),showOnFocus:!0},tabIndex:this.state.focused?0:-1,ariaHidden:!this.state.focused}),!!this.props.onOpenPersonaCard&&shouldShowIdentityCard(t)&&React.createElement(Button,{ariaLabel:Resources.IdentityPickerProfileCardButtonTooltip,className:"bolt-contact-card-button flex-noshrink",iconProps:{iconName:"ContactCard",className:"flex-shrink"},onClick:e=>{this.props.onOpenPersonaCard&&this.props.onOpenPersonaCard(t),e.preventDefault()},onBlur:this.props.onBlur,onFocus:this.props.onFocus,onKeyDown:e?this.onContactCardButtonKeyDown:void 0,ref:this.contactCardButtonRef,subtle:!0,tooltipProps:{text:Resources.IdentityPickerProfileCardButtonTooltip,showOnFocus:!0},tabIndex:this.state.focused?0:-1,ariaHidden:!this.state.focused}))}focus(){isRemoveMRUFixEnabled()&&this.removeButtonRef.current?(this.removeButtonRef.current.focus(),document.dispatchEvent(new CustomEvent("vss-telemetry-proxy",{detail:{area:"vss-identity-picker",component:"IdentityPickerSuggestionItem",feature:"IdentityPicker.MRU",level:3,method:"focus",message:"Focus set on remove button"},bubbles:!0}))):this.contactCardButtonRef.current&&this.contactCardButtonRef.current.focus()}}export{IdentityPickerSuggestionItem};