javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dan Bucholtz
2017-12-02 00:24:45 -06:00
parent c6df225014
commit ece30bb35a
2 changed files with 48 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/core/src/components/action-sheet/action-sheet.tsx
View File

@ -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
});
});
}

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

@ -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();
}
</script>