azure-devops-ui
Version:
React components for building web UI in Azure DevOps
32 lines (31 loc) • 1.88 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./Page.css";
import * as React from "react";
import { Orientation } from "./Page.Props";
import { ObservableArray } from '../../Core/Observable';
import { Intersection } from '../../Intersection';
import { SurfaceBackground, SurfaceContext } from '../../Surface';
import { TabGroupProvider, TabProvider } from '../../Tabs';
import { css } from '../../Util';
/**
* Component for stitching together the various components that make a up a page.
* Renders all children in a column-based flexbox.
* If passed an observable selected tab id and contributed tab providers, will
* wrap with a TabProvider component to provide context to consuming children.
*/
export class Page extends React.Component {
render() {
const { tabProviders, selectedTabId, tabGroups, orientation = Orientation.Vertical, scrollableContainerRef, onScroll } = this.props;
const orientationClass = orientation === Orientation.Vertical ? "flex-column" : "flex-row";
let page = (React.createElement(SurfaceContext.Consumer, null, surfaceContext => (React.createElement(Intersection, null,
React.createElement("div", { ref: scrollableContainerRef, onScroll: onScroll, className: css(this.props.className, "bolt-page v-scroll-auto", orientationClass, surfaceContext.background === SurfaceBackground.neutral && "bolt-page-grey", surfaceContext.background === SurfaceBackground.normal && "bolt-page-white") }, this.props.children)))));
if (selectedTabId) {
page = (React.createElement(TabProvider, { providers: tabProviders || new ObservableArray([]), selectedTabId: selectedTabId }, page));
}
if (tabGroups) {
page = React.createElement(TabGroupProvider, { providers: tabGroups }, page);
}
return page;
}
}