azure-devops-ui
Version:
React components for building web UI in Azure DevOps
88 lines (87 loc) • 5.74 kB
JavaScript
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";
export class Header extends React.Component {
constructor(props) {
super(props);
this.breakpointIndex = 0;
this.headerCommandBarRef = React.createRef();
this.onBreakPoint = (index, breakpoint) => {
this.breakpointIndex = index;
// This is making sure that command bar items are made visible after getting notified
// for the exact breakpoint. Otherwise, there is flickering from default to current breakpoint.
// If there are no breakpoints specified, actions are rendered at first place.
this.commandBarClassName.value = css(this.props.commandBarClassName, "flex-self-start");
};
this.commandBarClassName = new ObservableValue(css(props.commandBarClassName, "flex-self-start", !!props.headerBreakpoints && "invisible"));
}
render() {
return (React.createElement(TabProviderContext.Consumer, null, (tabProviderContext) => {
const { backButtonProps, buttonCount, className, contentClassName, commandBarMoreButtonId, description, descriptionClassName, descriptionId, headerBreakpoints, title, titleAriaLevel, titleClassName, titleIconProps, titleId, titleSize, useAriaLabelForOverflow } = this.props;
const commandBarItems = this.props.commandBarItems || tabProviderContext.commandBarItems;
let commandBarComponent = undefined;
if (commandBarItems) {
commandBarComponent = (React.createElement(Observer, { items: commandBarItems, className: this.commandBarClassName }, (props) => {
return (React.createElement(HeaderCommandBar, { buttonCount: buttonCount, className: props.className, items: this.getUpdatedCommandBarItems(props.items), moreButtonId: commandBarMoreButtonId, ref: this.headerCommandBarRef, useAriaLabelForOverflow: useAriaLabelForOverflow }));
}));
}
return (React.createElement(React.Fragment, null,
headerBreakpoints && (React.createElement(Breakpoint, { breakpoints: headerBreakpoints.map(hbp => hbp.breakpoint), onBreakpoint: this.onBreakPoint })),
React.createElement(CustomHeader, { className: css(className, commandBarItems && commandBarItems.length > 0 && "bolt-header-with-commandbar", backButtonProps && "bolt-header-with-back-button"), separator: this.props.separator },
backButtonProps && React.createElement(HeaderBackButton, { buttonProps: backButtonProps }),
React.createElement("div", { className: css(contentClassName, "bolt-header-content-area flex-row flex-grow flex-self-stretch") },
titleIconProps && React.createElement(HeaderIcon, { iconProps: titleIconProps, titleSize: titleSize }),
React.createElement(HeaderTitleArea, null,
React.createElement(HeaderTitleRow, null, title && (React.createElement(HeaderTitle, { ariaLevel: titleAriaLevel, className: titleClassName, id: titleId, titleSize: titleSize }, title))),
description && (React.createElement(HeaderDescription, { className: descriptionClassName, id: descriptionId }, description)),
this.props.children),
commandBarComponent))));
}));
}
focus(options) {
if (this.headerCommandBarRef.current) {
this.headerCommandBarRef.current.focus(options);
}
}
getUpdatedCommandBarItems(sourceCommandBarItems) {
const { headerBreakpoints } = this.props;
const breakpoint = headerBreakpoints ? headerBreakpoints[Math.max(0, this.breakpointIndex)] : null;
if (breakpoint) {
const { commandBarItems = [] } = breakpoint;
// Update if there are actions changing their look for this breakpoint
if (commandBarItems.length > 0) {
// Convert actions to a map to access later quickly
const commandBarItemsMap = {};
commandBarItems.forEach(item => (commandBarItemsMap[item.id] = item));
const targetCommandBarItems = [];
for (const commandBarItem of sourceCommandBarItems) {
const changedItem = commandBarItemsMap[commandBarItem.id];
if (changedItem) {
// Update command bar item with the specified properties
targetCommandBarItems.push(Object.assign(Object.assign({}, commandBarItem), changedItem));
}
else {
// If there is no change requested, use the same item
targetCommandBarItems.push(Object.assign({}, commandBarItem));
}
}
return targetCommandBarItems;
}
}
return sourceCommandBarItems;
}
}