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

React components for building web UI in Azure DevOps

import{__assign,__extends,__spreadArray}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Filter.css";import*as React from"react";import{ObservableValue}from"../../Core/Observable";import{TimerManagement}from"../../Core/TimerManagement";import{announce}from"../../Core/Util/Accessibility";import{ScreenSize}from"../../Core/Util/Screen";import{format}from"../../Core/Util/String";import{Button}from"../../Button";import{ContentLocation}from"../../Callout";import{Dropdown,DropdownCalloutComponent,DropdownExpandableButton,filterItems}from"../../Dropdown";import{FocusZoneContext}from"../../FocusZone";import{Icon}from"../../Icon";import{renderListCell}from"../../List";import{getListBoxItemsValue,ListBox,ListBoxItemType,wrapListBoxItems}from"../../ListBox";import{Observer,SelectionObserver,UncheckedObserver}from"../../Observer";import{Pill,PillSize}from"../../Pill";import*as Resources from"../../Resources.Filter";import{TextField}from"../../TextField";import{css,KeyCode}from"../../Util";import{updateFilterToSelection}from"../../Utilities/DropdownFilter";import{DropdownMultiSelection}from"../../Utilities/DropdownSelection";import{FILTER_CHANGE_EVENT}from"../../Utilities/Filter";import{Location}from"../../Utilities/Position";import{ScreenSizeObserver}from"../../Utilities/ScreenSize";import{compareSelectionRanges,indexWithinRanges}from"../../Utilities/Selection";import*as Utils_Accessibility from"../../Core/Util/Accessibility";var FilterCalloutWidth=320,FilterItemPadding=48,Filter=function(t){function e(e){var s=t.call(this,e)||this;return s.dropdown=React.createRef(),s.dropdownCallout=React.createRef(),s.filterText=new ObservableValue(""),s.timerManagement=new TimerManagement,s.collapse=function(){s.dropdown.current&&s.dropdown.current.collapse()},s.expand=function(){s.dropdown.current&&s.dropdown.current.expand()},s.onDoneClick=function(){var e=s.props.filterStore;e.usesApplyMode()&&e.applyChanges(),s.collapse()},s.onApplyClick=function(){var e=s.props.filterStore;e.usesApplyMode()&&e.applyChanges(),s.clearActiveFilter()},s.onExpandClick=function(){Utils_Accessibility.announce(s.props.title||Resources.FilterTitle)},s.renderBeforeContent=function(){return React.createElement(Observer,{activeFilter:s.activeFilter,filterText:s.filterText,bestHitItem:s.props.bestHitItem,userFilteredItems:s.props.userFilteredItems},function(e){return e.activeFilter?e.activeFilter.renderBeforeContent?e.activeFilter.renderBeforeContent(s.clearActiveFilter):null:e.filterText?s.renderFilteredView():s.renderFilterItems()})},s.renderFilteredView=function(){var i=[],e=(s.props.bestHitItem&&s.props.bestHitItem.value&&(i.push({id:"best-hit-header",text:Resources.BestHit,type:ListBoxItemType.Header,className:"bolt-filtered-header"}),i.push(s.props.bestHitItem.value)),s.props.userFilteredItems?i.push.apply(i,getListBoxItemsValue(s.props.userFilteredItems)):(s.props.filterItems.forEach(function(t){var e=filterItems(getListBoxItemsValue(t.items),s.filterText.value||"").filteredItems,r=s.getSelectedFilterItems(t);(e=e.filter(function(e){return e.type!==ListBoxItemType.Header&&e.type!==ListBoxItemType.Divider&&-1===r.indexOf(e)&&(!s.props.bestHitItem||s.props.bestHitItem.value!==e)})).length&&(i.push({id:t.id,text:t.name,type:ListBoxItemType.Header,className:"bolt-filtered-header"}),i.push.apply(i,e.map(function(e){return __assign(__assign({},e),{groupId:t.id})})))}),s.props.filterItems.some(function(e){return"keyword-item"===e.id})&&i.push.apply(i,getKeywordSearchResults(s.filterText.value))),i.filter(function(e){return e.type!==ListBoxItemType.Header}).length);return 0<e?s.announceWithDebouncing(format(Resources.AnnounceFilterResultCount,e)):s.announceWithDebouncing(Resources.NoFilterResults),React.createElement(ListBox,{items:i,onSelect:s.onFilteredItemSelect,onActivate:s.onFilteredItemSelect,excludeTabStop:!0,focuszoneProps:null})},s.renderSelectedItems=function(e,t){return!1!==s.props.showFilterOnText&&s.filtered()?Resources.FilterOn:Resources.Filter},s.renderFilterItems=function(){var e=s.props,t=e.filterItems,a=e.filterStore;return React.createElement(FocusZoneContext.Consumer,null,function(n){return t.map(function(t,e){var r=s.getSelectedFilterItems(t),i=r.length,o=a.getFilterItemState(t.filterItemKey),l=a.getDefaultState()[t.filterItemKey],l=a.filterItemStatesAreEqual(t.filterItemKey,o,l);return React.createElement("div",{className:"flex-row flex-center bolt-filter-item",key:t.id,id:"bolt-filter-item-".concat(t.id),"data-focuszone":n.focuszoneId,tabIndex:-1,onClick:function(){return s.onFilterItemSelected(t)},onKeyDown:function(e){e.defaultPrevented||e.which!==KeyCode.enter&&e.which!==KeyCode.space&&e.which!==KeyCode.rightArrow||(s.onFilterItemSelected(t,e.currentTarget),e.preventDefault())}},React.createElement("div",{className:css("flex-row flex-center flex-grow bolt-filter-label",o&&o.value&&0!==o.value.length&&"bolt-filter-label-selected"),style:{width:s.props.width-FilterItemPadding}},React.createElement("span",{className:css(l&&"primary-text",!l&&"font-weight-semibold")},t.name),1<i&&React.createElement(Pill,{className:"bolt-filter-selection-pill",excludeFocusZone:!0,size:PillSize.compact},i),React.createElement("div",{className:"flex-grow flex-row bolt-filter-selected-item-container"},t.renderSelectedItems?t.renderSelectedItems(r):renderSelectedFilterItems(r))),React.createElement(Icon,{iconName:"ChevronRight"}))})})},s.onFilteredItemSelect=function(e,t){var r,i,o,l;t.groupId&&(r=s.props.filterStore,i=s.props.filterItems.find(function(e){return e.id===t.groupId}))&&(i=i.filterItemKey,o=r.getFilterItemState(i),l=void 0!==t.data?t.data:t.id,"keyword"===i?r.setFilterItemState(i,{value:t.id}):o&&o.value&&Array.isArray(o.value)&&s.selection.multiSelect?r.setFilterItemState(t.groupId,{value:__spreadArray(__spreadArray([],o.value,!0),[l],!1)}):r.setFilterItemState(i,{value:[l]})),s.filterText.value="",s.dropdownCallout.current&&s.dropdownCallout.current.focus()},s.onFilterChanged=function(e){function t(e){var r=i[e];if(r&&r.value)if("keyword"===e){e=l.findIndex(function(e){return e.id===r.value});-1<e&&o.select(e,1,!0)}else for(var t=0;t<r.value.length;t++)!function(t){var e=l.findIndex(function(e){return e.id===r.value[t]||e.data===r.value[t]});-1<e&&o.select(e,1,!0)}(t)}var r,i=s.props.filterStore.getState(),o=new DropdownMultiSelection,l=getListBoxItemsValue(s.wrappedItems||s.props.items);for(r in i)t(r);compareSelectionRanges(s.selection.value,o.value).length&&(s.selection.value=o.value)},s.onSelectionChanged=function(e){var t=getListBoxItemsValue(s.wrappedItems||s.props.items);if(s.props.filterStore&&s.activeFilter.value){for(var r=new DropdownMultiSelection,i=0,o=0;s.props.filterItems[o].id!==s.activeFilter.value.id;o++)i+=s.props.filterItems[o].items.length;if(e.forEach(function(e){for(var t=e.beginIndex;t<=e.endIndex;t++)i<=t&&t<i+s.activeFilter.value.items.length&&r.select(t,1,!0)}),"keyword"===s.activeFilter.value.filterItemKey&&0===r.value.length)return!0;updateFilterToSelection(r.value,t,s.props.filterStore,s.activeFilter.value.filterItemKey)}return!0},s.onResetClick=function(){s.dropdownCallout.current&&s.dropdownCallout.current.focus(),s.props.filterStore.reset()},s.onResetFilterItemClick=function(e){s.dropdownCallout.current&&s.dropdownCallout.current.focus(),s.props.filterStore.resetFilterItemState(e)},s.onFilterItemSelected=function(e,t){s.dropdownCallout.current&&s.dropdownCallout.current.focus(),s.props.activeFilter||(s.activeFilter.value=e,announce(format(Resources.FilterSelected,e.name)),s.activeFilterReturnElementId=null==t?void 0:t.id),s.props.onActiveFilterChanged&&s.props.onActiveFilterChanged(e)},s.getOnFilterTextChanged=function(r){return function(e,t){s.filterText.value=t,s.activeFilter.value&&r.onFilterTextChanged&&(r.onFilterTextChanged(e,t),s.dropdownOnFilterTextChanged=r.onFilterTextChanged),s.props.onFilterTextChanged&&s.props.onFilterTextChanged(e,t)}},s.getFilterStartingIndex=function(e){if(e){for(var t=s.props.filterItems.indexOf(e),r=0,i=0;i<t;i++)r+=s.props.filterItems[i].items.length;return r}return-1},s.getSelectedFilterItems=function(e){for(var t=[],r=getListBoxItemsValue(s.wrappedItems||s.props.items),i=s.getFilterStartingIndex(e),o=i;o<i+e.items.length;o++)indexWithinRanges(o,s.selection.value)&&t.push(r[o]);return t},s.clearFilterSelection=function(){s.activeFilter.value&&(s.props.filterStore.setFilterItemState(s.activeFilter.value.filterItemKey,{value:null}),s.activeFilter.value=null)},s.clearActiveFilter=function(e){e?s.focus():s.dropdownCallout.current&&(s.dropdownCallout.current.focus(),requestAnimationFrame(function(){var e;s.activeFilterReturnElementId&&(null!=(e=document.getElementById(s.activeFilterReturnElementId))&&e.focus(),s.activeFilterReturnElementId=void 0)})),s.props.activeFilter||(s.activeFilter.value=null),s.props.onActiveFilterChanged&&s.props.onActiveFilterChanged(null),s.filterText.value="",s.dropdownOnFilterTextChanged&&s.dropdownOnFilterTextChanged(null,"")},s.filtered=function(){var e,t=s.props.filterStore.getAppliedState();for(e in t)if(t[e].value&&(!Array.isArray(t[e].value)||0<t[e].value.length))return!0;return!1},s.announceWithDebouncing=function(e){Utils_Accessibility.announce(e,!1,300)},s.state={},s.selection=e.selection||new DropdownMultiSelection,s.wrappedItems=wrapListBoxItems(e.items),s.activeFilter=e.activeFilter||new ObservableValue(null),s}return __extends(e,t),e.prototype.focus=function(){this.dropdown.current&&this.dropdown.current.focus()},e.prototype.componentDidMount=function(){this.props.filterStore&&this.props.filterStore.subscribe(this.onFilterChanged,FILTER_CHANGE_EVENT),this.onFilterChanged(this.props.filterStore.getState()),this.announceWithDebouncing=this.timerManagement.debounce(this.announceWithDebouncing,300)},e.prototype.componentWillUnmount=function(){this.props.filterStore&&this.props.filterStore.unsubscribe(this.onFilterChanged,FILTER_CHANGE_EVENT)},e.prototype.render=function(){var l=this,e=this.props,n=e.filterStore,a=e.showActiveFilterResetButton,s=!1!==e.showFilterOnText&&this.filtered();return React.createElement(UncheckedObserver,{activeFilter:this.activeFilter,filter:n},React.createElement(SelectionObserver,{selection:this.selection,onSelectionChanged:this.onSelectionChanged},function(){var e,r=l.activeFilter.value,i=[],o=0,t={className:"bolt-filter-reset-button",text:r?Resources.Reset:Resources.ResetAll,subtle:!1,onClick:r?function(){return l.onResetFilterItemClick(r.filterItemKey)}:l.onResetClick,id:"filter-reset-button"};return r?(e=n.getFilterItemState(r.filterItemKey),o=l.getSelectedFilterItems(r).length,a?n.hasChangesToReset()&&i.push(t):i.push({text:Resources.Clear,disabled:!(e&&e.value),subtle:!1,onClick:l.clearFilterSelection,id:"filter-clear-button"}),n.usesApplyMode()&&i.push({className:css(!a&&"bolt-filter-apply-button"),disabled:!n.hasChangesToApply(),text:Resources.Apply,primary:!0,subtle:!1,onClick:l.onApplyClick,id:"filter-apply-button"})):(n.hasChangesToReset()&&i.push(t),n.usesApplyMode()&&i.push({disabled:!n.hasChangesToApply(),text:Resources.Apply,primary:!0,subtle:!1,onClick:l.onDoneClick,id:"filter-done-button"})),React.createElement(ScreenSizeObserver,null,function(e){var t=e.screenSize===ScreenSize.xsmall;return React.createElement(Dropdown,{actions:i,calloutContentClassName:css("bolt-filter-callout",r&&"bolt-active-filter",t&&"absolute-fill"),className:css(l.props.className,"bolt-filter",s&&"bolt-filter-on"),dismissOnSelect:!1,enforceSingleSelect:null==r?void 0:r.enforceSingleSelect,filterByText:l.props.filterByText,onExpand:l.onExpandClick,onCollapse:function(){return l.clearActiveFilter(!0)},placeholder:s?Resources.FilterOn:Resources.Filter,ref:l.dropdown,items:l.props.items,userFilteredItems:r?l.props.userFilteredItems||r.items:[],renderExpandable:function(e){return React.createElement(DropdownExpandableButton,__assign({},e,{iconProps:{iconName:"Filter"},hideDropdownIcon:!0,renderSelectedItems:l.renderSelectedItems}))},renderCallout:function(e){return React.createElement(DropdownCalloutComponent,__assign({},e,{ariaLabel:l.props.title||Resources.FilterTitle,anchorElement:t?void 0:e.anchorElement,anchorOrigin:{horizontal:Location.start,vertical:Location.end},blurDismiss:!t,containerClassName:"bolt-filter-listbox-container",contentLocation:t?ContentLocation.Center:void 0,dropdownOrigin:{horizontal:Location.start,vertical:Location.start},enforceSingleSelect:null==r?void 0:r.enforceSingleSelect,filterText:l.filterText,ignoreMouseDown:!0,key:null==r?void 0:r.id,onFilterTextChanged:l.getOnFilterTextChanged(e),onFilterKeyDown:function(e){e&&!e.defaultPrevented&&e.which===KeyCode.enter&&l.props.filterItems.some(function(e){return"keyword-item"===e.id})&&0<l.filterText.value.length&&(n.setFilterItemState("keyword",{value:l.filterText.value}),l.filterText.value="")},showCloseButton:!0,title:r?React.createElement("div",{className:"flex-row flex-center bolt-filter-title-container"},!l.props.hideBackButton&&React.createElement(Button,{ariaLabel:Resources.Back,subtle:!0,className:"bolt-dropdown-header-button bolt-filter-back-button",iconProps:{iconName:"Back"},onClick:function(){return l.clearActiveFilter()},tabIndex:-1}),r.title||r.name,1<o&&React.createElement(Pill,{className:"bolt-filter-selection-pill",size:PillSize.compact},o)):l.props.title||Resources.FilterTitle,renderBeforeContent:l.renderBeforeContent,ref:l.dropdownCallout}))},selection:l.selection,showFilterBox:!(r&&!1===r.showFilterBox),width:t?-1:l.props.width})})}))},e.defaultProps={width:FilterCalloutWidth},e}(React.Component);function getKeywordFilterItem(i,e,t){void 0===t&&(t=[]);function r(e){i.setFilterItemState(o,{value:e}),i.usesApplyMode()||i.applyChanges()}var o="keyword",l=new TimerManagement,n=e?l.debounce(r,e,{leading:!1,trailing:!0}):r;return{items:t,renderBeforeContent:function(t){var r=new ObservableValue(""),e=i.getFilterItemState(o);return r.value=e&&e.value?e.value:"",React.createElement(Observer,{filterExpression:{observableValue:i,filter:function(){var e=i.getFilterItemState(o);r.value=e&&e.value?e.value:""}}},function(){return React.createElement(TextField,{ariaLabel:Resources.Keyword,placeholder:Resources.SearchKeyword,autoFocus:!0,className:"bolt-filter-keyword-item",value:r,onChange:function(e,t){r.value=t,n(t)},onKeyDown:function(e){e.which===KeyCode.enter&&(t(),e.preventDefault())}})})},renderSelectedItems:function(){var e=i.getFilterItemState(o);return e&&e.value?React.createElement("span",null,'"'.concat(e.value,'"')):null},enforceSingleSelect:!0,id:"keyword-item",filterItemKey:o,name:Resources.Keyword,showFilterBox:!1}}function getKeywordSearchResults(e){var t=[];return t.push({id:"keyword-header",text:Resources.Keyword,type:ListBoxItemType.Header,className:"bolt-filtered-header"}),t.push({id:e,text:format(Resources.KeywordSearchResult,e),groupId:"keyword-item"}),t}function renderSelectedFilterItems(r){var i=r.some(function(e){return!!e.iconProps});return React.createElement(React.Fragment,null,r.map(function(e,t){return React.createElement("div",{className:css("bolt-filter-selected-item flex-row",!i&&"bolt-filter-selected-text-item"),key:e.id},renderListCell(e),!i&&t!==r.length-1&&React.createElement("span",null,", "))}))}export{Filter,getKeywordFilterItem,getKeywordSearchResults,renderSelectedFilterItems};