added option to mode view input box to create the input as text area (#1630)

* added option to create input as multi line

* added min and max for input box

samples/sqlservices/src/controllers/mainController.ts

@@ -82,7 +82,8 @@ export default class MainController implements vscode.Disposable {
 		tab1.registerContent(async (view) => {
 			let inputBox = view.modelBuilder.inputBox()
 				.withProperties({
-					//width: 300
+					multiline: true,
+					height: 100
 				}).component();
 			let inputBoxWrapper = view.modelBuilder.loadingComponent().withItem(inputBox).component();
 			inputBoxWrapper.loading = false;

src/sql/base/browser/ui/inputBox/inputBox.ts

@@ -67,6 +67,14 @@ export class InputBox extends vsInputBox {
 		this.applyStyles();
 	}
 
+	public set rows(value: number) {
+		this.inputElement.setAttribute('rows', value.toString());
+	}
+
+	public set columns(value: number) {
+		this.inputElement.setAttribute('cols', value.toString());
+	}
+
 	public disable(): void {
 		super.disable();
 		this.inputBackground = this.disabledInputBackground;
@@ -75,6 +83,10 @@ export class InputBox extends vsInputBox {
 		this.applyStyles();
 	}
 
+	public setHeight(value: string) {
+		this.inputElement.style.height = value;
+	}
+
 	public isEnabled(): boolean {
 		return !this.inputElement.hasAttribute('disabled');
 	}

src/sql/parts/modelComponents/inputbox.component.ts

@@ -20,19 +20,23 @@ import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/work
 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';
 
 @Component({
 	selector: 'modelview-inputBox',
 	template: `
-		<div #input style="width: 100%"></div>
+			<div [style.display]="getInputBoxDisplay()" #input style="width: 100%"></div>
+			<div [style.display]="getTextAreaDisplay()" #textarea style="width: 100%"></div>
 	`
 })
 export default class InputBoxComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
 	@Input() descriptor: IComponentDescriptor;
 	@Input() modelStore: IModelStore;
 	private _input: InputBox;
+	private _textAreaInput: InputBox;
 
 	@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
+	@ViewChild('textarea', { read: ElementRef }) private _textareaContainer: ElementRef;
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
 		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
@@ -43,11 +47,9 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 
 	ngOnInit(): void {
 		this.baseInit();
-
 	}
 
 	ngAfterViewInit(): void {
-		if (this._inputContainer) {
 		let inputOptions: IInputOptions = {
 			placeholder: '',
 			ariaLabel: '',
@@ -57,7 +59,7 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 						return undefined;
 					} else {
 						return {
-								content: this._input.inputElement.validationMessage || nls.localize('invalidValueError', 'Invalid value'),
+							content: this.inputElement.inputElement.validationMessage || nls.localize('invalidValueError', 'Invalid value'),
 							type: MessageType.ERROR
 						};
 					}
@@ -65,25 +67,51 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 			},
 			useDefaultValidation: true
 		};
-
+		if (this._inputContainer) {
 			this._input = new InputBox(this._inputContainer.nativeElement, this.contextViewService, inputOptions);
-			this._validations.push(() => !this._input.inputElement.validationMessage);
+			this.registerInput(this._input, () => !this.multiline);
 
-			this._register(this._input);
+		}
-			this._register(attachInputBoxStyler(this._input, this.themeService));
+		if (this._textareaContainer) {
-			this._register(this._input.onDidChange(e => {
+			let textAreaInputOptions = Object.assign({}, inputOptions, { flexibleHeight: true });
-				this.value = this._input.value;
+			this._textAreaInput = new InputBox(this._textareaContainer.nativeElement, this.contextViewService, textAreaInputOptions);
+			this.registerInput(this._textAreaInput, () => this.multiline);
+		}
+	}
+
+	private get inputElement(): InputBox {
+		return this.multiline ? this._textAreaInput : this._input;
+	}
+
+	private registerInput(input: InputBox, checkOption: () => boolean): void {
+		if (input) {
+			this._validations.push(() => !input.inputElement.validationMessage);
+
+			this._register(input);
+			this._register(attachInputBoxStyler(input, this.themeService));
+			this._register(input.onDidChange(e => {
+				if (checkOption()) {
+					this.value = input.value;
 					this._onEventEmitter.fire({
 						eventType: ComponentEventType.onDidChange,
 						args: e
 					});
+				}
 			}));
 		}
 	}
 
+	public getInputBoxDisplay(): string {
+		return !this.multiline ? '' : 'none';
+	}
+
+	public getTextAreaDisplay(): string {
+		return this.multiline ? '' : 'none';
+	}
+
 	public validate(): Thenable<boolean> {
 		return super.validate().then(valid => {
-			this._input.validate();
+			this.inputElement.validate();
 			return valid;
 		});
 	}
@@ -105,21 +133,47 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 
 	public setProperties(properties: { [key: string]: any; }): void {
 		super.setProperties(properties);
-		this._input.inputElement.type = this.inputType;
+		this.setInputProperties(this.inputElement);
-		if (this.inputType === 'number') {
-			this._input.inputElement.step = 'any';
-		}
-		this._input.value = this.value;
-		this._input.setAriaLabel(this.ariaLabel);
-		this._input.setPlaceHolder(this.placeHolder);
-		this._input.setEnabled(this.enabled);
-		if (this.width) {
-			this._input.width = this.width;
-		}
-		this._input.inputElement.required = this.required;
 		this.validate();
 	}
 
+	private setInputProperties(input: InputBox): void {
+		if (!this.multiline) {
+			input.inputElement.type = this.inputType;
+			if (this.inputType === 'number') {
+				input.inputElement.step = 'any';
+				if (this.min) {
+					input.inputElement.min = this.min.toString();
+				}
+				if (this.max) {
+					input.inputElement.max = this.max.toString();
+				}
+			}
+		}
+		input.value = this.value;
+		input.setAriaLabel(this.ariaLabel);
+		input.setPlaceHolder(this.placeHolder);
+		input.setEnabled(this.enabled);
+		if (this.width) {
+			input.width = this.width;
+		}
+		if (this.height) {
+			input.setHeight(this.convertSize(this.height));
+			input.layout();
+		}
+		if (this.multiline) {
+			if (this.rows) {
+				this.inputElement.rows = this.rows;
+			}
+			if (this.columns) {
+				this.inputElement.columns = this.columns;
+			}
+		}
+
+
+		input.inputElement.required = this.required;
+	}
+
 	// CSS-bound properties
 
 	public get value(): string {
@@ -162,6 +216,38 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 		this.setPropertyFromUI<sqlops.InputBoxProperties, number>((props, value) => props.width = value, newValue);
 	}
 
+	public set columns(newValue: number) {
+		this.setPropertyFromUI<sqlops.InputBoxProperties, number>((props, value) => props.columns = value, newValue);
+	}
+
+	public get rows(): number {
+		return this.getPropertyOrDefault<sqlops.InputBoxProperties, number>((props) => props.rows, undefined);
+	}
+
+	public get columns(): number {
+		return this.getPropertyOrDefault<sqlops.InputBoxProperties, number>((props) => props.columns, undefined);
+	}
+
+	public set rows(newValue: number) {
+		this.setPropertyFromUI<sqlops.InputBoxProperties, number>((props, value) => props.rows = value, newValue);
+	}
+
+	public get min(): number {
+		return this.getPropertyOrDefault<sqlops.InputBoxProperties, number>((props) => props.min, undefined);
+	}
+
+	public set min(newValue: number) {
+		this.setPropertyFromUI<sqlops.InputBoxProperties, number>((props, value) => props.min = value, newValue);
+	}
+
+	public get max(): number {
+		return this.getPropertyOrDefault<sqlops.InputBoxProperties, number>((props) => props.max, undefined);
+	}
+
+	public set max(newValue: number) {
+		this.setPropertyFromUI<sqlops.InputBoxProperties, number>((props, value) => props.max = value, newValue);
+	}
+
 	public get inputType(): string {
 		return this.getPropertyOrDefault<sqlops.InputBoxProperties, string>((props) => props.inputType, 'text');
 	}
@@ -170,6 +256,14 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 		this.setPropertyFromUI<sqlops.InputBoxProperties, string>((props, value) => props.inputType = value, newValue);
 	}
 
+	public get multiline(): boolean {
+		return this.getPropertyOrDefault<sqlops.InputBoxProperties, boolean>((props) => props.multiline, false);
+	}
+
+	public set multiline(newValue: boolean) {
+		this.setPropertyFromUI<sqlops.InputBoxProperties, boolean>((props, value) => props.multiline = value, newValue);
+	}
+
 	public get required(): boolean {
 		return this.getPropertyOrDefault<sqlops.InputBoxProperties, boolean>((props) => props.required, false);
 	}

src/sql/sqlops.proposed.d.ts

@@ -302,6 +302,11 @@ declare module 'sqlops' {
 		width: number;
 		inputType?: InputBoxInputType;
 		required?: boolean;
+		multiline?: boolean;
+		rows?: number;
+		columns?: number;
+		min?: number;
+		max?: number;
 	}
 
 	export interface TableColumn {

src/sql/workbench/api/node/extHostModelView.ts

@@ -560,6 +560,34 @@ class InputBoxWrapper extends ComponentWrapper implements sqlops.InputBoxCompone
 		this.setProperty('height', v);
 	}
 
+	public get rows(): number {
+		return this.properties['rows'];
+	}
+	public set rows(v: number) {
+		this.setProperty('rows', v);
+	}
+
+	public get min(): number {
+		return this.properties['min'];
+	}
+	public set min(v: number) {
+		this.setProperty('min', v);
+	}
+
+	public get max(): number {
+		return this.properties['max'];
+	}
+	public set max(v: number) {
+		this.setProperty('max', v);
+	}
+
+	public get columns(): number {
+		return this.properties['columns'];
+	}
+	public set columns(v: number) {
+		this.setProperty('columns', v);
+	}
+
 	public get width(): number {
 		return this.properties['width'];
 	}
@@ -567,6 +595,13 @@ class InputBoxWrapper extends ComponentWrapper implements sqlops.InputBoxCompone
 		this.setProperty('width', v);
 	}
 
+	public get multiline(): boolean {
+		return this.properties['multiline'];
+	}
+	public set multiline(v: boolean) {
+		this.setProperty('multiline', v);
+	}
+
 	public get inputType(): sqlops.InputBoxInputType {
 		return this.properties['inputType'];
 	}