javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(base-input): inputUpdated() is triggered when initialized

Browse Source
This commit is contained in:
Manuel Mtz-Almeida
2017-04-18 20:52:17 +02:00
parent c7beb8c7ab
commit 5776f76ac9
5 changed files with 50 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/datetime/datetime.ts
View File

@@ -1,4 +1,4 @@
import { AfterContentInit, Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
import { AfterViewInit, Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Config } from '../../config/config';
@@ -273,7 +273,7 @@ export const DATETIME_VALUE_ACCESSOR: any = {
providers: [DATETIME_VALUE_ACCESSOR],
encapsulation: ViewEncapsulation.None,
})
export class DateTime extends BaseInput<DateTimeData> implements AfterContentInit, ControlValueAccessor, OnDestroy {
export class DateTime extends BaseInput<DateTimeData> implements AfterViewInit, ControlValueAccessor, OnDestroy {
_text: string = '';
_min: DateTimeData;
@@ -431,7 +431,7 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterContentIni
/**
* @hidden
*/
ngAfterContentInit() {
ngAfterViewInit() {
// first see if locale names were provided in the inputs
// then check to see if they're in the config
// if neither were provided then it will use default English names
@@ -439,8 +439,7 @@ export class DateTime extends BaseInput<DateTimeData> implements AfterContentIni
(<any>this)._locale[type] = convertToArrayOfStrings(isPresent((<any>this)[type]) ? (<any>this)[type] : this._config.get(type), type);
});
// update how the datetime value is displayed as formatted text
this.updateText();
this._initialize();
}
/**

16
src/components/datetime/test/datetime.spec.ts
View File

@@ -144,7 +144,7 @@ describe('DateTime', () => {
describe('writeValue', () => {
it('should updateText with default MMM D, YYYY when no displayFormat or pickerFormat', zoned(() => {
datetime.ngAfterContentInit();
datetime.ngAfterViewInit();
datetime.writeValue('1994-12-15T13:47:20.789Z');
expect(datetime._text).toEqual('Dec 15, 1994');
@@ -152,7 +152,7 @@ describe('DateTime', () => {
it('should updateText with pickerFormat when no displayFormat', zoned(() => {
datetime.pickerFormat = 'YYYY';
datetime.ngAfterContentInit();
datetime.ngAfterViewInit();
datetime.writeValue('1994-12-15T13:47:20.789Z');
expect(datetime._text).toEqual('1994');
@@ -160,7 +160,7 @@ describe('DateTime', () => {
it('should updateText with displayFormat when no pickerFormat', zoned(() => {
datetime.displayFormat = 'YYYY';
datetime.ngAfterContentInit();
datetime.ngAfterViewInit();
datetime.writeValue('1994-12-15T13:47:20.789Z');
expect(datetime._text).toEqual('1994');
@@ -172,7 +172,7 @@ describe('DateTime', () => {
it('should generate with default MMM D, YYYY when no displayFormat or pickerFormat', zoned(() => {
datetime.monthShortNames = customLocale.monthShortNames;
datetime.ngAfterContentInit();
datetime.ngAfterViewInit();
datetime.setValue('1994-12-15T13:47:20.789Z');
datetime.generate();
@@ -186,7 +186,7 @@ describe('DateTime', () => {
it('should generate with only displayFormat', zoned(() => {
datetime.monthShortNames = customLocale.monthShortNames;
datetime.ngAfterContentInit();
datetime.ngAfterViewInit();
datetime.displayFormat = 'YYYY';
datetime.setValue('1994-12-15T13:47:20.789Z');
@@ -199,7 +199,7 @@ describe('DateTime', () => {
it('should generate with only pickerFormat', zoned(() => {
datetime.monthShortNames = customLocale.monthShortNames;
datetime.ngAfterContentInit();
datetime.ngAfterViewInit();
datetime.pickerFormat = 'YYYY';
datetime.setValue('1994-12-15T13:47:20.789Z');
@@ -212,7 +212,7 @@ describe('DateTime', () => {
it('should generate with custom locale short month names from input property', zoned(() => {
datetime.monthShortNames = customLocale.monthShortNames;
datetime.ngAfterContentInit();
datetime.ngAfterViewInit();
datetime.pickerFormat = 'MMM YYYY';
datetime.setValue('1994-12-15T13:47:20.789Z');
@@ -227,7 +227,7 @@ describe('DateTime', () => {
it('should generate with custom locale full month names from input property', zoned(() => {
datetime.monthNames = customLocale.monthNames;
datetime.ngAfterContentInit();
datetime.ngAfterViewInit();
datetime.pickerFormat = 'MMMM YYYY';
datetime.setValue('1994-12-15T13:47:20.789Z');

11
src/components/select/select.ts
View File

@@ -211,11 +211,6 @@ export class Select extends BaseInput<string[]> implements AfterViewInit, OnDest
super(config, elementRef, renderer, 'select', [], form, item, null);
}
ngAfterContentInit() {
this._inputUpdated();
}
@HostListener('click', ['$event'])
_click(ev: UIEvent) {
if (ev.detail === 0) {
@@ -405,14 +400,14 @@ export class Select extends BaseInput<string[]> implements AfterViewInit, OnDest
set options(val: QueryList<Option>) {
this._options = val;
if (this._value.length === 0) {
if (this._value.length === 0) {
// there are no values set at this point
// so check to see who should be selected
// we use writeValue() because we don't want to update ngModel
this.writeValue(val.filter(o => o.selected).map(o => o.value));
} else {
this._inputUpdated();
}
this._inputUpdated();
}
_inputNormalize(val: any): string[] {

13
src/util/base-input.ts
View File

@@ -147,7 +147,9 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
console.debug('BaseInput: value changed:', normalized, this);
this._value = normalized;
this._inputCheckHasValue(normalized);
this._inputUpdated();
if (this._init) {
this._inputUpdated();
}
return true;
}
@@ -186,6 +188,9 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
return;
}
this._init = true;
if (isPresent(this._value)) {
this._inputUpdated();
}
}
/**
@@ -195,6 +200,7 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
if (this._isFocus) {
return;
}
assert(this._init, 'component was not initialized');
assert(NgZone.isInAngularZone(), '_fireFocus: should be zoned');
this._isFocus = true;
@@ -209,6 +215,7 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
if (!this._isFocus) {
return;
}
assert(this._init, 'component was not initialized');
assert(NgZone.isInAngularZone(), '_fireBlur: should be zoned');
this._isFocus = false;
@@ -283,5 +290,7 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
/**
* @hidden
*/
_inputUpdated() {}
_inputUpdated() {
assert(this._init, 'component should be initialized');
}
}

47
src/util/input-tester.ts
View File

@@ -74,31 +74,33 @@ function testState<T>(input: BaseInput<T>, config: TestConfig, isInit: boolean)
assertEqual(input.isFocus(), false, 'should not be focus');
assertEqual(input.value, config.defaultValue, 'default value is wrong');
let blurCount = 0;
let focusCount = 0;
const subBlur = input.ionBlur.subscribe((ev: any) => {
assertEqual(ev, input, 'ionBlur argument is wrong');
blurCount++;
});
const subFocus = input.ionFocus.subscribe((ev: any) => {
assertEqual(ev, input, 'ionFocus argument is wrong');
focusCount++;
});
input._fireFocus();
assertEqual(input._isFocus, true, 'should be focus');
assertEqual(input.isFocus(), true, 'should be focus');
input._fireFocus();
if (isInit) {
let blurCount = 0;
let focusCount = 0;
const subBlur = input.ionBlur.subscribe((ev: any) => {
assertEqual(ev, input, 'ionBlur argument is wrong');
blurCount++;
});
const subFocus = input.ionFocus.subscribe((ev: any) => {
assertEqual(ev, input, 'ionFocus argument is wrong');
focusCount++;
});
input._fireFocus();
assertEqual(input._isFocus, true, 'should be focus');
assertEqual(input.isFocus(), true, 'should be focus');
input._fireFocus();
input._fireBlur();
assertEqual(input._isFocus, false, 'should be not focus');
assertEqual(input.isFocus(), false, 'should be not focus');
input._fireBlur(); // it should not crash
input._fireBlur();
assertEqual(input._isFocus, false, 'should be not focus');
assertEqual(input.isFocus(), false, 'should be not focus');
input._fireBlur(); // it should not crash
assertEqual(focusCount, 1, 'ionFocus was not called correctly');
assertEqual(blurCount, 1, 'ionBlur was not called correctly');
assertEqual(focusCount, 1, 'ionFocus was not called correctly');
assertEqual(blurCount, 1, 'ionBlur was not called correctly');
subBlur.unsubscribe();
subFocus.unsubscribe();
subBlur.unsubscribe();
subFocus.unsubscribe();
}
}
function testWriteValue<T>(input: BaseInput<T>, config: TestConfig, isInit: boolean) {
@@ -150,7 +152,6 @@ function testWriteValue<T>(input: BaseInput<T>, config: TestConfig, isInit: bool
OnTouchedCalled = OnChangeCalled = ionChangeCalled = 0;
console.log(test[0], input.value);
// Set same value (it should not redispatch)
input.value = test[0];
assertEqual(ionChangeCalled, 0, 'loop: ionChange should not be called');