javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Rever input refactor

Browse Source
This commit is contained in:
Manuel Mtz-Almeida
2017-03-28 21:26:01 +02:00
parent b5c7ab2e98
commit c19615ed11
1 changed files with 88 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/input/input.ts
View File

@ -7,7 +7,7 @@ import { Content, ContentDimensions, ScrollEvent } from '../content/content';
import { copyInputAttributes, PointerCoordinates, hasPointerMoved, pointerCoord } from '../../util/dom';
import { DomController } from '../../platform/dom-controller';
import { Form, IonicFormInput } from '../../util/form';
import { BaseInput } from '../../util/base-input';
import { Ion } from '../ion';
import { isString, isTrueProperty } from '../../util/util';
import { Item } from '../item/item';
import { NativeInput } from './native-input';
@ -91,8 +91,7 @@ import { Platform } from '../../platform/platform';
'<div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>',
encapsulation: ViewEncapsulation.None,
})
export class TextInput extends BaseInput<string> implements IonicFormInput {
export class TextInput extends Ion implements IonicFormInput {
_autoComplete: string;
_autoCorrect: string;
_autoFocusAssist: string;
@ -122,17 +121,17 @@ export class TextInput extends BaseInput<string> implements IonicFormInput {
constructor(
config: Config,
private _plt: Platform,
form: Form,
private _form: Form,
private _app: App,
elementRef: ElementRef,
renderer: Renderer,
@Optional() private _content: Content,
@Optional() item: Item,
@Optional() private _item: Item,
@Optional() nav: NavController,
@Optional() public ngControl: NgControl,
private _dom: DomController
) {
super(config, elementRef, renderer, 'input', '', form, item, ngControl);
super(config, elementRef, renderer, 'input');
this._nav = <NavControllerBase>nav;
@ -148,10 +147,12 @@ export class TextInput extends BaseInput<string> implements IonicFormInput {
}
if (ngControl) {
// ngControl.valueAccessor = this;
ngControl.valueAccessor = this;
this.inputControl = ngControl;
}
_form.register(this);
// only listen to content scroll events if there is content
if (_content) {
this._scrollStart = _content.ionScrollStart.subscribe((ev: ScrollEvent) => {
@ -161,6 +162,8 @@ export class TextInput extends BaseInput<string> implements IonicFormInput {
this.scrollHideFocus(ev, false);
});
}
this.mode = config.get('mode');
}
/**
@ -179,6 +182,18 @@ export class TextInput extends BaseInput<string> implements IonicFormInput {
this._clearInput = (this._type !== TEXTAREA && isTrueProperty(val));
}
/**
* @input {string} The text value of the input.
*/
@Input()
get value() {
return this._value;
}
set value(val: any) {
this._value = val;
this.checkHasValue(val);
}
/**
* @input {string} The type of control to display. The default type is text. Possible values are: `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, or `"url"`.
*/
@ -200,21 +215,31 @@ export class TextInput extends BaseInput<string> implements IonicFormInput {
}
}
/**
* @input {boolean} If true, the user cannot interact with this element.
*/
@Input()
get disabled(): boolean {
return this._disabled;
}
set disabled(val: boolean) {
this.setDisabled(this._disabled = isTrueProperty(val));
}
/**
* @hidden
*/
setDisabled(val: boolean) {
this.setDisabledState(val);
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'disabled', val ? '' : null);
this._item && this._item.setElementClass('item-input-disabled', val);
this._native && this._native.isDisabled(val);
}
/**
* @hidden
*/
setDisabledState(isDisabled: boolean) {
this._disabled = isDisabled;
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'disabled', isDisabled ? '' : null);
this._item && this._item.setElementClass('item-input-disabled', isDisabled);
this._native && this._native.isDisabled(isDisabled);
this.disabled = isDisabled;
}
/**
@ -351,7 +376,8 @@ export class TextInput extends BaseInput<string> implements IonicFormInput {
}
nativeInput.valueChange.subscribe((inputValue: any) => {
this.value = inputValue;
this.onChange(inputValue);
this.checkHasValue(inputValue);
});
nativeInput.keydown.subscribe((inputValue: any) => {
@ -361,12 +387,13 @@ export class TextInput extends BaseInput<string> implements IonicFormInput {
this.focusChange(this.hasFocus());
nativeInput.focusChange.subscribe((textInputHasFocus: any) => {
this.focusChange(textInputHasFocus);
// this.checkHasValue(nativeInput.getValue());
this.checkHasValue(nativeInput.getValue());
if (!textInputHasFocus) {
this.onTouched(textInputHasFocus);
}
});
this.value = nativeInput.getValue();
this.checkHasValue(nativeInput.getValue());
var ionInputEle: HTMLElement = this._elementRef.nativeElement;
var nativeInputEle: HTMLElement = nativeInput.element();
@ -529,6 +556,21 @@ export class TextInput extends BaseInput<string> implements IonicFormInput {
this.focus.emit(ev);
}
/**
* @hidden
*/
writeValue(val: any) {
this._value = val;
this.checkHasValue(val);
}
/**
* @hidden
*/
onChange(val: any) {
this.checkHasValue(val);
}
/**
* @hidden
*/
@ -559,6 +601,16 @@ export class TextInput extends BaseInput<string> implements IonicFormInput {
return (inputValue !== null && inputValue !== undefined && inputValue !== '');
}
/**
* @hidden
*/
checkHasValue(inputValue: any) {
if (this._item) {
var hasValue = (inputValue !== null && inputValue !== undefined && inputValue !== '');
this._item.setElementClass('input-has-value', hasValue);
}
}
/**
* @hidden
*/
@ -670,7 +722,7 @@ export class TextInput extends BaseInput<string> implements IonicFormInput {
* @hidden
*/
ngOnDestroy() {
super.ngOnDestroy();
this._form.deregister(this);
// only stop listening to content scroll events if there is content
if (this._content) {
@ -684,7 +736,9 @@ export class TextInput extends BaseInput<string> implements IonicFormInput {
*/
clearTextInput() {
console.debug('Should clear input');
this.value = '';
this._value = '';
this.onChange(this._value);
this.writeValue(this._value);
}
/**
@ -706,6 +760,23 @@ export class TextInput extends BaseInput<string> implements IonicFormInput {
this._didBlurAfterEdit = false;
}
/**
* @hidden
* Angular2 Forms API method called by the view (formControlName) to register the
* onChange event handler that updates the model (Control).
* @param {Function} fn the onChange event handler.
*/
registerOnChange(fn: any) { this.onChange = fn; }
/**
* @hidden
* Angular2 Forms API method called by the view (formControlName) to register
* the onTouched event handler that marks model (Control) as touched.
* @param {Function} fn onTouched event handler.
*/
registerOnTouched(fn: any) { this.onTouched = fn; }
/**
* @hidden
*/