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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./Header.css";import*as React from"react";import{ObservableValue}from"../../Core/Observable";import{Breakpoint}from"../../Breakpoint";import{HeaderCommandBar}from"../../HeaderCommandBar";import{Observer}from"../../Observer";import{TabProviderContext}from"../../Tabs";import{css}from"../../Util";import{CustomHeader}from"./CustomHeader";import{HeaderBackButton}from"./HeaderBackButton";import{HeaderDescription}from"./HeaderDescription";import{HeaderIcon}from"./HeaderIcon";import{HeaderTitle}from"./HeaderTitle";import{HeaderTitleArea}from"./HeaderTitleArea";import{HeaderTitleRow}from"./HeaderTitleRow";class Header extends React.Component{constructor(e){super(e),this.breakpointIndex=0,this.headerCommandBarRef=React.createRef(),this.onBreakPoint=(e,t)=>{this.breakpointIndex=e,this.commandBarClassName.value=css(this.props.commandBarClassName,"flex-self-start")},this.commandBarClassName=new ObservableValue(css(e.commandBarClassName,"flex-self-start",!!e.headerBreakpoints&&"invisible"))}render(){return React.createElement(TabProviderContext.Consumer,null,e=>{const{backButtonProps:t,buttonCount:a,className:r,contentClassName:o,commandBarMoreButtonId:s,description:m,descriptionClassName:n,descriptionId:i,headerBreakpoints:c,title:l,titleAriaLevel:d,titleClassName:p,titleIconProps:h,titleId:f,titleSize:u,useAriaLabelForOverflow:B}=this.props;e=this.props.commandBarItems||e.commandBarItems;let b=void 0;return e&&(b=React.createElement(Observer,{items:e,className:this.commandBarClassName},e=>React.createElement(HeaderCommandBar,{buttonCount:a,className:e.className,items:this.getUpdatedCommandBarItems(e.items),moreButtonId:s,ref:this.headerCommandBarRef,useAriaLabelForOverflow:B}))),React.createElement(React.Fragment,null,c&&React.createElement(Breakpoint,{breakpoints:c.map(e=>e.breakpoint),onBreakpoint:this.onBreakPoint}),React.createElement(CustomHeader,{className:css(r,e&&0<e.length&&"bolt-header-with-commandbar",t&&"bolt-header-with-back-button"),separator:this.props.separator},t&&React.createElement(HeaderBackButton,{buttonProps:t}),React.createElement("div",{className:css(o,"bolt-header-content-area flex-row flex-grow flex-self-stretch")},h&&React.createElement(HeaderIcon,{iconProps:h,titleSize:u}),React.createElement(HeaderTitleArea,null,React.createElement(HeaderTitleRow,null,l&&React.createElement(HeaderTitle,{ariaLevel:d,className:p,id:f,titleSize:u},l)),m&&React.createElement(HeaderDescription,{className:n,id:i},m),this.props.children),b)))})}focus(e){this.headerCommandBarRef.current&&this.headerCommandBarRef.current.focus(e)}getUpdatedCommandBarItems(e){var t=this.props["headerBreakpoints"],t=t?t[Math.max(0,this.breakpointIndex)]:null;if(t){var{commandBarItems:t=[]}=t;if(0<t.length){const o={};t.forEach(e=>o[e.id]=e);var a=[];for(const s of e){var r=o[s.id];a.push(r?Object.assign(Object.assign({},s),r):Object.assign({},s))}return a}}return e}}export{Header};