make table keyboard shortcuts configurable (#22582)

* make table keyboard shortcuts configurable

* fix error

* new slickgrid version

* add comment

* tree grid
This commit is contained in:
Alan Ren
2023-04-03 13:21:00 -07:00
committed by GitHub
parent 38a3312cb6
commit 61b3285eaf
38 changed files with 275 additions and 87 deletions

View File

@@ -93,8 +93,7 @@ export class HeaderFilter<T extends Slick.SlickData> {
this.handler.subscribe(this.grid.onHeaderCellRendered, (e: Event, args: Slick.OnHeaderCellRenderedEventArgs<T>) => this.handleHeaderCellRendered(e, args))
.subscribe(this.grid.onBeforeHeaderCellDestroy, (e: Event, args: Slick.OnBeforeHeaderCellDestroyEventArgs<T>) => this.handleBeforeHeaderCellDestroy(e, args))
.subscribe(this.grid.onClick, (e: DOMEvent) => this.handleBodyMouseDown(e as MouseEvent))
.subscribe(this.grid.onColumnsResized, () => this.columnsResized())
.subscribe(this.grid.onKeyDown, async (e: DOMEvent) => { await this.handleGridKeyDown(e as KeyboardEvent); });
.subscribe(this.grid.onColumnsResized, () => this.columnsResized());
if (this.options.refreshColumns !== false) {
this.grid.setColumns(this.grid.getColumns());
@@ -109,6 +108,16 @@ export class HeaderFilter<T extends Slick.SlickData> {
this.disposableStore.dispose();
}
public async showMenu(): Promise<void> {
const cell = this.grid.getActiveCell();
if (cell) {
const column = this.grid.getColumns()[cell.cell] as FilterableColumn<T>;
if (column.filterable !== false && this.columnButtonMapping[column.id]) {
await this.showFilter(this.columnButtonMapping[column.id]);
}
}
}
private handleKeyDown(e: KeyboardEvent): void {
const event = new StandardKeyboardEvent(e);
if (this.menu && event.keyCode === KeyCode.Escape) {
@@ -120,23 +129,6 @@ export class HeaderFilter<T extends Slick.SlickData> {
}
}
private async handleGridKeyDown(e: KeyboardEvent): Promise<void> {
const event = new StandardKeyboardEvent(e);
// The shortcut key to open the filter menu is provided so that this feature is keyboard accessible.
// The buttons added to the column headers are set to not keyboard focusable so that they won't interfere with the slickgrid's internal focus management.
// F3 key is chosen because it is known for search related features
if (event.keyCode === KeyCode.F3) {
const cell = this.grid.getActiveCell();
if (cell) {
const column = this.grid.getColumns()[cell.cell] as FilterableColumn<T>;
if (column.filterable !== false && this.columnButtonMapping[column.id]) {
await this.showFilter(this.columnButtonMapping[column.id]);
EventHelper.stop(e, true);
}
}
}
}
private handleBodyMouseDown(e: MouseEvent): void {
if (this.menu && this.menu !== e.target && !isAncestor(e.target as Element, this.menu)) {
this.hideMenu();

View File

@@ -20,8 +20,6 @@ import { Event, Emitter } from 'vs/base/common/event';
import { range } from 'vs/base/common/arrays';
import { AsyncDataProvider } from 'sql/base/browser/ui/table/asyncDataView';
import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
import { IAccessibilityProvider } from 'sql/base/browser/ui/accessibility/accessibilityProvider';
import { IQuickInputProvider } from 'sql/base/browser/ui/quickInput/quickInputProvider';
import { localize } from 'vs/nls';
@@ -143,28 +141,9 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
this.mapMouseEvent(this._grid.onHeaderClick, this._onHeaderClick);
this.mapMouseEvent(this._grid.onDblClick, this._onDoubleClick);
this._grid.onColumnsResized.subscribe(() => this._onColumnResize.fire());
this._grid.onKeyDown.subscribe(async (e, args: Slick.OnKeyDownEventArgs<T>) => {
const evt = (e as JQuery.TriggeredEvent).originalEvent as KeyboardEvent;
const stdEvt = new StandardKeyboardEvent(evt);
if (stdEvt.altKey && stdEvt.shiftKey && stdEvt.keyCode === KeyCode.KeyS) {
const newWidth = this.resizeActiveCellColumnByQuickInput();
if (newWidth) {
stdEvt.stopPropagation();
stdEvt.preventDefault();
}
}
this._onKeyDown.fire({
event: evt,
cell: {
row: args.row,
cell: args.cell
}
});
});
}
private async resizeActiveCellColumnByQuickInput(): Promise<number | undefined> {
public async resizeActiveColumn(): Promise<void> {
const activeCell = this._grid.getActiveCell();
if (activeCell) {
const columns = this._grid.getColumns();
@@ -187,7 +166,6 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
this._grid.setColumns(columns);
this.grid.setActiveCell(activeCell.row, activeCell.cell);
}
return parseInt(newColumnWidth);
}
}
return undefined;