fix(react): adding missing overlay component events, fixes #19923 (#2…

…0266)
ionic-team · Jan 22, 2020 · ec6a8dd · ec6a8dd
1 parent 2f8c13b
commit ec6a8dd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/packages/react/src/components/createControllerComponent.tsx b/packages/react/src/components/createControllerComponent.tsx
@@ -11,13 +11,19 @@ interface OverlayBase extends HTMLElement {
 export interface ReactControllerProps {
   isOpen: boolean;
   onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+  onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+  onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+  onWillPresent?: (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`;
+  const didDismissEventName = `on${displayName}DidDismiss`;
+  const didPresentEventName = `on${displayName}DidPresent`;
+  const willDismissEventName = `on${displayName}WillDismiss`;
+  const willPresentEventName = `on${displayName}WillPresent`;
 
   type Props = OptionsType & ReactControllerProps & {
     forwardedRef?: React.RefObject<OverlayType>;
@@ -67,12 +73,15 @@ export const createControllerComponent = <OptionsType extends object, OverlayTyp
     }
 
     async present(prevProps?: Props) {
-      const { isOpen, onDidDismiss, ...cProps } = this.props;
+      const { isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;
       this.overlay = await controller.create({
         ...cProps as any
       });
       attachProps(this.overlay, {
-        [dismissEventName]: this.handleDismiss
+        [didDismissEventName]: this.handleDismiss,
+        [didPresentEventName]: (e: CustomEvent) => this.props.onDidPresent && this.props.onDidPresent(e),
+        [willDismissEventName]: (e: CustomEvent) => this.props.onWillDismiss && this.props.onWillDismiss(e),
+        [willPresentEventName]: (e: CustomEvent) => this.props.onWillPresent && this.props.onWillPresent(e)
       }, prevProps);
       // Check isOpen again since the value could have changed during the async call to controller.create
       // It's also possible for the component to have become unmounted.

diff --git a/packages/react/src/components/createOverlayComponent.tsx b/packages/react/src/components/createOverlayComponent.tsx
@@ -13,13 +13,19 @@ export interface ReactOverlayProps {
   children?: React.ReactNode;
   isOpen: boolean;
   onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+  onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+  onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
+  onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
 }
 
 export const createOverlayComponent = <OverlayComponent extends object, OverlayType extends OverlayElement>(
   displayName: string,
   controller: { create: (options: any) => Promise<OverlayType>; }
 ) => {
-  const dismissEventName = `on${displayName}DidDismiss`;
+  const didDismissEventName = `on${displayName}DidDismiss`;
+  const didPresentEventName = `on${displayName}DidPresent`;
+  const willDismissEventName = `on${displayName}WillDismiss`;
+  const willPresentEventName = `on${displayName}WillPresent`;
 
   type Props = OverlayComponent & ReactOverlayProps & {
     forwardedRef?: React.RefObject<OverlayType>;
@@ -72,11 +78,14 @@ export const createOverlayComponent = <OverlayComponent extends object, OverlayT
     }
 
     async present(prevProps?: Props) {
-      const { children, isOpen, onDidDismiss, ...cProps } = this.props;
+      const { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;
       const elementProps = {
         ...cProps,
         ref: this.props.forwardedRef,
-        [dismissEventName]: this.handleDismiss
+        [didDismissEventName]: this.handleDismiss,
+        [didPresentEventName]: (e: CustomEvent) => this.props.onDidPresent && this.props.onDidPresent(e),
+        [willDismissEventName]: (e: CustomEvent) => this.props.onWillDismiss && this.props.onWillDismiss(e),
+        [willPresentEventName]: (e: CustomEvent) => this.props.onWillPresent && this.props.onWillPresent(e)
       };
 
       this.overlay = await controller.create({