azure-devops-ui/Components/IdentityPickerDropdown/CustomIdentityPickerDropdown.min.js

React components for building web UI in Azure DevOps

import{__assign,__extends,__spreadArray}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./IdentityPickerDropdown.css";import*as React from"react";import*as Resources from"../../Resources.IdentityPicker";import{ObservableArray,ObservableLike,ObservableValue}from"../../Core/Observable";import{TimerManagement}from"../../Core/TimerManagement";import{makeCancelable}from"../../Core/Util/Promise";import{format,startsWith}from"../../Core/Util/String";import{FocusWithin}from"../../FocusWithin";import{Icon,IconSize}from"../../Icon";import{Measure}from"../../Measure";import{Observer}from"../../Observer";import{Persona,PersonaSize}from"../../Persona";import{TextField}from"../../TextField";import{css,KeyCode}from"../../Util";import{Location}from"../../Utilities/Position";import{IdentityPickerSuggestionItem}from"../IdentityPickerSuggestionsList/IdentityPickerSuggestionItem";import{IdentityPickerSuggestionsList}from"../IdentityPickerSuggestionsList/IdentityPickerSuggestionsList";import{shouldShowIdentityCard}from"./IdentityPickerUtils";import{IdentityType}from"./SharedIdentityPicker.Props";var textFieldId=1,CustomIdentityPickerDropdown=function(t){function e(e){var s=t.call(this,e)||this;return s.focusWithin=React.createRef(),s.inputElement=React.createRef(),s.itemRefs={},s.openedIdentityCard=new ObservableValue(void 0),s.outerElement=React.createRef(),s.nonIdentitySuggestions=[],s.suggestionsLoading=new ObservableValue(!1),s.isEditing=new ObservableValue(!1),s.selectedIndex=new ObservableValue(-1),s.suggestions=new ObservableArray([]),s.textFieldId="identity-picker-downdown-textfield-".concat(textFieldId++),s.onPickerDismiss=function(){s.props.onSuggestionsVisibleChanged(!1)},s.renderSuggestionItem=function(t){return React.createElement("div",{className:"flex-row flex-grow scroll-hidden",onKeyDown:s.onKeyDownSuggestionItem},React.createElement(IdentityPickerSuggestionItem,__assign({},t,{onOpenPersonaCard:s.openPersonaCard,ref:function(e){return s.itemRefs[t.item.entityId]=e},renderSuggestion:s.props.renderCustomIdentitySuggestion&&s.renderCustomSuggestionItem})))},s.renderCustomSuggestionItem=function(e){return s.props.renderCustomIdentitySuggestion&&s.props.renderCustomIdentitySuggestion(e.item)},s.renderPersonaCoin=function(t){return React.createElement(Observer,{selectedIdentity:s.props.value,isEditing:s.isEditing},function(e){return e.selectedIdentity&&!e.isEditing?React.createElement(Persona,{className:css("flex-row flex-center justify-center",t),identity:e.selectedIdentity,size:PersonaSize.size24}):React.createElement(Icon,{className:css("flex-row flex-center justify-center",t),iconName:"Contact",size:IconSize.medium})})},s.openPersonaCard=function(e){shouldShowIdentityCard(e)&&(s.openedIdentityCard.value=e)},s.closePersonaCard=function(){s.openedIdentityCard.value=void 0,s.inputElement.current&&(s.inputElement.current.focus(),ObservableLike.getValue(s.props.suggestionsVisible)||s.props.onSuggestionsVisibleChanged(!0))},s.completeSuggestion=function(){var e=0<s.suggestions.value.length&&ObservableLike.getValue(s.props.suggestionsVisible)&&-1!==s.selectedIndex.value?s.suggestions.value[s.selectedIndex.value]:(s.selectedIndex.value=-1,s.props.resolveUnrecognizedIdentity&&s.props.resolveUnrecognizedIdentity(ObservableLike.getValue(s.props.textValue)));return s.selectedPersonaChanged(e),e&&s.props.onSuggestionsVisibleChanged(!1),Boolean(e)},s.onBlur=function(){s.props.onSuggestionsVisibleChanged(!1),s.openedIdentityCard.value||(""===ObservableLike.getValue(s.props.textValue)&&s.selectedPersonaChanged(),s.props.onBlur&&s.props.onBlur())},s.onClearClicked=function(e){s.clear(),e.preventDefault()},s.onClearKeyDown=function(e){e.which===KeyCode.enter&&(s.clear(),e.preventDefault())},s.clear=function(){var e;s.props.onClear&&s.props.onClear(),s.props.onChange(void 0),s.lastPickedIdentity=void 0,s.suggestions.value=[],null!=(e=s.inputElement.current)&&e.focus()},s.onClick=function(){(""===ObservableLike.getValue(s.props.textValue)&&s.props.pickerProvider.onEmptyInputFocus||ObservableLike.getValue(s.props.value)&&0===s.suggestions.length)&&s.updateSuggestionsList(s.props.pickerProvider.onEmptyInputFocus()),s.props.onSuggestionsVisibleChanged(!ObservableLike.getValue(s.props.suggestionsVisible)),s.inputElement.current.select()},s.onFocus=function(e){var t=s.props.onFocus;""===ObservableLike.getValue(s.props.textValue)&&s.props.pickerProvider.onEmptyInputFocus&&!ObservableLike.getValue(s.props.suggestionsVisible)&&s.updateSuggestionsList(s.props.pickerProvider.onEmptyInputFocus()),t&&t(e)},s.onKeyDown=function(e){if(!e.isDefaultPrevented()){var t=e.which,n=ObservableLike.getValue(s.props.suggestionsVisible),o=s.inputElement.current&&s.inputElement.current.inputElement.current;switch(t){case KeyCode.escape:!s.openedIdentityCard.value||s.suggestions.value&&s.suggestions.value[s.selectedIndex.value]||s.selectedPersonaChanged(),n&&(s.props.onSuggestionsVisibleChanged(!1),s.openedIdentityCard.value=void 0,e.stopPropagation());break;case KeyCode.tab:case KeyCode.enter:!e.shiftKey&&n?s.completeSuggestion()&&(e.preventDefault(),e.stopPropagation()):n?s.completeSuggestion():t===KeyCode.enter&&o&&!o.value&&s.selectedPersonaChanged(void 0);break;case KeyCode.rightArrow:s.suggestions.value&&s.suggestions.value[s.selectedIndex.value]&&o&&o.value.length===o.selectionEnd&&(s.focusContactCardButton(s.suggestions.value[s.selectedIndex.value]),e.preventDefault());break;case KeyCode.upArrow:n&&s.suggestions.value&&(s.selectedIndex.value=Math.max(0,s.selectedIndex.value-1),s.forceUpdate(),e.preventDefault(),e.stopPropagation());break;case KeyCode.downArrow:n&&s.suggestions.value?(s.selectedIndex.value=Math.min(s.suggestions.value.length-1,s.selectedIndex.value+1),s.forceUpdate(),e.preventDefault(),e.stopPropagation()):s.props.onSuggestionsVisibleChanged(!0)}}},s.onKeyDownSuggestionItem=function(e){e.defaultPrevented||e.which!==KeyCode.leftArrow&&e.which!==KeyCode.escape&&e.which!==KeyCode.tab||s.inputElement.current&&(s.inputElement.current.focus(),e.preventDefault())},s.focusContactCardButton=function(e){s.itemRefs[e.entityId]&&s.itemRefs[e.entityId].focus()},s.onResolveSuggestions=function(e){var t=s.props.pickerProvider.onFilterIdentities(e.toLocaleLowerCase(),[]);null!==t&&s.updateSuggestionsList(t,e)},s.onSearchChange=function(e,t){var n;0==t.length&&(n=s.props.onClear)&&n(),s.selectedIndex.value=-1,s.isEditing.value=!0,s.props.onInputChange(t),s.updateValue(t)},s.onSuggestionClick=function(e){s.selectedIndex.value=e.index,s.selectedPersonaChanged(e.item),s.props.onSuggestionsVisibleChanged(!1)},s.onTextFieldChanged=function(e,t){s.setState({width:Math.max(e,296)})},s.selectedPersonaChanged=function(e){s.lastPickedIdentity!==e&&e&&s.props.pickerProvider.addIdentitiesToMRU&&s.props.pickerProvider.addIdentitiesToMRU([e]),!1!==s.props.onChange(e)?(s.props.onInputChange(e?e.displayName:""),s.lastPickedIdentity=e):(s.props.onInputChange(""),s.props.onChange(void 0),s.lastPickedIdentity=void 0),s.isEditing.value=!1},s.updateValue=function(e){s.props.onSuggestionsVisibleChanged(!!e),s.cachedResults[e]?s.updateSuggestionsList(s.cachedResults[e],e):s.onResolveSuggestions(e)},s.cachedResults={},s.timerManagement=new TimerManagement,s.lastPickedIdentity=ObservableLike.getValue(e.value),s.state={width:296},s}return __extends(e,t),e.prototype.render=function(){var r=this,e=this.props,a=e.ariaLabel,u=e.ariaLabelledBy,l=e.autoFocus,d=e.disabled,t=e.editPlaceholder,c=void 0===t?Resources.IdentityPickerPlaceholderFocusText:t,t=e.placeholder,p=void 0===t?Resources.IdentityPickerPlaceholderText:t,g=e.required;return React.createElement(Observer,{suggestionsVisible:this.props.suggestionsVisible},function(i){return React.createElement(FocusWithin,{onBlur:r.onBlur,onFocus:r.onFocus,ref:r.focusWithin},function(s){return React.createElement(React.Fragment,null,React.createElement(Observer,{selectedIdentity:r.props.value,selectedIndex:r.selectedIndex,suggestionsLoading:r.suggestionsLoading,textValue:r.props.textValue},function(e){i.suggestionsVisible&&(t=-1===e.selectedIndex||e.suggestionsLoading?"sug-list-transition":r.suggestions&&r.suggestions.length?"sug-row-".concat(e.selectedIndex):"sug-list-no-results");var t,n=i.suggestionsVisible?"tag-picker-callout":void 0,o=s.hasFocus||e.selectedIdentity?c:p;return React.createElement(Measure,{onMeasure:r.onTextFieldChanged},React.createElement("div",{className:"bolt-identitypickerdropdown flex-row flex-grow",ref:r.outerElement,onKeyDown:r.onKeyDown},React.createElement(TextField,{ariaExpanded:i.suggestionsVisible,ariaActiveDescendant:t,ariaAutoComplete:"list",ariaControls:n,autoFocus:l,ariaHasPopup:"listbox",ariaLabel:a||(""===e.textValue?o:e.textValue),ariaLabelledBy:u,className:css(r.props.className,"bolt-identitypickerdropdown-textField flex-row flex-center",s.hasFocus&&"bolt-identitypickerdropdown-open"),containerClassName:"bolt-identitypickerdropdown-container flex-column flex-grow",inputId:null!=(t=r.props.inputId)?t:r.textFieldId,onBlur:s.onBlur,onChange:r.onSearchChange,onClick:r.onClick,onFocus:s.onFocus,prefixIconProps:{render:r.renderPersonaCoin},placeholder:o,ref:r.inputElement,required:g,role:"combobox",suffixIconProps:e.textValue&&!d?{ariaHidden:"false",iconName:"Clear",className:"bolt-identity-picker-clearButton fontSize",role:"button",ariaLabel:format(Resources.Remove,e.textValue),onClick:r.onClearClicked,onKeyDown:r.onClearKeyDown,tabIndex:0}:void 0,value:e.textValue,disabled:d})))}),React.createElement(Observer,{openedIdentityCard:r.openedIdentityCard,selectedIndex:r.selectedIndex},function(e){return React.createElement(IdentityPickerSuggestionsList,{calloutProps:{anchorElement:r.outerElement.current,anchorOrigin:{horizontal:Location.start,vertical:Location.end},calloutOrigin:{horizontal:Location.start,vertical:Location.start},contentShadow:!0,id:"tag-picker-callout",onDismiss:r.onPickerDismiss,role:"presentation"},suggestionsVisible:i.suggestionsVisible||!!e.openedIdentityCard,isLoading:r.suggestionsLoading,onBlur:s.onBlur,onFocus:s.onFocus,onSuggestionClicked:r.onSuggestionClick,onClosePersonaCard:r.closePersonaCard,onDismiss:r.onPickerDismiss,onOpenPersonaCard:r.openPersonaCard,openedIdentityCard:e.openedIdentityCard,pickerProvider:r.props.pickerProvider,renderSuggestion:r.renderSuggestionItem,suggestions:r.suggestions,suggestionTarget:r.outerElement.current,selectedIndex:e.selectedIndex,width:r.state.width,resultsMaximumNumber:r.props.suggestionItemsMaximumCount,suggestionsContainerAriaLabel:r.props.suggestionsContainerAriaLabel})}))})})},e.prototype.componentDidMount=function(){this.updateValue=this.timerManagement.debounce(this.updateValue,250),this.props.autoFocus&&(ObservableLike.getValue(this.props.textValue),this.props.pickerProvider.onEmptyInputFocus,this.updateSuggestionsList(this.props.pickerProvider.onEmptyInputFocus()),this.inputElement.current&&this.inputElement.current.select(),this.props.onSuggestionsVisibleChanged(!0)),this.setState({width:this.outerElement.current.clientWidth})},e.prototype.componentWillUnmount=function(){this.currentPromise&&this.currentPromise.cancel()},e.prototype.updateSuggestionsList=function(e,t){var n,o=this,s=e,i=[];this.props.pickerProvider.getAdditionalEntries&&(this.nonIdentitySuggestions=this.props.pickerProvider.getAdditionalEntries().map(function(e){return{displayName:e,entityType:IdentityType.Custom,entityId:e,originDirectory:"",originId:""}}),i=this.nonIdentitySuggestions&&t?this.nonIdentitySuggestions.filter(function(e){return startsWith(e.displayName,t)}):this.nonIdentitySuggestions),Array.isArray(s)?(s=i.length?__spreadArray(__spreadArray([],s,!0),i,!0):s,this.updateSuggestions(s,t)):e&&e.then&&(this.suggestionsLoading.value=!0,(n=this.currentPromise=makeCancelable(e)).promise.then(function(e){n===o.currentPromise&&(e=i.length?__spreadArray(__spreadArray([],e,!0),i,!0):e,o.updateSuggestions(e,t),t&&""!==t&&o.suggestions.value&&0<o.suggestions.value.length&&(o.cachedResults[t]=e),o.suggestionsLoading.value=!1)}))},e.prototype.setSuggestions=function(e,t){var n=this;this.suggestions.value=e,this.updateIndexTimer&&window.cancelAnimationFrame(this.updateIndexTimer),this.updateIndexTimer=window.requestAnimationFrame(function(){n.selectedIndex.value=t})},e.prototype.updateSuggestions=function(e,t){(void 0===t||this.inputElement.current&&ObservableLike.getValue(this.props.textValue)===t)&&this.setSuggestions(e,""===ObservableLike.getValue(this.props.textValue)?-1:0)},e}(React.Component);export{CustomIdentityPickerDropdown};