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

Added loading to dropdowns (#12214)

Browse Source 
* Added loading prop to dropdowns

* Added property for setting loading text message

* removed unnecessary sets

* changed code to match new changes

* Changed the dropdown loader to use select component instead of edit.
Added missing props in dropdown loader
This commit is contained in:
Aasim Khan
2020-09-11 16:57:28 -07:00
committed by GitHub
parent 173a715a4d
commit 8cc8dcc89c
5 changed files with 73 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/sql/workbench/browser/modelComponents/dropdown.component.ts
View File

@@ -21,12 +21,17 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { find } from 'vs/base/common/arrays';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { localize } from 'vs/nls';
@Component({
selector: 'modelview-dropdown',
template: `
<div [style.width]="getWidth()">
<div [style.display]="getLoadingDisplay()" style="width: 100%; position: relative">
<div class="modelview-loadingComponent-spinner" style="position:absolute; right: 0px; margin-right: 5px; height:15px; z-index:1" #spinnerElement></div>
<div [style.display]="getLoadingDisplay()" #loadingBox style="width: 100%;"></div>
</div>
<div [style.display]="getEditableDisplay()" #editableDropDown style="width: 100%;"></div>
<div [style.display]="getNotEditableDisplay()" #dropDown style="width: 100%;"></div>
</div>
@@ -38,9 +43,11 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
private _editableDropdown: Dropdown;
private _selectBox: SelectBox;
private _isInAccessibilityMode: boolean;
private _loadingBox: SelectBox;
@ViewChild('editableDropDown', { read: ElementRef }) private _editableDropDownContainer: ElementRef;
@ViewChild('dropDown', { read: ElementRef }) private _dropDownContainer: ElementRef;
@ViewChild('loadingBox', { read: ElementRef }) private _loadingBoxContainer: ElementRef;
constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
@@ -103,6 +110,12 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
}));
this._validations.push(() => !this.required || this.editable || !!this._selectBox.value);
}
this._loadingBox = new SelectBox([this.getStatusText()], this.getStatusText(), this.contextViewService, this._loadingBoxContainer.nativeElement);
this._loadingBox.render(this._loadingBoxContainer.nativeElement);
this._register(this._loadingBox);
this._register(attachSelectBoxStyler(this._loadingBox, this.themeService));
this._loadingBoxContainer.nativeElement.className = ''; // Removing the dropdown arrow icon from the right
}
ngOnDestroy(): void {
@@ -122,6 +135,7 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
if (this.ariaLabel !== '') {
this._selectBox.setAriaLabel(this.ariaLabel);
this._editableDropdown.ariaLabel = this.ariaLabel;
this._loadingBox.setAriaLabel(this.ariaLabel);
}
if (this.editable && !this._isInAccessibilityMode) {
@@ -141,6 +155,14 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
}
}
if (this.loading) {
this._loadingBox.setOptions([this.getStatusText()]);
this._loadingBox.selectWithOptionName(this.getStatusText());
this._loadingBox.enable();
} else {
this._loadingBox.disable();
}
this._selectBox.selectElem.required = this.required;
this._editableDropdown.inputElement.required = this.required;
this.validate();
@@ -198,11 +220,15 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
}
public getEditableDisplay(): string {
return this.editable && !this._isInAccessibilityMode ? '' : 'none';
return (this.editable && !this._isInAccessibilityMode) && !this.loading ? '' : 'none';
}
public getNotEditableDisplay(): string {
return !this.editable || this._isInAccessibilityMode ? '' : 'none';
return (!this.editable || this._isInAccessibilityMode) && !this.loading ? '' : 'none';
}
public getLoadingDisplay(): string {
return this.loading ? '' : 'none';
}
private set value(newValue: string | azdata.CategoryValue) {
@@ -240,4 +266,24 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
this._selectBox.focus();
}
}
public get showText(): boolean {
return this.getPropertyOrDefault<boolean>((props) => props.showText, false);
}
public get loading(): boolean {
return this.getPropertyOrDefault<boolean>((props) => props.loading, false);
}
public get loadingText(): string {
return this.getPropertyOrDefault<string>((props) => props.loadingText, localize('loadingMessage', "Loading"));
}
public get loadingCompletedText(): string {
return this.getPropertyOrDefault<string>((props) => props.loadingCompletedText, localize('loadingCompletedMessage', "Loading completed"));
}
public getStatusText(): string {
return this.loading ? this.loadingText : this.loadingCompletedText;
}
}