model view drop down now support editable and not editable list (#1460)

* model view drop down now support editable and not editable list

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: `
-		<div #input style="width: 100%"></div>
+
+	<div>
+		<div [style.display]="getEditableDisplay()"   #editableDropDown style="width: 100%;"></div>
+		<div [style.display]="getNotEditableDisplay()" #dropDown style="width: 100%;"></div>
+	</div>
 	`
 })
 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._editableDropdown = new Dropdown(this._editableDropDownContainer.nativeElement, this._commonService.contextViewService, this._commonService.themeService,
-			this._dropdown = new Dropdown(this._inputContainer.nativeElement, this._commonService.contextViewService, this._commonService.themeService,
 				dropdownOptions);
 
-			this._register(this._dropdown);
+			this._register(this._editableDropdown);
-			this._register(attachEditableDropdownStyler(this._dropdown, this._commonService.themeService));
+			this._register(attachEditableDropdownStyler(this._editableDropdown, this._commonService.themeService));
-			this._register(this._dropdown.onValueChange(e => {
+			this._register(this._editableDropdown.onValueChange(e => {
-				this.value = this._dropdown.value;
+				if (this.editable) {
-				this._onEventEmitter.fire({
+					this.value = this._editableDropdown.value;
-					eventType: ComponentEventType.onDidChange,
+					this._onEventEmitter.fire({
-					args: e
+						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.editable) {
-		if (this.value) {
+			this._editableDropdown.values = this.values ? this.values : [];
-			this._dropdown.value = this.value;
+			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<sqlops.DropDownProperties, string>((props) => props.value, '');
 	}
 
+	private get editable(): boolean {
+		return this.getPropertyOrDefault<sqlops.DropDownProperties, boolean>((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<sqlops.DropDownProperties, string>(this.setValueProperties, newValue);
 	}

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<any>;
 	}
 
-	export interface DropDownComponent extends Component {
+	export interface DropDownComponent extends Component, DropDownProperties {
 		value: string;
 		values: string[];
 		onValueChanged: vscode.Event<any>;
@@ -600,7 +601,7 @@ declare module 'sqlops' {
 				removePage(index: number): Thenable<void>;
 
 				/**
-				 * 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<void>;

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<any> {
 		let emitter = this._emitterMap.get(ComponentEventType.onDidChange);
 		return emitter && emitter.event;