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

table designer bug fixes (#18701)

Browse Source 
* table designer bug fixes

* pr comments

* fix debounce issue
This commit is contained in:
Alan Ren
2022-03-11 12:14:51 -08:00
committed by GitHub
parent 5c14fe4f4c
commit 4551329db0
2 changed files with 82 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/sql/base/browser/ui/table/tableCellEditorFactory.ts
View File

@@ -10,12 +10,16 @@ import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview
import { KeyCode } from 'vs/base/common/keyCodes';
import * as DOM from 'vs/base/browser/dom';
import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
import { debounce } from 'vs/base/common/decorators';
import { Event } from 'vs/base/common/event';
import { Disposable } from 'vs/base/common/lifecycle';
export interface ITableCellEditorOptions {
valueGetter?: (item: Slick.SlickData, column: Slick.Column<Slick.SlickData>) => string,
valueSetter?: (context: any, row: number, item: Slick.SlickData, column: Slick.Column<Slick.SlickData>, value: string) => void,
optionsGetter?: (item: Slick.SlickData, column: Slick.Column<Slick.SlickData>) => string[],
editorStyler: (component: InputBox | SelectBox | Dropdown) => void
editorStyler: (component: InputBox | SelectBox | Dropdown) => void,
onStyleChange: Event<void>;
}
export class TableCellEditorFactory {
@@ -32,18 +36,20 @@ export class TableCellEditorFactory {
optionsGetter: options.optionsGetter ?? function (item, column) {
return [];
},
editorStyler: options.editorStyler
editorStyler: options.editorStyler,
onStyleChange: options.onStyleChange
};
}
public getTextEditorClass(context: any, inputType: 'text' | 'number' = 'text'): any {
const self = this;
class TextEditor {
class TextEditor extends Disposable {
private _originalValue: string;
private _input: InputBox;
private _keyCaptureList: number[];
constructor(private _args: Slick.Editors.EditorOptions<Slick.SlickData>) {
super();
this.init();
const keycodesToCapture = [KeyCode.Home, KeyCode.End, KeyCode.UpArrow, KeyCode.DownArrow, KeyCode.LeftArrow, KeyCode.RightArrow];
this._keyCaptureList = keycodesToCapture.map(keycode => getCodeForKeyCode(keycode));
@@ -63,10 +69,26 @@ export class TableCellEditorFactory {
self._options.editorStyler(this._input);
this._input.element.style.height = '100%';
this._input.focus();
this._input.onDidChange(async () => {
await this.commitEdit();
});
this._register(this._input);
this._register(self._options.onStyleChange(() => {
self._options.editorStyler(this._input);
}));
}
@debounce(200)
private async commitEdit(): Promise<void> {
if (this.isValueChanged()) {
const item = this._args.grid.getDataItem(this._args.grid.getActiveCell().row);
await this.applyValue(item, this._input.value);
this._originalValue = this._input.value;
}
}
public destroy(): void {
this._input.dispose();
this.dispose();
}
public focus(): void {
@@ -84,8 +106,7 @@ export class TableCellEditorFactory {
}
public isValueChanged(): boolean {
return this._input.value !== this._originalValue.toString();
return this._input.value !== this._originalValue;
}
public serializeValue(): any {
@@ -104,13 +125,13 @@ export class TableCellEditorFactory {
public getDropdownEditorClass(context: any, defaultOptions: string[], isEditable?: boolean): any {
const self = this;
class TextEditor {
class DropdownEditor extends Disposable {
private _originalValue: string;
private _selectBox: SelectBox;
private _dropdown: Dropdown;
private _component: SelectBox | Dropdown;
private _keyCaptureList: number[];
constructor(private _args: Slick.Editors.EditorOptions<Slick.SlickData>) {
super();
this.init();
const keycodesToCapture = [KeyCode.Home, KeyCode.End, KeyCode.UpArrow, KeyCode.DownArrow, KeyCode.LeftArrow, KeyCode.RightArrow];
this._keyCaptureList = keycodesToCapture.map(keycode => getCodeForKeyCode(keycode));
@@ -126,37 +147,43 @@ export class TableCellEditorFactory {
public init(): void {
const container = DOM.$('');
this._args.container.appendChild(container);
container.style.height = '100%';
container.style.width = '100%';
if (isEditable) {
this._dropdown = new Dropdown(container, self._contextViewProvider);
container.style.height = '100%';
container.style.width = '100%';
self._options.editorStyler(this._dropdown);
this._dropdown.focus();
this._component = new Dropdown(container, self._contextViewProvider);
this._component.onValueChange(async () => {
await this.commitEdit();
});
} else {
this._selectBox = new SelectBox([], undefined, self._contextViewProvider);
container.style.height = '100%';
container.style.width = '100%';
this._selectBox.render(container);
this._selectBox.selectElem.style.height = '100%';
self._options.editorStyler(this._selectBox);
this._selectBox.focus();
this._component = new SelectBox([], undefined, self._contextViewProvider);
this._component.render(container);
this._component.selectElem.style.height = '100%';
this._component.onDidSelect(async () => {
await this.commitEdit();
});
}
self._options.editorStyler(this._component);
this._component.focus();
this._register(this._component);
this._register(self._options.onStyleChange(() => {
self._options.editorStyler(this._component);
}));
}
private async commitEdit(): Promise<void> {
if (this.isValueChanged()) {
const item = this._args.grid.getDataItem(this._args.grid.getActiveCell().row);
await this.applyValue(item, this._component.value);
this._originalValue = this._component.value;
}
}
public destroy(): void {
if (isEditable) {
this._dropdown.dispose();
} else {
this._selectBox.dispose();
}
this.dispose();
}
public focus(): void {
if (isEditable) {
this._dropdown.focus();
} else {
this._selectBox.focus();
}
this._component.focus();
}
public loadValue(item: Slick.SlickData): void {
@@ -164,12 +191,12 @@ export class TableCellEditorFactory {
const options = self._options.optionsGetter(item, this._args.column) ?? defaultOptions;
const idx = options?.indexOf(this._originalValue);
if (idx > -1) {
if (isEditable) {
this._dropdown.values = options;
this._dropdown.value = options[idx];
if (this._component instanceof Dropdown) {
this._component.values = options;
this._component.value = options[idx];
} else {
this._selectBox.setOptions(options);
this._selectBox.select(idx);
this._component.setOptions(options);
this._component.select(idx);
}
}
}
@@ -180,19 +207,11 @@ export class TableCellEditorFactory {
}
public isValueChanged(): boolean {
if (isEditable) {
return this._dropdown.value !== this._originalValue.toString();
} else {
return this._selectBox.value !== this._originalValue.toString();
}
return this._component.value !== this._originalValue;
}
public serializeValue(): any {
if (isEditable) {
return this._dropdown.value;
} else {
return this._selectBox.value;
}
return this._component.value;
}
public validate(): Slick.ValidateResults {
@@ -202,6 +221,6 @@ export class TableCellEditorFactory {
};
}
}
return TextEditor;
return DropdownEditor;
}
}