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