add ability to dynamically update tabs (#9911)

* add dashboard and tabbedPanel samples

* add updateTabs to tabbedPanel component

* add updateTabs to tabbedPanel component
This commit is contained in:
Alan Ren
2020-04-09 12:02:00 -07:00
committed by GitHub
parent 82f21faf79
commit 23f1a08aa0
6 changed files with 117 additions and 50 deletions

View File

@@ -495,29 +495,33 @@ class ToolbarContainerBuilder extends GenericContainerBuilder<azdata.ToolbarCont
class TabbedPanelComponentBuilder extends ContainerBuilderImpl<azdata.TabbedPanelComponent, azdata.TabbedPanelLayout, any> implements azdata.TabbedPanelComponentBuilder {
withTabs(items: (azdata.Tab | azdata.TabGroup)[]): azdata.ContainerBuilder<azdata.TabbedPanelComponent, azdata.TabbedPanelLayout, any> {
const itemConfigs = [];
items.forEach(item => {
if (item && 'tabs' in item) {
item.tabs.forEach(tab => {
itemConfigs.push(this.toItemConfig(tab.content, tab.title, tab.id, item.title, tab.icon));
});
} else {
const tab = <azdata.Tab>item;
itemConfigs.push(this.toItemConfig(tab.content, tab.title, tab.id, undefined, tab.icon));
}
});
this._component.itemConfigs = itemConfigs;
this._component.itemConfigs = createFromTabs(items);
return this;
}
}
toItemConfig(content: azdata.Component, title: string, id?: string, group?: string, icon?: string | URI | { light: string | URI; dark: string | URI }): InternalItemConfig {
return new InternalItemConfig(content as ComponentWrapper, {
title: title,
group: group,
id: id,
icon: icon
});
}
function createFromTabs(items: (azdata.Tab | azdata.TabGroup)[]): InternalItemConfig[] {
const itemConfigs = [];
items.forEach(item => {
if (item && 'tabs' in item) {
item.tabs.forEach(tab => {
itemConfigs.push(toTabItemConfig(tab.content, tab.title, tab.id, item.title, tab.icon));
});
} else {
const tab = <azdata.Tab>item;
itemConfigs.push(toTabItemConfig(tab.content, tab.title, tab.id, undefined, tab.icon));
}
});
return itemConfigs;
}
function toTabItemConfig(content: azdata.Component, title: string, id?: string, group?: string, icon?: string | URI | { light: string | URI; dark: string | URI }): InternalItemConfig {
return new InternalItemConfig(content as ComponentWrapper, {
title: title,
group: group,
id: id,
icon: icon
});
}
class LoadingComponentBuilder extends ComponentBuilderImpl<azdata.LoadingComponent> implements azdata.LoadingComponentBuilder {
@@ -1728,6 +1732,13 @@ class TabbedPanelComponentWrapper extends ComponentWrapper implements azdata.Tab
this.properties = {};
this._emitterMap.set(ComponentEventType.onDidChange, new Emitter<string>());
}
updateTabs(tabs: (azdata.Tab | azdata.TabGroup)[]): void {
this.clearItems();
const itemConfigs = createFromTabs(tabs);
itemConfigs.forEach(itemConfig => {
this.addItem(itemConfig.component, itemConfig.config);
});
}
public get onTabChanged(): vscode.Event<string> {
let emitter = this._emitterMap.get(ComponentEventType.onDidChange);