azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 8.72 kB
JavaScript
import{__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./FilterBar.css";import*as React from"react";import*as Utils_Accessibility from"../../Core/Util/Accessibility";import{format}from"../../Core/Util/String";import{Button}from"../../Button";import*as Resources from"../../Resources.FilterBar";import{SurfaceBackground,SurfaceContext}from"../../Surface";import{css,getSafeId}from"../../Util";import{FILTER_APPLIED_EVENT,FILTER_CHANGE_EVENT}from"../../Utilities/Filter";var idCount=0,FilterBar=function(t){function s(e){var i=t.call(this,e)||this;if(i._firstChildIsKeywordItem=!1,i._prevContainerWidth=0,i._id=getSafeId("filter-bar-"+idCount++),i._onResize=function(){i._resizeTimeout||(i._resizeTimeout=setTimeout(function(){var e,t;i._resizeTimeout=null,i._isMounted&&(t=i._prevContainerWidth<i._filterBarElement.clientWidth,e=(!i.state.shouldHidePlaceholderLabels||!t)&&i.state.shouldHidePlaceholderLabels,t=(!i.state.shouldHaveMaxItemWidth||!t)&&i.state.shouldHaveMaxItemWidth,i._prevContainerWidth=i._filterBarElement.clientWidth,i.setState({filtersToShowStopIndex:s.RENDER_EVERYTHING,shouldHidePlaceholderLabels:e,shouldHaveMaxItemWidth:t}))},100))},i._onPageLeft=function(){i._hasMadeVisibleFilterAnnouncement=!1;var e=i._startingFilterIndices.pop()||0;i._hasPagedLeft=!0,i.setState({filtersToShowStartIndex:e,filtersToShowStopIndex:s.RENDER_EVERYTHING})},i._onPageRight=function(){i._hasMadeVisibleFilterAnnouncement=!1,i._startingFilterIndices.push(i.state.filtersToShowStartIndex),i._hasPagedRight=!0,i.setState({filtersToShowStartIndex:i.state.filtersToShowStopIndex,filtersToShowStopIndex:s.RENDER_EVERYTHING})},i._calculateFiltersToShowStopIndex=function(){for(var e=i._rightElement.clientWidth,t=0;t<i._childrenContainerElements.length;t++){var s=i._childrenContainerElements[t];if((e+=s.clientWidth+parseFloat(window.getComputedStyle(s).marginRight))>i._filterBarElement.clientWidth)return(s=i.state.filtersToShowStartIndex+t)>i.state.filtersToShowStartIndex?s:i.state.filtersToShowStartIndex+1}return i.state.filtersToShowStartIndex+i._childrenContainerElements.length},i._onFilterChanged=function(e){i.setState({hasChangesToApply:i.props.filter.hasChangesToApply(),hasChangesToReset:i.props.filter.hasChangesToReset(),filtersToShowStopIndex:s.RENDER_EVERYTHING,shouldHidePlaceholderLabels:!1})},i._onFilterApplied=function(e){i.setState({hasChangesToApply:i.props.filter.hasChangesToApply()})},i._onClearAndDismiss=function(){i.props.filter.hasChangesToReset()&&i.props.filter.reset(),i.props.onDismissClicked&&i.props.onDismissClicked(),i.focus()},i._onApplyChanges=function(){i.props.filter.applyChanges(),i.focus()},e.filter)return i._startingFilterIndices=[],i._hasMadeVisibleFilterAnnouncement=!1,i._isMounted=!1,i.state={hasChangesToReset:e.filter.hasChangesToReset(),hasChangesToApply:e.filter.hasChangesToApply(),filtersToShowStartIndex:0,filtersToShowStopIndex:s.RENDER_EVERYTHING,shouldHidePlaceholderLabels:!1,shouldHaveMaxItemWidth:!1},i;throw new Error("Cannot create a FilterBar without a filter prop.")}return __extends(s,t),s.prototype.focus=function(){this._filterItemRefs&&0<this._filterItemRefs.length&&this._filterItemRefs[0].focus()},s.prototype.forceUpdate=function(){t.prototype.forceUpdate.call(this),this._filterItemRefs&&this._filterItemRefs.forEach(function(e){return e.forceUpdate()})},s.prototype.componentDidMount=function(){this.props.filter&&this.props.filter.subscribe(this._onFilterChanged,FILTER_CHANGE_EVENT),this.props.filter&&this.props.filter.subscribe(this._onFilterApplied,FILTER_APPLIED_EVENT),window.addEventListener("resize",this._onResize);var e=this._calculateFiltersToShowStopIndex();e<React.Children.toArray(this.props.children).length-1?this.setState({shouldHidePlaceholderLabels:!0}):this.setState({filtersToShowStopIndex:e}),this._isMounted=!0,this.props.onMounted&&this.props.onMounted(this)},s.prototype.UNSAFE_componentWillReceiveProps=function(e){this.getChildKeysAsString(this.props)!==this.getChildKeysAsString(e)?this.setState({hasChangesToApply:e.filter.hasChangesToApply(),hasChangesToReset:e.filter.hasChangesToReset(),filtersToShowStartIndex:0,filtersToShowStopIndex:s.RENDER_EVERYTHING}):this.setState({hasChangesToApply:e.filter.hasChangesToApply(),hasChangesToReset:e.filter.hasChangesToReset()})},s.prototype.componentWillUnmount=function(){this.props.filter&&this.props.filter.unsubscribe(this._onFilterChanged,FILTER_CHANGE_EVENT),this.props.filter&&this.props.filter.unsubscribe(this._onFilterApplied,FILTER_APPLIED_EVENT),window.removeEventListener("resize",this._onResize),this._isMounted=!1},s.prototype.componentDidUpdate=function(){var e,t;this.props.onRenderComplete&&this.props.onRenderComplete(),this._hasPagedLeft&&0<this.state.filtersToShowStopIndex&&(0==this.state.filtersToShowStartIndex&&this._nextButtonElem&&this._nextButtonElem.focus(),this._hasPagedLeft=!1),this.state.filtersToShowStopIndex<0?(t=(e=this._calculateFiltersToShowStopIndex())===React.Children.toArray(this.props.children).length)||this.state.shouldHidePlaceholderLabels?t||this.state.shouldHaveMaxItemWidth?(this._hasPagedRight&&e===this.state.filtersToShowStartIndex+this._childrenContainerElements.length&&this._prevButtonElem&&this._prevButtonElem.focus(),this.setState({filtersToShowStopIndex:e}),this._hasPagedRight=!1):this.setState({shouldHaveMaxItemWidth:!0}):this.setState({shouldHidePlaceholderLabels:!0}):this._hasMadeVisibleFilterAnnouncement||(Utils_Accessibility.announce(format(Resources.AnnonuceVisibleFilters,this.state.filtersToShowStartIndex+1,this.state.filtersToShowStopIndex),!1),this._hasMadeVisibleFilterAnnouncement=!0),this._prevContainerWidth!=this._filterBarElement.clientWidth&&this._onResize()},s.prototype.render=function(){var s=this,e=this.props,t=e.children,i=e.filter,r=e.className,o=e.onDismissClicked,n=e.searchRoleAriaLabel,e=this.state,a=e.hasChangesToApply,l=e.hasChangesToReset,h=e.filtersToShowStopIndex,c=e.filtersToShowStartIndex,d=e.shouldHaveMaxItemWidth,p=e.shouldHidePlaceholderLabels,f=(this._filterItemRefs=[],this._childrenContainerElements=[],!0),u=!1,m=(this._firstChildIsKeywordItem=!1,React.Children.map(t,function(e){var t;return null===e?null:(t="vss-FilterBar--item",(e=e).props.isTextItem&&!u?(s._firstChildIsKeywordItem=f,u=!0,t=css(t,"vss-FilterBar--item-keyword-container")):d&&(t=css(t,"max-width-small")),f=!1,e=React.cloneElement(e,{filter:e.props.filter||i,ref:function(e){e&&s._filterItemRefs.push(e)},hideSelectedItemIcon:!0,showPlaceholderAsLabel:!p&&e.props.showPlaceholderAsLabel}),React.createElement("div",{className:t,ref:function(e){e&&s._childrenContainerElements.push(e)}},e))})),_=h<m.length,E=0<c,R=((_||E)&&(e=0<h?h:m.length,m=m.slice(c,e)),o?Resources.ClearAndDismissFilterBarLinkLabel:Resources.ClearFilterBarLinkLabel);return React.createElement(SurfaceContext.Consumer,null,function(e){return React.createElement("div",{className:css(r,"vss-FilterBar",e.background===SurfaceBackground.neutral&&"bolt-filterbar-white depth-8 no-v-margin"),role:"search","aria-label":n,id:s._id},React.createElement("div",{className:css("vss-FilterBar--list",(!s._firstChildIsKeywordItem||0<c)&&"justify-right"),ref:function(e){s._filterBarElement=e}},m,React.createElement("div",{className:"vss-FilterBar--right-items",ref:function(e){s._rightElement=e}},(E||_)&&React.createElement("div",{className:"vss-FilterBar--page-button-container"},React.createElement(Button,{className:"filter-bar-button vss-FilterBar-page-button",ref:function(e){s._prevButtonElem=e},onClick:s._onPageLeft,disabled:!E,ariaLabel:Resources.FilterPageLeftAriaLabel,iconProps:{iconName:"ChevronLeftMed"}}),React.createElement(Button,{className:"filter-bar-button vss-FilterBar-page-button",ref:function(e){s._nextButtonElem=e},onClick:s._onPageRight,disabled:!_,ariaLabel:Resources.FilterPageRightAriaLabel,iconProps:{iconName:"ChevronRightMed"}})),!s.props.hideClearAction&&React.createElement("div",{className:"vss-FilterBar--action vss-FilterBar--action-clear"},React.createElement(Button,{ariaLabel:R,className:"filter-bar-button",disabled:!l&&!o,iconProps:{iconName:"Cancel"},onClick:s._onClearAndDismiss,subtle:!0,tooltipProps:{text:R}})),i.usesApplyMode()&&React.createElement("div",{className:"vss-FilterBar--action vss-FilterBar--action-apply"},React.createElement(Button,{className:"filter-bar-button",disabled:!a,onClick:s._onApplyChanges,iconProps:{iconName:"CheckMark"}},Resources.ApplyChangesFilterBarText)))))})},s.prototype.getChildKeysAsString=function(e){e=e.children&&React.Children.map(e.children,function(e){return null===e?null:void 0===e?"":e.props.filterItemKey})||[];return JSON.stringify(e)},s.RENDER_EVERYTHING=-1,s}(React.Component);export{FilterBar};