feat(angular): expose animationDirection (#16802)

* feat(angular): expose animationDirection

* update

Author: manucorporat

angular/src/directives/navigation/ion-tabs.ts

@@ -64,6 +64,6 @@ export class IonTabs {
       ? href
       : this.outlet.getLastUrl(tab) || href;
 
-    return this.navCtrl.navigateBack(url, true);
+    return this.navCtrl.navigateBack(url);
   }
 }

angular/src/directives/navigation/router-link-delegate.ts

@@ -1,9 +1,10 @@
 import { LocationStrategy } from '@angular/common';
 import { Directive, ElementRef, HostListener, Input, Optional } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
+import { RouterDirection } from '@ionic/core';
 import { Subscription } from 'rxjs';
 
-import { NavController, NavDirection } from '../../providers/nav-controller';
+import { NavController } from '../../providers/nav-controller';
 
 @Directive({
   selector: '[routerLink]',
@@ -12,7 +13,7 @@ export class RouterLinkDelegate {
 
   private subscription?: Subscription;
 
-  @Input() routerDirection: NavDirection = 'forward';
+  @Input() routerDirection: RouterDirection = 'forward';
 
   constructor(
     private locationStrategy: LocationStrategy,

angular/src/directives/navigation/stack-controller.ts

@@ -2,7 +2,7 @@ import { ComponentRef, NgZone } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { RouterDirection } from '@ionic/core';
 
-import { NavController, NavDirection } from '../../providers/nav-controller';
+import { NavController } from '../../providers/nav-controller';
 
 import { RouteView, computeStackId, destroyView, getUrl, insertView, isTabSwitch, toSegments } from './stack-utils';
 
@@ -43,14 +43,14 @@ export class StackController {
   }
 
   async setActive(enteringView: RouteView) {
-    let { direction, animated } = this.navCtrl.consumeTransition();
+    let { direction, animation } = this.navCtrl.consumeTransition();
     const leavingView = this.activeView;
     if (isTabSwitch(enteringView, leavingView)) {
       direction = 'back';
-      animated = false;
+      animation = undefined;
     }
     this.insertView(enteringView, direction);
-    await this.transition(enteringView, leavingView, direction, animated, this.canGoBack(1), false);
+    await this.transition(enteringView, leavingView, animation, this.canGoBack(1), false);
     this.cleanup();
   }
 
@@ -73,7 +73,6 @@ export class StackController {
       views[views.length - 1], // leaving view
       'back',
       true,
-      true,
       true
     );
   }
@@ -130,8 +129,7 @@ export class StackController {
   private async transition(
     enteringView: RouteView | undefined,
     leavingView: RouteView | undefined,
-    direction: NavDirection,
-    animated: boolean,
+    direction: 'forward' | 'back' | undefined,
     showGoBack: boolean,
     progressAnimation: boolean
   ) {
@@ -159,9 +157,9 @@ export class StackController {
 
       await containerEl.componentOnReady();
       this.runningTransition = containerEl.commit(enteringEl, leavingEl, {
-        duration: !animated ? 0 : undefined,
-        direction: direction === 'forward' ? 'forward' : 'back', // TODO: refactor
         deepWait: true,
+        duration: direction === undefined ? 0 : undefined,
+        direction,
         showGoBack,
         progressAnimation
       });

angular/src/providers/nav-controller.ts

@@ -1,19 +1,24 @@
 import { Location } from '@angular/common';
 import { Injectable, Optional } from '@angular/core';
 import { NavigationExtras, NavigationStart, Router, UrlTree } from '@angular/router';
-import { RouterDirection } from '@ionic/core';
+import { NavDirection, RouterDirection } from '@ionic/core';
 
 import { Platform } from './platform';
 
-export type NavDirection = 'forward' | 'back' | 'root' | 'auto';
+export interface AnimationOptions {
+  animated?: boolean;
+  animationDirection?: 'forward' | 'back';
+}
+
+export interface NavigationOptions extends NavigationExtras, AnimationOptions {}
 
 @Injectable()
 export class NavController {
 
-  private direction: NavDirection = DEFAULT_DIRECTION;
-  private animated = DEFAULT_ANIMATED;
+  private direction: 'forward' | 'back' | 'root' | 'auto' = DEFAULT_DIRECTION;
+  private animated?: NavDirection = DEFAULT_ANIMATED;
   private guessDirection: RouterDirection = 'forward';
-  private guessAnimation = false;
+  private guessAnimation?: NavDirection;
   private lastNavId = -1;
 
   constructor(
@@ -26,8 +31,8 @@ export class NavController {
       router.events.subscribe(ev => {
         if (ev instanceof NavigationStart) {
           const id = (ev.restoredState) ? ev.restoredState.navigationId : ev.id;
-          this.guessAnimation = !ev.restoredState;
           this.guessDirection = id < this.lastNavId ? 'back' : 'forward';
+          this.guessAnimation = !ev.restoredState ? this.guessDirection : undefined;
           this.lastNavId = this.guessDirection === 'forward' ? ev.id : id;
         }
       });
@@ -37,66 +42,77 @@ export class NavController {
     platform.backButton.subscribeWithPriority(0, () => this.goBack());
   }
 
-  navigateForward(url: string | UrlTree | any[], animated?: boolean, extras?: NavigationExtras) {
-    this.setDirection('forward', animated);
+  navigateForward(url: string | UrlTree | any[], options: NavigationOptions = {}) {
+    this.setDirection('forward', options.animated, options.animationDirection);
     if (Array.isArray(url)) {
-      return this.router!.navigate(url, extras);
+      return this.router!.navigate(url, options);
     } else {
-      return this.router!.navigateByUrl(url, extras);
+      return this.router!.navigateByUrl(url, options);
     }
   }
 
-  navigateBack(url: string | UrlTree | any[], animated?: boolean, extras?: NavigationExtras) {
-    this.setDirection('back', animated);
+  navigateBack(url: string | UrlTree | any[], options: NavigationOptions = {}) {
+    this.setDirection('back', options.animated, options.animationDirection);
     // extras = { replaceUrl: true, ...extras };
     if (Array.isArray(url)) {
-      return this.router!.navigate(url, extras);
+      return this.router!.navigate(url, options);
     } else {
-      return this.router!.navigateByUrl(url, extras);
+      return this.router!.navigateByUrl(url, options);
     }
   }
 
-  navigateRoot(url: string | UrlTree | any[], animated?: boolean, extras?: NavigationExtras) {
-    this.setDirection('root', animated);
+  navigateRoot(url: string | UrlTree | any[], options: NavigationOptions = {}) {
+    this.setDirection('root', options.animated, options.animationDirection);
     if (Array.isArray(url)) {
-      return this.router!.navigate(url, extras);
+      return this.router!.navigate(url, options);
     } else {
-      return this.router!.navigateByUrl(url, extras);
+      return this.router!.navigateByUrl(url, options);
     }
   }
 
-  goBack(animated?: boolean) {
-     this.setDirection('back', animated);
-     return this.location.back();
+  goBack(options: AnimationOptions = { animated: true, animationDirection: 'back' }) {
+    this.setDirection('back', options.animated, options.animationDirection);
+    return this.location.back();
    }
 
-  setDirection(direction: NavDirection, animated?: boolean) {
+  setDirection(direction: RouterDirection, animated?: boolean, animationDirection?: 'forward' | 'back') {
     this.direction = direction;
-    this.animated = (animated === undefined)
-      ? direction !== 'root'
-      : animated;
+    this.animated = getAnimation(direction, animated, animationDirection);
   }
 
   consumeTransition() {
     let direction: RouterDirection = 'root';
-    let animated = false;
+    let animation: NavDirection | undefined;
 
     if (this.direction === 'auto') {
       direction = this.guessDirection;
-      animated = this.guessAnimation;
+      animation = this.guessAnimation;
     } else {
-      animated = this.animated;
+      animation = this.animated;
       direction = this.direction;
     }
     this.direction = DEFAULT_DIRECTION;
     this.animated = DEFAULT_ANIMATED;
 
     return {
       direction,
-      animated
+      animation
     };
   }
 }
 
+function getAnimation(direction: RouterDirection, animated: boolean | undefined, animationDirection: 'forward' | 'back' | undefined): NavDirection | undefined {
+  if (animated === false) {
+    return undefined;
+  }
+  if (animationDirection !== undefined) {
+    return animationDirection;
+  }
+  if (direction === 'forward' || direction === 'back') {
+    return direction;
+  }
+  return undefined;
+}
+
 const DEFAULT_DIRECTION = 'auto';
-const DEFAULT_ANIMATED = false;
+const DEFAULT_ANIMATED = undefined;