diff --git a/src/sql/parts/modelComponents/dropdown.component.ts b/src/sql/parts/modelComponents/dropdown.component.ts index a78f607126..ff2d6dd244 100644 --- a/src/sql/parts/modelComponents/dropdown.component.ts +++ b/src/sql/parts/modelComponents/dropdown.component.ts @@ -14,22 +14,29 @@ import Event, { Emitter } from 'vs/base/common/event'; import { ComponentBase } from 'sql/parts/modelComponents/componentBase'; import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces'; import { Dropdown, IDropdownOptions } from 'sql/base/browser/ui/editableDropdown/dropdown'; +import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox'; import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service'; import { attachListStyler } from 'vs/platform/theme/common/styler'; -import { attachEditableDropdownStyler } from 'sql/common/theme/styler'; +import { attachEditableDropdownStyler , attachSelectBoxStyler} from 'sql/common/theme/styler'; @Component({ selector: 'dropdown', template: ` -
+ +
+
+
+
` }) export default class DropDownComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit { @Input() descriptor: IComponentDescriptor; @Input() modelStore: IModelStore; - private _dropdown: Dropdown; + private _editableDropdown: Dropdown; + private _selectBox: SelectBox; - @ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef; + @ViewChild('editableDropDown', { read: ElementRef }) private _editableDropDownContainer: ElementRef; + @ViewChild('dropDown', { read: ElementRef }) private _dropDownContainer: ElementRef; constructor( @Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface, @Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) { @@ -38,11 +45,10 @@ export default class DropDownComponent extends ComponentBase implements ICompone ngOnInit(): void { this.baseInit(); - } ngAfterViewInit(): void { - if (this._inputContainer) { + if (this._editableDropDownContainer) { let dropdownOptions: IDropdownOptions = { values: [], strictSelection: false, @@ -50,18 +56,35 @@ export default class DropDownComponent extends ComponentBase implements ICompone maxHeight: 125, ariaLabel: '' }; - - this._dropdown = new Dropdown(this._inputContainer.nativeElement, this._commonService.contextViewService, this._commonService.themeService, + this._editableDropdown = new Dropdown(this._editableDropDownContainer.nativeElement, this._commonService.contextViewService, this._commonService.themeService, dropdownOptions); - this._register(this._dropdown); - this._register(attachEditableDropdownStyler(this._dropdown, this._commonService.themeService)); - this._register(this._dropdown.onValueChange(e => { - this.value = this._dropdown.value; - this._onEventEmitter.fire({ - eventType: ComponentEventType.onDidChange, - args: e - }); + this._register(this._editableDropdown); + this._register(attachEditableDropdownStyler(this._editableDropdown, this._commonService.themeService)); + this._register(this._editableDropdown.onValueChange(e => { + if (this.editable) { + this.value = this._editableDropdown.value; + this._onEventEmitter.fire({ + eventType: ComponentEventType.onDidChange, + args: e + }); + } + })); + } + if (this._dropDownContainer) { + this._selectBox = new SelectBox(this.values || [], this.value, this._commonService.contextViewService, this._dropDownContainer.nativeElement); + this._selectBox.render(this._dropDownContainer.nativeElement); + this._register(this._selectBox); + + this._register(attachSelectBoxStyler(this._selectBox, this._commonService.themeService)); + this._register(this._selectBox.onDidSelect(e => { + if (!this.editable) { + this.value = this._selectBox.value; + this._onEventEmitter.fire({ + eventType: ComponentEventType.onDidChange, + args: e + }); + } })); } } @@ -83,11 +106,21 @@ export default class DropDownComponent extends ComponentBase implements ICompone public setProperties(properties: { [key: string]: any; }): void { super.setProperties(properties); - this._dropdown.values = this.values ? this.values : []; - if (this.value) { - this._dropdown.value = this.value; + if (this.editable) { + this._editableDropdown.values = this.values ? this.values : []; + if (this.value) { + this._editableDropdown.value = this.value; + } + this._editableDropdown.enabled = this.enabled; + } else { + this._selectBox.setOptions(this.values || []); + this._selectBox.selectWithOptionName(this.value); + if (this.enabled) { + this._selectBox.enable(); + } else { + this._selectBox.disable(); + } } - this._dropdown.enabled = this.enabled; } // CSS-bound properties @@ -96,6 +129,18 @@ export default class DropDownComponent extends ComponentBase implements ICompone return this.getPropertyOrDefault((props) => props.value, ''); } + private get editable(): boolean { + return this.getPropertyOrDefault((props) => props.editable, false); + } + + public getEditableDisplay() : string { + return this.editable ? '' : 'none'; + } + + public getNotEditableDisplay() : string { + return !this.editable ? '' : 'none'; + } + private set value(newValue: string) { this.setPropertyFromUI(this.setValueProperties, newValue); } diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts index 63223e1a41..d2d059352e 100644 --- a/src/sql/sqlops.proposed.d.ts +++ b/src/sql/sqlops.proposed.d.ts @@ -265,6 +265,7 @@ declare module 'sqlops' { export interface DropDownProperties { value?: string; values?: string[]; + editable?: boolean; } export interface ButtonProperties { @@ -292,7 +293,7 @@ declare module 'sqlops' { onChanged: vscode.Event; } - export interface DropDownComponent extends Component { + export interface DropDownComponent extends Component, DropDownProperties { value: string; values: string[]; onValueChanged: vscode.Event; @@ -600,7 +601,7 @@ declare module 'sqlops' { removePage(index: number): Thenable; /** - * Go to the page at the given index in the pages array. + * Go to the page at the given index in the pages array. * @param index The index of the page to go to */ setCurrentPage(index: number): Thenable; diff --git a/src/sql/workbench/api/node/extHostModelView.ts b/src/sql/workbench/api/node/extHostModelView.ts index f0657ece46..70b86841ca 100644 --- a/src/sql/workbench/api/node/extHostModelView.ts +++ b/src/sql/workbench/api/node/extHostModelView.ts @@ -579,6 +579,13 @@ class DropDownWrapper extends ComponentWrapper implements sqlops.DropDownCompone this.setProperty('values', v); } + public get editable(): boolean { + return this.properties['editable']; + } + public set editable(v: boolean) { + this.setProperty('editable', v); + } + public get onValueChanged(): vscode.Event { let emitter = this._emitterMap.get(ComponentEventType.onDidChange); return emitter && emitter.event;