ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-18 09:35:39 -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

6
src/sql/workbench/browser/modelComponents/declarativeTable.component.html
View File

@@ -1,4 +1,4 @@
<table role="grid" #container *ngIf="columns" class="declarative-table" [attr.aria-label]="ariaLabel" [ngStyle]="CSSStyles">
<table role="grid" #container *ngIf="columns" class="declarative-table" [attr.aria-label]="ariaLabel" [ngStyle]="CSSStyles" (focusin)="onFocusIn()" (focusout)="onFocusOut()">
<thead role="rowgroup">
<tr role="row">
<ng-container *ngFor="let column of columns; let c = index;">
@@ -16,7 +16,7 @@
<tbody role="rowgroup">
<ng-container *ngIf="data.length > 0">
<ng-container *ngFor="let row of data;let r = index;">
<tr [style.display]="isFiltered(r) ? 'none' : ''" class="declarative-table-row" [ngStyle]="getRowStyle(r)" role="row">
<tr [style.display]="isFiltered(r) ? 'none' : ''" class="declarative-table-row" [ngStyle]="getRowStyle(r)" role="row" [attr.tabindex]="enableRowSelection ? 0 : null" (click)="onRowSelected(r)" (keydown)="onKey($event,r)">
<ng-container *ngFor="let cellData of row;let c = index;trackBy:trackByFnCols">
<td class="declarative-table-cell" [style.width]="getColumnWidth(c)"
[attr.aria-label]="getAriaLabel(r, c)"
@@ -36,7 +36,7 @@
</editable-select-box>
<input-box *ngIf="isInputBox(c)" [value]="cellData.value"
(onDidChange)="onInputBoxChanged($event,r,c)"></input-box>
<span *ngIf="isLabel(c)" (click)="onCellClick(r)">
<span *ngIf="isLabel(c)">
{{cellData.value}}
</span>
<model-component-wrapper *ngIf="isComponent(c) && getItemDescriptor(cellData.value)"

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);
}
}