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

React components for building web UI in Azure DevOps

import{__assign,__extends,__spreadArray}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./HeaderCommandBar.css";import{ObservableLike}from"../../Core/Observable";import{Button}from"../../Button";import{MenuButton,MenuItemType}from"../../Menu";import{OverflowButton,ResizeGroup}from"../../ResizeGroup";import{css}from"../../Util";import{FILTER_CHANGE_EVENT}from"../../Utilities/Filter";import*as React from"react";import{CustomHeaderCommandBar}from"./CustomHeaderCommandBar";import{getFilterItem}from"./Items";var headerCommandBarId=1,HeaderCommandBar=function(r){function e(e){var t=r.call(this,e)||this;return t.overflowButtonRef=React.createRef(),t.buttonRefs={},t.moreButtonId=e.moreButtonId||"header-command-bar-menu-button"+headerCommandBarId++,t}return __extends(e,r),e.prototype.render=function(){var s=this,e=this.props.items,t=e.sort(function(e,t){e=null!=(e=e.rank)?e:Number.MAX_VALUE,t=null!=(t=t.rank)?t:Number.MAX_VALUE;return t<e?1:e<t?-1:0}),n="",i=(this.buttonRefs={},[]),m=[],u=[],l=[],p=null!=(r=this.props.buttonCount)?r:3,r=!e.length||"button"!==e[0].role;return t.forEach(function(t){var e,r,o,a=t.id;t.itemType===MenuItemType.Divider?t.important?i.push(React.createElement("div",{className:"bolt-header-command-item-separator",key:a})):u.push(t):!(e={ariaChecked:ObservableLike.getValue(t.checked),ariaLabel:t.ariaLabel,ariaRoleDescription:t.href?"link":"button",ariaControls:t.ariaControls,ariaDescribedBy:t.ariaDescribedBy,ariaExpanded:t.ariaExpanded,ariaHasPopup:t.ariaHasPopup,ariaSetSize:t.ariaSetSize,ariaPosInSet:t.ariaPosInSet,ariaSelected:t.ariaSelected,ariaPressed:t.ariaPressed,className:css(t.className,"bolt-header-command-item-button"),disabled:t.disabled,href:t.href,iconProps:t.iconProps,id:a,primary:t.isPrimary,role:t.role||"menuitem",subtle:t.subtle,target:t.target,text:t.text,tooltipProps:t.tooltipProps})===t.important||void 0===t.important&&0===p?u.push(t):(void 0===t.important&&(l.push(i.length),m.push(t)),p--,r=Button,o=React.createRef(),s.buttonRefs[a]=o,t.subMenuProps?(e.contextualMenuProps={menuProps:t.subMenuProps},e.hideDropdownIcon=t.hideDropdownIcon,r=MenuButton):e.onClick=function(e){return t.onActivate&&t.onActivate(t,e)},n||t.disabled||(n=a),t.renderButton?i.push(t.renderButton(e)):i.push(React.createElement(r,__assign({},e,{key:a,ref:o}))))}),i.push(React.createElement(OverflowButton,{className:css(this.props.overflowClassName,"bolt-header-command-item-button"),id:this.moreButtonId,key:this.moreButtonId,role:"menuitem",ref:this.overflowButtonRef})),this.buttonRefs[this.moreButtonId]=this.overflowButtonRef,0<e.length?React.createElement(CustomHeaderCommandBar,{className:this.props.className,focusGroupProps:{defaultElementId:n||this.moreButtonId},role:r?"menubar":void 0},React.createElement(ResizeGroup,{responsiveLayoutProps:{reduceFlickering:this.props.reduceFlickering,responsiveChildren:l.reverse()},overflowMenuItems:m.reverse(),extraItems:u,useAriaLabelForOverflow:this.props.useAriaLabelForOverflow},React.createElement("div",{className:css(this.props.className,"bolt-header-commandbar-button-group","flex-row flex-center flex-grow scroll-hidden rhythm-horizontal-8")},i))):null},e.prototype.focus=function(e){e=this.buttonRefs[e.commandBarItemId];e&&e.current&&e.current.focus()},e}(React.Component),HeaderCommandBarWithFilter=function(r){function e(e){var t=r.call(this,e)||this;return t.headerCommandBarRef=React.createRef(),t.onFilterClicked=function(){t.props.filterToggled.value=!t.props.filterToggled.value},t.onFilterChanged=function(){var e=t.props.filter.hasChangesToReset();e!==t.state.filterHasChanges&&t.setState({filterHasChanges:e})},t.state={filterHasChanges:t.props.filter.hasChangesToReset()},t}return __extends(e,r),e.prototype.componentDidMount=function(){this.props.filter.subscribe(this.onFilterChanged,FILTER_CHANGE_EVENT)},e.prototype.componentWillUnmount=function(){this.props.filter.unsubscribe(this.onFilterChanged,FILTER_CHANGE_EVENT)},e.prototype.render=function(){var e=this.props.items?__spreadArray([],this.props.items,!0):[];return e.push(getFilterItem(this.onFilterClicked,this.state.filterHasChanges)),React.createElement(HeaderCommandBar,__assign({},this.props,{items:e,ref:this.headerCommandBarRef}))},e.prototype.focus=function(e){this.headerCommandBarRef.current&&this.headerCommandBarRef.current.focus(e)},e}(React.Component);export{HeaderCommandBar,HeaderCommandBarWithFilter};