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

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

Browse Source 
* model view drop down now support editable and not editable list
This commit is contained in:
Leila Lali
2018-05-22 13:12:53 -07:00
committed by GitHub
parent 40db0d6f6f
commit 4bfc549927
3 changed files with 75 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/sql/parts/modelComponents/dropdown.component.ts
View File

@@ -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._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<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);
}