refactor(angular): update alert provider to support angular 3.x api

This commit is contained in:
Dan Bucholtz
2017-11-27 15:33:50 -06:00
parent a817bd7b66
commit e23f3b556e
3 changed files with 64 additions and 20 deletions

View File

@ -13,7 +13,7 @@ import { AlertController } from '@ionic/angular';
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-button (click)="clickMe()">Blah</ion-button>
<ion-button (click)="clickMe()">Open Basic Alert</ion-button>
</ion-content>
</ion-page>
</ion-app>
@ -34,20 +34,25 @@ export class AlertPageComponent {
text: 'Cancel',
role: 'Cancel',
handler: () => {
console.log('cancel');
// console.log('cancel');
}
},
{
text: 'Okay',
role: 'Okay',
handler: () => {
console.log('okay');
// console.log('okay');
}
}
]
});
alert.present();
alert.present().then(() => {
return alert.dismiss();
}).then(() => {
console.log('dismissed');
});
}
}

View File

@ -86,9 +86,9 @@
"dev": true
},
"@stencil/core": {
"version": "0.0.8-6",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.0.8-6.tgz",
"integrity": "sha512-6lgZvuPuQbcRsqwi01Xu1HQ1XKK8dwJwO5WVcGKXVdpJ5YFvmT2W/Ocw+NwIRoJyblDlJrC1qs58yHU/Z4hgbw==",
"version": "0.0.8-7",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-0.0.8-7.tgz",
"integrity": "sha512-amU64qvwEhyXoZ4ZXJz8H4tngRT3lcPwlk7jIDZ6dxyS9VL/AePPGtnKAzXQCwQy08/NmKjEfd3W3c2OP4goUQ==",
"dev": true,
"requires": {
"chokidar": "1.7.0",
@ -97,15 +97,15 @@
"rollup": "0.50.0",
"rollup-plugin-commonjs": "8.2.5",
"rollup-plugin-node-resolve": "3.0.0",
"typescript": "2.6.1",
"typescript": "2.6.2",
"uglify-es": "3.1.6",
"workbox-build": "2.1.1"
},
"dependencies": {
"typescript": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.1.tgz",
"integrity": "sha1-7znN6ierrAtQAkLWcmq5DgyEZjE=",
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.2.tgz",
"integrity": "sha1-PFtv1/beCRQmkCfwPAlGdY92c6Q=",
"dev": true
}
}

View File

@ -1,5 +1,5 @@
import { Injectable } from '@angular/core';
import { AlertOptions } from '@ionic/core';
import { AlertDismissEvent, AlertOptions } from '@ionic/core';
import { ensureElementInBody, hydrateElement } from '../util/util';
@ -7,7 +7,7 @@ let alertId = 0;
@Injectable()
export class AlertController {
create(opts?: AlertOptions): any {
create(opts?: AlertOptions): AlertProxy {
return getAlertProxy(opts);
}
}
@ -18,24 +18,55 @@ export function getAlertProxy(opts: AlertOptions){
state: PRESENTING,
opts: opts,
present: function() { return present(this)},
dismiss: function() { return dismiss(this)}
dismiss: function() { return dismiss(this)},
onDidDismiss: function(callback: (data: any, role: string) => void) {
(this as AlertProxyInternal).onDidDismissHandler = callback;
},
onWillDismiss: function(callback: (data: any, role: string) => void) {
(this as AlertProxyInternal).onWillDismissHandler = callback;
},
}
}
export function present(alertProxy: AlertProxyInternal): Promise<void> {
export function present(alertProxy: AlertProxyInternal): Promise<any> {
alertProxy.state = PRESENTING;
return loadOverlay(alertProxy.opts).then((alertElement: HTMLIonAlertElement) => {
alertProxy.element = alertElement;
const onDidDismissHandler = (event: AlertDismissEvent) => {
alertElement.removeEventListener(ION_ALERT_DID_DISMISS_EVENT, onDidDismissHandler);
if (alertProxy.onDidDismissHandler) {
alertProxy.onDidDismissHandler(event.detail.data, event.detail.role);
}
};
const onWillDismissHandler = (event: AlertDismissEvent) => {
alertElement.removeEventListener(ION_ALERT_WILL_DISMISS_EVENT, onWillDismissHandler);
if (alertProxy.onWillDismissHandler) {
alertProxy.onWillDismissHandler(event.detail.data, event.detail.role);
}
};
alertElement.addEventListener(ION_ALERT_DID_DISMISS_EVENT, onDidDismissHandler);
alertElement.addEventListener(ION_ALERT_WILL_DISMISS_EVENT, onWillDismissHandler);
if (alertProxy.state === PRESENTING) {
return alertElement.present();
}
});
}
export function dismiss(alertProxy: AlertProxyInternal): Promise<void> {
return loadOverlay(alertProxy.opts).then((alertElement: HTMLIonAlertElement) => {
export function dismiss(alertProxy: AlertProxyInternal): Promise<any> {
alertProxy.state = DISMISSING;
if (alertProxy.element) {
if (alertProxy.state === DISMISSING) {
return alertElement.dismiss();
return alertProxy.element.dismiss();
}
});
}
// either we're not in the dismissing state
// or we're calling this before the element is created
// so just return a resolved promise
return Promise.resolve();
}
export function loadOverlay(opts: AlertOptions) {
@ -48,13 +79,21 @@ export function loadOverlay(opts: AlertOptions) {
export interface AlertProxy {
present(): Promise<void>
dismiss(): Promise<void>
onDidDismiss(callback: (data: any, role: string) => void): void;
onWillDismiss(callback: (data: any, role: string) => void): void;
}
export interface AlertProxyInternal extends AlertProxy {
id: number;
opts: AlertOptions;
state: number;
element: HTMLIonAlertElement;
onDidDismissHandler?: (data: any, role: string) => void;
onWillDismissHandler?: (data: any, role: string) => void;
}
export const PRESENTING = 1;
export const DISMISSING = 2;
export const DISMISSING = 2;
const ION_ALERT_DID_DISMISS_EVENT = 'ionAlertDidDismiss';
const ION_ALERT_WILL_DISMISS_EVENT = 'ionAlertWillDismiss';