azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 4.56 kB
JavaScript
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";let headerCommandBarId=1;class HeaderCommandBar extends React.Component{constructor(e){super(e),this.overflowButtonRef=React.createRef(),this.buttonRefs={},this.onLayoutChange=e=>{requestAnimationFrame(()=>this.updateTabIndexesFromRefs(e))},this.moreButtonId=e.moreButtonId||"header-command-bar-menu-button"+headerCommandBarId++}render(){var e=this.props["items"],t=e.sort((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});let s="";this.buttonRefs={};const n=[],i=[],m=[],l=[];let u=null!=(r=this.props.buttonCount)?r:3;var r=!e.length||"button"!==e[0].role;return t.forEach(t=>{var r=t.id;if(t.itemType===MenuItemType.Divider)t.important?n.push(React.createElement("div",{className:"bolt-header-command-item-separator",key:r})):m.push(t);else{var o={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:r,primary:t.isPrimary,role:t.role||"menuitem",subtle:t.subtle,target:t.target,text:t.text,tooltipProps:t.tooltipProps};if(!1===t.important||void 0===t.important&&0===u)m.push(t);else{void 0===t.important&&(l.push(n.length),i.push(t)),u--;let e=Button;var a=React.createRef();this.buttonRefs[r]=a,t.subMenuProps?(o.contextualMenuProps={menuProps:t.subMenuProps},o.hideDropdownIcon=t.hideDropdownIcon,e=MenuButton):o.onClick=e=>t.onActivate&&t.onActivate(t,e),s||t.disabled||(s=r),t.renderButton?n.push(t.renderButton(o)):n.push(React.createElement(e,Object.assign({},o,{key:r,ref:a})))}}}),n.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,menuClassName:this.props.moreButtonMenuClassName})),this.buttonRefs[this.moreButtonId]=this.overflowButtonRef,0<e.length?React.createElement(CustomHeaderCommandBar,{className:this.props.className,focusGroupProps:{defaultElementId:s||this.moreButtonId},role:r?"menubar":void 0},React.createElement(ResizeGroup,{responsiveLayoutProps:{responsiveChildren:l.reverse(),onLayoutChange:this.onLayoutChange},overflowMenuItems:i.reverse(),extraItems:m,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")},n))):null}focus(e){e=this.buttonRefs[e.commandBarItemId];e&&e.current&&e.current.focus()}updateTabIndexesFromRefs(e){var t=Object.entries(this.buttonRefs),e=t.length-e,r=t.find(([e,t])=>e!==this.moreButtonId&&t.current&&!t.current.props.disabled);const o=!r||e<=1?this.moreButtonId:r[0];t.forEach(([e,t])=>{null!=(t=t.current)&&t.setTabIndex(e===o?0:-1)})}}class HeaderCommandBarWithFilter extends React.Component{constructor(e){super(e),this.headerCommandBarRef=React.createRef(),this.onFilterClicked=()=>{this.props.filterToggled.value=!this.props.filterToggled.value},this.onFilterChanged=()=>{var e=this.props.filter.hasChangesToReset();e!==this.state.filterHasChanges&&this.setState({filterHasChanges:e})},this.state={filterHasChanges:this.props.filter.hasChangesToReset()}}componentDidMount(){this.props.filter.subscribe(this.onFilterChanged,FILTER_CHANGE_EVENT)}componentWillUnmount(){this.props.filter.unsubscribe(this.onFilterChanged,FILTER_CHANGE_EVENT)}render(){var e=this.props.items?[...this.props.items]:[];return e.push(getFilterItem(this.onFilterClicked,this.state.filterHasChanges)),React.createElement(HeaderCommandBar,Object.assign({},this.props,{items:e,ref:this.headerCommandBarRef}))}focus(e){this.headerCommandBarRef.current&&this.headerCommandBarRef.current.focus(e)}}export{HeaderCommandBar,HeaderCommandBarWithFilter};