Add test

ionic-team · Feb 21, 2020 · e5c04ca · e5c04ca
1 parent 67b6ab6
commit e5c04ca
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 7 deletions.
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
@@ -1,7 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, Prop, h } from '@stencil/core';
 
-import { getIonMode } from '../../global/ionic-global';
 import { config } from '../../global/config';
+import { getIonMode } from '../../global/ionic-global';
 import { Animation, AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate, Gesture, OverlayEventDetail, OverlayInterface } from '../../interface';
 import { attachComponent, detachComponent } from '../../utils/framework-delegate';
 import { BACKDROP, activeAnimations, dismiss, eventMethod, prepareOverlay, present } from '../../utils/overlays';
@@ -190,9 +190,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
       return false;
     }
 
-    const iosAni = (this.animation === undefined || (role === BACKDROP || role === undefined)) ? iosLeaveAnimation : undefined;
     const enteringAnimation = activeAnimations.get(this) || [];
-    const dismissed = await dismiss(this, data, role, 'modalLeave', iosAni, mdLeaveAnimation, this.presentingElement);
+    const dismissed = await dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, this.presentingElement);
 
     if (dismissed) {
       await detachComponent(this.delegate, this.usersElement);

diff --git a/core/src/components/modal/test/spec/index.html b/core/src/components/modal/test/spec/index.html
@@ -13,8 +13,9 @@
   <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
   <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   <script type="module">
-    import { modalController } from '../../../../dist/ionic/index.esm.js';
+    import { modalController, createAnimation } from '../../../../dist/ionic/index.esm.js';
     window.modalController = modalController;
+    window.createAnimation = createAnimation;
   </script>
   <style>
   #modal-header {
@@ -65,6 +66,44 @@
   <script>
     window.addEventListener("ionModalDidDismiss", function (e) { console.log('DidDismiss', e) })
     window.addEventListener("ionModalWillDismiss", function (e) { console.log('WillDismiss', e) })
+
+    const enterAnimation = (baseEl) => {
+      const backdropAnimation = createAnimation()
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', '0.01', '0.4');
+
+      const wrapperAnimation = createAnimation()
+        .addElement(baseEl.querySelector('.modal-wrapper'))
+        .keyframes([
+          { offset: 0, opacity: '0', transform: 'scale(0)' },
+          { offset: 1, opacity: '0.99', transform: 'scale(1)' }
+        ]);
+
+      return createAnimation()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
+
+    const leaveAnimation = (baseEl) => {
+      const backdropAnimation = createAnimation()
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', '0.4', '0.01');
+
+      const wrapperAnimation = createAnimation()
+        .addElement(baseEl.querySelector('.modal-wrapper'))
+        .keyframes([
+          { offset: 0, opacity: '0.99', transform: 'scale(1)' },
+          { offset: 1, opacity: '0', transform: 'scale(0)' }
+        ]);
+
+      return createAnimation()
+        .addElement(baseEl)
+        .easing('ease-out')
+        .duration(500)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+    }
 
     const people = [
       {
@@ -454,7 +493,9 @@ <h3>${p.position}</h3>
       const modalElement = await modalController.create({
         presentingElement: presentingEl,
         component: element,
-        swipeToClose: true
+        swipeToClose: true,
+        //enterAnimation,
+        //leaveAnimation
       });
       return modalElement;
     }

diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
@@ -142,7 +142,7 @@ export const dismiss = async (
   data: any | undefined,
   role: string | undefined,
   name: keyof IonicConfig,
-  iosLeaveAnimation: AnimationBuilder | undefined,
+  iosLeaveAnimation: AnimationBuilder,
   mdLeaveAnimation: AnimationBuilder,
   opts?: any
 ): Promise<boolean> => {
@@ -158,7 +158,8 @@ export const dismiss = async (
       ? overlay.leaveAnimation
       : config.get(name, overlay.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
 
-    if (animationBuilder !== undefined) {
+    // If dismissed via gesture, no need to play leaving animation again
+    if (role !== 'gesture') {
       await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     }
     overlay.didDismiss.emit({ data, role });