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

React components for building web UI in Azure DevOps

import{__assign,__extends,__spreadArray}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Dropdown.css";import*as React from"react";import{ObservableArray,ObservableLike,ObservableValue}from"../../Core/Observable";import{TimerManagement}from"../../Core/TimerManagement";import*as Utils_Accessibility from"../../Core/Util/Accessibility";import{format}from"../../Core/Util/String";import{FilteredListSelection,renderListCell}from"../../List";import{getListBoxItemsValue,getUnselectableRanges,ListBoxItemType,wrapListBoxItems}from"../../ListBox";import{ItemsObserver,Observer}from"../../Observer";import*as Resources from"../../Resources.Dropdown";import{SimpleTableCell}from"../../Table";import{css}from"../../Util";import{DropdownSelection}from"../../Utilities/DropdownSelection";import{getItemsValue}from"../../Utilities/Provider";import{DropdownCallout}from"./DropdownCallout";import{DropdownExpandableTextField}from"./DropdownExpandableTextField";var announcementInterval,Dropdown=function(n){function e(e){var _=n.call(this,e)||this,t=(_.expandable=React.createRef(),_.expandableContainer=React.createRef(),_.filterText=new ObservableValue(""),_.collapse=function(){_.expandable.current&&_.expandable.current.collapse()},_.expand=function(){_.expandable.current&&_.expandable.current.expand()},_.onDismiss=function(){_.expandable.current&&_.expandable.current.collapse()},_.onExpand=function(){_.props.onExpand&&_.props.onExpand(),_.updateFilteredItems(),_.state.expanded.value=!0},_.onCollapse=function(){_.props.onCollapse&&_.props.onCollapse(),_.state.expanded.value=!1},_.onActivate=function(e,t){var r;e.defaultPrevented||"keydown"!==e.type||((r=!_.props.enforceSingleSelect&&_.state.filteredSelection.multiSelect)?_.state.filteredSelection.toggle(_.state.filteredItems.value.indexOf(t),_.state.filteredSelection.alwaysMerge,r):_.state.filteredSelection.select(_.state.filteredItems.value.indexOf(t),1,_.state.filteredSelection.alwaysMerge,r),_.onSelect(e,t))},_.onFilterTextChanged=function(e,t){_.filterText.value=t,_.debouncedUpdateFilteredItems()},_.onSelect=function(e,t){var r=_.props,n=r.dismissOnSelect,r=r.onSelect,l=_.parentSelection;r&&r(e,t),(void 0!==n?n:0<l.value.length&&(_.props.enforceSingleSelect||!l.multiSelect)&&!l.selectOnFocus)&&_.onDismiss()},_.selectionChanged=function(e,t){return _.state.filteredSelection.selectionChanged(e,t),!0},_.renderCallout=function(e,t,r,n,l,o,i){var a=_.props,s=a.actions,d=a.ariaLabel,p=a.calloutContentClassName,c=a.columns,m=a.containerClassName,u=a.filterPlaceholderText,f=a.filteredNoResultsText,x=a.getUnselectableRanges,h=a.items,I=a.loading,g=a.noItemsText,b=a.onToggle,v=a.portalProps,T=a.renderItem,y=a.renderBeforeContent,S=a.searching,C=a.showChecksColumn,w=a.showFilterBox,L=a.showItemsWhileSearching,B=a.showTree,a=a.userFilteredItems,F=_.props.width,R=(void 0===F&&_.expandableContainer.current&&(R=null!=(R=_.props.minCalloutWidth)?R:100,F=Math.max(_.expandableContainer.current.clientWidth,R)),_.state),O=R.filteredItems,D=R.filterText,s={actions:s,anchorElement:r,anchorOffset:n,anchorOrigin:l,anchorPoint:o,ariaLabel:d,calloutContentClassName:p,columns:c,containerClassName:m,dropdownOrigin:i,filteredItems:O,filteredNoResultsText:f,selection:R.filteredSelection,filterPlaceholderText:u,filterText:D,getUnselectableRanges:x,id:t,items:h,loading:I,noItemsText:g,onActivate:_.onActivate,onFilterTextChanged:_.onFilterTextChanged,onDismiss:_.onDismiss,onSelect:_.onSelect,onToggle:b,portalProps:v,renderBeforeContent:y,renderItem:T,searching:S,showChecksColumn:C,showItemsWhileSearching:L,showFilterBox:w,showTree:B,updateFilteredItems:_.updateFilteredItems,userFilteredItems:a,width:F};return _.props.renderCallout(s)},_.updateFilteredItems=function(){return updateFilteredItems(_.props,_.state),!0},_.debouncedUpdateFilteredItems=function(){updateFilteredItems(_.props,_.state)},_.parentSelection=e.selection||new DropdownSelection,wrapListBoxItems(e.items)),r=getListBoxItemsValue(t||e.items);return _.timerManagement=new TimerManagement,_.state={expanded:new ObservableValue(!1),filteredItems:new ObservableArray(__spreadArray([],r,!0)),filteredSelection:new FilteredListSelection(_.parentSelection),filterText:_.filterText,props:e,wrappedItems:t},_}return __extends(e,n),e.getDerivedStateFromProps=function(e,t){return e.userFilteredItems===t.props.userFilteredItems&&e.items===t.props.items||updateFilteredItems(e,t),__assign(__assign({},t),{props:e,wrappedItems:wrapListBoxItems(e.items)})},e.prototype.componentDidMount=function(){this.props.filterThrottleWait&&(this.debouncedUpdateFilteredItems=this.timerManagement.debounce(this.debouncedUpdateFilteredItems,this.props.filterThrottleWait))},e.prototype.render=function(){var e=this,t=this.props,r=t.ariaLabel,n=t.ariaLabelledBy,l=t.autoSelect,o=t.className,i=t.disabled,a=t.enforceSingleSelect,s=t.excludeTabStop,d=t.inputId,p=t.items,c=t.placeholder,m=t.renderExpandable,u=t.renderSelectedItems,f=t.role,x=t.showPrefix,h=t.required,t={observableValue:this.parentSelection,filter:this.selectionChanged};return React.createElement(ItemsObserver,{getUnselectableRanges:this.props.getUnselectableRanges,items:p,selection:this.parentSelection},React.createElement(Observer,{selection:t},function(){return m({ariaLabel:r,ariaLabelledBy:n,autoSelect:l,className:css(o,"bolt-dropdown-expandable"),containerRef:e.expandableContainer,disabled:i,enforceSingleSelect:a,excludeTabStop:s,inputId:d,placeholder:c,onCollapse:e.onCollapse,onExpand:e.onExpand,expandableRef:e.expandable,renderCallout:e.renderCallout,items:getListBoxItemsValue(e.state.wrappedItems||p),role:f,renderSelectedItems:u,selection:e.parentSelection,showPrefix:x,required:h})}))},e.prototype.focus=function(){this.expandable.current&&this.expandable.current.focus()},e.defaultProps={filterByText:!0,filterItem:filterItemByText,getUnselectableRanges:getUnselectableRanges,renderCallout:DropdownCallout,renderExpandable:DropdownExpandableTextField,renderSelectedItems:renderDropdownSelectedItemText},e}(React.Component);function filterItemByText(e,t){return!(!t.text||t.type===ListBoxItemType.Header||t.type===ListBoxItemType.Divider||t.type===ListBoxItemType.Loading)&&-1!==t.text.toLowerCase().indexOf(e.toLowerCase())}function renderDropdownSelectedItemText(e,t){t=t[e.value[0].beginIndex],t=t&&t.text||"";return t=1<e.selectedCount?"".concat(t," (+").concat(e.selectedCount-1,")"):t}function updateFilteredItems(t,r){announcementInterval&&clearTimeout(announcementInterval);var e=r.filteredSelection,n=r.filterText,l=[],o=getListBoxItemsValue(r.wrappedItems||t.items),i=o;if(t.userFilteredItems){var i=getItemsValue(t.userFilteredItems),a=t.userFilteredItemsIndexMap&&t.userFilteredItemsIndexMap.value;if(a)l=a;else for(var s=0;s<t.userFilteredItems.length;s++)!function(t){var e=o.findIndex(function(e){return e.id===i[t].id});l.push(e)}(s)}for(t.filterByText&&n.value&&(a=filterItems(i,n.value,l,t.filterItem),i=a.filteredItems,l=a.filteredIndexMap);i.length&&i[0].type===ListBoxItemType.Divider;)i.shift(),l.shift();return announcementInterval=setTimeout(function(){var e;ObservableLike.getValue(t.searching)||ObservableLike.getValue(t.loading)||!r.expanded.value||(n.value?(e=Resources.NoFilterResults,t.filteredNoResultsText&&(e=ObservableLike.getValue(t.filteredNoResultsText)),Utils_Accessibility.announce(0<i.length?format(Resources.AnnounceFilterResultCount,i.length):e,!0)):0===i.length&&t.noItemsText?Utils_Accessibility.announce(t.noItemsText,!0):0<i.length&&Utils_Accessibility.announce(format(Resources.AnnounceItemCount,i.length)))},500),e.updateFilteredSelection(l,!t.enforceSingleSelect&&void 0),r.filteredItems.value=i,!0}function filterItems(e,t,r,n){void 0===r&&(r=[]),void 0===n&&(n=filterItemByText);var l=[],o=[],i=[];if(t)for(var a=void 0,s=-1,d=void 0,p=-1,c=0,m=e.length;c<m;c++){var u,f=e[c],x=r.length?r[c]:c;f.type===ListBoxItemType.Header?(a=f,s=x):f.type===ListBoxItemType.Divider?(d=f,p=x):!(u=n(t,f,e))&&f.type!==ListBoxItemType.Loading||(d&&d.groupId===f.groupId&&(l.push(d),o.push(p),d=void 0),a&&a.groupId===f.groupId&&(l.push(a),o.push(s),a=void 0),l.push(f),o.push(x),i.push(Array.isArray(u)?u:[]))}return{filteredItems:l,filteredIndexMap:o,filterMatches:i}}function filterTreeItems(e,t,r,n,l){void 0===l&&(l=filterMatchedItemByListboxType);for(var t=filterItems(e,t,r=void 0===r?[]:r,n=void 0===n?filterItemByText:n),r=t.filteredIndexMap,n=t.filteredItems.find(l),o={},i=0,a=r;i<a.length;i++){for(var s=e[f=a[i]],d=s.parent;d;)(o[e.indexOf(d)]=d).expanded=!0,d=d.parent;o[f]=s}for(var p=[],c=[],m=0,u=Object.keys(o);m<u.length;m++){var f,x=u[m],x=o[f=Number(x)];p.push(f),c.push(x)}return[{filteredIndexMap:p,filteredItems:c,filterMatches:[]},n?e.indexOf(n):-1]}function filterMatchedItemByListboxType(e){return!e.type||e.type===ListBoxItemType.Row}function renderHighlightedText(e,t,r,n,l){var o=n;return l&&n.text&&(o=__assign(__assign({},n),{textNode:getHighlightedText(n.text,l)})),React.createElement(SimpleTableCell,{className:css(r.className,n.className,n.type===ListBoxItemType.Header&&"bolt-list-box-header"),columnIndex:t,key:t,tableColumn:r},React.createElement("div",{id:n.type===ListBoxItemType.Header?"header-".concat(n.id):void 0,"aria-label":n.type===ListBoxItemType.Header?format(Resources.HeaderAriaLabel,n.text):void 0},renderListCell(o)))}function getHighlightedText(e,t,r){for(var n=[],l=-1,o=0;o<e.length;o++)-1!==t.indexOf(o)?n&&n[n.length-1]&&n[n.length-1].bold?n[l].text+=e.charAt(o):n[++l]={text:e.charAt(o),bold:!0}:n&&n[n.length-1]&&!n[n.length-1].bold?n[l].text+=e.charAt(o):n[++l]={text:e.charAt(o),bold:!1};for(var i=[],o=0;o<n.length;o++){var a=n[o];a.bold?i.push(React.createElement("span",{className:"font-weight-heavy",key:"".concat(e,"-").concat(o)},a.text)):i.push(a.text)}return React.createElement("span",{className:r},i)}export{Dropdown,filterItemByText,renderDropdownSelectedItemText,filterItems,filterTreeItems,filterMatchedItemByListboxType,renderHighlightedText,getHighlightedText};