feat(overlay): adds lifecycle events

ionic-team · Mar 10, 2018 · 0b099ce · 0b099ce
1 parent 6383a54
commit 0b099ce
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 5 deletions.
diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx
@@ -22,7 +22,7 @@ import mdLeaveAnimation from './animations/md.leave';
 })
 export class Modal implements OverlayInterface {
 
-  private usersComponentElement: HTMLElement;
+  private usersElement: HTMLElement;
 
   animation: Animation|undefined;
   presented = false;
@@ -141,13 +141,30 @@ export class Modal implements OverlayInterface {
     this.dismiss(null, BACKDROP);
   }
 
+  @Listen('ionModalDidPresent')
+  @Listen('ionModalWillPresent')
+  @Listen('ionModalWillDismiss')
+  @Listen('ionModalDidDismiss')
+  protected lifecycle(modalEvent: CustomEvent) {
+    const el = this.usersElement;
+    const name = LIFECYCLE_MAP[modalEvent.type];
+    if (el && name) {
+      const event = new CustomEvent(name, {
+        bubbles: false,
+        cancelable: false,
+        detail: modalEvent.detail
+      });
+      el.dispatchEvent(event);
+    }
+  }
+
   /**
    * Present the modal overlay after it has been created.
    */
   @Method()
   present(): Promise<void> {
     if (this.presented) {
-      return Promise.reject('df');
+      return Promise.resolve();
     }
     const container = this.el.querySelector(`.modal-wrapper`);
     const data = {
@@ -159,7 +176,7 @@ export class Modal implements OverlayInterface {
       'ion-page': true
     };
     return attachComponent(container, this.component, classes, data)
-      .then(el => this.usersComponentElement = el)
+      .then(el => this.usersElement = el)
       .then(() => present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, undefined));
   }
 
@@ -189,6 +206,13 @@ export class Modal implements OverlayInterface {
   }
 }
 
+const LIFECYCLE_MAP: any = {
+  'ionModalDidPresent': 'ionViewDidEnter',
+  'ionModalWillPresent': 'ionViewWillEnter',
+  'ionModalWillDismiss': 'ionViewWillDismiss',
+  'ionModalDidDismiss': 'ionViewDidDismiss',
+};
+
 export interface ModalOptions {
   component: any;
   data?: any;

diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx
@@ -6,6 +6,7 @@ import { BACKDROP, OverlayInterface, attachComponent, dismiss, present } from '.
 
 import iosEnterAnimation from './animations/ios.enter';
 import iosLeaveAnimation from './animations/ios.leave';
+
 import mdEnterAnimation from './animations/md.enter';
 import mdLeaveAnimation from './animations/md.leave';
 
@@ -21,7 +22,7 @@ import mdLeaveAnimation from './animations/md.leave';
 })
 export class Popover implements OverlayInterface {
 
-  private usersComponentElement: HTMLElement;
+  private usersElement: HTMLElement;
 
   presented = false;
   animation: Animation;
@@ -150,6 +151,23 @@ export class Popover implements OverlayInterface {
     this.dismiss(null, BACKDROP);
   }
 
+  @Listen('ionModalDidPresent')
+  @Listen('ionModalWillPresent')
+  @Listen('ionModalWillDismiss')
+  @Listen('ionModalDidDismiss')
+  protected lifecycle(modalEvent: CustomEvent) {
+    const el = this.usersElement;
+    const name = LIFECYCLE_MAP[modalEvent.type];
+    if (el && name) {
+      const event = new CustomEvent(name, {
+        bubbles: false,
+        cancelable: false,
+        detail: modalEvent.detail
+      });
+      el.dispatchEvent(event);
+    }
+  }
+
   /**
    * Present the popover overlay after it has been created.
    */
@@ -168,7 +186,7 @@ export class Popover implements OverlayInterface {
       'popover-viewport': true
     };
     return attachComponent(container, this.component, classes, data)
-      .then(el => this.usersComponentElement = el)
+      .then(el => this.usersElement = el)
       .then(() => present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, this.ev));
   }
 
@@ -236,6 +254,14 @@ export interface PopoverDismissEvent extends OverlayDismissEvent {
   // keep this just for the sake of static types and potential future extensions
 }
 
+const LIFECYCLE_MAP: any = {
+  'ionPopoverDidPresent': 'ionViewDidEnter',
+  'ionPopoverWillPresent': 'ionViewWillEnter',
+  'ionPopoverWillDismiss': 'ionViewWillDismiss',
+  'ionPopoverDidDismiss': 'ionViewDidDismiss',
+};
+
+
 export const POPOVER_POSITION_PROPERTIES: any = {
   ios: {
     padding: 2,