Add ModelView ImageComponent (#7106)

* Add ModelView ImageComponent

* Remove duplicate property declarations

* Fix sqlops too
This commit is contained in:
Charles Gagnon
2019-09-08 18:29:30 -07:00
committed by GitHub
parent 789e26ae60
commit aeaac4bc17
6 changed files with 149 additions and 40 deletions

View File

@@ -19,6 +19,7 @@ import RadioButtonComponent from './radioButton.component';
import WebViewComponent from './webview.component';
import TableComponent from './table.component';
import TextComponent from './text.component';
import ImageComponent from './image.component';
import LoadingComponent from './loadingComponent.component';
import FileBrowserTreeComponent from './fileBrowserTree.component';
import EditorComponent from './editor.component';
@@ -78,6 +79,9 @@ registerComponentType(WEBVIEW_COMPONENT, ModelComponentTypes.WebView, WebViewCom
export const TEXT_COMPONENT = 'text-component';
registerComponentType(TEXT_COMPONENT, ModelComponentTypes.Text, TextComponent);
export const IMAGE_COMPONENT = 'image-component';
registerComponentType(IMAGE_COMPONENT, ModelComponentTypes.Image, ImageComponent);
export const TABLE_COMPONENT = 'table-component';
registerComponentType(TABLE_COMPONENT, ModelComponentTypes.Table, TableComponent);

View File

@@ -0,0 +1,63 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import {
Component, Input, Inject, ChangeDetectorRef, forwardRef,
OnDestroy, AfterViewInit, ElementRef
} from '@angular/core';
import * as azdata from 'azdata';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { IComponent, IComponentDescriptor, IModelStore } from 'sql/workbench/browser/modelComponents/interfaces';
@Component({
selector: 'modelview-image',
template: `
<img [style.width]="getWidth()" [style.height]="getHeight()" [src]="src" [alt]="alt">`
})
export default class ImageComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@Inject(forwardRef(() => ElementRef)) el: ElementRef) {
super(changeRef, el);
}
ngOnInit(): void {
this.baseInit();
}
ngAfterViewInit(): void {
}
ngOnDestroy(): void {
this.baseDestroy();
}
/// IComponent implementation
public setLayout(layout: any): void {
this.layout();
}
public set src(newValue: string) {
this.setPropertyFromUI<azdata.ImageComponentProperties, string>((properties, value) => { properties.src = value; }, newValue);
}
public get src(): string {
return this.getPropertyOrDefault<azdata.ImageComponentProperties, string>((props) => props.src, '');
}
public set alt(newValue: string) {
this.setPropertyFromUI<azdata.ImageComponentProperties, string>((properties, value) => { properties.alt = value; }, newValue);
}
public get alt(): string {
return this.getPropertyOrDefault<azdata.ImageComponentProperties, string>((props) => props.alt, '');
}
}