Master react (#18998)

* chore(): bump to beta 8

* fix(): IonFabButton href fix

* fix(react): support components with href attributes

* fix(): Prep work to break router out

* fix(): breaking react-router and react-core into own packages

* chore(): moving view stuff out of react-core

* chore(): dev build 8-1

* chore(): update to react beta 8

* chore(): fixes to deps

* fix(): removing IonAnchor in favor of IonRouterLink

* chore(): beta 9 release

* refactor(react): treeshake, minify, api

* wip

* fix(): react dev builds

* fix(): fixes to get app builds working again

* fix(): removing tgz file

* feat(): adding platform helper methods

* fix(): don't map attributes to props

* chore(): add test app

* feat(): copy css folder from core

* chore(): move rollup node resolve to devDependencies

* fix(): expose setupConfig()

* perf(): improve treeshaking

* fix(): removing crypto from generateUniqueId

* fix(): adding missing rollup dp

* fix(): test cleanup and fixes to make tests pass

* chore(): moving react to packages folder

* fix(): fixing react build due to move to packages

* feat(): adding missing IonInfiniteScrollContent component

* chore(): add automated testing using cypress

* fix(): adding option onDidDismiss to controller components

* 0.0.10 react

* wip

* fix(): removing deprecated React calls

* fix(): exporting setupConfig from core

* chore(): bump to 4.8.0-rc.0

* chore(): updating test-app deps and fixing test

* chore(): updates to react readme

packages/react/src/lifecycle/IonLifeCycleHOC.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { IonLifeCycleContext } from '../contexts/IonLifeCycleContext';
+
+export const withIonLifeCycle = (WrappedComponent: React.ComponentType<any>) => {
+  return class IonLifeCycle extends React.Component<any, any> {
+    context!: React.ContextType<typeof IonLifeCycleContext>;
+    componentRef = React.createRef<any>();
+
+    constructor(props: any) {
+      super(props);
+    }
+
+    componentDidMount() {
+      const element = this.componentRef.current;
+      this.context.onIonViewWillEnter(() => {
+        if (element && element.ionViewWillEnter) {
+          element.ionViewWillEnter();
+        }
+      });
+
+      this.context.onIonViewDidEnter(() => {
+        if (element && element.ionViewDidEnter) {
+          element.ionViewDidEnter();
+        }
+      });
+
+      this.context.onIonViewWillLeave(() => {
+        if (element && element.ionViewWillLeave) {
+          element.ionViewWillLeave();
+        }
+      });
+
+      this.context.onIonViewDidLeave(() => {
+        if (element && element.ionViewDidLeave) {
+          element.ionViewDidLeave();
+        }
+      });
+    }
+
+    render() {
+      return (
+        <IonLifeCycleContext.Consumer>
+          {context => {
+            this.context = context;
+            return (
+              <WrappedComponent ref={this.componentRef} {...this.props} />
+            );
+          }}
+        </IonLifeCycleContext.Consumer>
+      );
+    }
+  };
+};

packages/react/src/lifecycle/hooks.ts

@@ -0,0 +1,23 @@
+import { useContext } from 'react';
+
+import { IonLifeCycleContext } from '../contexts/IonLifeCycleContext';
+
+export const useIonViewWillEnter = (callback: () => void) => {
+  const value = useContext(IonLifeCycleContext);
+  value.onIonViewWillEnter(callback);
+};
+
+export const useIonViewDidEnter = (callback: () => void) => {
+  const value = useContext(IonLifeCycleContext);
+  value.onIonViewDidEnter(callback);
+};
+
+export const useIonViewWillLeave = (callback: () => void) => {
+  const value = useContext(IonLifeCycleContext);
+  value.onIonViewWillLeave(callback);
+};
+
+export const useIonViewDidLeave = (callback: () => void) => {
+  const value = useContext(IonLifeCycleContext);
+  value.onIonViewDidLeave(callback);
+};

packages/react/src/lifecycle/index.ts

@@ -0,0 +1,3 @@
+
+export { withIonLifeCycle } from './IonLifeCycleHOC';
+export { useIonViewDidEnter, useIonViewDidLeave, useIonViewWillEnter, useIonViewWillLeave } from './hooks';