fix(react): don't show back button when not appropriate

packages/react-router/package.json

@@ -50,7 +50,7 @@
     "@ionic/core": "4.11.5",
     "@ionic/react": "4.11.5",
     "@types/jest": "^23.3.9",
-    "@types/node": "12.6.9",
+    "@types/node": "^12.12.14",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "@types/react-router": "^5.0.3",
@@ -70,7 +70,7 @@
     "tslint": "^5.20.0",
     "tslint-ionic-rules": "0.0.21",
     "tslint-react": "^4.1.0",
-    "typescript": "3.5.3"
+    "typescript": "^3.7.2"
   },
   "jest": {
     "preset": "ts-jest",

packages/react-router/src/ReactRouter/NavManager.tsx

@@ -3,6 +3,7 @@ import { NavContext, NavContextState } from '@ionic/react';
 import { Location as HistoryLocation, UnregisterCallback } from 'history';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
+
 import { StackManager } from './StackManager';
 
 interface NavManagerProps extends RouteComponentProps {

packages/react-router/src/ReactRouter/Router.tsx

@@ -2,7 +2,7 @@ import { NavDirection } from '@ionic/core';
 import { RouterDirection, getConfig } from '@ionic/react';
 import { Action as HistoryAction, Location as HistoryLocation, UnregisterCallback } from 'history';
 import React from 'react';
-import { RouteComponentProps, withRouter, matchPath } from 'react-router-dom';
+import { RouteComponentProps, matchPath, withRouter } from 'react-router-dom';
 
 import { generateId, isDevMode } from '../utils';
 import { LocationHistory } from '../utils/LocationHistory';
@@ -23,7 +23,7 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
   activeIonPageId?: string;
   currentDirection?: RouterDirection;
   locationHistory = new LocationHistory();
-  routes: { [key: string]: any } = {};
+  routes: { [key: string]: any; } = {};
 
   constructor(props: RouteComponentProps) {
     super(props);
@@ -49,10 +49,6 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
     });
   }
 
-  // componentDidMount() {
-  //   this.setActiveView(this.props.location, this.state.action!);
-  // }
-
   componentDidUpdate(_prevProps: RouteComponentProps, prevState: RouteManagerState) {
     // Trigger a page change if the location or action is different
     if (this.state.location && prevState.location !== this.state.location || prevState.action !== this.state.action) {
@@ -144,12 +140,12 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
             leavingView.mount = false;
             this.removeOrphanedViews(enteringView, enteringViewStack);
           }
-        leavingViewHtml = enteringView.id === leavingView.id ? leavingView.ionPageElement!.outerHTML : undefined;
+          leavingViewHtml = enteringView.id === leavingView.id ? leavingView.ionPageElement!.outerHTML : undefined;
         } else {
           // If there is not a leavingView, then we shouldn't provide a direction
           direction = undefined;
         }
-        
+
       } else {
         enteringView.show = true;
         enteringView.mount = true;
@@ -176,7 +172,7 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
           if (enteringEl) {
             // Don't animate from an empty view
             const navDirection = leavingEl && leavingEl.innerHTML === '' ? undefined : direction === 'none' ? undefined : direction;
-            const shouldGoBack = !!enteringView.prevId || !!this.locationHistory.previous();
+            const shouldGoBack = !!enteringView.prevId;
             this.commitView(
               enteringEl!,
               leavingEl!,
@@ -353,9 +349,9 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
     const ionRouterOutlet = React.Children.only(routerOutlet) as React.ReactElement;
 
     React.Children.forEach(ionRouterOutlet.props.children, (child: React.ReactElement) => {
-      for (let routeKey in this.routes) {
+      for (const routeKey in this.routes) {
         const route = this.routes[routeKey];
-        if (route.props.path == child.props.path) {
+        if (route.props.path === child.props.path) {
           this.routes[routeKey] = child;
         }
       }
@@ -408,11 +404,11 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
     if (leavingView) {
       if (leavingView.id === leavingView.prevId) {
         const previousLocation = this.locationHistory.previous();
-        if(previousLocation) {
+        if (previousLocation) {
           this.handleNavigate('replace', previousLocation.pathname + previousLocation.search, 'back');
         } else {
           defaultHref && this.handleNavigate('replace', defaultHref, 'back');
-        }        
+        }
       } else {
         const { view: enteringView } = this.state.viewStacks.findViewInfoById(leavingView.prevId);
         if (enteringView) {
@@ -459,7 +455,7 @@ function clonePageElement(leavingViewHtml: string) {
   const newEl = document.createElement('div');
   newEl.innerHTML = leavingViewHtml;
   newEl.classList.add('ion-page-hidden');
-  newEl.style.zIndex = null;
+  newEl.style.zIndex = '';
   // Remove an existing back button so the new element doesn't get two of them
   const ionBackButton = newEl.getElementsByTagName('ion-back-button');
   if (ionBackButton[0]) {

packages/react-router/src/ReactRouter/StackManager.tsx

@@ -96,7 +96,7 @@ class StackManagerInner extends React.Component<StackManagerProps, StackManagerS
       ref: this.routerOutletEl
     };
 
-    if(ionRouterOutlet.props.forwardedRef) {
+    if (ionRouterOutlet.props.forwardedRef) {
       ionRouterOutlet.props.forwardedRef.current = this.routerOutletEl;
     }
 
@@ -115,7 +115,7 @@ const withContext = (Component: any) => {
     <RouteManagerContext.Consumer>
       {context => <Component {...props} routeManager={context} />}
     </RouteManagerContext.Consumer>
-  )
+  );
-}
+};
 
 export const StackManager = withContext(StackManagerInner);

packages/react-router/tslint.json

@@ -27,6 +27,9 @@
     "jsx-no-bind": false,
     "jsx-no-lambda": false,
     "jsx-no-multiline-js": false,
-    "jsx-wrap-multiline": false
+    "jsx-wrap-multiline": false,
+    "forin": false,
+    "strict-type-predicates": false,
+    "no-unused-expression": false
   }
 }

packages/react/package.json

@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@types/jest": "^23.3.9",
-    "@types/node": "10.12.9",
+    "@types/node": "^12.12.14",
     "@types/react": "^16.9.2",
     "@types/react-dom": "^16.9.0",
     "fs-extra": "^8.1.0",
@@ -66,7 +66,7 @@
     "tslint": "^5.18.0",
     "tslint-ionic-rules": "0.0.21",
     "tslint-react": "^4.0.0",
-    "typescript": "3.5.3"
+    "typescript": "^3.7.2"
   },
   "jest": {
     "preset": "ts-jest",

packages/react/src/components/IonPage.tsx

@@ -14,11 +14,11 @@ interface IonPageInternalProps extends IonPageProps {
 
 class IonPageInternal extends React.Component<IonPageInternalProps> {
   context!: React.ContextType<typeof NavContext>;
-  ref: React.RefObject<HTMLDivElement>;// React.createRef<HTMLDivElement>();
+  ref: React.RefObject<HTMLDivElement>;
 
   constructor(props: IonPageInternalProps) {
     super(props);
-    this.ref = this.props.forwardedRef || React.createRef()
+    this.ref = this.props.forwardedRef || React.createRef();
   }
 
   componentDidMount() {
@@ -26,7 +26,7 @@ class IonPageInternal extends React.Component<IonPageInternalProps> {
       if (this.context.hasIonicRouter()) {
         this.context.registerIonPage(this.ref.current);
       }
-    }  
+    }
   }
 
   render() {
@@ -46,6 +46,6 @@ class IonPageInternal extends React.Component<IonPageInternalProps> {
   static get contextType() {
     return NavContext;
   }
-};
+}
 
 export const IonPage = createForwardRef(IonPageInternal, 'IonPage');

packages/react/src/components/createControllerComponent.tsx

@@ -15,12 +15,12 @@ export interface ReactControllerProps {
 
 export const createControllerComponent = <OptionsType extends object, OverlayType extends OverlayBase>(
   displayName: string,
-  controller: { create: (options: OptionsType) => Promise<OverlayType> }
+  controller: { create: (options: OptionsType) => Promise<OverlayType>; }
 ) => {
   const dismissEventName = `on${displayName}DidDismiss`;
 
   type Props = OptionsType & ReactControllerProps & {
-    forwardedRef?: React.RefObject<OverlayType>
+    forwardedRef?: React.RefObject<OverlayType>;
   };
 
   class Overlay extends React.Component<Props> {
@@ -80,16 +80,16 @@ export const createControllerComponent = <OptionsType extends object, OverlayTyp
         if (this.props.forwardedRef) {
           (this.props.forwardedRef as any).current = this.overlay;
         }
-        await this.overlay.present();       
+        await this.overlay.present();
       }
     }
 
     render(): null {
       return null;
     }
-  };
+  }
 
   return React.forwardRef<OverlayType, Props>((props, ref) => {
-    return <Overlay {...props} forwardedRef={ref} />
+    return <Overlay {...props} forwardedRef={ref} />;
-  })
+  });
 };

packages/react/src/components/createOverlayComponent.tsx

@@ -17,12 +17,12 @@ export interface ReactOverlayProps {
 
 export const createOverlayComponent = <OverlayComponent extends object, OverlayType extends OverlayElement>(
   displayName: string,
-  controller: { create: (options: any) => Promise<OverlayType> }
+  controller: { create: (options: any) => Promise<OverlayType>; }
 ) => {
   const dismissEventName = `on${displayName}DidDismiss`;
 
   type Props = OverlayComponent & ReactOverlayProps & {
-    forwardedRef?: React.RefObject<OverlayType>
+    forwardedRef?: React.RefObject<OverlayType>;
   };
 
   class Overlay extends React.Component<Props> {
@@ -96,9 +96,9 @@ export const createOverlayComponent = <OverlayComponent extends object, OverlayT
         this.el
       );
     }
-  };
+  }
 
   return React.forwardRef<OverlayType, Props>((props, ref) => {
-    return <Overlay {...props} forwardedRef={ref} />
+    return <Overlay {...props} forwardedRef={ref} />;
-  })
+  });
 };

packages/react/tslint.json

@@ -14,7 +14,6 @@
     "trailing-comma": false,
     "no-null-keyword": false,
     "no-console": false,
-    "no-unbound-method": true,
     "no-floating-promises": false,
     "no-invalid-template-strings": true,
     "ban-export-const-enum": true,
@@ -27,6 +26,8 @@
     "jsx-no-bind": false,
     "jsx-no-lambda": false,
     "jsx-no-multiline-js": false,
-    "jsx-wrap-multiline": false
+    "jsx-wrap-multiline": false,
+    "no-empty-interface": false,
+    "no-unbound-method": false
   }
 }