From c18335e946bf533db067d36a1be0b62924dafd0e Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 1 Jun 2016 12:06:15 -0500 Subject: [PATCH] refactor(lifecycle): lifecycle methods prefixed w/ ionView BREAKING CHANGES: - Lifecycle method prefixes have changed to `ionView` - `onPageLoaded` renamed to `ionViewLoaded` - `onPageWillEnter` renamed to `ionViewWillEnter` - `onPageDidEnter` renamed to `ionViewDidEnter` - `onPageWillLeave` renamed to `ionViewWillLeave` - `onPageDidLeave` renamed to `ionViewDidLeave` - `onPageWillUnload` renamed to `ionViewWillUnload` - `onPageDidUnload` renamed to `ionViewDidUnload` --- src/components/action-sheet/action-sheet.ts | 4 +- src/components/alert/alert.ts | 4 +- src/components/loading/loading.ts | 2 +- src/components/nav/nav-controller.ts | 99 ++++++++-------- .../nav/test/nav-controller.spec.ts | 106 ++++++++++-------- .../nav/test/view-controller.spec.ts | 31 ++--- src/components/nav/view-controller.ts | 48 ++++---- src/components/picker/picker.ts | 4 +- src/components/popover/popover.ts | 6 +- src/components/tabs/tabs.ts | 2 +- src/components/toast/toast.ts | 2 +- 11 files changed, 157 insertions(+), 151 deletions(-) diff --git a/src/components/action-sheet/action-sheet.ts b/src/components/action-sheet/action-sheet.ts index cede463ea3..526d5c085e 100644 --- a/src/components/action-sheet/action-sheet.ts +++ b/src/components/action-sheet/action-sheet.ts @@ -271,7 +271,7 @@ class ActionSheetCmp { } } - onPageLoaded() { + ionViewLoaded() { // normalize the data let buttons: any[] = []; @@ -305,7 +305,7 @@ class ActionSheetCmp { this.d.buttons = buttons; } - onPageDidEnter() { + ionViewDidEnter() { let activeElement: any = document.activeElement; if (document.activeElement) { activeElement.blur(); diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts index 57909909ad..eb0e350b5f 100644 --- a/src/components/alert/alert.ts +++ b/src/components/alert/alert.ts @@ -419,7 +419,7 @@ class AlertCmp { } } - onPageLoaded() { + ionViewLoaded() { // normalize the data let data = this.d; @@ -485,7 +485,7 @@ class AlertCmp { } } - onPageDidEnter() { + ionViewDidEnter() { let activeElement: any = document.activeElement; if (document.activeElement) { activeElement.blur(); diff --git a/src/components/loading/loading.ts b/src/components/loading/loading.ts index 90b6e38b16..45464608a0 100644 --- a/src/components/loading/loading.ts +++ b/src/components/loading/loading.ts @@ -202,7 +202,7 @@ class LoadingCmp { this.showSpinner = isDefined(this.d.spinner) && this.d.spinner !== 'hide'; } - onPageDidEnter() { + ionViewDidEnter() { let activeElement: any = document.activeElement; if (document.activeElement) { activeElement.blur(); diff --git a/src/components/nav/nav-controller.ts b/src/components/nav/nav-controller.ts index b21c7c8bc9..1cde1f0820 100644 --- a/src/components/nav/nav-controller.ts +++ b/src/components/nav/nav-controller.ts @@ -82,10 +82,10 @@ import {ViewController} from './view-controller'; * template: 'Hello World' * }) * class HelloWorld { - * onPageLoaded() { + * ionViewLoaded() { * console.log("I'm alive!"); * } - * onPageWillLeave() { + * ionViewWillLeave() { * console.log("Looks like I'm about to leave :("); * } * } @@ -93,13 +93,13 @@ import {ViewController} from './view-controller'; * * | Page Event | Description | * |--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| - * | `onPageLoaded` | Runs when the page has loaded. This event only happens once per page being created and added to the DOM. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The `onPageLoaded` event is good place to put your setup code for the page. | - * | `onPageWillEnter` | Runs when the page is about to enter and become the active page. | - * | `onPageDidEnter` | Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page. | - * | `onPageWillLeave` | Runs when the page is about to leave and no longer be the active page. | - * | `onPageDidLeave` | Runs when the page has finished leaving and is no longer the active page. | - * | `onPageWillUnload` | Runs when the page is about to be destroyed and have its elements removed. | - * | `onPageDidUnload` | Runs after the page has been destroyed and its elements have been removed. + * | `ionViewLoaded` | Runs when the page has loaded. This event only happens once per page being created and added to the DOM. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The `ionViewLoaded` event is good place to put your setup code for the page. | + * | `ionViewWillEnter` | Runs when the page is about to enter and become the active page. | + * | `ionViewDidEnter` | Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page. | + * | `ionViewWillLeave` | Runs when the page is about to leave and no longer be the active page. | + * | `ionViewDidLeave` | Runs when the page has finished leaving and is no longer the active page. | + * | `ionViewWillUnload` | Runs when the page is about to be destroyed and have its elements removed. | + * | `ionViewDidUnload` | Runs after the page has been destroyed and its elements have been removed. * * * ## Nav Transition Promises @@ -144,13 +144,13 @@ import {ViewController} from './view-controller'; * Some methods on `NavController` allow for customizing the current transition. * To do this, we can pass an object with the modified properites. * - * | Property | Value | Description | - * |-----------|-----------|------------------------------------------------------| - * | animate | `boolean` | Whether or not the transition should animate | - * | animation | `string` | What kind of animation should be used | - * | direction | `string` | The direction the page should animate | - * | duration | `number` | The length in milliseconds the animation should take | - * | easing | `string` | The easing for the animation | + * | Property | Value | Description | + * |-----------|-----------|------------------------------------------------------------------------------------------------------------| + * | animate | `boolean` | Whether or not the transition should animate. | + * | animation | `string` | What kind of animation should be used. | + * | direction | `string` | The conceptual direction the user is navigating. For example, is the user navigating `forward`, or `back`? | + * | duration | `number` | The length in milliseconds the animation should take. | + * | easing | `string` | The easing for the animation. | * * * @see {@link /docs/v2/components#navigation Navigation Component Docs} @@ -169,15 +169,15 @@ export class NavController extends Ion { protected _ids: number = -1; protected _trnsDelay: any; protected _trnsTime: number = 0; - protected _views: Array = []; + protected _views: ViewController[] = []; - pageDidLoad: EventEmitter; - pageWillEnter: EventEmitter; - pageDidEnter: EventEmitter; - pageWillLeave: EventEmitter; - pageDidLeave: EventEmitter; - pageWillUnload: EventEmitter; - pageDidUnload: EventEmitter; + viewDidLoad: EventEmitter; + viewWillEnter: EventEmitter; + viewDidEnter: EventEmitter; + viewWillLeave: EventEmitter; + viewDidLeave: EventEmitter; + viewWillUnload: EventEmitter; + viewDidUnload: EventEmitter; /** * @private @@ -236,13 +236,13 @@ export class NavController extends Ion { provide(NavController, {useValue: this}) ]); - this.pageDidLoad = new EventEmitter(); - this.pageWillEnter = new EventEmitter(); - this.pageDidEnter = new EventEmitter(); - this.pageWillLeave = new EventEmitter(); - this.pageDidLeave = new EventEmitter(); - this.pageWillUnload = new EventEmitter(); - this.pageDidUnload = new EventEmitter(); + this.viewDidLoad = new EventEmitter(); + this.viewWillEnter = new EventEmitter(); + this.viewDidEnter = new EventEmitter(); + this.viewWillLeave = new EventEmitter(); + this.viewDidLeave = new EventEmitter(); + this.viewWillUnload = new EventEmitter(); + this.viewDidUnload = new EventEmitter(); } /** @@ -276,7 +276,7 @@ export class NavController extends Ion { * * *```ts - * import {Page, NavController} from 'ionic-angular' + * import {NavController} from 'ionic-angular' * import {Detail} from '../detail/detail' * import {Info} from '../info/info' * @@ -300,7 +300,7 @@ export class NavController extends Ion { * * * ```ts - * import {Page, NavController} from 'ionic-angular' + * import {NavController} from 'ionic-angular' * import {Detail} from '../detail/detail' * * export class Home { @@ -320,7 +320,7 @@ export class NavController extends Ion { * * * ```ts - * import {Page, NavController} from 'ionic-angular'; + * import {NavController} from 'ionic-angular'; * import {Info} from '../info/info'; * import {List} from '../list/list'; * import {Detail} from '../detail/detail'; @@ -454,12 +454,13 @@ export class NavController extends Ion { } /** - * Present is how app display overlays on top of the content, from within the + * Present is how an app display overlays on top of the content, from within the * root level `NavController`. The `present` method is used by overlays, such * as `ActionSheet`, `Alert`, and `Modal`. The main difference between `push` * and `present` is that `present` takes a `ViewController` instance, whereas - * `push` takes a `Page` component class. Additionally, `present` will place - * the overlay in the root NavController's stack. + * `push` takes a component class which hasn't been instantiated yet. + * Additionally, `present` will place the overlay in the root NavController's + * stack. * * ```ts * class MyClass{ @@ -577,7 +578,7 @@ export class NavController extends Ion { return this._insertViews(insertIndex, views, opts); } - private _insertViews(insertIndex: number, insertViews: Array, opts?: NavOptions): Promise { + private _insertViews(insertIndex: number, insertViews: ViewController[], opts?: NavOptions): Promise { if (!insertViews || !insertViews.length) { return Promise.reject('invalid pages'); } @@ -824,11 +825,11 @@ export class NavController extends Ion { // Tabs can be a parent, but it is not a collection of views // only we're looking for an actual NavController w/ stack of views leavingView.fireWillLeave(); - this.pageWillLeave.emit(leavingView); + this.viewWillLeave.emit(leavingView); return parentNav.pop(opts).then((rtnVal: boolean) => { leavingView.fireDidLeave(); - this.pageDidLeave.emit(leavingView); + this.viewDidLeave.emit(leavingView); return rtnVal; }); } @@ -926,7 +927,7 @@ export class NavController extends Ion { // the first view to be removed, it should init leave view.state = STATE_INIT_LEAVE; view.fireWillUnload(); - this.pageWillUnload.emit(view); + this.viewWillUnload.emit(view); // from the index of the leaving view, go backwards and // find the first view that is inactive so it can be the entering @@ -960,9 +961,9 @@ export class NavController extends Ion { // apart of any transitions that will eventually happen this._views.filter(v => v.state === STATE_REMOVE).forEach(view => { view.fireWillLeave(); - this.pageWillLeave.emit(view); + this.viewWillLeave.emit(view); view.fireDidLeave(); - this.pageDidLeave.emit(view); + this.viewDidLeave.emit(view); this._views.splice(this.indexOf(view), 1); view.destroy(); }); @@ -997,7 +998,7 @@ export class NavController extends Ion { // if no entering view then create a bogus one enteringView = new ViewController(); enteringView.fireLoaded(); - this.pageDidLoad.emit(enteringView); + this.viewDidLoad.emit(enteringView); } /* Async steps to complete a transition @@ -1054,7 +1055,7 @@ export class NavController extends Ion { this.loadPage(enteringView, null, opts, () => { enteringView.fireLoaded(); - this.pageDidLoad.emit(enteringView); + this.viewDidLoad.emit(enteringView); this._postRender(transId, enteringView, leavingView, isAlreadyTransitioning, opts, done); }); } @@ -1114,14 +1115,14 @@ export class NavController extends Ion { // only fire entering lifecycle if the leaving // view hasn't explicitly set not to enteringView.fireWillEnter(); - this.pageWillEnter.emit(enteringView); + this.viewWillEnter.emit(enteringView); } if (enteringView.fireOtherLifecycles) { // only fire leaving lifecycle if the entering // view hasn't explicitly set not to leavingView.fireWillLeave(); - this.pageWillLeave.emit(leavingView); + this.viewWillLeave.emit(leavingView); } } else { @@ -1228,14 +1229,14 @@ export class NavController extends Ion { // only fire entering lifecycle if the leaving // view hasn't explicitly set not to enteringView.fireDidEnter(); - this.pageDidEnter.emit(enteringView); + this.viewDidEnter.emit(enteringView); } if (enteringView.fireOtherLifecycles) { // only fire leaving lifecycle if the entering // view hasn't explicitly set not to leavingView.fireDidLeave(); - this.pageDidLeave.emit(leavingView); + this.viewDidLeave.emit(leavingView); } } diff --git a/src/components/nav/test/nav-controller.spec.ts b/src/components/nav/test/nav-controller.spec.ts index 2b2bf7a43c..662df71e65 100644 --- a/src/components/nav/test/nav-controller.spec.ts +++ b/src/components/nav/test/nav-controller.spec.ts @@ -8,7 +8,7 @@ export function run() { it('should do nothing if its the first view in the stack', () => { let view1 = new ViewController(Page1); view1.state = STATE_ACTIVE; - nav._views = [view1]; + nav.views = [view1]; expect(nav.length()).toBe(1); @@ -32,7 +32,7 @@ export function run() { view3.state = STATE_INACTIVE; let view4 = new ViewController(Page4); view4.state = STATE_ACTIVE; - nav._views = [view1, view2, view3, view4]; + nav.views = [view1, view2, view3, view4]; nav.popToRoot(); expect(nav.length()).toBe(2); @@ -58,7 +58,7 @@ export function run() { view3.state = STATE_INACTIVE; let view4 = new ViewController(Page4); view4.state = STATE_ACTIVE; - nav._views = [view1, view2, view3, view4]; + nav.views = [view1, view2, view3, view4]; nav.popTo(view2); @@ -81,7 +81,7 @@ export function run() { view1.state = STATE_INACTIVE; let view2 = new ViewController(Page2); view2.state = STATE_ACTIVE; - nav._views = [view1, view2]; + nav.views = [view1, view2]; nav.remove(1, 1, null); }); @@ -97,7 +97,7 @@ export function run() { view2.state = STATE_TRANS_LEAVE; let view3 = new ViewController(Page3); view3.state = STATE_TRANS_ENTER; - nav._views = [view1, view2, view3]; + nav.views = [view1, view2, view3]; nav._remove(2, 1); @@ -116,7 +116,7 @@ export function run() { view2.state = STATE_TRANS_ENTER; let view3 = new ViewController(Page3); view3.state = STATE_TRANS_LEAVE; - nav._views = [view1, view2, view3]; + nav.views = [view1, view2, view3]; nav._remove(1, 2); expect(nav.getByIndex(0).state).toBe(STATE_INACTIVE); @@ -134,7 +134,7 @@ export function run() { view2.state = STATE_INIT_ENTER; let view3 = new ViewController(Page3); view3.state = STATE_INIT_LEAVE; - nav._views = [view1, view2, view3]; + nav.views = [view1, view2, view3]; nav._remove(1, 1); expect(nav.length()).toBe(2); @@ -153,7 +153,7 @@ export function run() { view1.state = STATE_INACTIVE; let view2 = new ViewController(Page2); view2.state = STATE_ACTIVE; - nav._views = [view1, view2]; + nav.views = [view1, view2]; nav._remove(1, 1); expect(view1.state).toBe(STATE_INIT_ENTER); @@ -171,7 +171,7 @@ export function run() { view4.state = STATE_INACTIVE; let view5 = new ViewController(Page5); view5.state = STATE_ACTIVE; - nav._views = [view1, view2, view3, view4, view5]; + nav.views = [view1, view2, view3, view4, view5]; nav._remove(2, 2); expect(nav.length()).toBe(3); @@ -198,7 +198,7 @@ export function run() { view3.state = STATE_INACTIVE; let view4 = new ViewController(Page4); view4.state = STATE_ACTIVE; - nav._views = [view1, view2, view3, view4]; + nav.views = [view1, view2, view3, view4]; nav._remove(1, 9999); expect(nav.length()).toBe(2); @@ -222,7 +222,7 @@ export function run() { view3.state = STATE_INACTIVE; let view4 = new ViewController(Page4); view4.state = STATE_ACTIVE; - nav._views = [view1, view2, view3, view4]; + nav.views = [view1, view2, view3, view4]; nav._remove(1, 3); expect(nav.length()).toBe(2); @@ -242,7 +242,7 @@ export function run() { view1.state = STATE_INACTIVE; let view2 = new ViewController(Page2); view2.state = STATE_ACTIVE; - nav._views = [view1, view2]; + nav.views = [view1, view2]; nav._remove(1, 1); expect(view1.state).toBe(STATE_INIT_ENTER); @@ -252,7 +252,7 @@ export function run() { it('should set to remove the only view in the stack', () => { let view1 = new ViewController(Page1); view1.state = STATE_ACTIVE; - nav._views = [view1]; + nav.views = [view1]; nav._remove(0, 1); expect(nav.getByIndex(0).state).toBe(STATE_INIT_LEAVE); @@ -267,7 +267,7 @@ export function run() { view3.state = STATE_INACTIVE; let view4 = new ViewController(Page4); view4.state = STATE_ACTIVE; - nav._views = [view1, view2, view3, view4]; + nav.views = [view1, view2, view3, view4]; spyOn(view1, 'fireWillLeave'); spyOn(view1, 'fireDidLeave'); @@ -322,7 +322,7 @@ export function run() { view4.state = STATE_TRANS_ENTER; let view5 = new ViewController(Page5); view5.state = STATE_INACTIVE; - nav._views = [view1, view2, view3, view4, view5]; + nav.views = [view1, view2, view3, view4, view5]; nav._cleanup(); expect(nav.length()).toBe(3); @@ -339,7 +339,7 @@ export function run() { view1.state = STATE_INACTIVE; let view2 = new ViewController(Page2); view2.state = STATE_ACTIVE; - nav._views = [view1, view2]; + nav.views = [view1, view2]; nav._cleanup(); expect(nav.length()).toBe(2); }); @@ -351,7 +351,7 @@ export function run() { view2.state = STATE_INACTIVE; let view3 = new ViewController(Page3); view3.state = STATE_INACTIVE; - nav._views = [view1, view2, view3]; + nav.views = [view1, view2, view3]; spyOn(view1, 'destroy'); spyOn(view2, 'destroy'); @@ -381,7 +381,7 @@ export function run() { view3.state = STATE_ACTIVE; view3.zIndex = 1; - nav._views = [view1, view2, view3]; + nav.views = [view1, view2, view3]; nav._cleanup(); expect(view1.zIndex).toEqual(100); @@ -542,7 +542,7 @@ export function run() { var done = () => {}; nav._beforeTrans = () => {}; //prevent running beforeTrans for tests nav._renderer = null; - nav._views = [view1, view2, view3]; + nav.views = [view1, view2, view3]; spyOn(view1, 'domShow'); spyOn(view2, 'domShow'); @@ -565,7 +565,7 @@ export function run() { var done = () => {}; nav._beforeTrans = () => {}; //prevent running beforeTrans for tests nav._renderer = null; - nav._views = [view1, view2, view3, view4]; + nav.views = [view1, view2, view3, view4]; view3.isOverlay = true; @@ -593,7 +593,7 @@ export function run() { let enteringView = new ViewController(); enteringView.setPageRef({}); - nav._views = [leavingView, enteringView]; + nav.views = [leavingView, enteringView]; nav._setZIndex(enteringView, leavingView, 'forward'); expect(enteringView.zIndex).toEqual(101); @@ -605,7 +605,7 @@ export function run() { let enteringView = new ViewController(); enteringView.setPageRef({}); - nav._views = [leavingView, enteringView]; + nav.views = [leavingView, enteringView]; nav._setZIndex(enteringView, leavingView, 'forward'); expect(enteringView.zIndex).toEqual(100); @@ -673,7 +673,7 @@ export function run() { describe('_setAnimate', () => { it('should be unchanged when the nav is a portal', () => { - nav._views = [new ViewController()]; + nav.views = [new ViewController()]; nav._init = false; nav.isPortal = true; let opts: NavOptions = {}; @@ -682,7 +682,7 @@ export function run() { }); it('should not animate when theres only 1 view, and nav hasnt initialized yet', () => { - nav._views = [new ViewController()]; + nav.views = [new ViewController()]; nav._init = false; let opts: NavOptions = {}; nav._setAnimate(opts); @@ -690,7 +690,7 @@ export function run() { }); it('should be unchanged when theres only 1 view, and nav has already initialized', () => { - nav._views = [new ViewController()]; + nav.views = [new ViewController()]; nav._init = true; let opts: NavOptions = {}; nav._setAnimate(opts); @@ -959,7 +959,7 @@ export function run() { let view3 = new ViewController(Page3); let view4 = new ViewController(Page4); let hasCompleted = true; - nav._views = [view1, view2, view3, view4]; + nav.views = [view1, view2, view3, view4]; view1.isOverlay = true; @@ -987,7 +987,7 @@ export function run() { view1.state = STATE_TRANS_ENTER; let view2 = new ViewController(Page2); view2.state = STATE_TRANS_LEAVE; - nav._views = [view1, view2]; + nav.views = [view1, view2]; let view3 = new ViewController(Page3); nav._insert(-1, [view3]); @@ -1005,7 +1005,7 @@ export function run() { view1.state = STATE_INIT_LEAVE; let view2 = new ViewController(Page2); view2.state = STATE_INIT_ENTER; - nav._views = [view1, view2]; + nav.views = [view1, view2]; let view3 = new ViewController(Page3); nav._insert(-1, [view3]); @@ -1021,7 +1021,7 @@ export function run() { it('should insert multiple pages, back to back, with a starting active page', () => { let view1 = new ViewController(Page1); view1.state = STATE_ACTIVE; - nav._views = [view1]; + nav.views = [view1]; let view2 = new ViewController(Page2); nav._insert(-1, [view2]); @@ -1072,7 +1072,7 @@ export function run() { view1.state = STATE_INIT_LEAVE; let view2 = new ViewController(Page2); view2.state = STATE_INIT_ENTER; - nav._views = [view1, view2]; + nav.views = [view1, view2]; let view3 = new ViewController(Page3); nav._insert(-1, [view3]); @@ -1091,7 +1091,7 @@ export function run() { view1.state = STATE_INACTIVE; let view2 = new ViewController(Page2); view2.state = STATE_ACTIVE; - nav._views = [view1, view2]; + nav.views = [view1, view2]; let view3 = new ViewController(Page3); nav._insert(1, [view3]); @@ -1108,7 +1108,7 @@ export function run() { it('should insert a page before the first', () => { let view1 = new ViewController(Page1); view1.state = STATE_ACTIVE; - nav._views = [view1]; + nav.views = [view1]; let view2 = new ViewController(Page2); nav._insert(0, [view2]); @@ -1121,7 +1121,7 @@ export function run() { it('should insert 3 pages', () => { let view1 = new ViewController(Page1); view1.state = STATE_ACTIVE; - nav._views = [view1]; + nav.views = [view1]; let insertViews = [ new ViewController(Page2), @@ -1143,7 +1143,7 @@ export function run() { it('should push the second page', () => { let view1 = new ViewController(Page1); view1.state = STATE_ACTIVE; - nav._views = [view1]; + nav.views = [view1]; let view2 = new ViewController(Page2) nav._insert(-1, [view2]); @@ -1205,7 +1205,7 @@ export function run() { expect(nav.getActive()).toBe(null); let view1 = new ViewController(Page1); view1.state = STATE_INIT_ENTER; - nav._views = [view1]; + nav.views = [view1]; expect(nav.getActive()).toBe(null); view1.state = STATE_ACTIVE; expect(nav.getActive()).toBe(view1); @@ -1218,7 +1218,7 @@ export function run() { view1.state = STATE_INIT_ENTER; let view2 = new ViewController(Page2); view2.state = STATE_INIT_ENTER; - nav._views = [view1, view2]; + nav.views = [view1, view2]; expect(nav.getByState('whatever')).toBe(null); expect(nav.getByState(STATE_INIT_ENTER)).toBe(view2); @@ -1235,7 +1235,7 @@ export function run() { let view1 = new ViewController(Page1); let view2 = new ViewController(Page2); - nav._views = [view1, view2]; + nav.views = [view1, view2]; expect(nav.getPrevious(view1)).toBe(null); expect(nav.getPrevious(view2)).toBe(view1); @@ -1247,12 +1247,12 @@ export function run() { view1.setNav(nav); let view2 = new ViewController(Page2); view2.setNav(nav); - nav._views = [view1]; + nav.views = [view1]; expect(nav.first()).toBe(view1); expect(view1.isFirst()).toBe(true); - nav._views = [view1, view2]; + nav.views = [view1, view2]; expect(nav.first()).toBe(view1); expect(view1.isFirst()).toBe(true); expect(view2.isFirst()).toBe(false); @@ -1264,12 +1264,12 @@ export function run() { view1.setNav(nav); let view2 = new ViewController(Page2); view2.setNav(nav); - nav._views = [view1]; + nav.views = [view1]; expect(nav.last()).toBe(view1); expect(view1.isLast()).toBe(true); - nav._views = [view1, view2]; + nav.views = [view1, view2]; expect(nav.last()).toBe(view2); expect(view1.isLast()).toBe(false); expect(view2.isLast()).toBe(true); @@ -1282,7 +1282,7 @@ export function run() { expect(nav.length()).toBe(0); expect(nav.indexOf(view1)).toBe(-1); - nav._views = [view1, view2]; + nav.views = [view1, view2]; expect(nav.indexOf(view1)).toBe(0); expect(nav.indexOf(view2)).toBe(1); expect(nav.length()).toBe(2); @@ -1294,7 +1294,7 @@ export function run() { let view1 = new ViewController(Page1); let view2 = new ViewController(Page2); - nav._views = [view1, view2]; + nav.views = [view1, view2]; expect(nav.getByIndex(-1)).toBe(null); expect(nav.getByIndex(0)).toBe(view1); @@ -1303,7 +1303,7 @@ export function run() { }); // setup stuff - let nav: NavController; + let nav: MockNavController; let config = new Config(); class Page1 {} @@ -1316,10 +1316,10 @@ export function run() { nav = mockNav(); }); - function mockNav() { + function mockNav(): MockNavController { let elementRef = getElementRef(); - let nav = new NavController(null, null, config, null, elementRef, null, null, null); + let nav = new MockNavController(null, null, config, null, elementRef, null, null, null); nav._keyboard = { isOpen: function() { @@ -1340,7 +1340,7 @@ export function run() { setElementStyle: function(){} }; - nav._portal = new NavController(null, null, config, null, elementRef, null, null, null); + nav._portal = new MockNavController(null, null, config, null, elementRef, null, null, null); return nav; } @@ -1354,6 +1354,18 @@ export function run() { }); } +class MockNavController extends NavController { + + get views(): ViewController[] { + return this._views; + } + set views(views: ViewController[]) { + this._views = views; + } + +} + + const STATE_ACTIVE = 'active'; const STATE_INACTIVE = 'inactive'; const STATE_INIT_ENTER = 'init_enter'; diff --git a/src/components/nav/test/view-controller.spec.ts b/src/components/nav/test/view-controller.spec.ts index 680e29997f..64a19cef14 100644 --- a/src/components/nav/test/view-controller.spec.ts +++ b/src/components/nav/test/view-controller.spec.ts @@ -9,23 +9,6 @@ export function run() { } }); - describe('loaded', () => { - it('should emit LifeCycleEvent when called with component data', (done) => { - // arrange - let viewController = new ViewController(FakePage); - subscription = viewController.didLoad.subscribe((event:LifeCycleEvent) => { - // assert - expect(event).toEqual(null); - done(); - }, err => { - done(err); - }); - - // act - viewController.fireLoaded(); - }, 10000); - }); - describe('willEnter', () => { it('should emit LifeCycleEvent when called with component data', (done) => { // arrange @@ -34,7 +17,7 @@ export function run() { // assert expect(event).toEqual(null); done(); - }, err => { + }, (err: any) => { done(err); }); @@ -51,7 +34,7 @@ export function run() { // assert expect(event).toEqual(null); done(); - }, err => { + }, (err: any) => { done(err); }); @@ -68,7 +51,7 @@ export function run() { // assert expect(event).toEqual(null); done(); - }, err => { + }, (err: any) => { done(err); }); @@ -85,7 +68,7 @@ export function run() { // assert expect(event).toEqual(null); done(); - }, err => { + }, (err: any) => { done(err); }); @@ -101,7 +84,7 @@ export function run() { subscription = viewController.willUnload.subscribe((event:LifeCycleEvent) => { expect(event).toEqual(null); done(); - }, err => { + }, (err: any) => { done(err); }); @@ -118,7 +101,7 @@ export function run() { // assert expect(event).toEqual(null); done(); - }, err => { + }, (err: any) => { done(err); }); @@ -128,6 +111,6 @@ export function run() { }); }); - let subscription = null; + let subscription: any = null; class FakePage{} } diff --git a/src/components/nav/view-controller.ts b/src/components/nav/view-controller.ts index 49894ee505..81b366ab5f 100644 --- a/src/components/nav/view-controller.ts +++ b/src/components/nav/view-controller.ts @@ -39,7 +39,6 @@ export class ViewController { private _cd: ChangeDetectorRef; protected _nav: NavController; - didLoad: EventEmitter; willEnter: EventEmitter; didEnter: EventEmitter; willLeave: EventEmitter; @@ -103,7 +102,6 @@ export class ViewController { // passed in data could be NavParams, but all we care about is its data object this.data = (data instanceof NavParams ? data.data : (isPresent(data) ? data : {})); - this.didLoad = new EventEmitter(); this.willEnter = new EventEmitter(); this.didEnter = new EventEmitter(); this.willLeave = new EventEmitter(); @@ -377,14 +375,14 @@ export class ViewController { } /** - * You can find out of the current view has a Navbar or not. Be sure to wrap this in an `onPageWillEnter` method in order to make sure the view has rendered fully. + * You can find out of the current view has a Navbar or not. Be sure to wrap this in an `ionViewWillEnter` method in order to make sure the view has rendered fully. * * ```typescript * export class Page1 { * constructor(view: ViewController) { * this.view = view * } - * onPageWillEnter(){ + * ionViewWillEnter(){ * console.log('Do we have a Navbar?', this.view.hasNavbar()); * } *} @@ -452,7 +450,7 @@ export class ViewController { * constructor(viewCtrl: ViewController){ * this.viewCtrl = viewCtrl * } - * onPageWillEnter() { + * ionViewWillEnter() { * this.viewCtrl.setBackButtonText('Previous'); * } * } @@ -469,7 +467,7 @@ export class ViewController { } /** - * Set if the back button for the current view is visible or not. Be sure to wrap this in `onPageWillEnter` to make sure the has been compleltly rendered. + * Set if the back button for the current view is visible or not. Be sure to wrap this in `ionViewWillEnter` to make sure the has been compleltly rendered. * @param {boolean} Set if this Page's back button should show or not. */ showBackButton(shouldShow: boolean) { @@ -506,8 +504,7 @@ export class ViewController { */ fireLoaded() { this._loaded = true; - this.didLoad.emit(null); - ctrlFn(this, 'onPageLoaded'); + ctrlFn(this, 'Loaded'); } /** @@ -523,7 +520,7 @@ export class ViewController { this._cd.detectChanges(); } this.willEnter.emit(null); - ctrlFn(this, 'onPageWillEnter'); + ctrlFn(this, 'WillEnter'); } /** @@ -535,7 +532,7 @@ export class ViewController { let navbar = this.getNavbar(); navbar && navbar.didEnter(); this.didEnter.emit(null); - ctrlFn(this, 'onPageDidEnter'); + ctrlFn(this, 'DidEnter'); } /** @@ -544,7 +541,7 @@ export class ViewController { */ fireWillLeave() { this.willLeave.emit(null); - ctrlFn(this, 'onPageWillLeave'); + ctrlFn(this, 'WillLeave'); } /** @@ -554,7 +551,7 @@ export class ViewController { */ fireDidLeave() { this.didLeave.emit(null); - ctrlFn(this, 'onPageDidLeave'); + ctrlFn(this, 'DidLeave'); // when this is not the active page // we no longer need to detect changes @@ -567,7 +564,7 @@ export class ViewController { */ fireWillUnload() { this.willUnload.emit(null); - ctrlFn(this, 'onPageWillUnload'); + ctrlFn(this, 'WillUnload'); } /** @@ -582,7 +579,7 @@ export class ViewController { */ destroy() { this.didUnload.emit(null); - ctrlFn(this, 'onPageDidUnload'); + ctrlFn(this, 'DidUnload'); for (var i = 0; i < this._destroys.length; i++) { this._destroys[i](); @@ -598,11 +595,24 @@ export interface LifeCycleEvent { } function ctrlFn(viewCtrl: ViewController, fnName: string) { - if (viewCtrl.instance && viewCtrl.instance[fnName]) { - try { - viewCtrl.instance[fnName](); - } catch (e) { - console.error(viewCtrl.name + ' ' + fnName + ': ' + e.message); + if (viewCtrl.instance) { + // deprecated warning: added 2016-06-01, beta.8 + if (viewCtrl.instance['onPage' + fnName]) { + try { + console.warn('onPage' + fnName + '() has been deprecated. Please rename to ionView' + fnName + '()'); + viewCtrl.instance['onPage' + fnName](); + } catch (e) { + console.error(viewCtrl.name + ' onPage' + fnName + ': ' + e.message); + } + } + + // fire off ionView lifecycle instance method + if (viewCtrl.instance['ionView' + fnName]) { + try { + viewCtrl.instance['ionView' + fnName](); + } catch (e) { + console.error(viewCtrl.name + ' ionView' + fnName + ': ' + e.message); + } } } } diff --git a/src/components/picker/picker.ts b/src/components/picker/picker.ts index 39c858ef39..da916536fc 100644 --- a/src/components/picker/picker.ts +++ b/src/components/picker/picker.ts @@ -483,7 +483,7 @@ class PickerDisplayCmp { this.lastClick = 0; } - onPageLoaded() { + ionViewLoaded() { // normalize the data let data = this.d; @@ -563,7 +563,7 @@ class PickerDisplayCmp { } } - onPageDidEnter() { + ionViewDidEnter() { let activeElement: any = document.activeElement; if (activeElement) { activeElement.blur(); diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts index 99a9a39af0..135f5c6394 100644 --- a/src/components/popover/popover.ts +++ b/src/components/popover/popover.ts @@ -190,16 +190,16 @@ class PopoverCmp { this.id = (++popoverIds); } - onPageWillEnter() { + ionViewWillEnter() { this._loader.loadNextToLocation(this._navParams.data.componentType, this.viewport).then(componentRef => { this._viewCtrl.setInstance(componentRef.instance); - // manually fire onPageWillEnter() since PopoverCmp's onPageWillEnter already happened + // manually fire ionViewWillEnter() since PopoverCmp's ionViewWillEnter already happened this._viewCtrl.fireWillEnter(); }); } - onPageDidEnter() { + ionViewDidEnter() { let activeElement: any = document.activeElement; if (document.activeElement) { activeElement.blur(); diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts index 33ec3204bb..262dd01d02 100644 --- a/src/components/tabs/tabs.ts +++ b/src/components/tabs/tabs.ts @@ -116,7 +116,7 @@ import {ViewController} from '../nav/view-controller'; * * @ViewChild('myTabs') tabRef: Tabs; * - * onPageDidEnter() { + * ionViewDidEnter() { * this.tabRef.select(2); * } * diff --git a/src/components/toast/toast.ts b/src/components/toast/toast.ts index e3ff07e874..06f0e0000b 100644 --- a/src/components/toast/toast.ts +++ b/src/components/toast/toast.ts @@ -165,7 +165,7 @@ class ToastCmp { } } - onPageDidEnter() { + ionViewDidEnter() { const { activeElement }: any = document; if (activeElement) { activeElement.blur();