refactor(action-sheet): pass dismiss info to events

packages/core/src/components/action-sheet/action-sheet.tsx

@@ -1,5 +1,12 @@
 import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
-import { Animation, AnimationBuilder, AnimationController, Config, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index';
+import {
+  Animation,
+  AnimationBuilder,
+  AnimationController,
+  Config,
+  OverlayDismissEvent,
+  OverlayDismissEventDetail
+} from '../../index';
 
 import { domControllerAsync, playAnimationAsync } from '../../utils/helpers';
 import { createThemedClasses } from '../../utils/theme';
@@ -122,7 +129,7 @@ export class ActionSheet {
     const animationBuilder = this.enterAnimation || this.config.get('actionSheetEnter', this.mode === 'ios' ? iosEnterAnimation : mdEnterAnimation);
 
     // build the animation and kick it off
-    this.animationCtrl.create(animationBuilder, this.el).then(animation => {
+    return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
       this.animation = animation;
       if (!this.animate) {
         // if the duration is 0, it won't actually animate I don't think
@@ -140,12 +147,15 @@ export class ActionSheet {
    * Dismiss the action-sheet programatically
    */
   @Method()
-  dismiss() {
+  dismiss(data?: any, role?: string) {
     if (this.animation) {
       this.animation.destroy();
       this.animation = null;
     }
-    this.ionActionSheetWillDismiss.emit();
+    this.ionActionSheetWillDismiss.emit({
+      data,
+      role
+    });
     const animationBuilder = this.leaveAnimation || this.config.get('actionSheetLeave', this.mode === 'ios' ? iosLeaveAnimation : mdLeaveAnimation);
 
 
@@ -158,7 +168,10 @@ export class ActionSheet {
         this.el.parentNode.removeChild(this.el);
       });
     }).then(() => {
-      this.ionActionSheetDidDismiss.emit();
+      this.ionActionSheetDidDismiss.emit({
+        data,
+        role
+      });
     });
   }
 

packages/core/src/components/action-sheet/test/translucent/index.html

@@ -49,8 +49,10 @@
     function presentBasic() {
       var mode = Ionic.mode;
 
-      var actionSheetController = document.querySelector('ion-action-sheet-controller');
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      actionSheetController.create({
+      await actionSheetController.componentOnReady();
+
+      const actionSheetElement = await actionSheetController.create({
         title: "Albums",
         buttons: [{
           text: 'Delete',
@@ -87,14 +89,13 @@
         }],
         translucent: true
       })
-      .then(actionSheet => {
+      await actionSheetElement.present();
-        actionSheet.present()
-      });
     }
 
-    function presentNoBackdropDismiss() {
+    async function presentNoBackdropDismiss() {
-      var actionSheetController = document.querySelector('ion-action-sheet-controller');
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      actionSheetController.create({
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
         buttons: [{
           text: 'Archive',
           handler: () => {
@@ -114,15 +115,14 @@
           }
         }],
         translucent: true
-      })
-      .then(actionSheet => {
-        actionSheet.present()
       });
+      return await actionSheetElement.present();
     }
 
-    function presentAlert() {
+    async function presentAlert() {
-      var actionSheetController = document.querySelector('ion-action-sheet-controller');
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-      actionSheetController.create({
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
         buttons: [{
           text: 'Open Alert',
           handler: () => {
@@ -136,16 +136,14 @@
           }
         }],
         translucent: true
-      })
-      .then(actionSheet => {
-        actionSheet.present()
       });
+      return await actionSheetElement.present();
     }
 
-    function presentScroll() {
+    async function presentScroll() {
-      var actionSheetController = document.querySelector('ion-action-sheet-controller');
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-
+      await actionSheetController.componentOnReady();
-      actionSheetController.create({
+      const actionSheetElement = await actionSheetController.create({
         buttons: [
           {
             text: 'Add Reaction',
@@ -217,16 +215,14 @@
           }
         ],
         translucent: true
-      })
-      .then(actionSheet => {
-        actionSheet.present()
       });
+      return await actionSheetElement.present();
     }
 
-    function presentScrollNoCancel() {
+    async function presentScrollNoCancel() {
-      var actionSheetController = document.querySelector('ion-action-sheet-controller');
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-
+      await actionSheetController.componentOnReady();
-      actionSheetController.create({
+      const actionSheetElement = await actionSheetController.create({
         buttons: [
           {
             text: 'Add Reaction',
@@ -292,16 +288,14 @@
           }
         ],
         translucent: true
-      })
-      .then(actionSheet => {
-        actionSheet.present()
       });
+      return await actionSheetElement.present();
     }
 
-    function presentCancelOnly() {
+    async function presentCancelOnly() {
-      var actionSheetController = document.querySelector('ion-action-sheet-controller');
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
-
+      await actionSheetController.componentOnReady();
-      actionSheetController.create({
+      const actionSheetElement = await actionSheetController.create({
         buttons: [
           {
             text: 'Cancel',
@@ -312,10 +306,8 @@
           }
         ],
         translucent: true
-      })
-      .then(actionSheet => {
-        actionSheet.present()
       });
+      return await actionSheetElement.present();
     }
   </script>