Master react (#19439)

chore(react): react rc3 release

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;
+    }
+  }
+};