From ece30bb35a10f9de94d1c787dfde36fd2be47290 Mon Sep 17 00:00:00 2001 From: Dan Bucholtz Date: Sat, 2 Dec 2017 00:24:45 -0600 Subject: [PATCH] refactor(action-sheet): pass dismiss info to events --- .../components/action-sheet/action-sheet.tsx | 23 +++++-- .../action-sheet/test/translucent/index.html | 68 ++++++++----------- 2 files changed, 48 insertions(+), 43 deletions(-) diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx index 1df3619c1e..0af6d98e79 100644 --- a/packages/core/src/components/action-sheet/action-sheet.tsx +++ b/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 + }); }); } diff --git a/packages/core/src/components/action-sheet/test/translucent/index.html b/packages/core/src/components/action-sheet/test/translucent/index.html index 4a75f5db01..3ec3d8c936 100644 --- a/packages/core/src/components/action-sheet/test/translucent/index.html +++ b/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'); - actionSheetController.create({ + const actionSheetController = document.querySelector('ion-action-sheet-controller'); + await actionSheetController.componentOnReady(); + + const actionSheetElement = await actionSheetController.create({ title: "Albums", buttons: [{ text: 'Delete', @@ -87,14 +89,13 @@ }], translucent: true }) - .then(actionSheet => { - actionSheet.present() - }); + await actionSheetElement.present(); } - function presentNoBackdropDismiss() { - var actionSheetController = document.querySelector('ion-action-sheet-controller'); - actionSheetController.create({ + async function presentNoBackdropDismiss() { + const actionSheetController = document.querySelector('ion-action-sheet-controller'); + 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() { - var actionSheetController = document.querySelector('ion-action-sheet-controller'); - actionSheetController.create({ + async function presentAlert() { + const actionSheetController = document.querySelector('ion-action-sheet-controller'); + 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() { - var actionSheetController = document.querySelector('ion-action-sheet-controller'); - - actionSheetController.create({ + async function presentScroll() { + const actionSheetController = document.querySelector('ion-action-sheet-controller'); + await actionSheetController.componentOnReady(); + 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() { - var actionSheetController = document.querySelector('ion-action-sheet-controller'); - - actionSheetController.create({ + async function presentScrollNoCancel() { + const actionSheetController = document.querySelector('ion-action-sheet-controller'); + await actionSheetController.componentOnReady(); + 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() { - var actionSheetController = document.querySelector('ion-action-sheet-controller'); - - actionSheetController.create({ + async function presentCancelOnly() { + const actionSheetController = document.querySelector('ion-action-sheet-controller'); + await actionSheetController.componentOnReady(); + const actionSheetElement = await actionSheetController.create({ buttons: [ { text: 'Cancel', @@ -312,10 +306,8 @@ } ], translucent: true - }) - .then(actionSheet => { - actionSheet.present() }); + return await actionSheetElement.present(); }