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

declarative table fix (#14844)

Browse Source 
* declarative table fixes

* reset selectedRow

* use eventHelper
This commit is contained in:
Alan Ren
2021-03-24 10:45:43 -07:00
committed by GitHub
parent 0fb01b5b34
commit 92e9a423a0
5 changed files with 57 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
View File

@@ -9,8 +9,11 @@ import * as azdata from 'azdata';
import { convertSize } from 'sql/base/browser/dom';
import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore, ModelViewAction } from 'sql/platform/dashboard/browser/interfaces';
import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { EventHelper } from 'vs/base/browser/dom';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
import { equals as arrayEquals } from 'vs/base/common/arrays';
import { KeyCode } from 'vs/base/common/keyCodes';
import { localize } from 'vs/nls';
import { ILogService } from 'vs/platform/log/common/log';
import * as colorRegistry from 'vs/platform/theme/common/colorRegistry';
@@ -37,6 +40,7 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
private columns: azdata.DeclarativeTableColumn[] = [];
private _selectedRow: number;
private _colorTheme: IColorTheme;
private _hasFocus: boolean;
constructor(
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@@ -281,26 +285,28 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
if (isDataPropertyChanged) {
this.clearContainer();
this._data = finalData;
this._selectedRow = -1;
}
super.setProperties(properties);
}
public clearContainer(): void {
super.clearContainer();
this._selectedRow = -1;
}
public get data(): azdata.DeclarativeTableCellValue[][] {
return this._data;
}
public isRowSelected(row: number): boolean {
// Only react when the user wants you to
if (this.getProperties().selectEffect !== true) {
if (!this.enableRowSelection) {
return false;
}
return this._selectedRow === row;
}
public onCellClick(row: number) {
// Only react when the user wants you to
if (this.getProperties().selectEffect !== true) {
public onRowSelected(row: number) {
if (!this.enableRowSelection) {
return;
}
if (!this.isRowSelected(row)) {
@@ -316,6 +322,14 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
}
}
public onKey(e: KeyboardEvent, row: number) {
const event = new StandardKeyboardEvent(e);
if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
this.onRowSelected(row);
EventHelper.stop(e, true);
}
}
public doAction(action: string, ...args: any[]): void {
if (action === ModelViewAction.Filter) {
this._filteredRowIndexes = args[0];
@@ -339,13 +353,32 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
'width': this.getWidth(),
'height': this.getHeight()
});
}
public getRowStyle(rowIndex: number): azdata.CssStyles {
return this.isRowSelected(rowIndex) ? {
'background-color': this._colorTheme.getColor(colorRegistry.listActiveSelectionBackground).toString(),
'color': this._colorTheme.getColor(colorRegistry.listActiveSelectionForeground).toString()
} : {};
if (this.isRowSelected(rowIndex)) {
const bgColor = this._hasFocus ? colorRegistry.listActiveSelectionBackground : colorRegistry.listInactiveSelectionBackground;
const color = this._hasFocus ? colorRegistry.listActiveSelectionForeground : colorRegistry.listInactiveSelectionForeground;
return {
'background-color': this._colorTheme.getColor(bgColor)?.toString(),
'color': this._colorTheme.getColor(color)?.toString()
};
} else {
return {};
}
}
onFocusIn() {
this._hasFocus = true;
this._changeRef.detectChanges();
}
onFocusOut() {
this._hasFocus = false;
this._changeRef.detectChanges();
}
public get enableRowSelection(): boolean {
return this.getPropertyOrDefault<boolean>((props) => props.enableRowSelection, false);
}
}