azure-devops-ui/Components/Dropdown/DropdownFilterBarItem.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{ObservableLike}from"../../Core/Observable";import*as Utils_Accessibility from"../../Core/Util/Accessibility";import{FilterBarItem}from"../../FilterBarItem";import{ListSelection}from"../../List";import{getListBoxItemsValue,ListBoxItemType,wrapListBoxItems}from"../../ListBox";import{Observer,SelectionObserver}from"../../Observer";import*as Resources from"../../Resources.Dropdown";import{css}from"../../Util";import{updateFilterToSelection}from"../../Utilities/DropdownFilter";import{DropdownSelection}from"../../Utilities/DropdownSelection";import{compareSelectionRanges}from"../../Utilities/Selection";import{Dropdown}from"./Dropdown";import{DropdownExpandableButton}from"./DropdownExpandableButton";import{ScreenSizeObserver}from"../../Utilities/ScreenSize";import{ScreenSize}from"../../Core/Util/Screen";var DropdownFilterBarItemWidth=256,DropdownFilterBarItem=function(t){function e(e){var i=t.call(this,e)||this;return i.dropdown=React.createRef(),i.componentDidMount=function(){var e;t.prototype.componentDidMount.call(i),i.props.filter&&(e=null==(e=i.props.filter)?void 0:e.getFilterItemState(i.props.filterItemKey),i.onFilterChanged(e))},i.selectDefaultFilterItem=function(){if(i.props.filter){var r=i.props.filter.getFilterItemState(i.props.filterItemKey);if(r&&r.value){for(var o=getListBoxItemsValue(i.wrappedItems||i.props.items),n=new ListSelection(i.selection.multiSelect),e=0;e<r.value.length;e++)!function(t){var e=o.findIndex(function(e){return e.id===r.value[t]||e.data===r.value[t]||JSON.stringify(e.data)===JSON.stringify(r.value[t])});-1<e&&n.select(e,1,!0)}(e);i.selection.value=n.value}}},i.onFilterChanged=function(r){t.prototype.onFilterChanged.call(i,r);var o=getListBoxItemsValue(i.wrappedItems||i.props.items);if(r&&r.value){for(var n=new ListSelection(i.selection.multiSelect),e=0;e<r.value.length;e++)!function(t){var e=o.findIndex(function(e){return e.id===r.value[t]||e.data===r.value[t]||JSON.stringify(e.data)===JSON.stringify(r.value[t])});-1<e&&n.select(e,1,!0)}(e);compareSelectionRanges(i.selection.value,n.value).length&&(i.selection.value=n.value)}else i.selection.clear()},i.onSelectionChanged=function(e){var t=getListBoxItemsValue(i.wrappedItems||i.props.items),r=1<t.length,o=1===t.length&&t[0].type!==ListBoxItemType.Loading;return i.props.filter&&(r||o)&&updateFilterToSelection(e,t,i.props.filter,i.props.filterItemKey),!0},i.renderExpandableButton=function(e){var t=i.props,r=t.className,t=t.renderExpandable,e=__assign(__assign({},e),{className:css(r,"bolt-dropdown-filter-bar-item"),subtle:!0,renderSelectedItems:i.renderSelectedItems});return t?t(e):React.createElement(DropdownExpandableButton,__assign({},e))},i.onClearClick=function(){i.selection.clear(),i.props.toggleFilterBar&&i.props.toggleFilterBar(),Utils_Accessibility.announce(Resources.AnnounceFilterCleared)},i.renderSelectedItems=function(e,t){t=t[e.value[0].beginIndex].text||"",1<e.selectedCount&&(t="".concat(t," (+").concat(e.selectedCount-1,")")),e=React.createElement("span",{className:"bolt-dropdown-filter-bar-item-selected-text"},t);return i.props.showPlaceholderAsLabel?React.createElement(React.Fragment,null,React.createElement("span",{className:"bolt-dropdown-filter-bar-item-placeholder"},"".concat(i.props.placeholder,": ")),e):e},i.wrappedItems=wrapListBoxItems(e.items),i.selection=e.selection||new DropdownSelection,i.selectDefaultFilterItem(),i}return __extends(e,t),e.prototype.focus=function(){this.dropdown.current&&this.dropdown.current.focus()},e.prototype.render=function(){var r=this;return React.createElement(SelectionObserver,{selection:this.selection,onSelectionChanged:this.onSelectionChanged},function(){var e=ObservableLike.getValue(r.props.actions||[]),t=__spreadArray([],e,!0);return r.props.hideClearAction||t.push({className:"bolt-dropdown-action-right-button",disabled:0===r.selection.selectedCount,iconProps:{iconName:"Clear"},text:Resources.DropdownClearActionText,onClick:r.onClearClick}),React.createElement(Observer,{dropdownItems:{observableValue:r.props.items,filter:r.selectDefaultFilterItem}},function(){return React.createElement(ScreenSizeObserver,null,function(e){e=e.screenSize<=ScreenSize.xsmall;return React.createElement(Dropdown,__assign({width:e?void 0:DropdownFilterBarItemWidth,renderExpandable:r.renderExpandableButton},r.props,{actions:t,selection:r.selection,ref:r.dropdown}))})})})},e}(FilterBarItem);export{DropdownFilterBarItem};