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
2025-08-20 20:33:32 +08:00 · 2019-08-13 22:24:44 +02:00
parent 0b1e23f754
commit 930b271a4a
224 changed files with 16337 additions and 1734 deletions
--- a/packages/react-router/src/ReactRouter/View.tsx
+++ b/packages/react-router/src/ReactRouter/View.tsx
@ -0,0 +1,89 @@
+import React from 'react';
+import { IonLifeCycleContext } from '@ionic/react';
+
+type Props = React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+
+interface InternalProps extends React.HTMLAttributes<HTMLElement> {
+  forwardedRef?: React.RefObject<HTMLElement>,
+};
+
+type ExternalProps = Props & {
+  ref?: React.RefObject<HTMLElement>
+};
+
+interface StackViewState {
+  ref: any;
+}
+
+class ViewInternal extends React.Component<InternalProps, StackViewState> {
+  context!: React.ContextType<typeof IonLifeCycleContext>;
+
+  constructor(props: InternalProps) {
+    super(props);
+    this.state = {
+      ref: null
+    }
+  }
+
+  componentDidMount() {
+    const { forwardedRef } = this.props;
+    this.setState({ ref: forwardedRef });
+    if (forwardedRef && forwardedRef.current) {
+      forwardedRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));
+      forwardedRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));
+      forwardedRef.current.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));
+      forwardedRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));
+    }
+  }
+
+  componentWillUnmount() {
+    const { forwardedRef } = this.props;
+    if (forwardedRef && forwardedRef.current) {
+      forwardedRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));
+      forwardedRef.current.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));
+      forwardedRef.current.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));
+      forwardedRef.current.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));
+    }
+  }
+
+  ionViewWillEnterHandler() {
+    this.context.ionViewWillEnter();
+  }
+
+  ionViewDidEnterHandler() {
+    this.context.ionViewDidEnter();
+  }
+
+  ionViewWillLeaveHandler() {
+    this.context.ionViewWillLeave();
+  }
+
+  ionViewDidLeaveHandler() {
+    this.context.ionViewDidLeave();
+  }
+
+  render() {
+    const { className, children, forwardedRef, ...rest } = this.props;
+    const { ref } = this.state;
+    return (
+        <div
+          className={className ? `ion-page ${className}` : 'ion-page'}
+          ref={forwardedRef as any}
+          {...rest}
+        >
+          {ref && children}
+        </div>
+    )
+  }
+
+  static get contextType() {
+    return IonLifeCycleContext;
+  }
+}
+
+function forwardRef(props: InternalProps, ref: React.RefObject<HTMLElement>) {
+  return <ViewInternal forwardedRef={ref} {...props} />;
+}
+forwardRef.displayName = 'View';
+
+export const View = /*@__PURE__*/React.forwardRef<HTMLElement, ExternalProps>(forwardRef as any);