Master react (#19439)

chore(react): react rc3 release

packages/react-router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "4.9.0-rc.2",
+  "version": "4.10.0-rc.3",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -37,16 +37,16 @@
     "tslib": "*"
   },
   "peerDependencies": {
-    "@ionic/core": "^4.9.0",
-    "@ionic/react": "4.9.0-rc.2",
+    "@ionic/core": "^4.10.0",
+    "@ionic/react": "4.10.0-rc.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-router": "^5.0.1",
     "react-router-dom": "^5.0.1"
   },
   "devDependencies": {
-    "@ionic/core": "^4.9.0",
-    "@ionic/react": "4.9.0-rc.2",
+    "@ionic/core": "^4.10.0",
+    "@ionic/react": "4.10.0-rc.3",
     "@types/jest": "^23.3.9",
     "@types/node": "12.6.9",
     "@types/react": "^16.9.2",

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

@@ -4,7 +4,7 @@ import { Location as HistoryLocation, UnregisterCallback } from 'history';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { StackManager } from './StackManager';
-import { generateUniqueId } from '../utils';
+import { generateId } from '../utils';
 import { LocationHistory } from '../utils/LocationHistory'
 import { ViewItem } from './ViewItem';
 import { ViewStack } from './ViewStacks';
@@ -44,7 +44,7 @@ export class NavManager extends React.Component<NavManagerProps, NavManagerState
 
     this.locationHistory.add({
       hash: window.location.hash,
-      key: generateUniqueId(6),
+      key: generateId(),
       pathname: window.location.pathname,
       search: window.location.search,
       state: {}

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

@@ -3,7 +3,7 @@ import { RouterDirection } from '@ionic/react';
 import { Action as HistoryAction, Location as HistoryLocation, UnregisterCallback } from 'history';
 import React from 'react';
 import { BrowserRouter, BrowserRouterProps, matchPath, RouteComponentProps, withRouter } from 'react-router-dom';
-import { generateUniqueId } from '../utils';
+import { generateId } from '../utils';
 import { IonRouteData } from './IonRouteData';
 import { NavManager } from './NavManager';
 import { RouteManagerContext, RouteManagerContextState } from './RouteManagerContext';
@@ -49,7 +49,8 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
       view.show = false;
       view.ionPageElement = undefined;
       view.isIonRoute = false;
-      view.key = generateUniqueId();
+      view.prevId = undefined;
+      view.key = generateId();
       this.setState({
         viewStacks
       });
@@ -76,10 +77,6 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
       }
       leavingView = viewStacks.findViewInfoById(this.activeIonPageId).view;
 
-      if (leavingView && leavingView.routeData.match!.url === location.pathname) {
-        return;
-      }
-
       if (enteringView) {
 
         if (enteringView.isIonRoute) {
@@ -96,7 +93,7 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
                 * If the page is being pushed into the stack by another view,
                 * record the view that originally directed to the new view for back button purposes.
                 */
-                enteringView.prevId = leavingView.id;
+                enteringView.prevId = enteringView.prevId || leavingView.id;
               } else {
                 direction = direction || 'back';
                 leavingView.mount = false;
@@ -159,8 +156,8 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
     await this.registerViewStack(id, activeId, views, routerOutlet, this.props.location);
 
     function createViewItem(child: React.ReactElement<any>, location: HistoryLocation) {
-      const viewId = generateUniqueId();
-      const key = generateUniqueId();
+      const viewId = generateId();
+      const key = generateId();
       const route = child;
       const matchProps = {
         exact: child.props.exact,
@@ -182,7 +179,7 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
       };
       if (!!match && view.isIonRoute) {
         activeId = viewId;
-      };
+      }
       return view;
     }
   }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { generateUniqueId, isDevMode } from '../utils';
+import { generateId, isDevMode } from '../utils';
 import { View } from './View';
 import { ViewTransitionManager } from './ViewTransitionManager';
 import { RouteManagerContext } from './RouteManagerContext';
@@ -18,7 +18,7 @@ export class StackManager extends React.Component<StackManagerProps, StackManage
 
   constructor(props: StackManagerProps) {
     super(props);
-    this.id = this.props.id || generateUniqueId();
+    this.id = this.props.id || generateId();
     this.handleViewSync = this.handleViewSync.bind(this);
     this.handleHideView = this.handleHideView.bind(this);
   }

packages/react-router/src/utils/dev.ts

@@ -3,7 +3,7 @@ export const isDevMode = () => {
 };
 
 export const deprecationWarning = (message: string) => {
-  if(isDevMode()) {
+  if (isDevMode()) {
     console.warn(message);
   }
 };

packages/react-router/src/utils/generateId.ts

@@ -0,0 +1,3 @@
+let count = 0;
+
+export const generateId = () => (count++).toString();

packages/react-router/src/utils/generateUniqueId.ts

@@ -1,8 +0,0 @@
-export const generateUniqueId = (length: number = 10) => {
-  const charPool = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
-  const charArray: string[] = [];
-  for(let i = 0; i < length; i++) {
-    charArray.push(charPool[Math.floor(Math.random() * charPool.length)]);
-  }
-  return charArray.join('');
-};

packages/react-router/src/utils/index.ts

@@ -1,2 +1,2 @@
-export * from './generateUniqueId';
+export * from './generateId';
 export * from './dev';

packages/react/CHANGELOG.md

@@ -1,5 +1,19 @@
+# [4.10.0-rc3]
 
-# [4.8.0-rc2]
+## Bug fixes
+
+Pages should maintain their original previous page id [2afcb6](https://github.com/ionic-team/ionic/commit/2afcb6c80b167b95beb79641504d9237b498dbef), fixes [#19351](https://github.com/ionic-team/ionic/issues/19351)
+
+Dismiss overlay component on unmount, [3c2694](https://github.com/ionic-team/ionic/commit/3c26946d47b37d42dfaa3294cfb6bf8f0ef11aa4), fixes [#19377](https://github.com/ionic-team/ionic/issues/19377)
+
+Render first route even if url is same, fixes [#19392](https://github.com/ionic-team/ionic/issues/19392)
+
+## Breaking Changes
+
+### Components with href attributes and the new routerLink prop
+As of RC3, components that use the href prop (`IonButton`, `IonItem`, etc..), no longer run these links through the router. As a result, page transitions are no longer applied to these links. To maintain page transitions, use the new `routerLink` prop instead. The href prop should be used when you want to enforce a full browser transition on the page, or when you need to link to an external resource.
+
+# [4.9.0-rc2]
 
 ## Features
 

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "4.9.0-rc.2",
+  "version": "4.10.0-rc.3",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -38,7 +38,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^4.9.0",
+    "@ionic/core": "^4.10.0",
     "tslib": "*"
   },
   "peerDependencies": {

packages/react/src/components/createComponent.tsx

@@ -6,11 +6,13 @@ import { NavContext } from '../contexts/NavContext';
 import { ReactProps } from './ReactProps';
 import { RouterDirection } from './hrefprops';
 import { attachEventProps, createForwardRef, dashToPascalCase, isCoveredByReact } from './utils';
+import { deprecationWarning } from './utils/dev';
 
 interface IonicReactInternalProps<ElementType> {
   forwardedRef?: React.Ref<ElementType>;
   children?: React.ReactNode;
   href?: string;
+  routerLink?: string;
   target?: string;
   style?: string;
   ref?: React.Ref<any>;
@@ -32,6 +34,11 @@ export const createReactComponent = <PropType, ElementType>(
 
     componentDidMount() {
       this.componentDidUpdate(this.props);
+      if (this.props.href) {
+        setTimeout(() => {
+          deprecationWarning('hrefchange', 'As of RC3, href links no longer go through the router, so transitions will not be applied to these links. To maintain transitions, use the new routerLink prop.');
+        }, 2000);
+      }
     }
 
     componentDidUpdate(prevProps: IonicReactInternalProps<ElementType>) {
@@ -40,11 +47,10 @@ export const createReactComponent = <PropType, ElementType>(
     }
 
     private handleClick = (e: MouseEvent) => {
-      // TODO: review target usage
-      const { href, routerDirection } = this.props;
-      if (href !== undefined && this.context.hasIonicRouter()) {
+      const { routerLink, routerDirection } = this.props;
+      if (routerLink !== undefined) {
         e.preventDefault();
-        this.context.navigate(href, routerDirection);
+        this.context.navigate(routerLink, routerDirection);
       }
     }
 

packages/react/src/components/createControllerComponent.tsx

@@ -34,12 +34,15 @@ export const createControllerComponent = <OptionsType extends object, OverlayTyp
 
     async componentDidMount() {
       const { isOpen } = this.props;
-      // TODO
       if (isOpen as boolean) {
         this.present();
       }
     }
 
+    componentWillUnmount() {
+      if (this.overlay) { this.overlay.dismiss(); }
+    }
+
     async componentDidUpdate(prevProps: Props) {
       if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
         this.present(prevProps);

packages/react/src/components/createOverlayComponent.tsx

@@ -37,14 +37,16 @@ export const createOverlayComponent = <T extends object, OverlayType extends Ove
     }
 
     componentDidMount() {
-      // TODO
       if (this.props.isOpen as boolean) {
         this.present();
       }
     }
 
-    async componentDidUpdate(prevProps: Props) {
+    componentWillUnmount() {
+      if (this.overlay) { this.overlay.dismiss(); }
+    }
 
+    async componentDidUpdate(prevProps: Props) {
       if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
         this.present(prevProps);
       }

packages/react/src/components/hrefprops.ts

@@ -1,5 +1,6 @@
 export declare type RouterDirection = 'forward' | 'back' | 'none';
 
 export type HrefProps<T> = Omit<T, 'routerDirection'> & {
+  routerLink?: string;
   routerDirection?: RouterDirection;
 };

packages/react/src/components/utils/dev.ts

@@ -0,0 +1,14 @@
+export const isDevMode = () => {
+  return process && process.env && process.env.NODE_ENV === 'development';
+};
+
+const warnings: { [key: string]: boolean } = {};
+
+export const deprecationWarning = (key: string, message: string) => {
+  if (isDevMode()) {
+    if (!warnings[key]) {
+      console.warn(message);
+      warnings[key] = true;
+    }
+  }
+};