fix(modals): make showActions work on web and electron (#2501)

ionic-team · Feb 28, 2020 · f1204b8 · f1204b8
1 parent b650880
commit f1204b8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 57 deletions.
diff --git a/core/src/web/modals.ts b/core/src/web/modals.ts
@@ -41,34 +41,20 @@ export class ModalsPluginWeb extends WebPlugin implements ModalsPlugin {
 
   async showActions(options: ActionSheetOptions): Promise<ActionSheetResult> {
     return new Promise<ActionSheetResult>(async (resolve, _reject) => {
-      var controller: any = document.querySelector('ion-action-sheet-controller');
-
-      if (!controller) {
-        controller = document.createElement('ion-action-sheet-controller');
-        document.body.appendChild(controller);
+      var actionSheet: any = document.querySelector('pwa-action-sheet');
+      if (!actionSheet) {
+        actionSheet = document.createElement('pwa-action-sheet');
+        document.body.appendChild(actionSheet);
       }
-
-      await controller.componentOnReady();
-
-      const items = options.options.map((o, i) => {
-        return {
-          text: o.title,
-          role: o.style && o.style.toLowerCase() || '',
-          icon: o.icon || '',
-          handler: () => {
-            resolve({
-              index: i
-            });
-          }
-        };
+      actionSheet.header = options.title;
+      actionSheet.cancelable = false;
+      actionSheet.options = options.options;
+      actionSheet.addEventListener('onSelection', async (e: any) => {
+        const selection = e.detail;
+        resolve({
+          index: selection
+        });
       });
-
-      const actionSheetElement = await controller.create({
-        title: options.title,
-        buttons: items
-      });
-
-      await actionSheetElement.present();
     });
   }
 }

diff --git a/electron/src/electron/modals.ts b/electron/src/electron/modals.ts
@@ -1,4 +1,6 @@
-import { WebPlugin } from "@capacitor/core";
+import { ModalsPluginWeb, WebPlugin } from "@capacitor/core";
+
+const webModals = new ModalsPluginWeb();
 
 const { dialog , getCurrentWindow } = require('electron').remote;
 
@@ -53,36 +55,7 @@ export class ModalsPluginElectron extends WebPlugin implements ModalsPlugin {
   }
 
   async showActions(options: ActionSheetOptions): Promise<ActionSheetResult> {
-    return new Promise<ActionSheetResult>(async (resolve, _reject) => {
-      var controller: any = document.querySelector('ion-action-sheet-controller');
-
-      if (!controller) {
-        controller = document.createElement('ion-action-sheet-controller');
-        document.body.appendChild(controller);
-      }
-
-      await controller.componentOnReady();
-
-      const items = options.options.map((o, i) => {
-        return {
-          text: o.title,
-          role: o.style && o.style.toLowerCase() || '',
-          icon: o.icon || '',
-          handler: () => {
-            resolve({
-              index: i
-            });
-          }
-        };
-      });
-
-      const actionSheetElement = await controller.create({
-        title: options.title,
-        buttons: items
-      });
-
-      await actionSheetElement.present();
-    });
+    return webModals.showActions(options);
   }
 
 }