model view remove and insert components (#2351)

* added the ability to remove a component from a container to insert it to a position
This commit is contained in:
Leila Lali
2018-08-31 13:08:27 -07:00
committed by GitHub
parent 8e0c19fc8d
commit b27f69aace
25 changed files with 453 additions and 94 deletions

View File

@@ -91,10 +91,6 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC
/// IComponent implementation
public layout(): void {
this._changeRef.detectChanges();
}
public setLayout(layout: any): void {
// TODO allow configuring the look and feel
this.layout();

View File

@@ -81,10 +81,6 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
}
/// IComponent implementation
public layout(): void {
this._changeRef.detectChanges();
}
public setLayout (layout: any): void {
// TODO allow configuring the look and feel
this.layout();

View File

@@ -63,10 +63,6 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
/// IComponent implementation
public layout(): void {
this._changeRef.detectChanges();
}
public setLayout(layout: any): void {
// TODO allow configuring the look and feel
this.layout();

View File

@@ -21,6 +21,7 @@ import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentW
import URI from 'vs/base/common/uri';
import { IdGenerator } from 'vs/base/common/idGenerator';
import { createCSSRule, removeCSSRulesContainingSelector } from 'vs/base/browser/dom';
import * as nls from 'vs/nls';
export type IUserFriendlyIcon = string | URI | { light: string | URI; dark: string | URI };
@@ -46,7 +47,9 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
protected _onEventEmitter = new Emitter<IComponentEventArgs>();
public layout(): void {
this._changeRef.detectChanges();
if (!this._changeRef['destroyed']) {
this._changeRef.detectChanges();
}
}
protected baseInit(): void {
@@ -222,17 +225,34 @@ export abstract class ContainerBase<T> extends ComponentBase {
}
/// IComponent container-related implementation
public addToContainer(componentDescriptor: IComponentDescriptor, config: any): void {
public addToContainer(componentDescriptor: IComponentDescriptor, config: any, index?: number): void {
if (this.items.some(item => item.descriptor.id === componentDescriptor.id && item.descriptor.type === componentDescriptor.type)) {
return;
}
this.items.push(new ItemDescriptor(componentDescriptor, config));
if (index !== undefined && index !== null && index >= 0 && index < this.items.length) {
this.items.splice(index, 0, new ItemDescriptor(componentDescriptor, config));
} else if(!index) {
this.items.push(new ItemDescriptor(componentDescriptor, config));
} else {
throw new Error(nls.localize('invalidIndex', 'The index is invalid.'));
}
this.modelStore.eventuallyRunOnComponent(componentDescriptor.id, component => component.registerEventHandler(event => {
if (event.eventType === ComponentEventType.validityChanged) {
this.validate();
}
}));
this._changeRef.detectChanges();
return;
}
public removeFromContainer(componentDescriptor: IComponentDescriptor): boolean {
let index = this.items.findIndex(item => item.descriptor.id === componentDescriptor.id && item.descriptor.type === componentDescriptor.type);
if (index >= 0) {
this.items.splice(index, 1);
this._changeRef.detectChanges();
return true;
}
return false;
}
public clearContainer(): void {

View File

@@ -189,10 +189,6 @@ export default class DeclarativeTableComponent extends ComponentBase implements
/// IComponent implementation
public layout(): void {
this._changeRef.detectChanges();
}
public setLayout(layout: any): void {
// TODO allow configuring the look and feel
this.layout();

View File

@@ -98,10 +98,6 @@ export default class DropDownComponent extends ComponentBase implements ICompone
/// IComponent implementation
public layout(): void {
this._changeRef.detectChanges();
}
public setLayout(layout: any): void {
// TODO allow configuring the look and feel
this.layout();

View File

@@ -104,10 +104,6 @@ export default class FileBrowserTreeComponent extends ComponentBase implements I
/// IComponent implementation
public layout(): void {
this._changeRef.detectChanges();
}
public setLayout(): void {
// TODO allow configuring the look and feel
this.layout();

View File

@@ -152,7 +152,7 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
/// IComponent implementation
public layout(): void {
this._changeRef.detectChanges();
super.layout();
this.layoutInputBox();
}

View File

@@ -14,13 +14,14 @@ import { IDisposable } from 'vs/base/common/lifecycle';
* @export
* @interface IComponent
*/
export interface IComponent {
export interface IComponent extends IDisposable {
descriptor: IComponentDescriptor;
modelStore: IModelStore;
layout();
registerEventHandler(handler: (event: IComponentEventArgs) => void): IDisposable;
clearContainer?: () => void;
addToContainer?: (componentDescriptor: IComponentDescriptor, config: any) => void;
addToContainer?: (componentDescriptor: IComponentDescriptor, config: any, index?: number) => void;
removeFromContainer?: (componentDescriptor: IComponentDescriptor) => void;
setLayout?: (layout: any) => void;
setProperties?: (properties: { [key: string]: any; }) => void;
enabled: boolean;

View File

@@ -75,11 +75,6 @@ export default class ListBoxComponent extends ComponentBase implements IComponen
}
/// IComponent implementation
public layout(): void {
this._changeRef.detectChanges();
}
public setLayout(layout: any): void {
// TODO allow configuring the look and feel
this.layout();

View File

@@ -60,10 +60,6 @@ export default class LoadingComponent extends ComponentBase implements IComponen
/// IComponent implementation
public layout(): void {
this._changeRef.detectChanges();
}
public setLayout(): void {
this.layout();
}

View File

@@ -51,6 +51,7 @@ export class ModelStore implements IModelStore {
let id = component.descriptor.id;
this._componentMappings[id] = undefined;
this._componentActions[id] = undefined;
this._descriptorMappings[id] = undefined;
// TODO notify model for cleanup
}

View File

@@ -65,10 +65,6 @@ export default class RadioButtonComponent extends ComponentBase implements IComp
/// IComponent implementation
public layout(): void {
this._changeRef.detectChanges();
}
public setLayout(layout: any): void {
// TODO allow configuring the look and feel
this.layout();

View File

@@ -132,8 +132,7 @@ export default class TableComponent extends ComponentBase implements IComponent,
public layout(): void {
this.layoutTable();
this._changeRef.detectChanges();
super.layout();
}
private layoutTable(): void {

View File

@@ -43,10 +43,6 @@ export default class TextComponent extends ComponentBase implements IComponent,
/// IComponent implementation
public layout(): void {
this._changeRef.detectChanges();
}
public setLayout(layout: any): void {
// TODO allow configuring the look and feel
this.layout();

View File

@@ -123,12 +123,11 @@ export default class TreeComponent extends ComponentBase implements IComponent,
/// IComponent implementation
public layout(): void {
this._changeRef.detectChanges();
if (this._tree) {
this.layoutTree();
this._tree.refresh();
}
super.layout();
}
private layoutTree(): void {

View File

@@ -71,15 +71,31 @@ export abstract class ViewBase extends AngularDisposable implements IModelView {
return descriptor;
}
private removeComponent(component: IComponentShape): void {
if (component.itemConfigs) {
for (let item of component.itemConfigs) {
this.removeFromContainer(component.id, item);
}
}
}
clearContainer(componentId: string): void {
this.queueAction(componentId, (component) => component.clearContainer());
}
addToContainer(containerId: string, itemConfig: IItemConfig): void {
addToContainer(containerId: string, itemConfig: IItemConfig, index?: number): void {
// Do not return the promise as this should be non-blocking
this.queueAction(containerId, (component) => {
let childDescriptor = this.defineComponent(itemConfig.componentShape);
component.addToContainer(childDescriptor, itemConfig.config);
component.addToContainer(childDescriptor, itemConfig.config, index);
});
}
removeFromContainer(containerId: string, itemConfig: IItemConfig): void {
let childDescriptor = this.modelStore.getComponentDescriptor(itemConfig.componentShape.id);
this.queueAction(containerId, (component) => {
component.removeFromContainer(childDescriptor);
this.removeComponent(itemConfig.componentShape);
});
}