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-16 18:17:31 +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/createControllerComponent.tsx
+++ b/packages/react/src/components/createControllerComponent.tsx
@ -0,0 +1,67 @@
+import { OverlayEventDetail } from '@ionic/core';
+import React from 'react';
+
+import { attachEventProps } from './utils';
+
+interface OverlayBase extends HTMLElement {
+  present: () => Promise<void>;
+  dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;
+}
+
+export interface ReactControllerProps {
+  isOpen: boolean;
+  onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+}
+
+export const createControllerComponent = <OptionsType extends object, OverlayType extends OverlayBase>(
+  displayName: string,
+  controller: { create: (options: OptionsType) => Promise<OverlayType> }
+) => {
+  const dismissEventName = `on${displayName}DidDismiss`;
+
+  type Props = OptionsType & ReactControllerProps;
+
+  return class extends React.Component<Props> {
+    overlay?: OverlayType;
+
+    constructor(props: Props) {
+      super(props);
+    }
+
+    static get displayName() {
+      return displayName;
+    }
+
+    async componentDidMount() {
+      const { isOpen } = this.props;
+      // TODO
+      if (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 { isOpen, onDidDismiss, ...cProps } = this.props;
+      const overlay = this.overlay = await controller.create({
+        ...cProps as any
+      });
+      attachEventProps(overlay, {
+        [dismissEventName]: onDidDismiss
+      }, prevProps);
+      await overlay.present();
+    }
+
+    render(): null {
+      return null;
+    }
+  };
+};