refactor(action-sheet): update action-sheet api to use element instead of instance

* refactor(action-sheet): update action-sheet api to use element instead of instance

* chore(dependencies): update angular to next

packages/core/src/components.d.ts

@@ -102,6 +102,7 @@ declare global {
         buttons?: ActionSheetButton[],
         enableBackdropDismiss?: boolean,
         translucent?: boolean,
+        animate?: boolean,
         enterAnimation?: AnimationBuilder,
         exitAnimation?: AnimationBuilder,
         actionSheetId?: string

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

@@ -1,5 +1,5 @@
 import { Component, Listen, Method } from '@stencil/core';
-import { ActionSheet, ActionSheetEvent, ActionSheetOptions  } from '../../index';
+import { ActionSheetEvent, ActionSheetOptions  } from '../../index';
 
 
 @Component({
@@ -8,10 +8,10 @@ import { ActionSheet, ActionSheetEvent, ActionSheetOptions  } from '../../index'
 export class ActionSheetController {
   private ids = 0;
   private actionSheetResolves: { [actionSheetId: string]: Function } = {};
-  private actionSheets: ActionSheet[] = [];
+  private actionSheets: HTMLIonActionSheetElement[] = [];
 
   @Method()
-  create(opts?: ActionSheetOptions): Promise<ActionSheet> {
+  create(opts?: ActionSheetOptions): Promise<HTMLIonActionSheetElement> {
     // create ionic's wrapping ion-action-sheet component
     const actionSheet = document.createElement('ion-action-sheet');
 
@@ -30,14 +30,14 @@ export class ActionSheetController {
     appRoot.appendChild(actionSheet as any);
 
     // store the resolve function to be called later up when the action sheet loads
-    return new Promise<ActionSheet>(resolve => {
+    return new Promise((resolve) => {
       this.actionSheetResolves[actionSheet.actionSheetId] = resolve;
     });
   }
 
   @Listen('body:ionActionSheetDidLoad')
   protected didLoad(ev: ActionSheetEvent) {
-    const actionSheet = ev.detail.actionSheet;
+    const actionSheet = ev.target as HTMLIonActionSheetElement;
     const actionSheetResolve = this.actionSheetResolves[actionSheet.actionSheetId];
     if (actionSheetResolve) {
       actionSheetResolve(actionSheet);
@@ -47,12 +47,12 @@ export class ActionSheetController {
 
   @Listen('body:ionActionSheetWillPresent')
   protected willPresent(ev: ActionSheetEvent) {
-    this.actionSheets.push(ev.detail.actionSheet);
+    this.actionSheets.push(ev.target as HTMLIonActionSheetElement);
   }
 
   @Listen('body:ionActionSheetWillDismiss, body:ionActionSheetDidUnload')
   protected willDismiss(ev: ActionSheetEvent) {
-    const index = this.actionSheets.indexOf(ev.detail.actionSheet);
+    const index = this.actionSheets.indexOf(ev.target as HTMLIonActionSheetElement);
     if (index > -1) {
       this.actionSheets.splice(index, 1);
     }

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

@@ -1,6 +1,7 @@
-import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
-import { Animation, AnimationBuilder, AnimationController, Config } from '../../index';
+import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Method, Prop } from '@stencil/core';
+import { Animation, AnimationBuilder, AnimationController, Config, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index';
 
+import { domControllerAsync, playAnimationAsync } from '../../utils/helpers';
 import { createThemedClasses } from '../../utils/theme';
 
 import iOSEnterAnimation from './animations/ios.enter';
@@ -27,32 +28,32 @@ export class ActionSheet {
   /**
    * @output {ActionSheetEvent} Emitted after the alert has loaded.
    */
-  @Event() ionActionSheetDidLoad: EventEmitter;
+  @Event() ionActionSheetDidLoad: EventEmitter<ActionSheetEventDetail>;
 
   /**
    * @output {ActionSheetEvent} Emitted after the alert has presented.
    */
-  @Event() ionActionSheetDidPresent: EventEmitter;
+  @Event() ionActionSheetDidPresent: EventEmitter<ActionSheetEventDetail>;
 
   /**
    * @output {ActionSheetEvent} Emitted before the alert has presented.
    */
-  @Event() ionActionSheetWillPresent: EventEmitter;
+  @Event() ionActionSheetWillPresent: EventEmitter<ActionSheetEventDetail>;
 
   /**
    * @output {ActionSheetEvent} Emitted before the alert has dismissed.
    */
-  @Event() ionActionSheetWillDismiss: EventEmitter;
+  @Event() ionActionSheetWillDismiss: EventEmitter<ActionSheetDismissEventDetail>;
 
   /**
    * @output {ActionSheetEvent} Emitted after the alert has dismissed.
    */
-  @Event() ionActionSheetDidDismiss: EventEmitter;
+  @Event() ionActionSheetDidDismiss: EventEmitter<ActionSheetDismissEventDetail>;
 
   /**
    * @output {ActionSheetEvent} Emitted after the alert has unloaded.
    */
-  @Event() ionActionSheetDidUnload: EventEmitter;
+  @Event() ionActionSheetDidUnload: EventEmitter<ActionSheetEventDetail>;
 
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
   @Prop({ context: 'config' }) config: Config;
@@ -64,23 +65,19 @@ export class ActionSheet {
   @Prop() enableBackdropDismiss: boolean = true;
   @Prop() translucent: boolean = false;
 
+  @Prop() animate: boolean = true;
   @Prop() enterAnimation: AnimationBuilder;
   @Prop() exitAnimation: AnimationBuilder;
   @Prop() actionSheetId: string;
 
 
+  @Method()
   present() {
-    return new Promise<void>(resolve => {
-      this._present(resolve);
-    });
-  }
-
-  private _present(resolve: Function) {
     if (this.animation) {
       this.animation.destroy();
       this.animation = null;
     }
-    this.ionActionSheetWillPresent.emit({ actionSheet: this });
+    this.ionActionSheetWillPresent.emit();
 
     // get the user's animation fn if one was provided
     let animationBuilder = this.enterAnimation;
@@ -94,59 +91,54 @@ export class ActionSheet {
     // build the animation and kick it off
     this.animationCtrl.create(animationBuilder, this.el).then(animation => {
       this.animation = animation;
-
-      animation.onFinish((a: any) => {
-        a.destroy();
-        this.componentDidEnter();
-        resolve();
-      }).play();
+      if (!this.animate) {
+        // if the duration is 0, it won't actually animate I don't think
+        // TODO - validate this
+        this.animation = animation.duration(0);
+      }
+      return playAnimationAsync(animation);
+    }).then((animation) => {
+      animation.destroy();
+      this.ionActionSheetDidPresent.emit();
     });
   }
 
+  @Method()
   dismiss() {
     if (this.animation) {
       this.animation.destroy();
       this.animation = null;
     }
-    return new Promise(resolve => {
-      this.ionActionSheetWillDismiss.emit({ actionSheet: this });
+    this.ionActionSheetWillDismiss.emit();
 
-      // get the user's animation fn if one was provided
-      let animationBuilder = this.exitAnimation;
-      if (!animationBuilder) {
-        // user did not provide a custom animation fn
-        // decide from the config which animation to use
-        animationBuilder = iOSLeaveAnimation;
-      }
+    // get the user's animation fn if one was provided
+    let animationBuilder = this.exitAnimation;
+    if (!animationBuilder) {
+      // user did not provide a custom animation fn
+      // decide from the config which animation to use
+      animationBuilder = iOSLeaveAnimation;
+    }
 
-      // build the animation and kick it off
-      this.animationCtrl.create(animationBuilder, this.el).then(animation => {
-        this.animation = animation;
-
-        animation.onFinish((a: any) => {
-          a.destroy();
-          this.ionActionSheetDidDismiss.emit({ actionSheet: this });
-
-          Context.dom.write(() => {
-            this.el.parentNode.removeChild(this.el);
-          });
-
-          resolve();
-        }).play();
+    return this.animationCtrl.create(animationBuilder, this.el).then(animation => {
+      this.animation = animation;
+      return playAnimationAsync(animation);
+    }).then((animation) => {
+      animation.destroy();
+      return domControllerAsync(Context.dom.write, () => {
+        this.el.parentNode.removeChild(this.el);
       });
+    }).then(() => {
+      this.ionActionSheetDidDismiss.emit();
     });
   }
 
   componentDidLoad() {
-    this.ionActionSheetDidLoad.emit({ actionSheet: this });
+    this.ionActionSheetDidLoad.emit();
   }
 
-  componentDidEnter() {
-    this.ionActionSheetDidPresent.emit({ actionSheet: this });
-  }
 
   componentDidUnload() {
-    this.ionActionSheetDidUnload.emit({ actionSheet: this });
+    this.ionActionSheetDidUnload.emit();
   }
 
   @Listen('ionDismiss')
@@ -159,9 +151,6 @@ export class ActionSheet {
 
   protected backdropClick() {
     if (this.enableBackdropDismiss) {
-      // const opts: NavOptions = {
-      //   minClickBlockDuration: 400
-      // };
       this.dismiss();
     }
   }
@@ -288,10 +277,23 @@ export interface ActionSheetButton {
   handler?: () => boolean | void;
 }
 
-export interface ActionSheetEvent extends Event {
-  detail: {
-    actionSheet: ActionSheet;
-  };
+export interface ActionSheetEvent extends CustomEvent {
+  detail: ActionSheetEventDetail;
 }
 
-export { iOSEnterAnimation, iOSLeaveAnimation };
+export interface ActionSheetEventDetail {
+
+}
+
+export interface ActionSheetDismissEventDetail extends OverlayDismissEventDetail {
+  // keep this just for the sake of static types and potential future extensions
+}
+
+export interface ActionSheetDismissEvent extends OverlayDismissEvent {
+  // keep this just for the sake of static types and potential future extensions
+}
+
+export {
+  iOSEnterAnimation as ActionSheetiOSEnterAnimation,
+  iOSLeaveAnimation as ActionSheetiOSLeaveAnimation
+};

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

@@ -33,11 +33,12 @@
 
   <script>
 
-    function presentBasic() {
-      var mode = Ionic.mode;
+    async function presentBasic() {
+      const 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',
@@ -73,14 +74,13 @@
           }
         }]
       })
-      .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: () => {
@@ -99,15 +99,14 @@
             console.log('Cancel clicked');
           }
         }]
-      })
-      .then(actionSheet => {
-        actionSheet.present()
       });
+      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: () => {
@@ -120,16 +119,14 @@
             console.log('Cancel clicked');
           }
         }]
-      })
-      .then(actionSheet => {
-        actionSheet.present()
       });
+      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',
@@ -200,16 +197,14 @@
             }
           }
         ]
-      })
-      .then(actionSheet => {
-        actionSheet.present()
       });
+      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',
@@ -274,16 +269,14 @@
             }
           }
         ]
-      })
-      .then(actionSheet => {
-        actionSheet.present()
       });
+      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',
@@ -293,10 +286,8 @@
             }
           }
         ]
-      })
-      .then(actionSheet => {
-        actionSheet.present()
       });
+      await actionSheetElement.present();
     }
   </script>
 </body>

packages/core/src/components/alert/alert.tsx

@@ -33,17 +33,17 @@ export class Alert {
   /**
    * @output {AlertEvent} Emitted after the alert has loaded.
    */
-  @Event() ionAlertDidLoad: EventEmitter<AlertEvent>;
+  @Event() ionAlertDidLoad: EventEmitter<AlertEventDetail>;
 
   /**
    * @output {AlertEvent} Emitted after the alert has presented.
    */
-  @Event() ionAlertDidPresent: EventEmitter<AlertEvent>;
+  @Event() ionAlertDidPresent: EventEmitter<AlertEventDetail>;
 
   /**
    * @output {AlertEvent} Emitted before the alert has presented.
    */
-  @Event() ionAlertWillPresent: EventEmitter<AlertEvent>;
+  @Event() ionAlertWillPresent: EventEmitter<AlertEventDetail>;
 
   /**
    * @output {AlertEvent} Emitted before the alert has dismissed.
@@ -58,7 +58,7 @@ export class Alert {
   /**
    * @output {AlertEvent} Emitted after the alert has unloaded.
    */
-  @Event() ionAlertDidUnload: EventEmitter<AlertEvent>;
+  @Event() ionAlertDidUnload: EventEmitter<AlertEventDetail>;
 
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
   @Prop({ context: 'config' }) config: Config;
@@ -135,14 +135,15 @@ export class Alert {
       return playAnimationAsync(animation);
     }).then((animation) => {
       animation.destroy();
-      this.ionAlertDidDismiss.emit({
-        data: data,
-        role: role
-      });
 
       return domControllerAsync(Context.dom.write, () => {
         this.el.parentNode.removeChild(this.el);
       });
+    }).then(() => {
+      this.ionAlertDidDismiss.emit({
+        data: data,
+        role: role
+      });
     });
   }
 
@@ -473,6 +474,10 @@ export interface AlertEvent extends CustomEvent {
   // keep this just for the sake of static types and potential future extensions
 }
 
+export interface AlertEventDetail {
+  detail: any;
+}
+
 export interface AlertDismissEventDetail extends OverlayDismissEventDetail {
   // keep this just for the sake of static types and potential future extensions
 }
@@ -481,4 +486,7 @@ export interface AlertDismissEvent extends OverlayDismissEvent {
   // keep this just for the sake of static types and potential future extensions
 }
 
-export { iOSEnterAnimation, iOSLeaveAnimation };
+export {
+  iOSEnterAnimation as AlertiOSEnterAnimation,
+  iOSLeaveAnimation as AlertiOSLeaveAnimation
+};

packages/core/src/index.d.ts

@@ -1,12 +1,5 @@
 // Components
-export {
-  ActionSheet,
-  ActionSheetButton,
-  ActionSheetEvent,
-  ActionSheetOptions,
-  iOSEnterAnimation as ActionSheetIOSEnterAnimation,
-  iOSLeaveAnimation as ActionSheetIOSLeaveAnimation
-} from './components/action-sheet/action-sheet';
+export * from './components/action-sheet/action-sheet';
 
 export { ActionSheetController } from './components/action-sheet-controller/action-sheet-controller';
 export * from './components/alert/alert';
@@ -186,4 +179,8 @@ export interface OverlayDismissEvent extends CustomEvent {
 export interface OverlayDismissEventDetail {
   data?: any;
   role?: string;
-}
+}
+
+export interface OverlayController {
+  create(): HTMLElement;
+}