Fix model view input box bugs (#1797)

This commit is contained in:
Matt Irvine
2018-06-29 14:20:06 -07:00
committed by GitHub
parent 83234dd52c
commit 1eba7c7d2a
9 changed files with 73 additions and 18 deletions

View File

@@ -207,7 +207,9 @@ export abstract class ContainerBase<T> extends ComponentBase {
) {
super(_changeRef);
this.items = [];
this._validations.push(() => this.items.every(item => this.modelStore.getComponent(item.descriptor.id).valid));
this._validations.push(() => this.items.every(item => {
return this.modelStore.getComponent(item.descriptor.id).valid;
}));
}
/// IComponent container-related implementation

View File

@@ -18,9 +18,8 @@ import { IInputOptions, MessageType } from 'vs/base/browser/ui/inputbox/inputBox
import { attachInputBoxStyler, attachListStyler } from 'vs/platform/theme/common/styler';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { Event, Emitter } from 'vs/base/common/event';
import * as nls from 'vs/nls';
import { TextAreaInput } from 'vs/editor/browser/controller/textAreaInput';
import { inputBackground, inputBorder } from 'vs/platform/theme/common/colorRegistry';
@Component({
selector: 'modelview-inputBox',
@@ -70,13 +69,13 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
if (this._inputContainer) {
this._input = new InputBox(this._inputContainer.nativeElement, this.contextViewService, inputOptions);
this.registerInput(this._input, () => !this.multiline);
}
if (this._textareaContainer) {
let textAreaInputOptions = Object.assign({}, inputOptions, { flexibleHeight: true, type: 'textarea' });
this._textAreaInput = new InputBox(this._textareaContainer.nativeElement, this.contextViewService, textAreaInputOptions);
this.registerInput(this._textAreaInput, () => this.multiline);
}
this.inputElement.hideErrors = true;
}
private get inputElement(): InputBox {
@@ -88,10 +87,17 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
this._validations.push(() => !input.inputElement.validationMessage);
this._register(input);
this._register(attachInputBoxStyler(input, this.themeService));
this._register(input.onDidChange(e => {
this._register(attachInputBoxStyler(input, this.themeService, {
inputValidationInfoBackground: inputBackground,
inputValidationInfoBorder: inputBorder,
}));
this._register(input.onDidChange(async e => {
if (checkOption()) {
this.value = input.value;
await this.validate();
if (input.hideErrors) {
input.hideErrors = false;
}
this._onEventEmitter.fire({
eventType: ComponentEventType.onDidChange,
args: e

View File

@@ -12,7 +12,7 @@ import nls = require('vs/nls');
import * as sqlops from 'sqlops';
import { IModelStore, IComponentDescriptor, IComponent, IComponentEventArgs } from './interfaces';
import { IItemConfig, ModelComponentTypes, IComponentShape } from 'sql/workbench/api/common/sqlExtHostTypes';
import { IModelView } from 'sql/services/model/modelViewService';
import { IModelView, IModelViewEventArgs } from 'sql/services/model/modelViewService';
import { Extensions, IComponentRegistry } from 'sql/platform/dashboard/common/modelComponentRegistry';
import { AngularDisposable } from 'sql/base/common/lifecycle';
import { ModelStore } from 'sql/parts/modelComponents/modelStore';
@@ -38,7 +38,7 @@ export abstract class ViewBase extends AngularDisposable implements IModelView {
abstract id: string;
abstract connection: sqlops.connection.Connection;
abstract serverInfo: sqlops.ServerInfo;
private _onEventEmitter = new Emitter<any>();
private _onEventEmitter = new Emitter<IModelViewEventArgs>();
initializeModel(rootComponent: IComponentShape, validationCallback: (componentId: string) => Thenable<boolean>): void {
let descriptor = this.defineComponent(rootComponent);
@@ -106,13 +106,16 @@ export abstract class ViewBase extends AngularDisposable implements IModelView {
registerEvent(componentId: string) {
this.queueAction(componentId, (component) => {
this._register(component.registerEventHandler(e => {
e.componentId = componentId;
this._onEventEmitter.fire(e);
let modelViewEvent: IModelViewEventArgs = Object.assign({
componentId: componentId,
isRootComponent: componentId === this.rootDescriptor.id
}, e);
this._onEventEmitter.fire(modelViewEvent);
}));
});
}
public get onEvent(): Event<IComponentEventArgs> {
public get onEvent(): Event<IModelViewEventArgs> {
return this._onEventEmitter.event;
}