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

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./ListBox.css";import*as React from"react";import{ObservableLike}from"../../Core/Observable";import*as Utils_Accessibility from"../../Core/Util/Accessibility";import{format}from"../../Core/Util/String";import{Icon}from"../../Icon";import{renderListCell}from"../../List";import{ItemsObserver,Observer}from"../../Observer";import*as Resources from"../../Resources.Dropdown";import{Spinner,SpinnerSize}from"../../Spinner";import{ColumnSelect,renderEmptyCell,SimpleTableCell,Table,TableRow}from"../../Table";import{Tree,TreeRow}from"../../TreeEx";import{css}from"../../Util";import{DropdownSelection}from"../../Utilities/DropdownSelection";import{ArrayItemProvider,getItemsValue}from"../../Utilities/Provider";import{TreeItemProvider}from"../../Utilities/TreeItemProvider";import{ListBoxItemType}from"./ListBox.Props";var DefaultListBoxWidth=-100,ListBox=function(i){function e(e){var l=i.call(this,e)||this,e=(l.tabbableIndex=-1,l.positions=[],l.count=0,l.table=React.createRef(),l.tree=React.createRef(),l.getItemWidth=function(){var e=l.props.width;return l.multiSelect&&e&&0<e?e-40:e},l.loadingChanged=function(){var e;return ObservableLike.getValue(l.props.loading)?Utils_Accessibility.announce(Resources.AnnounceLoadingItems):(Utils_Accessibility.announce(Resources.AnnounceFinishedLoadingItems),e=l.props.items.length,Utils_Accessibility.announce(format(0<e?format(Resources.AnnounceItemCount,e):Resources.NoFilterResults),!0)),!0},l.searchingChanged=function(){var e;return ObservableLike.getValue(l.props.searching)?Utils_Accessibility.announce(Resources.Searching):!1===ObservableLike.getValue(l.props.searching)&&(e=l.props.items.length,Utils_Accessibility.announce(0<e?format(Resources.AnnounceFilterResultCount,e):Resources.NoFilterResults,!0)),!0},l.onItemsChanged=function(){var e=getListBoxItemsValue(l.wrappedItems||l.props.items);l.tabbableIndex=-1,l.positions=[];for(var t=l.count=0,o=e;t<o.length;t++){var i=o[t],i=ObservableLike.getValue(i);i&&!listBoxItemSelectable(i)?l.positions.push(-1):(-1===l.tabbableIndex&&l.selection.selectable(l.positions.length)&&(l.tabbableIndex=l.positions.length),l.positions.push(++l.count))}return!0},l.onActivate=function(e,t){l.props.onActivate&&l.props.onActivate(e,t.data)},l.onSelect=function(e,t){l.props.onSelect&&l.props.onSelect(e,t.data)},l.onTreeActivate=function(e,t){var o,i=l.getListBoxItems();l.props.onActivate&&i&&(o=t.data.underlyingItem,t=i.find(function(e){return e.id===o.id}))&&l.props.onActivate(e,t)},l.onTreeSelect=function(e,t){var o,i=l.getListBoxItems();l.props.onSelect&&i&&(o=t.data.underlyingItem,t=i.find(function(e){return e.id===o.id}))&&l.props.onSelect(e,t)},l.renderListBoxRow=function(o,i,e){var t=l.props,s=t.excludeFocusZone,t=t.excludeTabStop,s=(getListBoxItemsValue(l.wrappedItems||l.props.items),!s&&l.selection.selectable(o)),n=__assign(__assign({tooltipProps:i.tooltipProps||{text:i.text,overflowOnly:!0,overflowDetected:overflowDetected}},e),{ariaLabel:i.ariaLabel,ariaDescribedBy:i.type!==ListBoxItemType.Divider&&i.type!==ListBoxItemType.Header&&i.groupId?"header-".concat(i.groupId):void 0,ariaPosInSet:0<=l.positions[o]?l.positions[o]:null,ariaSetSize:0<=l.positions[o]?l.count:null,excludeTabStop:t||l.tabbableIndex!==o,excludeFocusZone:!s,id:i.id,singleClickActivation:!1,role:i.type===ListBoxItemType.Header||i.type===ListBoxItemType.Divider?"presentation":"option"});return React.createElement(Observer,{key:i.id||o,item:i},function(){return React.createElement(TableRow,{key:i.id||o,index:o,details:n,className:css("bolt-list-box-row",i.type===ListBoxItemType.Header&&"bolt-list-box-header-row",i.type===ListBoxItemType.Divider&&"bolt-list-box-divider-row",i.type===ListBoxItemType.Loading&&"bolt-list-box-loading-row",l.multiSelect&&"bolt-list-box-multi-select-row",i.type!==ListBoxItemType.Header&&i.type!==ListBoxItemType.Divider&&"cursor-pointer",i.disabled&&"bolt-list-box-item-disabled")},l.columns.map(function(e,t){if(l.multiSelect&&0===t){if(i.type===ListBoxItemType.Divider||i.type===ListBoxItemType.Loading)return null;if(i.type===ListBoxItemType.Header)return document.body.classList.contains("dropdown-list-component-enabled")?React.createElement("span",{className:"bolt-table-cell bolt-list-cell bolt-header-cell","data-column-index":"0",role:"presentation"}):renderEmptyCell(o,t)}return(e=document.body.classList.contains("dropdown-list-component-enabled")?__assign(__assign({},e),{className:"dropdown-list"}):e).renderCell(o,t,e,i)}))})},l.renderListBoxTreeRow=function(o,i,e){var t=l.props,s=t.excludeFocusZone,t=t.excludeTabStop,s=!s&&l.selection.selectable(o),n=i.underlyingItem.data,r=__assign(__assign({tooltipProps:{text:i.underlyingItem.text,overflowOnly:!0,overflowDetected:overflowDetected}},e),{ariaPosInSet:0<=l.positions[o]?l.positions[o]:null,ariaSetSize:0<=l.positions[o]?l.count:null,excludeTabStop:t||l.tabbableIndex!==o,excludeFocusZone:!s,id:i.underlyingItem.id,singleClickActivation:!1,role:n.type===ListBoxItemType.Header||n.type===ListBoxItemType.Divider?"row":"treeitem"});return React.createElement(Observer,{key:"observer-".concat(i.underlyingItem.id||o),item:i},function(){return React.createElement(TreeRow,{key:"row-".concat(i.underlyingItem.id||o),index:o,details:r,className:css("bolt-list-box-row",n.type===ListBoxItemType.Header&&"bolt-list-box-header-row",n.type===ListBoxItemType.Divider&&"bolt-list-box-divider-row",n.type===ListBoxItemType.Loading&&"bolt-list-box-loading-row",l.multiSelect&&"bolt-list-box-multi-select-row",n.type!==ListBoxItemType.Header&&n.type!==ListBoxItemType.Divider&&"cursor-pointer",n.disabled&&"bolt-list-box-item-disabled")},l.columns.map(function(e,t){return e.renderCell(o,t,e,i)}))})},l.renderListBoxCell=function(e,t,o,i){return renderListBoxCell(e,t,o,i,l.multiSelect)},l.props),t=e.selection,o=e.renderItem,e=e.items;return l.selection=t||new DropdownSelection,l.multiSelect=!l.props.enforceSingleSelect&&!l.props.showTree&&l.selection.multiSelect,l.props.columns?l.columns=l.props.columns:(l.columns=[],l.multiSelect&&!1!==l.props.showChecksColumn?l.columns.push(new ColumnSelect({excludeFocusZone:!0})):l.multiSelect||!0!==l.props.showChecksColumn||l.columns.push({id:"column-check",width:24,renderCell:function(e,t){return document.body.classList.contains("dropdown-list-component-enabled")?React.createElement("div",{className:"dropdown-list checkmark-icon","data-column-index":t,key:"column-check",role:"presentation"},React.createElement(Icon,{ariaHidden:"removed",className:css(!l.selection.selected(e)&&"invisible"),iconName:"CheckMark"})):React.createElement(SimpleTableCell,{columnIndex:t,key:"column-check",role:"presentation"},React.createElement(Icon,{className:css(!l.selection.selected(e)&&"invisible"),iconName:"CheckMark"}))},readonly:!0}),l.columns.push({id:"text",width:l.getItemWidth(),renderCell:o||l.renderListBoxCell,className:css("bolt-list-box-text",l.multiSelect?"bolt-list-box-text-multi-select":"bolt-list-box-text-single-select"),readonly:!0})),l.wrappedItems=wrapListBoxItems(e),l.onItemsChanged(),l}return __extends(e,i),e.prototype.componentDidUpdate=function(){this.props.didUpdate&&this.props.didUpdate()},e.prototype.render=function(){var i=this,e=this.props,t=e.ariaLabel,s=e.className,n=e.containerClassName,r=e.enforceSingleSelect,l=e.focuszoneProps,o=e.getUnselectableRanges,a=e.items,c=e.loading,d=e.searching,m=e.searchResultsLoadingText,p=e.showItemsWhileSearching,u=e.width,e={observableValue:a,filter:this.onItemsChanged},b=this.getListBoxItems(),x=b?this.props.showTree?new TreeItemProvider(convertListBoxItemsToTreeItems(b)):new ArrayItemProvider(b):a;return this.props.columns||(this.columns[this.columns.length-1].width=this.getItemWidth()),React.createElement(ItemsObserver,{getUnselectableRanges:o,items:a,selection:this.selection},React.createElement(Observer,{items:e,loading:{observableValue:c||!1,filter:this.loadingChanged},searching:{observableValue:d||!1,filter:this.searchingChanged}},function(e){var o;return e.searching&&!p?React.createElement("div",{className:"bolt-list-box-loading",style:{width:u}},React.createElement(Spinner,{size:SpinnerSize.medium,label:m||Resources.Searching})):i.props.showTree?(o=x,React.createElement(Tree,{ariaLabel:t||void 0,className:css(s,"bolt-list-box","bolt-list-box-tree"),columns:i.columns,containerClassName:n,focuszoneProps:l,itemProvider:o,onActivate:i.onTreeActivate,onSelect:i.onTreeSelect,onToggle:function(e,t){e.target.className.includes("bolt-tree-expand-button")&&(o.toggle(t.underlyingItem),i.props.onToggle)&&i.props.onToggle(e,t.underlyingItem.data)},ref:i.tree,renderRow:i.renderListBoxTreeRow,role:"listbox",scrollable:!0,singleClickActivation:!1,selection:i.selection,showHeader:!1,showLines:!1})):React.createElement(Table,{ariaLabel:t||void 0,className:css(s,"bolt-list-box"),columns:i.columns,containerClassName:n,enforceSingleSelect:r,focuszoneProps:l,itemProvider:x,onActivate:i.onActivate,onSelect:i.onSelect,renderRow:i.renderListBoxRow,ref:i.table,role:"listbox",scrollable:!0,singleClickActivation:!1,selection:i.selection,showHeader:!1,showLines:!1,spacerWidth:0})}))},e.prototype.scrollIntoView=function(e,t){return this.table.current?this.table.current.scrollIntoView(e,t):this.tree.current?this.tree.current.scrollIntoView(e,t):void 0},e.prototype.getListBoxItems=function(){var e;return null!=(e=null!=(e=this.wrappedItems)?e:this.props.items&&(Array.isArray(this.props.items)?this.props.items:this.props.items.value))?e:void 0},e.defaultProps={getUnselectableRanges:getUnselectableRanges,width:DefaultListBoxWidth},e}(React.Component);function renderListBoxCell(e,t,o,i,s){return i.render?i.render(e,t,o,i):i.type===ListBoxItemType.Divider?React.createElement(SimpleTableCell,{className:css(o.className,i.className,s&&"bolt-list-box-divider-multi-select"),columnIndex:t,colspan:s?2:1,key:i.id,role:"presentation",tableColumn:o},React.createElement("div",{className:"bolt-list-box-divider flex-grow"})):i.type===ListBoxItemType.Loading?React.createElement(LoadingCell,{columnIndex:t,key:i.id,tableColumn:o,tableItem:i}):React.createElement(SimpleTableCell,{className:css(o.className,i.className,i.type===ListBoxItemType.Header&&"bolt-list-box-header"),columnIndex:t,key:i.id,role:"presentation",tableColumn:o},React.createElement("div",{id:i.type===ListBoxItemType.Header?"header-".concat(i.groupId):void 0,"aria-label":i.type!==ListBoxItemType.Header||document.body.classList.contains("dropdown-list-component-enabled")?void 0:format(Resources.HeaderAriaLabel,i.text),className:"bolt-list-box-cell-container"},i&&renderListCell(i,!1)))}function overflowDetected(e){e=e.querySelector(".text-ellipsis");return!!e&&e.scrollWidth>Math.ceil(e.offsetWidth)}function getUnselectableRanges(e,t){void 0===t&&(t=listBoxItemSelectable);for(var o=[],i=-1,s=0;s<e.length;s++)!t(e[s])&&i<0?i=s:t(e[s])&&0<=i&&(o.push({beginIndex:i,endIndex:s-1}),i=-1);return 0<=i&&o.push({beginIndex:i,endIndex:e.length-1}),o}function listBoxItemSelectable(e){return e.type!==ListBoxItemType.Header&&e.type!==ListBoxItemType.Divider&&e.type!==ListBoxItemType.Loading&&!e.disabled}function wrapListBoxItems(e){if(Array.isArray(e)&&e.length&&"string"==typeof e[0])return e.map(function(e){return{id:e,text:e}})}function convertListBoxItemsToTreeItems(e){for(var t=[],o=new Map,i=0,s=e;i<s.length;i++){var n,r=s[i],l=o.get(r.id),l={childItems:null==l?void 0:l.childItems,expanded:r.expanded,data:r,id:r.id,text:r.text};r.parent?(n=o.get(r.parent.id))?n.childItems?n.childItems.push(l):n.childItems=[l]:o.set(r.parent.id,{childItems:[l]}):t.push(l),o.set(l.id,l)}return t}function getListBoxItemsValue(e){return getItemsValue(e)}var LoadingCell=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return __extends(t,e),t.prototype.componentDidMount=function(){this.props.onMount&&this.props.onMount()},t.prototype.render=function(){var e=this.props,t=e.columnIndex,o=e.tableColumn,e=e.tableItem;return React.createElement(SimpleTableCell,{className:css(o.className,e.className),columnIndex:t,colspan:2,contentClassName:"justify-center",key:t,tableColumn:o},React.createElement("div",{className:"bolt-list-box-loading"},React.createElement(Spinner,{size:SpinnerSize.medium,label:Resources.Loading})))},t}(React.Component);function isListBoxItemVisible(e){for(var t=e.parent;t;){if(!t.expanded)return!1;t=t.parent}return!0}export{DefaultListBoxWidth,ListBox,renderListBoxCell,getUnselectableRanges,listBoxItemSelectable,wrapListBoxItems,convertListBoxItemsToTreeItems,getListBoxItemsValue,LoadingCell,isListBoxItemVisible};