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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./IdentityPicker.css";import*as React from"react";import*as Resources from"../../Resources.IdentityPicker";import{ObservableArray,ObservableLike,ObservableValue}from"../../Core/Observable";import{makeCancelable}from"../../Core/Util/Promise";import{format,localeIgnoreCaseComparer,startsWith}from"../../Core/Util/String";import{IconSize}from"../../Icon";import{IdentityCard}from"../../IdentityCard";import{Observer}from"../../Observer";import{Persona,PersonaSize}from"../../Persona";import{TagPicker}from"../../TagPicker";import{Tooltip}from"../../TooltipEx";import{KeyCode}from"../../Util";import{shouldShowIdentityCard}from"../IdentityPickerDropdown/IdentityPickerUtils";import{IdentityType}from"../IdentityPickerDropdown/SharedIdentityPicker.Props";import{IdentityPickerSuggestionItem}from"../IdentityPickerSuggestionsList/IdentityPickerSuggestionItem";class IdentityPicker extends React.Component{constructor(e){super(e),this.resolveEmailPromises=[],this.itemRefs={},this.tagPickerRef=React.createRef(),this.openedIdentityCard=new ObservableValue(void 0),this.outerElement=React.createRef(),this.lastSearchVal="",this.suggestions=new ObservableArray([]),this.suggestionsLoading=new ObservableValue(!1),this._isMounted=!1,this.nonIdentitySuggestions=[],this.areTagsEqual=(e,t)=>e.entityId===t.entityId,this.renderSuggestionItem=t=>React.createElement("div",{className:"flex-row flex-grow full-width",onKeyDown:this.onKeyDownSuggestionItem},React.createElement(IdentityPickerSuggestionItem,Object.assign({},t,{onOpenPersonaCard:this.onOpenPersonaCard,ref:e=>this.itemRefs[t.item.entityId]=e,renderSuggestion:this.props.renderCustomIdentitySuggestion&&this.renderCustomSuggestionItem}))),this.onKeyDownSuggestionItem=e=>{e.defaultPrevented||e.which!==KeyCode.leftArrow&&e.which!==KeyCode.escape&&e.which!==KeyCode.tab||this.tagPickerRef.current&&(this.tagPickerRef.current.focus(),e.preventDefault())},this.createDefaultItem=e=>({displayName:e,originDirectory:"email",originId:e,entityId:e,entityType:IdentityType.Custom}),this.onOpenPersonaCard=e=>{shouldShowIdentityCard(e)&&(this.openedIdentityCard.value=e,this.outerElement.current)&&this.outerElement.current.dispatchEvent(new CustomEvent("vss-telemetry-proxy",{detail:{area:IdentityPicker.area,component:"IdentityPicker",feature:IdentityPicker.feature,level:3,method:"openPersonaCard",message:"",properties:{}},bubbles:!0}))},this.onClosePersonaCard=()=>{this.openedIdentityCard.value=void 0,this.tagPickerRef.current.focus()},this.shouldBlurClear=()=>void 0===this.openedIdentityCard.value,this.onEmptyInputFocus=()=>{this.updateSuggestionsList(this.props.pickerProvider.onEmptyInputFocus())},this.focusContactCardButton=e=>{this.itemRefs[e.entityId]&&this.itemRefs[e.entityId].focus()},this.onAddIdentity=async t=>{if(this.setStateSafe({error:""}),this.props.pickerProvider.addIdentitiesToMRU)try{await this.props.pickerProvider.addIdentitiesToMRU([t]),this.props.onIdentityAdded(t)}catch(e){this.setStateSafe({error:e.message}),this.props.onIdentityRemoved(t)}else this.props.onIdentityAdded(t)},this.onDelimitedSearch=e=>{e.map(e=>e.trim()).forEach(e=>{this.updateResolvedEmail(this.props.pickerProvider.onFilterIdentities(e),e),this.props.onIdentityAdded(this.createDefaultItem(e))}),this.tagPickerRef.current&&this.tagPickerRef.current.clearTagPicker()},this.renderCustomSuggestionItem=e=>this.props.renderCustomIdentitySuggestion&&this.props.renderCustomIdentitySuggestion(e.item),this.convertItemToPill=(e,t)=>{var i="email"===e.originDirectory;return this.props.convertItemToPill&&e.entityType===IdentityType.Custom?this.props.convertItemToPill(e,t):{className:"bolt-identity-picker-pill flex-row",content:i?React.createElement(Tooltip,{text:format(Resources.UnknownUserOrGroup,e.displayName)},React.createElement("div",{className:"bolt-identity-picker-unresolved-email"},e.displayName)):e.displayName||e.mailNickname,role:"presentation",onRenderFilledVisual:i?void 0:()=>React.createElement(Persona,{ariaLabel:"",className:"flex-row flex-center",identity:e,size:PersonaSize.size20,role:"presentation"})}},this.onResolveSuggestions=e=>{this.setStateSafe({error:""}),this.lastSearchVal=e;var t=this.props.pickerProvider.onFilterIdentities(e,ObservableLike.getValue(this.props.selectedIdentities));null!==t&&(this.cachedResults[e]?this.suggestions.value=this.cachedResults[e].filter(t=>!ObservableLike.getValue(this.props.selectedIdentities).some(e=>e.entityId===t.entityId)):this.updateSuggestionsList(t,e))},this.setStateSafe=e=>{this._isMounted&&this.setState(e)},this.cachedResults={},this.state={error:""}}render(){return React.createElement("div",{className:this.props.className,ref:this.outerElement},React.createElement(Observer,{openedIdentityCard:this.openedIdentityCard},e=>React.createElement(React.Fragment,null,React.createElement(TagPicker,{ariaLabel:this.props.ariaLabel,ariaLabelledBy:this.props.ariaLabelledBy,suggestionsLoading:this.suggestionsLoading,areTagsEqual:this.areTagsEqual,convertItemToPill:this.convertItemToPill,deliminator:this.props.onResolveEntity&&";",noResultsFoundText:Resources.IdentityPickerNoResultsText,onBlur:this.props.onBlur,onDelimitedSearch:this.props.onResolveEntity&&this.onDelimitedSearch,onEmptyInputFocus:this.onEmptyInputFocus,onSearchChanged:this.onResolveSuggestions,onSuggestionExpanded:this.focusContactCardButton,onTagAdded:this.onAddIdentity,onTagRemoved:this.props.onIdentityRemoved,onTagsRemoved:this.props.onIdentitiesRemoved,placeholderText:this.props.placeholderText||Resources.MultiIdentityPickerPlaceholderText,prefixIconProps:{className:"bolt-identity-picker-contact-icon secondary-text justify-center flex-center",iconName:"Contact",size:IconSize.medium},ref:this.tagPickerRef,renderSuggestionItem:this.renderSuggestionItem,shouldBlurClear:this.shouldBlurClear,selectedTags:this.props.selectedIdentities,suggestions:this.suggestions,suggestionsLoadingText:Resources.Loading,suggestionsContainerAriaLabel:this.props.suggestionsContainerAriaLabel}),e.openedIdentityCard&&React.createElement(IdentityCard,{getEntityFromUniqueAttribute:this.props.pickerProvider.getEntityFromUniqueAttribute,key:e.openedIdentityCard.entityId,identity:e.openedIdentityCard,displayName:e.openedIdentityCard.displayName,target:this.outerElement.current,onDismissCallback:this.onClosePersonaCard,onRequestConnectionInformation:this.props.pickerProvider.onRequestConnectionInformation}),React.createElement("div",{className:"bolt-identity-picker-error"},this.state.error))))}componentDidMount(){this._isMounted=!0}componentWillUnmount(){this._isMounted=!1,this.currentPromise&&this.currentPromise.cancel();for(const e of this.resolveEmailPromises)e.cancel()}updateResolvedEmail(e,i){const t=e;Array.isArray(t)?this.props.onResolveEntity&&1===t.length&&this.props.onResolveEntity(i,ObservableLike.getValue(this.props.selectedIdentities).some(e=>e.entityId===t[0].entityId)?null:t[0]):e&&e.then&&(this.currentPromise=makeCancelable(e)).promise.then(t=>{this.props.onResolveEntity&&1===t.length&&this.props.onResolveEntity(i,ObservableLike.getValue(this.props.selectedIdentities).some(e=>e.entityId===t[0].entityId)?null:t[0])})}updateSuggestionsList(e,i){var t=e;if(Array.isArray(t))this.suggestions.value=t.filter(t=>!ObservableLike.getValue(this.props.selectedIdentities).some(e=>e.entityId===t.entityId));else if(e&&e.then){this.suggestionsLoading.value=!0;let t=[];this.props.pickerProvider.getAdditionalEntries&&(this.nonIdentitySuggestions=this.props.pickerProvider.getAdditionalEntries().map(e=>({displayName:e,entityType:IdentityType.Custom,entityId:e,originDirectory:"",originId:""})),t=this.nonIdentitySuggestions&&i?this.nonIdentitySuggestions.filter(e=>startsWith(e.displayName,i)):this.nonIdentitySuggestions);const s=this.currentPromise=makeCancelable(e);this.resolveEmailPromises.push(s),s.promise.then(e=>{this.resolveEmailPromises=this.resolveEmailPromises.filter(e=>e!==s),s===this.currentPromise&&(e=t.length?[...e,...t].sort((e,t)=>localeIgnoreCaseComparer(e.displayName,t.displayName)):e,i&&this.lastSearchVal!==i||(this.suggestions.value=e.filter(t=>!ObservableLike.getValue(this.props.selectedIdentities).some(e=>e.entityId===t.entityId))),i&&""!==i&&this.suggestions.value&&0<this.suggestions.value.length&&(this.cachedResults[i]=e),this.suggestionsLoading.value=!1)},()=>{this.resolveEmailPromises=this.resolveEmailPromises.filter(e=>e!==s)})}}}IdentityPicker.area="IdentityPicker",IdentityPicker.feature="MRU";export{IdentityPicker};