azure-devops-ui
Version:
React components for building web UI in Azure DevOps
113 lines (112 loc) • 5.24 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./Tabs.css";
import * as React from "react";
import { ObservableLike } from '../../Core/Observable';
import { Orientation } from '../../Components/Tabs/Tabs.Props';
import { css } from '../../Util';
import { Tab } from "./Tab";
import { TabGroupProviderContext } from "./TabGroupProviderContext";
import { TabProviderContext } from "./TabProviderContext";
import { Tabs } from "./Tabs";
export class TabList extends React.Component {
constructor(props) {
super(props);
this.generateGroupMap = (groups) => {
if (!groups) {
return {};
}
const map = {};
groups.forEach((group) => {
map[group.id] = group;
});
return map;
};
this.processChildren = (groups) => {
const childGroups = {};
React.Children.forEach(this.props.children, (child) => {
if (child) {
const groupId = child.props.groupId || "";
if (!childGroups[groupId]) {
childGroups[groupId] = {
items: [child],
groupProps: groups[groupId] || {
id: "",
name: "",
order: -1
}
};
}
else {
childGroups[groupId].items.push(child);
}
}
});
return childGroups;
};
this.processContributions = (tabs, baseGroups, childGroups) => {
tabs.forEach((tab) => {
const mappedTab = this.createRow(tab);
const groupId = tab.groupId || "";
if (!childGroups[groupId]) {
childGroups[groupId] = {
items: [mappedTab],
groupProps: baseGroups[groupId] || {
id: "",
name: "",
order: -1
}
};
}
else {
childGroups[groupId].items.push(mappedTab);
}
});
return childGroups;
};
this.processGroups = (groups) => {
const elements = [];
// Flattening to allow for sort
const flatMappedGroups = [];
for (const groupId in groups) {
flatMappedGroups.push(groups[groupId]);
}
flatMappedGroups
.sort((a, b) => (a.groupProps.order || 1000) - (b.groupProps.order || 1000))
.forEach((group) => {
group.groupProps.name &&
elements.push(React.createElement("div", { key: group.groupProps.name, className: "bolt-tablist-heading title-xs flex-noshrink" }, group.groupProps.name));
elements.push(...group.items);
});
return elements;
};
this.createRow = (tab) => {
return (React.createElement(Tab, { key: tab.id, id: tab.id, name: tab.name, url: tab.url && ObservableLike.getValue(tab.url), onBeforeTabChange: tab.onBeforeTabChange, iconProps: tab.iconProps }));
};
this.renderTitle = (header) => {
return React.createElement("div", { className: "bolt-tablist-title title-m flex-noshrink" }, header);
};
this.renderSubTitle = (header) => {
return React.createElement("div", { className: "bolt-tablist-subtitle secondary-text flex-noshrink text-ellipsis" }, header);
};
this.onSelectedTabIdChanged = () => {
this.forceUpdate();
};
}
render() {
return (React.createElement(TabGroupProviderContext.Consumer, null, (provider) => {
const { className, tabGroups } = this.props;
const mergedGroups = tabGroups ? tabGroups.concat(provider.groups) : provider.groups;
const groupMap = this.generateGroupMap(mergedGroups);
return (React.createElement(TabProviderContext.Consumer, null, (provider) => {
const selectedTabId = this.props.selectedTabId || provider.selectedId;
const tabGroups = this.processContributions(provider.tabs, groupMap, this.processChildren(groupMap));
const trueChildren = this.processGroups(tabGroups);
return (React.createElement("div", { className: css(className, "bolt-tablist flex-column") },
this.props.listTitle && this.renderTitle(this.props.listTitle),
this.props.listSubTitle && this.renderSubTitle(this.props.listSubTitle),
React.createElement(Tabs, Object.assign({ ariaLabel: this.props.listTitle, selectedTabId: selectedTabId }, this.props, { className: "bolt-tablist-tabs", orientation: Orientation.Vertical }), trueChildren)));
}));
}));
}
}