wip

ionic/components/action-sheet/test/basic/index.ts

@@ -1,41 +1,66 @@
-import {App, ActionSheet} from 'ionic/ionic';
+import {App, Page, ActionSheet, NavController} from 'ionic/ionic';
 
 
-@App({
+@Page({
   templateUrl: 'main.html'
 })
-class E2EApp {
+class E2EPage {
 
-  constructor(actionSheet: ActionSheet) {
-    this.actionSheet = actionSheet;
+  constructor(nav: NavController) {
+    this.nav = nav;
   }
 
-  openActionSheet() {
+  openActionSheet(ev) {
+    this.result = '';
 
-    this.actionSheet.open({
+    let actionSheet = ActionSheet.create({
       buttons: [
-        { text: 'Share This' },
-        { text: 'Move' }
-      ],
-      destructiveText: 'Delete',
-      titleText: 'Modify your album',
-      cancelText: 'Cancel',
-      cancel: function() {
-        console.log('Canceled');
-      },
-      destructiveButtonClicked: () => {
-        console.log('Destructive clicked');
-      },
-      buttonClicked: function(index) {
-        console.log('Button clicked', index);
-        if(index == 1) { return false; }
-        return true;
-      }
+        {
+          text: 'Cancel',
+          style: 'cancel', // will always sort to be on the bottom
+          handler: () => {
+            console.log('cancel this clicked');
+            this.result = 'Canceled';
+          }
+        },
+        {
+          text: 'Archive',
+          handler: () => {
+            console.log('Archive clicked');
+            this.result = 'Archived';
+          }
+        },
+        {
+          text: 'No close',
+          handler: () => {
+            console.log('do not close clicked');
 
-    }).then(actionSheetRef => {
-      this.actionSheetRef = actionSheetRef;
+            // returning false does not allow the actionsheet to be closed
+            return false;
+          }
+        },
+        {
+          text: 'Destructive',
+          style: 'destructive',
+          handler: () => {
+            console.log('Destructive clicked');
+            this.result = 'Destructive';
+          }
+        }
+      ]
     });
 
+    this.nav.present(actionSheet);
   }
 
 }
+
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  constructor() {
+    this.root = E2EPage;
+  }
+}

ionic/components/action-sheet/test/basic/main.html

@@ -1,4 +1,12 @@
 
+<ion-navbar *navbar>
+  <ion-title>Action Sheet</ion-title>
+</ion-navbar>
+
 <ion-content padding>
   <button class="e2eOpenActionSheet" (click)="openActionSheet()">Open Action Sheet</button>
+
+  <pre>
+    Result: {{result}}
+  </pre>
 </ion-content>