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

React components for building web UI in Azure DevOps

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