azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 4.83 kB
JavaScript
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{ScreenSize}from"../../Core/Util/Screen";import{format}from"../../Core/Util/String";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{ScreenSizeObserver}from"../../Utilities/ScreenSize";import{compareSelectionRanges}from"../../Utilities/Selection";import{Dropdown}from"./Dropdown";import{DropdownExpandableButton}from"./DropdownExpandableButton";const DropdownFilterBarItemWidth=256;class DropdownFilterBarItem extends FilterBarItem{constructor(e){super(e),this.dropdown=React.createRef(),this.componentDidMount=()=>{var e;super.componentDidMount(),this.props.filter&&(e=null==(e=this.props.filter)?void 0:e.getFilterItemState(this.props.filterItemKey),this.onFilterChanged(e))},this.selectDefaultFilterItem=()=>{if(this.props.filter){const s=this.props.filter.getFilterItemState(this.props.filterItemKey);if(s&&s.value){var e=getListBoxItemsValue(this.wrappedItems||this.props.items),r=new ListSelection(this.selection.multiSelect);for(let t=0;t<s.value.length;t++){var i=e.findIndex(e=>e.id===s.value[t]||e.data===s.value[t]||JSON.stringify(e.data)===JSON.stringify(s.value[t]));-1<i&&r.select(i,1,!0)}this.selection.value=r.value}}},this.onFilterChanged=r=>{super.onFilterChanged(r);var e=getListBoxItemsValue(this.wrappedItems||this.props.items);if(r&&r.value){var i=new ListSelection(this.selection.multiSelect);for(let t=0;t<r.value.length;t++){var s=e.findIndex(e=>e.id===r.value[t]||e.data===r.value[t]||JSON.stringify(e.data)===JSON.stringify(r.value[t]));-1<s&&i.select(s,1,!0)}compareSelectionRanges(this.selection.value,i.value).length&&(this.selection.value=i.value),this.selection.value.length||(this.selectedText=void 0)}else this.selection.clear(),this.selectedText=void 0},this.onSelectionChanged=e=>{var t=getListBoxItemsValue(this.wrappedItems||this.props.items),r=1<t.length,i=1===t.length&&t[0].type!==ListBoxItemType.Loading;return this.props.filter&&(r||i)&&updateFilterToSelection(e,t,this.props.filter,this.props.filterItemKey),!0},this.renderExpandableButton=e=>{var{className:t,renderExpandable:r,tooltipProps:i}=this.props,e=Object.assign(Object.assign({},e),{className:css(t,"bolt-dropdown-filter-bar-item"),subtle:!0,renderSelectedItems:this.renderSelectedItems,tooltipProps:i});return r?r(e):React.createElement(DropdownExpandableButton,Object.assign({},e))},this.onClearClick=()=>{this.selection.clear(),this.selectedText=void 0,this.props.toggleFilterBar&&this.props.toggleFilterBar(),Utils_Accessibility.announce(Resources.AnnounceFilterCleared)},this.renderSelectedItems=(e,t)=>{let r=t[e.value[0].beginIndex].text||"";1<e.selectedCount&&(r=`${r} (+${e.selectedCount-1})`),this.selectedText=r;t=React.createElement("span",{className:"bolt-dropdown-filter-bar-item-selected-text"},r);return this.props.showPlaceholderAsLabel?React.createElement(React.Fragment,null,React.createElement("span",{className:"bolt-dropdown-filter-bar-item-placeholder"},this.props.placeholder+": "),t):t},this.getAriaLabel=()=>this.selectedText?this.props.placeholder?format(Resources.FilterAriaLabel,this.props.placeholder,this.selectedText):this.selectedText:this.props.placeholder,this.wrappedItems=wrapListBoxItems(e.items),this.selection=e.selection||new DropdownSelection,this.selectDefaultFilterItem()}focus(){this.dropdown.current&&this.dropdown.current.focus()}render(){return React.createElement(SelectionObserver,{selection:this.selection,onSelectionChanged:this.onSelectionChanged},()=>{const r=[...ObservableLike.getValue(this.props.actions||[])];return this.props.hideClearAction||r.push({className:"bolt-dropdown-action-right-button",disabled:0===this.selection.selectedCount,iconProps:{iconName:"Clear"},text:Resources.DropdownClearActionText,onClick:this.onClearClick}),React.createElement(Observer,{dropdownItems:{observableValue:this.props.items,filter:this.selectDefaultFilterItem}},()=>React.createElement(ScreenSizeObserver,null,e=>{var t,e=e.screenSize<=ScreenSize.xsmall;return React.createElement(Dropdown,Object.assign({ariaLabel:null!=(t=this.props.ariaLabel)?t:this.getAriaLabel(),width:e?void 0:DropdownFilterBarItemWidth,renderExpandable:this.renderExpandableButton},this.props,{actions:r,selection:this.selection,ref:this.dropdown}))}))})}}export{DropdownFilterBarItem};