diff --git a/README.md b/README.md index bf546ac..30a9a44 100644 --- a/README.md +++ b/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, diff --git a/index.js b/index.js index 1de1689..6971c9c 100644 --- a/index.js +++ b/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,6 +358,15 @@ 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)); } @@ -358,6 +374,44 @@ class GrowingForm { 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' }; diff --git a/package.json b/package.json index c52125f..cef44ea 100644 --- a/package.json +++ b/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": {