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

React components for building web UI in Azure DevOps

import{__assign,__awaiter,__extends,__generator,__spreadArray}from"tslib";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,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";var IdentityPicker=function(t){function e(e){var n=t.call(this,e)||this;return n.resolveEmailPromises=[],n.itemRefs={},n.tagPickerRef=React.createRef(),n.openedIdentityCard=new ObservableValue(void 0),n.outerElement=React.createRef(),n.lastSearchVal="",n.suggestions=new ObservableArray([]),n.suggestionsLoading=new ObservableValue(!1),n._isMounted=!1,n.nonIdentitySuggestions=[],n.areTagsEqual=function(e,t){return e.entityId===t.entityId},n.renderSuggestionItem=function(t){return React.createElement("div",{className:"flex-row flex-grow full-width",onKeyDown:n.onKeyDownSuggestionItem},React.createElement(IdentityPickerSuggestionItem,__assign({},t,{onOpenPersonaCard:n.onOpenPersonaCard,ref:function(e){return n.itemRefs[t.item.entityId]=e},renderSuggestion:n.props.renderCustomIdentitySuggestion&&n.renderCustomSuggestionItem})))},n.onKeyDownSuggestionItem=function(e){e.defaultPrevented||e.which!==KeyCode.leftArrow&&e.which!==KeyCode.escape&&e.which!==KeyCode.tab||n.tagPickerRef.current&&(n.tagPickerRef.current.focus(),e.preventDefault())},n.createDefaultItem=function(e){return{displayName:e,originDirectory:"email",originId:e,entityId:e,entityType:IdentityType.Custom}},n.onOpenPersonaCard=function(e){shouldShowIdentityCard(e)&&(n.openedIdentityCard.value=e)},n.onClosePersonaCard=function(){n.openedIdentityCard.value=void 0,n.tagPickerRef.current.focus()},n.shouldBlurClear=function(){return void 0===n.openedIdentityCard.value},n.onEmptyInputFocus=function(){n.updateSuggestionsList(n.props.pickerProvider.onEmptyInputFocus())},n.focusContactCardButton=function(e){n.itemRefs[e.entityId]&&n.itemRefs[e.entityId].focus()},n.onAddIdentity=function(r){return __awaiter(n,void 0,void 0,function(){var t;return __generator(this,function(e){switch(e.label){case 0:if(this.setStateSafe({error:""}),!this.props.pickerProvider.addIdentitiesToMRU)return[3,5];e.label=1;case 1:return e.trys.push([1,3,,4]),[4,this.props.pickerProvider.addIdentitiesToMRU([r])];case 2:return e.sent(),this.props.onIdentityAdded(r),[3,4];case 3:return t=e.sent(),this.setStateSafe({error:t.message}),this.props.onIdentityRemoved(r),[3,4];case 4:return[3,6];case 5:this.props.onIdentityAdded(r),e.label=6;case 6:return[2]}})})},n.onDelimitedSearch=function(e){e.map(function(e){return e.trim()}).forEach(function(e){n.updateResolvedEmail(n.props.pickerProvider.onFilterIdentities(e),e),n.props.onIdentityAdded(n.createDefaultItem(e))}),n.tagPickerRef.current&&n.tagPickerRef.current.clearTagPicker()},n.renderCustomSuggestionItem=function(e){return n.props.renderCustomIdentitySuggestion&&n.props.renderCustomIdentitySuggestion(e.item)},n.convertItemToPill=function(e,t){var r="email"===e.originDirectory;return n.props.convertItemToPill&&e.entityType===IdentityType.Custom?n.props.convertItemToPill(e,t):{className:"bolt-identity-picker-pill flex-row",content:r?React.createElement(Tooltip,{text:format(Resources.UnknownUserOrGroup,e.displayName)},React.createElement("div",{className:"bolt-identity-picker-unresolved-email"},e.displayName)):e.displayName||e.mailNickname,onRenderFilledVisual:r?void 0:function(){return React.createElement(Persona,{ariaLabel:"",className:"flex-row flex-center",identity:e,size:PersonaSize.size20})}}},n.onResolveSuggestions=function(e){n.setStateSafe({error:""}),n.lastSearchVal=e;var t=n.props.pickerProvider.onFilterIdentities(e,ObservableLike.getValue(n.props.selectedIdentities));null!==t&&(n.cachedResults[e]?n.suggestions.value=n.cachedResults[e].filter(function(t){return!ObservableLike.getValue(n.props.selectedIdentities).some(function(e){return e.entityId===t.entityId})}):n.updateSuggestionsList(t,e))},n.setStateSafe=function(e){n._isMounted&&n.setState(e)},n.cachedResults={},n.state={error:""},n}return __extends(e,t),e.prototype.render=function(){var t=this;return React.createElement("div",{className:this.props.className,ref:this.outerElement},React.createElement(Observer,{openedIdentityCard:this.openedIdentityCard},function(e){return React.createElement(React.Fragment,null,React.createElement(TagPicker,{ariaLabel:t.props.ariaLabel,ariaLabelledBy:t.props.ariaLabelledBy,suggestionsLoading:t.suggestionsLoading,areTagsEqual:t.areTagsEqual,convertItemToPill:t.convertItemToPill,deliminator:t.props.onResolveEntity&&";",noResultsFoundText:Resources.IdentityPickerNoResultsText,onBlur:t.props.onBlur,onDelimitedSearch:t.props.onResolveEntity&&t.onDelimitedSearch,onEmptyInputFocus:t.onEmptyInputFocus,onSearchChanged:t.onResolveSuggestions,onSuggestionExpanded:t.focusContactCardButton,onTagAdded:t.onAddIdentity,onTagRemoved:t.props.onIdentityRemoved,onTagsRemoved:t.props.onIdentitiesRemoved,placeholderText:t.props.placeholderText||Resources.MultiIdentityPickerPlaceholderText,prefixIconProps:{className:"bolt-identity-picker-contact-icon secondary-text justify-center flex-center",iconName:"Contact",size:IconSize.medium},ref:t.tagPickerRef,renderSuggestionItem:t.renderSuggestionItem,shouldBlurClear:t.shouldBlurClear,selectedTags:t.props.selectedIdentities,suggestions:t.suggestions,suggestionsLoadingText:Resources.Loading,suggestionsContainerAriaLabel:t.props.suggestionsContainerAriaLabel}),e.openedIdentityCard&&React.createElement(IdentityCard,{getEntityFromUniqueAttribute:t.props.pickerProvider.getEntityFromUniqueAttribute,key:e.openedIdentityCard.entityId,identity:e.openedIdentityCard,displayName:e.openedIdentityCard.displayName,target:t.outerElement.current,onDismissCallback:t.onClosePersonaCard,onRequestConnectionInformation:t.props.pickerProvider.onRequestConnectionInformation,imageUrlResolver:t.props.imageUrlResolver}),React.createElement("div",{className:"bolt-identity-picker-error"},t.state.error))}))},e.prototype.componentDidMount=function(){this._isMounted=!0},e.prototype.componentWillUnmount=function(){this._isMounted=!1,this.currentPromise&&this.currentPromise.cancel();for(var e=0,t=this.resolveEmailPromises;e<t.length;e++)t[e].cancel()},e.prototype.updateResolvedEmail=function(e,r){var n=this,t=e;Array.isArray(t)?this.props.onResolveEntity&&1===t.length&&this.props.onResolveEntity(r,ObservableLike.getValue(this.props.selectedIdentities).some(function(e){return e.entityId===t[0].entityId})?null:t[0]):e&&e.then&&(this.currentPromise=makeCancelable(e)).promise.then(function(t){n.props.onResolveEntity&&1===t.length&&n.props.onResolveEntity(r,ObservableLike.getValue(n.props.selectedIdentities).some(function(e){return e.entityId===t[0].entityId})?null:t[0])})},e.prototype.updateSuggestionsList=function(e,t){var r,n=this,i=e,o=[];this.props.pickerProvider.getAdditionalEntries&&(this.nonIdentitySuggestions=this.props.pickerProvider.getAdditionalEntries().map(function(e){return{displayName:e,entityType:IdentityType.Custom,entityId:e,originDirectory:"",originId:""}}),o=this.nonIdentitySuggestions&&t?this.nonIdentitySuggestions.filter(function(e){return startsWith(e.displayName,t)}):this.nonIdentitySuggestions),Array.isArray(i)?(i=o.length?__spreadArray(__spreadArray([],i,!0),o,!0):i,this.suggestions.value=i.filter(function(t){return!ObservableLike.getValue(n.props.selectedIdentities).some(function(e){return e.entityId===t.entityId})})):e&&e.then&&(this.suggestionsLoading.value=!0,r=this.currentPromise=makeCancelable(e),this.resolveEmailPromises.push(r),r.promise.then(function(e){n.resolveEmailPromises=n.resolveEmailPromises.filter(function(e){return e!==r}),r===n.currentPromise&&(e=o.length?__spreadArray(__spreadArray([],e,!0),o,!0):e,t&&n.lastSearchVal!==t||(n.suggestions.value=e.filter(function(t){return!ObservableLike.getValue(n.props.selectedIdentities).some(function(e){return e.entityId===t.entityId})})),t&&""!==t&&n.suggestions.value&&0<n.suggestions.value.length&&(n.cachedResults[t]=e),n.suggestionsLoading.value=!1)},function(){n.resolveEmailPromises=n.resolveEmailPromises.filter(function(e){return e!==r})}))},e.area="IdentityPicker",e.feature="MRU",e}(React.Component);export{IdentityPicker};