diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx index 910d0c701c1..831de4badfa 100644 --- 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 { 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 index 7ed8bb0c538..a505f99ef2d 100644 --- 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,