ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-19 01:25:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Genericify components (#12158)

Browse Source 
* Genericify components

* Fix compile issue

* Fix feedback

* Genericify azdata components (#12164)

* azdata generics

* Add the withProps method to azdata proposed as there may be mistakes with the interfaces in the generics

* Fix build issues because of other extensions

* Remove extra spaces
This commit is contained in:
Amir Omidi
2020-09-08 16:15:24 -07:00
committed by GitHub
parent e2b5e9bd66
commit 9ed274fb39
37 changed files with 490 additions and 423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/sql/workbench/browser/modelComponents/button.component.ts
View File

@@ -33,7 +33,7 @@ import { convertSize } from 'sql/base/browser/dom';
</div>
`
})
export default class ButtonComponent extends ComponentWithIconBase implements IComponent, OnDestroy, AfterViewInit {
export default class ButtonComponent extends ComponentWithIconBase<azdata.ButtonProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _button: Button;
@@ -151,27 +151,27 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC
// CSS-bound properties
private get label(): string {
return this.getPropertyOrDefault<azdata.ButtonProperties, string>((props) => props.label, '');
return this.getPropertyOrDefault<string>((props) => props.label, '');
}
private set label(newValue: string) {
this.setPropertyFromUI<azdata.ButtonProperties, string>(this.setValueProperties, newValue);
this.setPropertyFromUI<string>(this.setValueProperties, newValue);
}
public get isFile(): boolean {
return this.getPropertyOrDefault<azdata.ButtonProperties, boolean>((props) => props.isFile, false);
return this.getPropertyOrDefault<boolean>((props) => props.isFile, false);
}
public set isFile(newValue: boolean) {
this.setPropertyFromUI<azdata.ButtonProperties, boolean>(this.setFileProperties, newValue);
this.setPropertyFromUI<boolean>(this.setFileProperties, newValue);
}
private get fileContent(): string {
return this.getPropertyOrDefault<azdata.ButtonProperties, string>((props) => props.fileContent, '');
return this.getPropertyOrDefault<string>((props) => props.fileContent, '');
}
private set fileContent(newValue: string) {
this.setPropertyFromUI<azdata.ButtonProperties, string>(this.setFileContentProperties, newValue);
this.setPropertyFromUI<string>(this.setFileContentProperties, newValue);
}
private setFileContentProperties(properties: azdata.ButtonProperties, fileContent: string): void {

20
src/sql/workbench/browser/modelComponents/card.component.ts
View File

@@ -57,7 +57,7 @@ export enum CardType {
@Component({
templateUrl: decodeURI(require.toUrl('./card.component.html'))
})
export default class CardComponent extends ComponentWithIconBase implements IComponent, OnDestroy {
export default class CardComponent extends ComponentWithIconBase<azdata.CardProperties> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
@@ -156,23 +156,23 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
// CSS-bound properties
public get label(): string {
return this.getPropertyOrDefault<CardProperties, string>((props) => props.label, '');
return this.getPropertyOrDefault<string>((props) => props.label, '');
}
public get value(): string {
return this.getPropertyOrDefault<CardProperties, string>((props) => props.value, '');
return this.getPropertyOrDefault<string>((props) => props.value, '');
}
public get cardType(): string {
return this.getPropertyOrDefault<CardProperties, string>((props) => props.cardType, 'Details');
return this.getPropertyOrDefault<string>((props) => props.cardType, 'Details');
}
public get selected(): boolean {
return this.getPropertyOrDefault<azdata.CardProperties, boolean>((props) => props.selected, false);
return this.getPropertyOrDefault<boolean>((props) => props.selected, false);
}
public set selected(newValue: boolean) {
this.setPropertyFromUI<azdata.CardProperties, boolean>((props, value) => props.selected = value, newValue);
this.setPropertyFromUI<boolean>((props, value) => props.selected = value, newValue);
}
public get isDetailsCard(): boolean {
@@ -196,20 +196,20 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
}
public get descriptions(): CardDescriptionItem[] {
return this.getPropertyOrDefault<CardProperties, CardDescriptionItem[]>((props) => props.descriptions, []);
return this.getPropertyOrDefault<CardDescriptionItem[]>((props) => props.descriptions, []);
}
public get actions(): ActionDescriptor[] {
return this.getPropertyOrDefault<CardProperties, ActionDescriptor[]>((props) => props.actions, []);
return this.getPropertyOrDefault<ActionDescriptor[]>((props) => props.actions, []);
}
public hasStatus(): boolean {
let status = this.getPropertyOrDefault<CardProperties, StatusIndicator>((props) => props.status, StatusIndicator.None);
let status = this.getPropertyOrDefault<StatusIndicator>((props) => props.status, StatusIndicator.None);
return status !== StatusIndicator.None;
}
public get statusColor(): string {
let status = this.getPropertyOrDefault<CardProperties, StatusIndicator>((props) => props.status, StatusIndicator.None);
let status = this.getPropertyOrDefault<StatusIndicator>((props) => props.status, StatusIndicator.None);
switch (status) {
case StatusIndicator.Ok:
return 'green';

14
src/sql/workbench/browser/modelComponents/checkbox.component.ts
View File

@@ -24,7 +24,7 @@ import { convertSize } from 'sql/base/browser/dom';
<div #input width="100%" [style.display]="display"></div>
`
})
export default class CheckBoxComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
export default class CheckBoxComponent extends ComponentBase<azdata.CheckBoxProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _input: Checkbox;
@@ -102,27 +102,27 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
// CSS-bound properties
public get checked(): boolean {
return this.getPropertyOrDefault<azdata.CheckBoxProperties, boolean>((props) => props.checked, false);
return this.getPropertyOrDefault<boolean>((props) => props.checked, false);
}
public set checked(newValue: boolean) {
this.setPropertyFromUI<azdata.CheckBoxProperties, boolean>((properties, value) => { properties.checked = value; }, newValue);
this.setPropertyFromUI<boolean>((properties, value) => { properties.checked = value; }, newValue);
}
private get label(): string {
return this.getPropertyOrDefault<azdata.CheckBoxProperties, string>((props) => props.label, '');
return this.getPropertyOrDefault<string>((props) => props.label, '');
}
private set label(newValue: string) {
this.setPropertyFromUI<azdata.CheckBoxProperties, string>((properties, label) => { properties.label = label; }, newValue);
this.setPropertyFromUI<string>((properties, label) => { properties.label = label; }, newValue);
}
public get required(): boolean {
return this.getPropertyOrDefault<azdata.CheckBoxProperties, boolean>((props) => props.required, false);
return this.getPropertyOrDefault<boolean>((props) => props.required, false);
}
public set required(newValue: boolean) {
this.setPropertyFromUI<azdata.CheckBoxProperties, boolean>((props, value) => props.required = value, newValue);
this.setPropertyFromUI<boolean>((props, value) => props.required = value, newValue);
}
public focus(): void {

50
src/sql/workbench/browser/modelComponents/componentBase.ts
View File

@@ -28,7 +28,7 @@ export class ItemDescriptor<T> {
constructor(public descriptor: IComponentDescriptor, public config: T) { }
}
export abstract class ComponentBase extends Disposable implements IComponent, OnDestroy, OnInit {
export abstract class ComponentBase<TPropertyBag extends azdata.ComponentProperties> extends Disposable implements IComponent, OnDestroy, OnInit {
protected properties: { [key: string]: any; } = {};
private _valid: boolean = true;
protected _validations: (() => boolean | Thenable<boolean>)[] = [];
@@ -109,17 +109,17 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
}
}
protected getProperties<TPropertyBag>(): TPropertyBag {
protected getProperties(): TPropertyBag {
return this.properties as TPropertyBag;
}
protected getPropertyOrDefault<TPropertyBag, TValue>(propertyGetter: (TPropertyBag) => TValue, defaultVal: TValue) {
let property = propertyGetter(this.getProperties<TPropertyBag>());
protected getPropertyOrDefault<TValue>(propertyGetter: (property: TPropertyBag) => TValue, defaultVal: TValue) {
let property = propertyGetter(this.getProperties());
return types.isUndefinedOrNull(property) ? defaultVal : property;
}
protected setPropertyFromUI<TPropertyBag, TValue>(propertySetter: (TPropertyBag, TValue) => void, value: TValue) {
propertySetter(this.getProperties<TPropertyBag>(), value);
protected setPropertyFromUI<TValue>(propertySetter: (TPropertyBag, TValue) => void, value: TValue) {
propertySetter(this.getProperties(), value);
this.fireEvent({
eventType: ComponentEventType.PropertiesChanged,
args: this.getProperties()
@@ -144,75 +144,75 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
}
public get height(): number | string {
return this.getPropertyOrDefault<azdata.ComponentProperties, number | string>((props) => props.height, undefined);
return this.getPropertyOrDefault<number | string>((props) => props.height, undefined);
}
public set height(newValue: number | string) {
this.setPropertyFromUI<azdata.ComponentProperties, number | string>((props, value) => props.height = value, newValue);
this.setPropertyFromUI<number | string>((props, value) => props.height = value, newValue);
}
public get width(): number | string {
return this.getPropertyOrDefault<azdata.ComponentProperties, number | string>((props) => props.width, undefined);
return this.getPropertyOrDefault<number | string>((props) => props.width, undefined);
}
public set width(newValue: number | string) {
this.setPropertyFromUI<azdata.ComponentProperties, number | string>((props, value) => props.width = value, newValue);
this.setPropertyFromUI<number | string>((props, value) => props.width = value, newValue);
}
public get position(): string {
return this.getPropertyOrDefault<azdata.ComponentProperties, string>((props) => props.position, '');
return this.getPropertyOrDefault<string>((props) => props.position, '');
}
public set position(newValue: string) {
this.setPropertyFromUI<azdata.ComponentProperties, string>((properties, position) => { properties.position = position; }, newValue);
this.setPropertyFromUI<string>((properties, position) => { properties.position = position; }, newValue);
}
public get display(): azdata.DisplayType {
return this.getPropertyOrDefault<azdata.ComponentProperties, azdata.DisplayType>((props) => props.display, undefined);
return this.getPropertyOrDefault<azdata.DisplayType>((props) => props.display, undefined);
}
public set display(newValue: azdata.DisplayType) {
this.setPropertyFromUI<azdata.ComponentProperties, string>((properties, display) => { properties.display = display; }, newValue);
this.setPropertyFromUI<string>((properties, display) => { properties.display = display; }, newValue);
}
public get ariaLabel(): string {
return this.getPropertyOrDefault<azdata.ComponentProperties, string>((props) => props.ariaLabel, '');
return this.getPropertyOrDefault<string>((props) => props.ariaLabel, '');
}
public set ariaLabel(newValue: string) {
this.setPropertyFromUI<azdata.ComponentProperties, string>((props, value) => props.ariaLabel = value, newValue);
this.setPropertyFromUI<string>((props, value) => props.ariaLabel = value, newValue);
}
public get ariaRole(): string {
return this.getPropertyOrDefault<azdata.ComponentProperties, string>((props) => props.ariaRole, '');
return this.getPropertyOrDefault<string>((props) => props.ariaRole, '');
}
public set ariaRole(newValue: string) {
this.setPropertyFromUI<azdata.ComponentProperties, string>((props, value) => props.ariaRole = value, newValue);
this.setPropertyFromUI<string>((props, value) => props.ariaRole = value, newValue);
}
public get ariaSelected(): boolean {
return this.getPropertyOrDefault<azdata.ComponentProperties, boolean>((props) => props.ariaSelected, false);
return this.getPropertyOrDefault<boolean>((props) => props.ariaSelected, false);
}
public set ariaSelected(newValue: boolean) {
this.setPropertyFromUI<azdata.ComponentProperties, boolean>((props, value) => props.ariaSelected = value, newValue);
this.setPropertyFromUI<boolean>((props, value) => props.ariaSelected = value, newValue);
}
public get ariaHidden(): boolean {
return this.getPropertyOrDefault<azdata.ComponentProperties, boolean>((props) => props.ariaHidden, false);
return this.getPropertyOrDefault<boolean>((props) => props.ariaHidden, false);
}
public set ariaHidden(newValue: boolean) {
this.setPropertyFromUI<azdata.ComponentProperties, boolean>((props, value) => props.ariaHidden = value, newValue);
this.setPropertyFromUI<boolean>((props, value) => props.ariaHidden = value, newValue);
}
public get CSSStyles(): { [key: string]: string } {
return this.getPropertyOrDefault<azdata.ComponentProperties, { [key: string]: string }>((props) => props.CSSStyles, {});
return this.getPropertyOrDefault<{ [key: string]: string }>((props) => props.CSSStyles, {});
}
public set CSSStyles(newValue: { [key: string]: string }) {
this.setPropertyFromUI<azdata.ComponentProperties, { [key: string]: string }>((properties, CSSStyles) => { properties.CSSStyles = CSSStyles; }, newValue);
this.setPropertyFromUI<{ [key: string]: string }>((properties, CSSStyles) => { properties.CSSStyles = CSSStyles; }, newValue);
}
protected getWidth(): string {
@@ -275,7 +275,7 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
}
}
export abstract class ContainerBase<T> extends ComponentBase {
export abstract class ContainerBase<T, TPropertyBag extends azdata.ComponentProperties = azdata.ComponentProperties> extends ComponentBase<TPropertyBag> {
protected items: ItemDescriptor<T>[];
@ViewChildren(ModelComponentWrapper) protected _componentWrappers: QueryList<ModelComponentWrapper>;

12
src/sql/workbench/browser/modelComponents/componentWithIconBase.ts
View File

@@ -16,7 +16,7 @@ export class ItemDescriptor<T> {
constructor(public descriptor: IComponentDescriptor, public config: T) { }
}
export abstract class ComponentWithIconBase extends ComponentBase {
export abstract class ComponentWithIconBase<T extends azdata.ComponentWithIconProperties> extends ComponentBase<T> {
protected _iconClass: string;
protected _iconPath: IUserFriendlyIcon;
@@ -49,23 +49,23 @@ export abstract class ComponentWithIconBase extends ComponentBase {
}
public get iconPath(): string | URI | { light: string | URI; dark: string | URI } {
return this.getPropertyOrDefault<azdata.ComponentWithIconProperties, IUserFriendlyIcon>((props) => props.iconPath, undefined);
return this.getPropertyOrDefault<IUserFriendlyIcon>((props) => props.iconPath, undefined);
}
public get iconHeight(): number | string {
return this.getPropertyOrDefault<azdata.ComponentWithIconProperties, number | string>((props) => props.iconHeight, '50px');
return this.getPropertyOrDefault<number | string>((props) => props.iconHeight, '50px');
}
public get iconWidth(): number | string {
return this.getPropertyOrDefault<azdata.ComponentWithIconProperties, number | string>((props) => props.iconWidth, '50px');
return this.getPropertyOrDefault<number | string>((props) => props.iconWidth, '50px');
}
public get title(): string {
return this.getPropertyOrDefault<azdata.ComponentWithIconProperties, string>((props) => props.title, '');
return this.getPropertyOrDefault<string>((props) => props.title, '');
}
public set title(newTitle: string) {
this.setPropertyFromUI<azdata.ComponentWithIconProperties, string>((properties, title) => { properties.title = title; }, newTitle);
this.setPropertyFromUI<string>((properties, title) => { properties.title = title; }, newTitle);
}
ngOnDestroy(): void {

2
src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
View File

@@ -132,7 +132,7 @@ export default class DeclarativeTableComponent extends ContainerBase<any> implem
private onCellDataChanged(newValue: any, rowIdx: number, colIdx: number): void {
this.data[rowIdx][colIdx] = newValue;
this.setPropertyFromUI<azdata.DeclarativeTableProperties, any[][]>((props, value) => props.data = value, this.data);
this.setPropertyFromUI<any[][]>((props, value) => props.data = value, this.data);
let newCellData: azdata.TableCell = {
row: rowIdx,
column: colIdx,

34
src/sql/workbench/browser/modelComponents/diffeditor.component.ts
View File

@@ -37,7 +37,7 @@ import { convertSizeToNumber } from 'sql/base/browser/dom';
</div>`,
selector: 'modelview-diff-editor-component'
})
export default class DiffEditorComponent extends ComponentBase implements IComponent, OnDestroy {
export default class DiffEditorComponent extends ComponentBase<azdata.DiffEditorComponent> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _editor: TextDiffEditor;
@@ -176,66 +176,66 @@ export default class DiffEditorComponent extends ComponentBase implements ICompo
// CSS-bound properties
public get contentLeft(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.contentLeft, undefined);
return this.getPropertyOrDefault<string>((props) => props.contentLeft, undefined);
}
public set contentLeft(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, contentLeft) => { properties.contentLeft = contentLeft; }, newValue);
this.setPropertyFromUI<string>((properties, contentLeft) => { properties.contentLeft = contentLeft; }, newValue);
}
public get contentRight(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.contentRight, undefined);
return this.getPropertyOrDefault<string>((props) => props.contentRight, undefined);
}
public set contentRight(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, contentRight) => { properties.contentRight = contentRight; }, newValue);
this.setPropertyFromUI<string>((properties, contentRight) => { properties.contentRight = contentRight; }, newValue);
}
public get languageMode(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.languageMode, undefined);
return this.getPropertyOrDefault<string>((props) => props.languageMode, undefined);
}
public set languageMode(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, languageMode) => { properties.languageMode = languageMode; }, newValue);
this.setPropertyFromUI<string>((properties, languageMode) => { properties.languageMode = languageMode; }, newValue);
}
public get isAutoResizable(): boolean {
return this.getPropertyOrDefault<azdata.EditorProperties, boolean>((props) => props.isAutoResizable, false);
return this.getPropertyOrDefault<boolean>((props) => props.isAutoResizable, false);
}
public set isAutoResizable(newValue: boolean) {
this.setPropertyFromUI<azdata.EditorProperties, boolean>((properties, isAutoResizable) => { properties.isAutoResizable = isAutoResizable; }, newValue);
this.setPropertyFromUI<boolean>((properties, isAutoResizable) => { properties.isAutoResizable = isAutoResizable; }, newValue);
}
public get minimumHeight(): number {
return this.getPropertyOrDefault<azdata.EditorProperties, number>((props) => props.minimumHeight, this._editor.minimumHeight);
return this.getPropertyOrDefault<number>((props) => props.minimumHeight, this._editor.minimumHeight);
}
public set minimumHeight(newValue: number) {
this.setPropertyFromUI<azdata.EditorProperties, number>((properties, minimumHeight) => { properties.minimumHeight = minimumHeight; }, newValue);
this.setPropertyFromUI<number>((properties, minimumHeight) => { properties.minimumHeight = minimumHeight; }, newValue);
}
public get editorUriLeft(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.editorUriLeft, '');
return this.getPropertyOrDefault<string>((props) => props.editorUriLeft, '');
}
public set editorUriLeft(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, editorUriLeft) => { properties.editorUriLeft = editorUriLeft; }, newValue);
this.setPropertyFromUI<string>((properties, editorUriLeft) => { properties.editorUriLeft = editorUriLeft; }, newValue);
}
public get editorUriRight(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.editorUriRight, '');
return this.getPropertyOrDefault<string>((props) => props.editorUriRight, '');
}
public set editorUriRight(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, editorUriRight) => { properties.editorUriRight = editorUriRight; }, newValue);
this.setPropertyFromUI<string>((properties, editorUriRight) => { properties.editorUriRight = editorUriRight; }, newValue);
}
public get title(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.title, undefined);
return this.getPropertyOrDefault<string>((props) => props.title, undefined);
}
public set title(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, title) => { properties.title = title; }, newValue);
this.setPropertyFromUI<string>((properties, title) => { properties.title = title; }, newValue);
}
}

12
src/sql/workbench/browser/modelComponents/divContainer.component.ts
View File

@@ -32,7 +32,7 @@ class DivItem {
</div>
`
})
export default class DivContainer extends ContainerBase<azdata.DivItemLayout> implements IComponent, OnDestroy, AfterViewInit {
export default class DivContainer extends ContainerBase<azdata.DivItemLayout, azdata.DivContainerProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
@ViewChild('divContainer', { read: ElementRef }) divContainer;
@@ -126,21 +126,21 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout> im
// CSS-bound properties
public get overflowY(): string {
return this.getPropertyOrDefault<azdata.DivContainerProperties, any>((props) => props.overflowY, '');
return this.getPropertyOrDefault<any>((props) => props.overflowY, '');
}
public set overflowY(newValue: string) {
this.setPropertyFromUI<azdata.DivContainerProperties, any>((properties, newValue) => { properties.overflowY = newValue; }, newValue);
this.setPropertyFromUI<any>((properties, newValue) => { properties.overflowY = newValue; }, newValue);
}
public get yOffsetChange(): number {
return this.getPropertyOrDefault<azdata.DivContainerProperties, any>((props) => props.yOffsetChange, 0);
return this.getPropertyOrDefault<any>((props) => props.yOffsetChange, 0);
}
public set yOffsetChange(newValue: number) {
this.setPropertyFromUI<azdata.DivContainerProperties, any>((properties, newValue) => { properties.yOffsetChange = newValue; }, newValue);
this.setPropertyFromUI<any>((properties, newValue) => { properties.yOffsetChange = newValue; }, newValue);
}
public get clickable(): boolean {
return this.getPropertyOrDefault<azdata.DivContainerProperties, boolean>((props) => props.clickable, false);
return this.getPropertyOrDefault<boolean>((props) => props.clickable, false);
}
public onKey(e: KeyboardEvent) {

6
src/sql/workbench/browser/modelComponents/dom.component.ts
View File

@@ -20,7 +20,7 @@ import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dash
template: '',
selector: 'modelview-dom-component'
})
export default class DomComponent extends ComponentBase implements IComponent, OnDestroy {
export default class DomComponent extends ComponentBase<azdata.DomProperties> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _renderedHtml: string;
@@ -82,10 +82,10 @@ export default class DomComponent extends ComponentBase implements IComponent, O
// CSS-bound properties
public get html(): string {
return this.getPropertyOrDefault<azdata.DomProperties, string>((props) => props.html, '');
return this.getPropertyOrDefault<string>((props) => props.html, '');
}
public set html(newValue: string) {
this.setPropertyFromUI<azdata.DomProperties, string>((properties, html) => { properties.html = html; }, newValue);
this.setPropertyFromUI<string>((properties, html) => { properties.html = html; }, newValue);
}
}

18
src/sql/workbench/browser/modelComponents/dropdown.component.ts
View File

@@ -32,7 +32,7 @@ import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } fro
</div>
`
})
export default class DropDownComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
export default class DropDownComponent extends ComponentBase<azdata.DropDownProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _editableDropdown: Dropdown;
@@ -186,15 +186,15 @@ export default class DropDownComponent extends ComponentBase implements ICompone
// CSS-bound properties
private get value(): string | azdata.CategoryValue {
return this.getPropertyOrDefault<azdata.DropDownProperties, string | azdata.CategoryValue>((props) => props.value, '');
return this.getPropertyOrDefault<string | azdata.CategoryValue>((props) => props.value, '');
}
private get editable(): boolean {
return this.getPropertyOrDefault<azdata.DropDownProperties, boolean>((props) => props.editable, false);
return this.getPropertyOrDefault<boolean>((props) => props.editable, false);
}
private get fireOnTextChange(): boolean {
return this.getPropertyOrDefault<azdata.DropDownProperties, boolean>((props) => props.fireOnTextChange, false);
return this.getPropertyOrDefault<boolean>((props) => props.fireOnTextChange, false);
}
public getEditableDisplay(): string {
@@ -206,15 +206,15 @@ export default class DropDownComponent extends ComponentBase implements ICompone
}
private set value(newValue: string | azdata.CategoryValue) {
this.setPropertyFromUI<azdata.DropDownProperties, string | azdata.CategoryValue>(this.setValueProperties, newValue);
this.setPropertyFromUI<string | azdata.CategoryValue>(this.setValueProperties, newValue);
}
private get values(): string[] | azdata.CategoryValue[] {
return this.getPropertyOrDefault<azdata.DropDownProperties, string[] | azdata.CategoryValue[]>((props) => props.values, []);
return this.getPropertyOrDefault<string[] | azdata.CategoryValue[]>((props) => props.values, []);
}
private set values(newValue: string[] | azdata.CategoryValue[]) {
this.setPropertyFromUI<azdata.DropDownProperties, string[] | azdata.CategoryValue[]>(this.setValuesProperties, newValue);
this.setPropertyFromUI<string[] | azdata.CategoryValue[]>(this.setValuesProperties, newValue);
}
private setValueProperties(properties: azdata.DropDownProperties, value: string | azdata.CategoryValue): void {
@@ -226,11 +226,11 @@ export default class DropDownComponent extends ComponentBase implements ICompone
}
public get required(): boolean {
return this.getPropertyOrDefault<azdata.DropDownProperties, boolean>((props) => props.required, false);
return this.getPropertyOrDefault<boolean>((props) => props.required, false);
}
public set required(newValue: boolean) {
this.setPropertyFromUI<azdata.DropDownProperties, boolean>((props, value) => props.required = value, newValue);
this.setPropertyFromUI<boolean>((props, value) => props.required = value, newValue);
}
public focus(): void {

22
src/sql/workbench/browser/modelComponents/editor.component.ts
View File

@@ -31,7 +31,7 @@ import { convertSizeToNumber } from 'sql/base/browser/dom';
template: '',
selector: 'modelview-editor-component'
})
export default class EditorComponent extends ComponentBase implements IComponent, OnDestroy {
export default class EditorComponent extends ComponentBase<azdata.EditorProperties> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _editor: QueryTextEditor;
@@ -164,42 +164,42 @@ export default class EditorComponent extends ComponentBase implements IComponent
// CSS-bound properties
public get content(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.content, undefined);
return this.getPropertyOrDefault<string>((props) => props.content, undefined);
}
public set content(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, content) => { properties.content = content; }, newValue);
this.setPropertyFromUI<string>((properties, content) => { properties.content = content; }, newValue);
}
public get languageMode(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.languageMode, undefined);
return this.getPropertyOrDefault<string>((props) => props.languageMode, undefined);
}
public set languageMode(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, languageMode) => { properties.languageMode = languageMode; }, newValue);
this.setPropertyFromUI<string>((properties, languageMode) => { properties.languageMode = languageMode; }, newValue);
}
public get isAutoResizable(): boolean {
return this.getPropertyOrDefault<azdata.EditorProperties, boolean>((props) => props.isAutoResizable, false);
return this.getPropertyOrDefault<boolean>((props) => props.isAutoResizable, false);
}
public set isAutoResizable(newValue: boolean) {
this.setPropertyFromUI<azdata.EditorProperties, boolean>((properties, isAutoResizable) => { properties.isAutoResizable = isAutoResizable; }, newValue);
this.setPropertyFromUI<boolean>((properties, isAutoResizable) => { properties.isAutoResizable = isAutoResizable; }, newValue);
}
public get minimumHeight(): number {
return this.getPropertyOrDefault<azdata.EditorProperties, number>((props) => props.minimumHeight, this._editor.minimumHeight);
return this.getPropertyOrDefault<number>((props) => props.minimumHeight, this._editor.minimumHeight);
}
public set minimumHeight(newValue: number) {
this.setPropertyFromUI<azdata.EditorProperties, number>((properties, minimumHeight) => { properties.minimumHeight = minimumHeight; }, newValue);
this.setPropertyFromUI<number>((properties, minimumHeight) => { properties.minimumHeight = minimumHeight; }, newValue);
}
public get editorUri(): string {
return this.getPropertyOrDefault<azdata.EditorProperties, string>((props) => props.editorUri, '');
return this.getPropertyOrDefault<string>((props) => props.editorUri, '');
}
public set editorUri(newValue: string) {
this.setPropertyFromUI<azdata.EditorProperties, string>((properties, editorUri) => { properties.editorUri = editorUri; }, newValue);
this.setPropertyFromUI<string>((properties, editorUri) => { properties.editorUri = editorUri; }, newValue);
}
}

6
src/sql/workbench/browser/modelComponents/fileBrowserTree.component.ts
View File

@@ -22,7 +22,7 @@ import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } fro
<div #fileBrowserTree [style.width]="getWidth()" [style.height]="getHeight()"></div>
`
})
export default class FileBrowserTreeComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
export default class FileBrowserTreeComponent extends ComponentBase<azdata.FileBrowserTreeProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _treeView: FileBrowserTreeView;
@@ -124,10 +124,10 @@ export default class FileBrowserTreeComponent extends ComponentBase implements I
// CSS-bound properties
public get ownerUri(): string {
return this.getPropertyOrDefault<azdata.FileBrowserTreeProperties, string>((props) => props.ownerUri, '');
return this.getPropertyOrDefault<string>((props) => props.ownerUri, '');
}
public set ownerUri(newValue: string) {
this.setPropertyFromUI<azdata.FileBrowserTreeProperties, string>((props, value) => props.ownerUri = value, newValue);
this.setPropertyFromUI<string>((props, value) => props.ownerUri = value, newValue);
}
}

6
src/sql/workbench/browser/modelComponents/groupContainer.component.ts
View File

@@ -36,7 +36,7 @@ import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dash
</div>
`
})
export default class GroupContainer extends ContainerBase<GroupLayout> implements IComponent, OnDestroy, AfterViewInit {
export default class GroupContainer extends ContainerBase<GroupLayout, GroupContainerProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
@@ -88,11 +88,11 @@ export default class GroupContainer extends ContainerBase<GroupLayout> implement
}
public set collapsed(newValue: boolean) {
this.setPropertyFromUI<GroupContainerProperties, boolean>((properties, value) => { properties.collapsed = value; }, newValue);
this.setPropertyFromUI<boolean>((properties, value) => { properties.collapsed = value; }, newValue);
}
public get collapsed(): boolean {
return this.getPropertyOrDefault<GroupContainerProperties, boolean>((props) => props.collapsed, false);
return this.getPropertyOrDefault<boolean>((props) => props.collapsed, false);
}
private hasHeader(): boolean {

10
src/sql/workbench/browser/modelComponents/hyperlink.component.ts
View File

@@ -21,7 +21,7 @@ import * as DOM from 'vs/base/browser/dom';
selector: 'modelview-hyperlink',
template: `<a [href]="url" [title]="title" [attr.aria-label]="ariaLabel" target="blank">{{label}}</a>`
})
export default class HyperlinkComponent extends TitledComponent implements IComponent, OnDestroy, AfterViewInit {
export default class HyperlinkComponent extends TitledComponent<azdata.HyperlinkComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
@@ -50,19 +50,19 @@ export default class HyperlinkComponent extends TitledComponent implements IComp
}
public set label(newValue: string) {
this.setPropertyFromUI<azdata.HyperlinkComponentProperties, string>((properties, value) => { properties.label = value; }, newValue);
this.setPropertyFromUI<string>((properties, value) => { properties.label = value; }, newValue);
}
public get label(): string {
return this.getPropertyOrDefault<azdata.HyperlinkComponentProperties, string>((props) => props.label, '');
return this.getPropertyOrDefault<string>((props) => props.label, '');
}
public set url(newValue: string) {
this.setPropertyFromUI<azdata.HyperlinkComponentProperties, string>((properties, value) => { properties.url = value; }, newValue);
this.setPropertyFromUI<string>((properties, value) => { properties.url = value; }, newValue);
}
public get url(): string {
return this.getPropertyOrDefault<azdata.HyperlinkComponentProperties, string>((props) => props.url, '');
return this.getPropertyOrDefault<string>((props) => props.url, '');
}
public onClick(e: MouseEvent): void {

3
src/sql/workbench/browser/modelComponents/image.component.ts
View File

@@ -9,6 +9,7 @@ import {
} from '@angular/core';
import * as DOM from 'vs/base/browser/dom';
import * as azdata from 'azdata';
import { ITitledComponent } from 'sql/workbench/browser/modelComponents/interfaces';
import { ComponentWithIconBase } from 'sql/workbench/browser/modelComponents/componentWithIconBase';
import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
@@ -18,7 +19,7 @@ import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dash
template: `
<div #imageContainer [title]="title" [style.width]="getWidth()" [style.height]="getHeight()" [style.background-size]="getImageSize()">`
})
export default class ImageComponent extends ComponentWithIconBase implements ITitledComponent, IComponent, OnDestroy, AfterViewInit {
export default class ImageComponent extends ComponentWithIconBase<azdata.ImageComponentProperties> implements ITitledComponent, IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
@ViewChild('imageContainer', { read: ElementRef }) imageContainer: ElementRef;

52
src/sql/workbench/browser/modelComponents/inputbox.component.ts
View File

@@ -34,7 +34,7 @@ import { convertSize, convertSizeToNumber } from 'sql/base/browser/dom';
<div [style.display]="getTextAreaDisplay()" #textarea style="width: 100%"></div>
`
})
export default class InputBoxComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _input: InputBox;
@@ -250,95 +250,95 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
// CSS-bound properties
public get value(): string {
return this.getPropertyOrDefault<azdata.InputBoxProperties, string>((props) => props.value, '');
return this.getPropertyOrDefault<string>((props) => props.value, '');
}
public set value(newValue: string) {
this.setPropertyFromUI<azdata.InputBoxProperties, string>((props, value) => props.value = value, newValue);
this.setPropertyFromUI<string>((props, value) => props.value = value, newValue);
}
public get ariaLive() {
return this.getPropertyOrDefault<azdata.InputBoxProperties, string>((props) => props.ariaLive, '');
return this.getPropertyOrDefault<string>((props) => props.ariaLive, '');
}
public get placeHolder(): string {
return this.getPropertyOrDefault<azdata.InputBoxProperties, string>((props) => props.placeHolder, '');
return this.getPropertyOrDefault<string>((props) => props.placeHolder, '');
}
public set placeHolder(newValue: string) {
this.setPropertyFromUI<azdata.InputBoxProperties, string>((props, value) => props.placeHolder = value, newValue);
this.setPropertyFromUI<string>((props, value) => props.placeHolder = value, newValue);
}
public set columns(newValue: number) {
this.setPropertyFromUI<azdata.InputBoxProperties, number>((props, value) => props.columns = value, newValue);
this.setPropertyFromUI<number>((props, value) => props.columns = value, newValue);
}
public get rows(): number {
return this.getPropertyOrDefault<azdata.InputBoxProperties, number>((props) => props.rows, undefined);
return this.getPropertyOrDefault<number>((props) => props.rows, undefined);
}
public get columns(): number {
return this.getPropertyOrDefault<azdata.InputBoxProperties, number>((props) => props.columns, undefined);
return this.getPropertyOrDefault<number>((props) => props.columns, undefined);
}
public set rows(newValue: number) {
this.setPropertyFromUI<azdata.InputBoxProperties, number>((props, value) => props.rows = value, newValue);
this.setPropertyFromUI<number>((props, value) => props.rows = value, newValue);
}
public get min(): number {
return this.getPropertyOrDefault<azdata.InputBoxProperties, number>((props) => props.min, undefined);
return this.getPropertyOrDefault<number>((props) => props.min, undefined);
}
public set min(newValue: number) {
this.setPropertyFromUI<azdata.InputBoxProperties, number>((props, value) => props.min = value, newValue);
this.setPropertyFromUI<number>((props, value) => props.min = value, newValue);
}
public get max(): number {
return this.getPropertyOrDefault<azdata.InputBoxProperties, number>((props) => props.max, undefined);
return this.getPropertyOrDefault<number>((props) => props.max, undefined);
}
public set max(newValue: number) {
this.setPropertyFromUI<azdata.InputBoxProperties, number>((props, value) => props.max = value, newValue);
this.setPropertyFromUI<number>((props, value) => props.max = value, newValue);
}
public get inputType(): string {
return this.getPropertyOrDefault<azdata.InputBoxProperties, string>((props) => props.inputType, 'text');
return this.getPropertyOrDefault<string>((props) => props.inputType, 'text');
}
public set inputType(newValue: string) {
this.setPropertyFromUI<azdata.InputBoxProperties, string>((props, value) => props.inputType = value, newValue);
this.setPropertyFromUI<string>((props, value) => props.inputType = value, newValue);
}
public get multiline(): boolean {
return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.multiline, false);
return this.getPropertyOrDefault<boolean>((props) => props.multiline, false);
}
public set multiline(newValue: boolean) {
this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.multiline = value, newValue);
this.setPropertyFromUI<boolean>((props, value) => props.multiline = value, newValue);
}
public get readOnly(): boolean {
return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.readOnly, false);
return this.getPropertyOrDefault<boolean>((props) => props.readOnly, false);
}
public set readOnly(newValue: boolean) {
this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.readOnly = value, newValue);
this.setPropertyFromUI<boolean>((props, value) => props.readOnly = value, newValue);
}
public get required(): boolean {
return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.required, false);
return this.getPropertyOrDefault<boolean>((props) => props.required, false);
}
public set required(newValue: boolean) {
this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.required = value, newValue);
this.setPropertyFromUI<boolean>((props, value) => props.required = value, newValue);
}
public get stopEnterPropagation(): boolean {
return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.stopEnterPropagation, false);
return this.getPropertyOrDefault<boolean>((props) => props.stopEnterPropagation, false);
}
public set stopEnterPropagation(newValue: boolean) {
this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.stopEnterPropagation = value, newValue);
this.setPropertyFromUI<boolean>((props, value) => props.stopEnterPropagation = value, newValue);
}
public focus(): void {
@@ -346,10 +346,10 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
}
public get validationErrorMessage(): string {
return this.getPropertyOrDefault<azdata.InputBoxProperties, string>((props) => props.validationErrorMessage, '');
return this.getPropertyOrDefault<string>((props) => props.validationErrorMessage, '');
}
public set validationErrorMessage(newValue: string) {
this.setPropertyFromUI<azdata.InputBoxProperties, string>((props, value) => props.validationErrorMessage = value, newValue);
this.setPropertyFromUI<string>((props, value) => props.validationErrorMessage = value, newValue);
}
}

10
src/sql/workbench/browser/modelComponents/listbox.component.ts
View File

@@ -26,7 +26,7 @@ import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } fro
<div #input style="width: 100%"></div>
`
})
export default class ListBoxComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
export default class ListBoxComponent extends ComponentBase<azdata.ListBoxProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _input: ListBox;
@@ -108,18 +108,18 @@ export default class ListBoxComponent extends ComponentBase implements IComponen
// CSS-bound properties
private get values(): string[] {
return this.getPropertyOrDefault<azdata.ListBoxProperties, string[]>((props) => props.values, undefined);
return this.getPropertyOrDefault<string[]>((props) => props.values, undefined);
}
private set values(newValue: string[]) {
this.setPropertyFromUI<azdata.ListBoxProperties, string[]>((props, value) => props.values = value, newValue);
this.setPropertyFromUI<string[]>((props, value) => props.values = value, newValue);
}
private get selectedRow(): number {
return this.getPropertyOrDefault<azdata.ListBoxProperties, number>((props) => props.selectedRow, undefined);
return this.getPropertyOrDefault<number>((props) => props.selectedRow, undefined);
}
private set selectedRow(newValue: number) {
this.setPropertyFromUI<azdata.ListBoxProperties, number>((props, value) => props.selectedRow = value, newValue);
this.setPropertyFromUI<number>((props, value) => props.selectedRow = value, newValue);
}
}

12
src/sql/workbench/browser/modelComponents/loadingComponent.component.ts
View File

@@ -26,7 +26,7 @@ import { status } from 'vs/base/browser/ui/aria/aria';
</model-component-wrapper>
`
})
export default class LoadingComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
export default class LoadingComponent extends ComponentBase<azdata.LoadingComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
private _component: IComponentDescriptor;
@Input() descriptor: IComponentDescriptor;
@@ -72,24 +72,24 @@ export default class LoadingComponent extends ComponentBase implements IComponen
}
public get loading(): boolean {
return this.getPropertyOrDefault<azdata.LoadingComponentProperties, boolean>((props) => props.loading, false);
return this.getPropertyOrDefault<boolean>((props) => props.loading, false);
}
public set loading(newValue: boolean) {
this.setPropertyFromUI<azdata.LoadingComponentProperties, boolean>((properties, value) => { properties.loading = value; }, newValue);
this.setPropertyFromUI<boolean>((properties, value) => { properties.loading = value; }, newValue);
this.layout();
}
public get showText(): boolean {
return this.getPropertyOrDefault<azdata.LoadingComponentProperties, boolean>((props) => props.showText, false);
return this.getPropertyOrDefault<boolean>((props) => props.showText, false);
}
public get loadingText(): string {
return this.getPropertyOrDefault<azdata.LoadingComponentProperties, string>((props) => props.loadingText, localize('loadingMessage', "Loading"));
return this.getPropertyOrDefault<string>((props) => props.loadingText, localize('loadingMessage', "Loading"));
}
public get loadingCompletedText(): string {
return this.getPropertyOrDefault<azdata.LoadingComponentProperties, string>((props) => props.loadingCompletedText, localize('loadingCompletedMessage', "Loading completed"));
return this.getPropertyOrDefault<string>((props) => props.loadingCompletedText, localize('loadingCompletedMessage', "Loading completed"));
}
public addToContainer(componentDescriptor: IComponentDescriptor): void {

6
src/sql/workbench/browser/modelComponents/propertiesContainer.component.ts
View File

@@ -22,7 +22,7 @@ import { PROPERTIES_CONTAINER_PROPERTY_NAME, PROPERTIES_CONTAINER_PROPERTY_VALUE
<properties-container> </properties-container>
`
})
export default class PropertiesContainerComponent extends ComponentBase implements IComponent, OnDestroy {
export default class PropertiesContainerComponent extends ComponentBase<azdata.PropertiesContainerComponentProperties> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
@@ -48,11 +48,11 @@ export default class PropertiesContainerComponent extends ComponentBase implemen
}
public get propertyItems(): PropertyItem[] {
return this.getPropertyOrDefault<azdata.PropertiesContainerComponentProperties, azdata.PropertiesContainerItem[]>((props) => props.propertyItems, []);
return this.getPropertyOrDefault<azdata.PropertiesContainerItem[]>((props) => props.propertyItems, []);
}
public set propertyItems(newValue: azdata.PropertiesContainerItem[]) {
this.setPropertyFromUI<azdata.PropertiesContainerComponentProperties, azdata.PropertiesContainerItem[]>((props, value) => props.propertyItems = value, newValue);
this.setPropertyFromUI<azdata.PropertiesContainerItem[]>((props, value) => props.propertyItems = value, newValue);
this._propertiesContainer.propertyItems = newValue;
}
}

18
src/sql/workbench/browser/modelComponents/radioButton.component.ts
View File

@@ -23,7 +23,7 @@ import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } fro
</div>
`
})
export default class RadioButtonComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
export default class RadioButtonComponent extends ComponentBase<azdata.RadioButtonProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _input: RadioButton;
@@ -80,19 +80,19 @@ export default class RadioButtonComponent extends ComponentBase implements IComp
// CSS-bound properties
public get checked(): boolean {
return this.getPropertyOrDefault<azdata.RadioButtonProperties, boolean>((props) => props.checked, false);
return this.getPropertyOrDefault<boolean>((props) => props.checked, false);
}
public set checked(newValue: boolean) {
this.setPropertyFromUI<azdata.RadioButtonProperties, boolean>((properties, value) => { properties.checked = value; }, newValue);
this.setPropertyFromUI<boolean>((properties, value) => { properties.checked = value; }, newValue);
}
public set value(newValue: string) {
this.setPropertyFromUI<azdata.RadioButtonProperties, string>((properties, value) => { properties.value = value; }, newValue);
this.setPropertyFromUI<string>((properties, value) => { properties.value = value; }, newValue);
}
public get value(): string {
return this.getPropertyOrDefault<azdata.RadioButtonProperties, string>((props) => props.value, '');
return this.getPropertyOrDefault<string>((props) => props.value, '');
}
public getLabel(): string {
@@ -100,19 +100,19 @@ export default class RadioButtonComponent extends ComponentBase implements IComp
}
public get label(): string {
return this.getPropertyOrDefault<azdata.RadioButtonProperties, string>((props) => props.label, '');
return this.getPropertyOrDefault<string>((props) => props.label, '');
}
public set label(newValue: string) {
this.setPropertyFromUI<azdata.RadioButtonProperties, string>((properties, label) => { properties.label = label; }, newValue);
this.setPropertyFromUI<string>((properties, label) => { properties.label = label; }, newValue);
}
public get name(): string {
return this.getPropertyOrDefault<azdata.RadioButtonProperties, string>((props) => props.name, '');
return this.getPropertyOrDefault<string>((props) => props.name, '');
}
public set name(newValue: string) {
this.setPropertyFromUI<azdata.RadioButtonProperties, string>((properties, label) => { properties.name = label; }, newValue);
this.setPropertyFromUI<string>((properties, label) => { properties.name = label; }, newValue);
}
public focus(): void {

22
src/sql/workbench/browser/modelComponents/radioCardGroup.component.ts
View File

@@ -19,7 +19,7 @@ import { deepClone } from 'vs/base/common/objects';
@Component({
templateUrl: decodeURI(require.toUrl('./radioCardGroup.component.html'))
})
export default class RadioCardGroup extends ComponentBase implements IComponent, OnDestroy {
export default class RadioCardGroup extends ComponentBase<azdata.RadioCardGroupComponentProperties> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
@ViewChildren('cardDiv') cardElements: QueryList<ElementRef>;
@@ -96,38 +96,34 @@ export default class RadioCardGroup extends ComponentBase implements IComponent,
}
public get cards(): azdata.RadioCard[] {
return this.getSpecficProperties().cards ?? [];
return this.getProperties().cards ?? [];
}
public get cardWidth(): string | undefined {
return this.getSpecficProperties().cardWidth ?? undefined;
return this.getProperties().cardWidth ?? undefined;
}
public get cardHeight(): string | undefined {
return this.getSpecficProperties().cardHeight ?? undefined;
return this.getProperties().cardHeight ?? undefined;
}
public get iconWidth(): string | undefined {
return this.getSpecficProperties().iconWidth ?? undefined;
return this.getProperties().iconWidth ?? undefined;
}
public get iconHeight(): string | undefined {
return this.getSpecficProperties().iconHeight ?? undefined;
return this.getProperties().iconHeight ?? undefined;
}
public get selectedCardId(): string | undefined {
return this.getSpecficProperties().selectedCardId ?? undefined;
return this.getProperties().selectedCardId ?? undefined;
}
public get orientation(): string {
const x = this.getSpecficProperties().orientation ?? 'horizontal';
const x = this.getProperties().orientation ?? 'horizontal';
return x;
}
private getSpecficProperties(): azdata.RadioCardGroupComponentProperties {
return this.getProperties<azdata.RadioCardGroupComponentProperties>();
}
public getIconClass(cardId: string): string {
if (!this.iconClasses[cardId]) {
this.iconClasses[cardId] = `cardIcon icon ${createIconCssClass(this.getCardById(cardId).icon)}`;
@@ -149,7 +145,7 @@ export default class RadioCardGroup extends ComponentBase implements IComponent,
}
const cardElement = this.getCardElement(cardId);
cardElement.nativeElement.focus();
this.setPropertyFromUI<azdata.RadioCardGroupComponentProperties, string | undefined>((props, value) => props.selectedCardId = value, cardId);
this.setPropertyFromUI<string | undefined>((props, value) => props.selectedCardId = value, cardId);
this._changeRef.detectChanges();
this.fireEvent({
eventType: ComponentEventType.onDidChange,

3
src/sql/workbench/browser/modelComponents/separator.component.ts
View File

@@ -7,6 +7,7 @@ import {
Component, Input, Inject, ChangeDetectorRef, forwardRef,
ViewChild, ElementRef, OnDestroy, AfterViewInit
} from '@angular/core';
import * as azdata from 'azdata';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
@@ -19,7 +20,7 @@ import { Separator } from 'sql/base/browser/ui/separator/separator';
<div #separator> </div>
`
})
export default class SeparatorComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
export default class SeparatorComponent extends ComponentBase<azdata.SeparatorComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
private _separator: Separator;
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;

9
src/sql/workbench/browser/modelComponents/splitviewContainer.component.ts
View File

@@ -3,10 +3,9 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import 'vs/css!./media/flexContainer';
import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ElementRef, OnDestroy } from '@angular/core';
import { FlexItemLayout, SplitViewLayout } from 'azdata';
import { FlexItemLayout, SplitViewLayout, SplitViewContainer } from 'azdata';
import { FlexItem } from './flexContainer.component';
import { ContainerBase, ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { Event } from 'vs/base/common/event';
@@ -22,7 +21,7 @@ class SplitPane implements IView {
maximumSize: number;
onDidChange: Event<number> = Event.None;
size: number;
component: ComponentBase;
component: ComponentBase<SplitViewContainer>;
layout(size: number): void {
this.size = size;
try {
@@ -48,7 +47,7 @@ class SplitPane implements IView {
`
})
export default class SplitViewContainer extends ContainerBase<FlexItemLayout> implements IComponent, OnDestroy {
export default class SplitViewContainerImpl extends ContainerBase<FlexItemLayout> implements IComponent, OnDestroy {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _flexFlow: string;
@@ -87,7 +86,7 @@ export default class SplitViewContainer extends ContainerBase<FlexItemLayout> im
}
private GetCorrespondingView(component: IComponent, orientation: Orientation): IView {
let c = component as ComponentBase;
let c = component as ComponentBase<SplitViewContainer>;
let basicView: SplitPane = new SplitPane();
basicView.orientation = orientation;
basicView.element = c.getHtml();

32
src/sql/workbench/browser/modelComponents/table.component.ts
View File

@@ -42,7 +42,7 @@ export enum ColumnSizingMode {
<div #table style="height:100%;" [style.font-size]="fontSize" [style.width]="width"></div>
`
})
export default class TableComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
export default class TableComponent extends ComponentBase<azdata.TableComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _table: Table<Slick.SlickData>;
@@ -368,62 +368,62 @@ export default class TableComponent extends ComponentBase implements IComponent,
// CSS-bound properties
public get data(): any[][] {
return this.getPropertyOrDefault<azdata.TableComponentProperties, any[]>((props) => props.data, []);
return this.getPropertyOrDefault<any[]>((props) => props.data, []);
}
public set data(newValue: any[][]) {
this.setPropertyFromUI<azdata.TableComponentProperties, any[][]>((props, value) => props.data = value, newValue);
this.setPropertyFromUI<any[][]>((props, value) => props.data = value, newValue);
}
public get columns(): string[] | azdata.TableColumn[] {
return this.getPropertyOrDefault<azdata.TableComponentProperties, string[]>((props) => props.columns, []);
return this.getPropertyOrDefault<string[] | azdata.TableColumn[]>((props) => props.columns, []);
}
public get fontSize(): number | string {
return this.getPropertyOrDefault<azdata.TableComponentProperties, number | string>((props) => props.fontSize, '');
return this.getPropertyOrDefault<number | string>((props) => props.fontSize, '');
}
public set columns(newValue: string[] | azdata.TableColumn[]) {
this.setPropertyFromUI<azdata.TableComponentProperties, string[] | azdata.TableColumn[]>((props, value) => props.columns = value, newValue);
this.setPropertyFromUI<string[] | azdata.TableColumn[]>((props, value) => props.columns = value, newValue);
}
public get selectedRows(): number[] {
return this.getPropertyOrDefault<azdata.TableComponentProperties, number[]>((props) => props.selectedRows, []);
return this.getPropertyOrDefault<number[]>((props) => props.selectedRows, []);
}
public set selectedRows(newValue: number[]) {
this.setPropertyFromUI<azdata.TableComponentProperties, number[]>((props, value) => props.selectedRows = value, newValue);
this.setPropertyFromUI<number[]>((props, value) => props.selectedRows = value, newValue);
}
public get forceFitColumns() {
return this.getPropertyOrDefault<azdata.TableComponentProperties, ColumnSizingMode>((props) => props.forceFitColumns, ColumnSizingMode.ForceFit);
return this.getPropertyOrDefault<ColumnSizingMode>((props) => props.forceFitColumns, ColumnSizingMode.ForceFit);
}
public get title() {
return this.getPropertyOrDefault<azdata.TableComponentProperties, string>((props) => props.title, '');
return this.getPropertyOrDefault<string>((props) => props.title, '');
}
public get ariaRowCount(): number {
return this.getPropertyOrDefault<azdata.TableComponentProperties, number>((props) => props.ariaRowCount, -1);
return this.getPropertyOrDefault<number>((props) => props.ariaRowCount, -1);
}
public get ariaColumnCount(): number {
return this.getPropertyOrDefault<azdata.TableComponentProperties, number>((props) => props.ariaColumnCount, -1);
return this.getPropertyOrDefault<number>((props) => props.ariaColumnCount, -1);
}
public set moveFocusOutWithTab(newValue: boolean) {
this.setPropertyFromUI<azdata.TableComponentProperties, boolean>((props, value) => props.moveFocusOutWithTab = value, newValue);
this.setPropertyFromUI<boolean>((props, value) => props.moveFocusOutWithTab = value, newValue);
}
public get moveFocusOutWithTab(): boolean {
return this.getPropertyOrDefault<azdata.TableComponentProperties, boolean>((props) => props.moveFocusOutWithTab, false);
return this.getPropertyOrDefault<boolean>((props) => props.moveFocusOutWithTab, false);
}
public get updateCells(): azdata.TableCell[] {
return this.getPropertyOrDefault<azdata.TableComponentProperties, azdata.TableCell[]>((props) => props.updateCells, undefined);
return this.getPropertyOrDefault<azdata.TableCell[]>((props) => props.updateCells, undefined);
}
public set updateCells(newValue: azdata.TableCell[]) {
this.setPropertyFromUI<azdata.TableComponentProperties, azdata.TableCell[]>((properties, value) => { properties.updateCells = value; }, newValue);
this.setPropertyFromUI<azdata.TableCell[]>((properties, value) => { properties.updateCells = value; }, newValue);
}
}

16
src/sql/workbench/browser/modelComponents/text.component.ts
View File

@@ -37,7 +37,7 @@ import { IThemeService } from 'vs/platform/theme/common/themeService';
</p>
</ng-template>`
})
export default class TextComponent extends TitledComponent implements IComponent, OnDestroy, AfterViewInit {
export default class TextComponent extends TitledComponent<azdata.TextComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
@ViewChild('textContainer', { read: ElementRef }) textContainer: ElementRef;
@@ -71,27 +71,27 @@ export default class TextComponent extends TitledComponent implements IComponent
}
public set value(newValue: string) {
this.setPropertyFromUI<azdata.TextComponentProperties, string>((properties, value) => { properties.value = value; }, newValue);
this.setPropertyFromUI<string>((properties, value) => { properties.value = value; }, newValue);
}
public get value(): string {
return this.getPropertyOrDefault<azdata.TextComponentProperties, string>((props) => props.value, '');
return this.getPropertyOrDefault<string>((props) => props.value, '');
}
public set description(newValue: string) {
this.setPropertyFromUI<azdata.TextComponentProperties, string>((properties, value) => { properties.description = value; }, newValue);
this.setPropertyFromUI<string>((properties, value) => { properties.description = value; }, newValue);
}
public get description(): string {
return this.getPropertyOrDefault<azdata.TextComponentProperties, string>((props) => props.description, '');
return this.getPropertyOrDefault<string>((props) => props.description, '');
}
public set requiredIndicator(newValue: boolean) {
this.setPropertyFromUI<azdata.TextComponentProperties, boolean>((properties, value) => { properties.requiredIndicator = value; }, newValue);
this.setPropertyFromUI<boolean>((properties, value) => { properties.requiredIndicator = value; }, newValue);
}
public get requiredIndicator(): boolean {
return this.getPropertyOrDefault<azdata.TextComponentProperties, boolean>((props) => props.requiredIndicator, false);
return this.getPropertyOrDefault<boolean>((props) => props.requiredIndicator, false);
}
public setProperties(properties: { [key: string]: any; }): void {
@@ -102,7 +102,7 @@ export default class TextComponent extends TitledComponent implements IComponent
public updateText(): void {
DOM.clearNode((<HTMLElement>this.textContainer.nativeElement));
const links = this.getPropertyOrDefault<azdata.TextComponentProperties, azdata.LinkArea[]>((props) => props.links, []);
const links = this.getPropertyOrDefault<azdata.LinkArea[]>((props) => props.links, []);
// The text may contain link placeholders so go through and create those and insert them as needed now
let text = this.value;
for (let i: number = 0; i < links.length; i++) {

6
src/sql/workbench/browser/modelComponents/titledComponent.ts
View File

@@ -11,7 +11,7 @@ import * as azdata from 'azdata';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
export abstract class TitledComponent extends ComponentBase implements ITitledComponent {
export abstract class TitledComponent<T extends azdata.TitledComponentProperties> extends ComponentBase<T> implements ITitledComponent {
constructor(
protected _changeRef: ChangeDetectorRef,
@@ -20,10 +20,10 @@ export abstract class TitledComponent extends ComponentBase implements ITitledCo
}
public get title(): string {
return this.getPropertyOrDefault<azdata.TitledComponentProperties, string>((props) => props.title, '');
return this.getPropertyOrDefault<string>((props) => props.title, '');
}
public set title(newTitle: string) {
this.setPropertyFromUI<azdata.TitledComponentProperties, string>((properties, title) => { properties.title = title; }, newTitle);
this.setPropertyFromUI<string>((properties, title) => { properties.title = title; }, newTitle);
}
}

6
src/sql/workbench/browser/modelComponents/tree.component.ts
View File

@@ -45,7 +45,7 @@ class Root implements ITreeComponentItem {
<div #input style="width: 100%;height:100%"></div>
`
})
export default class TreeComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
export default class TreeComponent extends ComponentBase<azdata.TreeProperties> implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
private _tree: Tree;
@@ -163,10 +163,10 @@ export default class TreeComponent extends ComponentBase implements IComponent,
}
public get withCheckbox(): boolean {
return this.getPropertyOrDefault<azdata.TreeProperties, boolean>((props) => props.withCheckbox, false);
return this.getPropertyOrDefault<boolean>((props) => props.withCheckbox, false);
}
public set withCheckbox(newValue: boolean) {
this.setPropertyFromUI<azdata.TreeProperties, boolean>((properties, value) => { properties.withCheckbox = value; }, newValue);
this.setPropertyFromUI<boolean>((properties, value) => { properties.withCheckbox = value; }, newValue);
}
}