azure-devops-ui/Components/EditableDropdown/CustomEditableDropdown.min.js

React components for building web UI in Azure DevOps

import{__assign,__extends,__spreadArray}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./EditableDropdown.css";import*as React from"react";import{ObservableArray,ObservableLike,ObservableValue}from"../../Core/Observable";import{TimerManagement}from"../../Core/TimerManagement";import{equals,startsWith}from"../../Core/Util/String";import{Dropdown,DropdownCallout,DropdownExpandableTextField,filterItems}from"../../Dropdown";import{isListBoxItemVisible,ListBoxItemType,renderListBoxCell}from"../../ListBox";import{Observer}from"../../Observer";import*as Resources from"../../Resources.Dropdown";import{convertSpecialSymbols,css,KeyCode}from"../../Util";import{DropdownSelection}from"../../Utilities/DropdownSelection";import{EditableDropdownItemProvider}from"../../Utilities/EditableDropdownItemProvider";import{filterTreeItems,renderHighlightedText}from"../Dropdown/Dropdown";var CustomEditableDropdown=function(t){function e(e){var i=t.call(this,e)||this;return i.dropdown=React.createRef(),i.listBox=React.createRef(),i.filteredIndexMap=new ObservableValue([]),i.filterMatches=[],i.collapse=function(){i.dropdown.current&&i.dropdown.current.collapse()},i.expand=function(){i.dropdown.current&&i.dropdown.current.expand()},i.renderItem=function(e,t,r,o){return i.wrapWithFocusedIndexObserver(e,t,r,o,function(e,t,r,o){var n=i.filterMatches[e];return!o.render&&n&&n.length&&(o.render=function(e,t,r,o){return renderHighlightedText(e,t,r,o,n)}),i.props.renderItem(e,t,r,o)})},i.wrapWithFocusedIndexObserver=function(t,r,o,n,l){return React.createElement(Observer,{focusedIndex:{observableValue:i.focusedIndex,filter:function(){var e=i.filteredIndexMap.value[t];return e===i.focusedIndex.value||e===i.previousFocusedIndex}},key:"focused-observer-".concat(t,"-").concat(r)},function(){var e=i.filteredIndexMap.value[t]===i.focusedIndex.value&&(null==(e=n)?void 0:e.type)!==ListBoxItemType.Loading?__assign(__assign({},n),{className:css(n.className,"bolt-editable-dropdown-focused-item")}):__assign({},n);return l(t,r,o,e)})},i.onCollapse=function(){var e=i.props,t=e.allowFreeform,r=e.autoAccept,o=e.onCollapse,n=e.onValueChange,l=e.showTree,s=e.text,o=(o&&o(),i.selectedItemInList||-1<(e=i.itemProvider.value.findIndex(function(e,t){return i.selection.selectable(t)&&e.text===ObservableLike.getValue(s||"")}))&&i.selectIndex(e),i.itemProvider.length-1);!t||i.selection.value.length&&i.selection.value[0].beginIndex!==o&&i.selectedItemInList||!i.itemProvider.hasExtraItem?l&&i.lastSelectedItem?n&&n(i.lastSelectedItem):i.selection.value.length&&(e=i.itemProvider.value[i.selection.value[0].beginIndex],n)&&n(e):((r||i.selectedItemInList||i.selectedFreeform)&&(t=i.itemProvider.value[o].id,n)&&n({id:t,text:t}),i.selectedFreeform=!1,i.selection.clear()),null!=(r=(e=i.props).onTextChange)&&r.call(e,null,""),i.isExpanded=!1,i.selectedItemInList=!1,i.lastSelectedItem=void 0,l&&(i.focusedIndex.value=-1)},i.onItemsChange=function(e,t){i.isExpanded&&("change"!==t&&i.filterItems(),i.selectSelectedTextItem())},i.selectSelectedTextItem=function(){var t,e;i.props.selectedText&&(t=ObservableLike.getValue(i.props.selectedText))&&-1<(e=i.itemProvider.value.findIndex(function(e){return e.text===t}))&&i.selection.select(e)},i.onSelect=function(e,t){i.selectedItemInList=!0,i.lastSelectedItem=t},i.renderExpandable=function(s){return React.createElement(Observer,{focusedIndex:i.focusedIndex,selectedText:i.props.selectedText,text:i.props.text},function(e){var t,r=i.props,o=r.allowTextSelection,r=r.inputId,n=e.selectedText,e=e.text,l=i.getFocusedIndex(),l=(-1<l&&i.itemProvider.value[l]&&(t=i.itemProvider.value[l].id),o&&n&&!i.isExpanded?n:e),o=__assign(__assign({},s),{ariaActiveDescendant:convertSpecialSymbols(t),editable:!0,showPrefix:!e,blurDismiss:!0,inputId:r,onChange:i.onTextChange,onKeyDown:i.onKeyDown,value:l});return null==(t=(n=i.props).renderExpandable)?void 0:t.call(n,o)})},i.renderCallout=function(e){e=__assign(__assign({},e),{focusOnMount:!1,excludeTabStop:!0,excludeFocusZone:!0,ignoreMouseDown:!0,listBoxRef:i.listBox});return i.props.renderCallout(e)},i.onExpand=function(){var e,t;i.props.onExpand&&i.props.onExpand(),i.props.filterItems?(t=i.props.filterItems("",i.itemProvider.value),e=i.updateFilteredIndexMap(t.filteredIndexMap),i.filteredItems.value=t.filteredItems,i.focusItem(e)):(i.filteredItems.value=i.itemProvider.value,t=i.updateFilteredIndexMap(i.filteredItems.value.map(function(e,t){return t})),i.focusItem(t)),i.isExpanded=!0},i.onTextChange=function(e,t){var r,o;return null!=(o=(r=i.props).onTextChange)&&o.call(r,e,t),i.props.allowFreeform?(i.itemProvider.hasExtraItem&&i.filteredItems.pop(),i.itemProvider.setTextValue(t),i.props.allowClear&&""===t&&(i.selection.clear(),null!=(r=(o=i.props).onValueChange))&&r.call(o)):""===t&&i.props.allowClear?(i.selection.clear(),null!=(r=(e=i.props).onValueChange)&&r.call(e)):-1<(o=i.itemProvider.value.findIndex(function(e){return e.text===t}))&&i.selection.selectable(o)&&(i.selection.select(o),null!=(e=(r=i.props).onValueChange))&&e.call(r,i.itemProvider.value[o]),i.isExpanded&&i.filterItems(),!1},i.filterItems=function(){var e,t=i.itemProvider.value,r=ObservableLike.getValue(i.props.text||""),t=(i.props.filterItems?o=i.props.filterItems(r,t):r?i.props.showTree?(o=(e=filterTreeItems(t,r,[],i.props.filterItem,i.props.filterMatchedItem))[0],e=e[1]):(o=filterItems(t,r,[],i.props.filterItem),(e=t.findIndex(function(e){return equals(null!=(e=e.text)?e:"",r,!0)}))<0&&(e=t.findIndex(function(e){return startsWith(null!=(e=e.text)?e:"",r,!0)}))):o={filteredItems:t,filteredIndexMap:t.map(function(e,t){return t}),filterMatches:[]},i.filterMatches=o.filterMatches,i.updateFilteredIndexMap(o.filteredIndexMap)),o=(i.filteredItems.value=o.filteredItems,e&&-1<e?e:t);i.focusItem(o)},i.onKeyDown=function(e){var t,r,o=e.which,n=i.isExpanded;switch(o){case KeyCode.escape:i.isExpanded&&(i.collapse(),e.preventDefault());break;case KeyCode.enter:i.isExpanded||(i.expand(),e.preventDefault());case KeyCode.tab:n&&!e.shiftKey&&(i.filteredItems.length||i.props.allowFreeform)&&(0<=(t=i.getFocusedIndex())?i.selectIndex(t):i.selectedFreeform=!0,i.collapse(),e.preventDefault());break;case KeyCode.upArrow:i.isExpanded&&(i.focusPreviousItem(),i.listBox.current)&&i.listBox.current.scrollIntoView(i.filteredIndexMap.value.indexOf(i.focusedIndex.value),{block:"nearest"}),e.preventDefault();break;case KeyCode.rightArrow:i.isExpanded&&i.props.showTree&&(t=i.getFocusedIndex(),(r=i.itemProvider.value[t]).expanded||(i.props.onToggle&&i.props.onToggle(e,r),i.focusNextItem(),i.focusPreviousItem(),i.listBox.current&&i.listBox.current.scrollIntoView(i.filteredIndexMap.value.indexOf(t),{block:"nearest"})));break;case KeyCode.downArrow:i.isExpanded?(i.focusNextItem(),i.listBox.current&&i.listBox.current.scrollIntoView(i.filteredIndexMap.value.indexOf(i.focusedIndex.value),{block:"nearest"})):i.isExpanded||i.expand(),e.preventDefault();break;case KeyCode.leftArrow:i.isExpanded&&i.props.showTree&&(t=i.getFocusedIndex(),(r=i.itemProvider.value[t]).expanded)&&(i.props.onToggle&&i.props.onToggle(e,r),i.focusPreviousItem(),i.focusNextItem(),i.listBox.current)&&i.listBox.current.scrollIntoView(i.filteredIndexMap.value.indexOf(t),{block:"nearest"});break;case KeyCode.delete:case KeyCode.backspace:i.props.allowClear&&!ObservableLike.getValue(i.props.text||"")?(i.selection.clear(),i.props.onValueChange&&i.props.onValueChange()):i.expand();break;case KeyCode.ctrl:case KeyCode.shift:break;default:i.expand()}},i.selection=e.selection||new DropdownSelection,i.itemProvider=new EditableDropdownItemProvider(e.items,i.selection),i.filteredItems=new ObservableArray(__spreadArray([],i.itemProvider.value,!0)),i.focusedIndex=new ObservableValue(-1),i.previousFocusedIndex=-1,i.timerManagement=new TimerManagement,i.filteredIndexMap.value=i.itemProvider.value.map(function(e,t){return t}),i.selectSelectedTextItem(),i.props.columns&&(i.columns=i.props.columns.map(function(n){return __assign(__assign({},n),{renderCell:function(e,t,r,o){return i.wrapWithFocusedIndexObserver(e,t,r,o,n.renderCell)}})})),i}return __extends(e,t),e.prototype.render=function(){var o=this,e=this.props,n=e.actions,l=e.allowTextSelection,s=e.ariaLabel,i=e.ariaLabelledBy,a=e.autoSelect,d=e.calloutContentClassName,c=e.className,u=e.disabled,p=e.filterByText,f=e.getUnselectableRanges,m=e.inputId,x=e.noItemsText,I=e.onToggle,t=e.selectedText,v=e.showTree,r=e.text,h=e.minCalloutWidth,b=e.required,g=e.containerClassName;return React.createElement(Observer,{text:r,items:{observableValue:this.itemProvider,filter:this.onItemsChange},selection:this.selection,selectedText:t},function(e){var t,r=o.props.placeholder;return l||(e.selectedText?r=e.selectedText:e.selection.length&&-1<(t=e.selection[0].beginIndex)&&(r=o.itemProvider.value[t].text)),React.createElement(Dropdown,{ariaLabelledBy:i,actions:n,ariaLabel:s,autoSelect:null!=a&&a,containerClassName:g,calloutContentClassName:d,className:css("bolt-editable-dropdown",(0<e.selection.length||!!e.selectedText)&&"bolt-editable-dropdown-with-selection",c),columns:o.columns,disabled:u,getUnselectableRanges:f,filterByText:p,inputId:m,items:o.itemProvider,noItemsText:x||Resources.NoItemsFound,onCollapse:o.onCollapse,onExpand:o.onExpand,onSelect:o.onSelect,onToggle:I,placeholder:r,ref:o.dropdown,renderCallout:o.renderCallout,renderExpandable:o.renderExpandable,renderItem:o.renderItem,selection:o.selection,showFilterBox:!1,showTree:v,userFilteredItems:o.filteredItems,userFilteredItemsIndexMap:o.filteredIndexMap,minCalloutWidth:h,required:b})})},e.prototype.componentDidMount=function(){this.props.filterThrottleWait&&(this.filterItems=this.timerManagement.debounce(this.filterItems,this.props.filterThrottleWait))},e.prototype.focus=function(){this.dropdown.current&&this.dropdown.current.focus()},e.prototype.selectIndex=function(e){-1<e&&(this.selection.select(e),this.selectedItemInList=!0)},e.prototype.focusItem=function(e){void 0!==e&&-1<e&&this.isFocusable(e)&&(this.previousFocusedIndex=this.focusedIndex.value,this.focusedIndex.value=e)},e.prototype.updateFilteredIndexMap=function(e){var t=this,r=this.filteredIndexMap.value.indexOf(this.focusedIndex.value),e=(this.filteredIndexMap.value=e)[r];return e=e&&!(e<0)&&this.selection.selectable(e)&&-1!==this.filteredIndexMap.value.indexOf(e)?e:this.props.showTree?-1:this.filteredIndexMap.value.find(function(e){return t.selection.selectable(e)})},e.prototype.focusNextItem=function(){for(var e,t=this.filteredIndexMap.value.indexOf(this.focusedIndex.value)+1;t<this.filteredIndexMap.value.length;t++)if(this.selection.selectable(this.filteredIndexMap.value[t])){e=this.filteredIndexMap.value[t];break}this.focusItem(e)},e.prototype.focusPreviousItem=function(){for(var e,t=this.filteredIndexMap.value.indexOf(this.focusedIndex.value)-1;0<=t;t--)if(this.selection.selectable(this.filteredIndexMap.value[t])){e=this.filteredIndexMap.value[t];break}this.focusItem(e)},e.prototype.getFocusedIndex=function(){if(!this.props.showTree)return this.focusedIndex.value;for(var e=this.focusedIndex.value,t=0;t<=Math.min(e,this.itemProvider.value.length-1);t++)isListBoxItemVisible(this.itemProvider.value[t])||e++;return e},e.prototype.isFocusable=function(e){return!this.props.showTree||e<this.itemProvider.value.filter(function(e){return isListBoxItemVisible(e)}).length},e.defaultProps={allowClear:!0,autoAccept:!0,renderExpandable:DropdownExpandableTextField,renderCallout:DropdownCallout,renderItem:renderListBoxCell},e}(React.Component);export{CustomEditableDropdown};