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;