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-18 19:21:34 +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/src/components/createOverlayComponent.tsx
+++ b/packages/react/src/components/createOverlayComponent.tsx
@ -0,0 +1,81 @@
+import { OverlayEventDetail } from '@ionic/core';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { attachEventProps } from './utils';
+
+interface OverlayElement extends HTMLElement {
+  present: () => Promise<void>;
+  dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
+}
+
+export interface ReactOverlayProps {
+  children?: React.ReactNode;
+  isOpen: boolean;
+  onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+}
+
+export const createOverlayComponent = <T extends object, OverlayType extends OverlayElement>(
+  displayName: string,
+  controller: { create: (options: any) => Promise<OverlayType> }
+) => {
+  const dismissEventName = `on${displayName}DidDismiss`;
+
+  type Props = T & ReactOverlayProps;
+
+  return class extends React.Component<Props> {
+    overlay?: OverlayType;
+    el: HTMLDivElement;
+
+    constructor(props: Props) {
+      super(props);
+      this.el = document.createElement('div');
+    }
+
+    static get displayName() {
+      return displayName;
+    }
+
+    componentDidMount() {
+      // TODO
+      if (this.props.isOpen as boolean) {
+        this.present();
+      }
+    }
+
+    async componentDidUpdate(prevProps: Props) {
+
+      if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
+        this.present(prevProps);
+      }
+      if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
+        await this.overlay.dismiss();
+      }
+    }
+
+    async present(prevProps?: Props) {
+      const { children, isOpen, onDidDismiss = () => { return; }, ...cProps } = this.props;
+      const elementProps = {
+        ...cProps,
+        [dismissEventName]: onDidDismiss
+      };
+
+      const overlay = this.overlay = await controller.create({
+        ...elementProps,
+        component: this.el,
+        componentProps: {}
+      });
+
+      attachEventProps(overlay, elementProps, prevProps);
+
+      await overlay.present();
+    }
+
+    render() {
+      return ReactDOM.createPortal(
+        this.props.children,
+        this.el,
+      );
+    }
+  };
+};