new GrowingFormFieldType TEXTAREA

README.md

@@ -51,8 +51,22 @@ const config = {
 			passwordMask: true,
 			hintText: 'Enter password ...'
 		}
-	}],
+	},{
+		title: 'Comment',
+		identifier: 'comment',
+		type: GrowingFormFieldType.TEXTAREA,
+		validate: GrowingFormValidationRule.ALLOW_EMPTY,
+		options: {
+		    suppressReturn: false,
+		    font: {
+			fontSize: 14
+		    }
+		}
+    }],
 	options: {
+		// Automatically focus next field
+        	focusNexField: true,
+
     		// Style the underlaying table-view via it's header-view
     		tableTopMargin: 50,
 

index.js

@@ -165,11 +165,8 @@ class GrowingForm {
 		}
 
 		// If the last element was a text-field, blur it!
-		if ((
-			this.cells[this.expandedIndex].type === GrowingFormFieldType.TEXT
-			|| this.cells[this.expandedIndex].type === GrowingFormFieldType.EMAIL
-			|| this.cells[this.expandedIndex].type === GrowingFormFieldType.NUMBER
-		) && this.currentTextField) {
+		if ((this.cells[this.expandedIndex].type === GrowingFormFieldType.TEXT
+			|| this.cells[this.expandedIndex].type === GrowingFormFieldType.TEXTAREA) && this.currentTextField) {
 			this.currentTextField.blur();
 		}
 		if (this.callbacks[GrowingFormEvent.SUBMIT]) {
@@ -218,6 +215,9 @@ class GrowingForm {
 		let textField;
 		let actionButton;
 
+		const actionButtonOpacityValid = 1.0;
+		const actionButtonOpacityInvalid = 0.3;
+
 		// The container view holds both the content-view and bullets
 		const containerView = Ti.UI.createView({
 			height: Ti.UI.SIZE,
@@ -236,30 +236,37 @@ class GrowingForm {
 
 		contentView.add(this._createTitleLabel(cell, itemIndex));
 
+		const validation = isValid => {
+			this.formData[cell.identifier] = textField.value;
+
+			// If we use live-validation, do not update our UI so far
+			if (cell.validate === GrowingFormValidationRule.LIVE) {
+				const throttle = cell.throttle;
+				if (!throttle || typeof throttle !== 'function') {
+					throw new FormError('using live validation without padding \'throttle\' method');
+				}
+				throttle(textField, actionButton);
+				return;
+			}
+
+			actionButton.opacity = isValid ? actionButtonOpacityValid : actionButtonOpacityInvalid;
+			actionButton.enabled = isValid;
+		}
+
 		// Only add content if expanded
 		if (isExpanded) {
 			switch (type) {
-				case GrowingFormFieldType.TEXT:
-				case GrowingFormFieldType.EMAIL:
-				case GrowingFormFieldType.NUMBER: {
+				case GrowingFormFieldType.TEXTAREA:
+					textField = this._createTextArea({
+						cell: cell,
+						onChange: validation
+					});
+					contentView.add(textField);
+					break;
+				case GrowingFormFieldType.TEXT: {
 					textField = this._createTextField({
 						cell: cell,
-						onChange: isValid => {
-							this.formData[cell.identifier] = textField.value;
-
-							// If we use live-validation, do not update our UI so far
-							if (cell.validate === GrowingFormValidationRule.LIVE) {
-								const throttle = cell.throttle;
-								if (!throttle || typeof throttle !== 'function') {
-									throw new FormError('using live validation without padding \'throttle\' method');
-								}
-								throttle(textField, actionButton);
-								return;
-							}
-
-							actionButton.opacity = isValid ? 1.0 : 0.3;
-							actionButton.enabled = isValid;
-						}
+						onChange: validation
 					});
 					contentView.add(textField);
 					break;
@@ -351,13 +358,60 @@ class GrowingForm {
 			const cell = this.cells[this.expandedIndex];
 			const value = this.formData[cell.identifier];
 
+			if (this.cells[this.expandedIndex].type === GrowingFormFieldType.TEXT
+				|| this.cells[this.expandedIndex].type === GrowingFormFieldType.TEXTAREA) {
+				if (this.options.focusNexField === true) {
+					setTimeout(() => {
+						this.focus();
+					}, 200);
+				}
+			}
+
 			this.callbacks[GrowingFormEvent.STEP](this.currentTextField, this.expandedIndex + 1, this._validateFromType(cell, value));
 		}
 
 		this.expandedIndex++;
 		this._configureData();
 	}
 
+	_createTextArea(args) {
+		const cell = args.cell;
+		const onChangeCallback = args.onChange;
+		const identifier = cell.identifier;
+		const validate = cell.validate;
+		const options = cell.options || {};
+
+		const textArea = Ti.UI.createTextArea({
+			id: identifier,
+			top: 8,
+			left: 0,
+			width: 280,
+			height: 120,
+			color: '#000',
+			hintTextColor: '#bebebe',
+			padding: { left: 5, right: 5, top: 5, bottom: 5 },
+			borderRadius: 4,
+			backgroundColor: '#eee',
+			value: this.formData[identifier] || ''
+		});
+
+		// Reference a reference in our scope to blur it, if it is the last form input
+		this.currentTextField = textArea;
+		textArea.applyProperties(options);
+
+		textArea.addEventListener('change', event => {
+			const value = event.value;
+
+			// Check if we have a validator
+			if (validate !== undefined) {
+				const isValid = this._validateFromType(cell, value);
+				onChangeCallback(isValid);
+			}
+		});
+
+		return textArea;
+	}
+
 	_createTextField(args) {
 		const cell = args.cell;
 		const onChangeCallback = args.onChange;
@@ -366,6 +420,7 @@ class GrowingForm {
 		const options = cell.options || {};
 
 		const textField = Ti.UI.createTextField({
+			id: identifier,
 			top: 8,
 			left: 0,
 			width: 280,
@@ -378,19 +433,6 @@ class GrowingForm {
 			value: this.formData[identifier] || ''
 		});
 
-		switch (cell.type) {
-			case GrowingFormFieldType.NUMBER:
-				textField.keyboardType = Ti.UI.KEYBOARD_TYPE_NUMBER_PAD;
-				break;
-			case GrowingFormFieldType.EMAIL:
-				textField.autocapitalization = Ti.UI.TEXT_AUTOCAPITALIZATION_NONE
-				textField.keyboardType = Ti.UI.KEYBOARD_TYPE_EMAIL;
-				break;
-			default:
-				textField.keyboardType = Ti.UI.KEYBOARD_TYPE_DEFAULT;
-				break;
-		}
-
 		// Reference a reference in our scope to blur it, if it is the last form input
 		this.currentTextField = textField;
 		textField.applyProperties(options);
@@ -405,6 +447,21 @@ class GrowingForm {
 			}
 		});
 
+		textField.addEventListener('return', event => {
+			const value = event.value;
+
+			// Check if we have a validator
+			if (validate !== undefined) {
+				const isValid = this._validateFromType(cell, value);
+				console.log('isValid', isValid);
+				if (isValid === true) {
+					this._selectNextCell();
+				}
+				return;
+			}
+			this._selectNextCell();
+		});
+
 		return textField;
 	}
 
@@ -524,8 +581,7 @@ class GrowingForm {
 
 const GrowingFormFieldType = {
 	TEXT: 'text',
-	EMAIL: 'email',
-	NUMBER: 'number',
+	TEXTAREA: 'textArea',
 	CHECKBOX: 'checkbox',
 	DROPDOWN: 'dropdown'
 };

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "ti.growingform",
-	"version": "1.4.0",
+	"version": "1.5.0",
 	"description": "A growing (\"stepper\") form for Appcelerator Titanium.",
 	"main": "index.js",
 	"scripts": {