feat: Add way to test new action sheet feature (#776)

* chore: update pwa-elements to latest version

* feat: Add action sheet screen to test new feature

* tmp: Use dev build of action-sheet plugin

References:
- ionic-team/capacitor-plugins#2285
- https://outsystemsrd.atlassian.net/browse/RMET-3576

* chore: point to stable action-sheet version

* chore: fix lint issues

* chore: Use capacitor 8.2.0

* fix: Remove iOS check for cancelable toggle

We may look into introducing cancelable for iOS, so this helps test it better

* chore: update action-sheet dependency to latest

* chore: fix merge conflict

Author: OS-pedrogustavobilro

package-lock.json

@@ -25,20 +25,20 @@
     ]
   },
   "dependencies": {
-    "@capacitor/action-sheet": "^8.0.0",
-    "@capacitor/android": "^8.0.0",
+    "@capacitor/action-sheet": "^8.1.1",
+    "@capacitor/android": "^8.2.0",
     "@capacitor/app": "^8.0.0",
     "@capacitor/app-launcher": "^8.0.0",
     "@capacitor/browser": "^8.0.0",
     "@capacitor/camera": "^8.0.0",
     "@capacitor/clipboard": "^8.0.0",
-    "@capacitor/core": "^8.0.0",
+    "@capacitor/core": "^8.2.0",
     "@capacitor/device": "^8.0.0",
     "@capacitor/dialog": "^8.0.0",
     "@capacitor/filesystem": "^8.0.0",
     "@capacitor/geolocation": "^8.0.0",
     "@capacitor/haptics": "^8.0.0",
-    "@capacitor/ios": "^8.0.0",
+    "@capacitor/ios": "^8.2.0",
     "@capacitor/keyboard": "^8.0.0",
     "@capacitor/local-notifications": "^8.0.0",
     "@capacitor/motion": "^8.0.0",
@@ -52,7 +52,7 @@
     "@capacitor/status-bar": "^8.0.0",
     "@capacitor/text-zoom": "^8.0.0",
     "@capacitor/toast": "^8.0.0",
-    "@ionic/pwa-elements": "^3.1.1",
+    "@ionic/pwa-elements": "^3.4.0",
     "@ionic/react": "^7.0.0",
     "@ionic/react-router": "^7.0.0",
     "@types/jest": "^26.0.20",
@@ -68,7 +68,7 @@
     "react-router-dom": "^5.3.4"
   },
   "devDependencies": {
-    "@capacitor/cli": "^8.0.0",
+    "@capacitor/cli": "^8.2.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",

package.json

@@ -7,30 +7,54 @@ import {
   IonMenuButton,
   IonTitle,
   IonToolbar,
+  IonToggle,
+  IonItem,
+  IonLabel,
 } from '@ionic/react';
-import React from 'react';
+import React, { useState } from 'react';
 import { ActionSheet, ActionSheetButtonStyle } from '@capacitor/action-sheet';
 
 const ActionSheetPage: React.FC = () => {
+  const [cancelable, setCancelable] = useState(true);
+
   const showActions = async () => {
-    let promptRet = await ActionSheet.showActions({
+    const result = await ActionSheet.showActions({
       title: 'Photo Options',
       message: 'Select an option to perform',
       options: [
-        {
-          title: 'Upload',
-        },
-        {
-          title: 'Share',
-        },
+        { title: 'Upload' },
+        { title: 'Share' },
         {
           title: 'Remove',
           style: ActionSheetButtonStyle.Destructive,
         },
       ],
+      cancelable: cancelable,
     });
-    console.log('You selected', promptRet);
+
+    console.log('Normal sheet:', result);
+    alert('Normal sheet: ' + JSON.stringify(result));
   };
+
+  const showActionsWithCancel = async () => {
+    const result = await ActionSheet.showActions({
+      title: 'Photo Options',
+      message: 'Select an option to perform',
+      options: [
+        { title: 'Upload' },
+        { title: 'Share' },
+        {
+          title: 'Cancel',
+          style: ActionSheetButtonStyle.Cancel,
+        },
+      ],
+      cancelable: cancelable,
+    });
+
+    console.log('Cancel sheet:', result);
+    alert('Cancel sheet: ' + JSON.stringify(result));
+  };
+
   return (
     <IonPage>
       <IonHeader>
@@ -41,9 +65,22 @@ const ActionSheetPage: React.FC = () => {
           <IonTitle>Action Sheet</IonTitle>
         </IonToolbar>
       </IonHeader>
+
       <IonContent>
+        <IonItem>
+          <IonLabel>Cancelable</IonLabel>
+          <IonToggle
+            checked={cancelable}
+            onIonChange={e => setCancelable(e.detail.checked)}
+          />
+        </IonItem>
+
         <IonButton expand="block" onClick={showActions}>
-          Show Actions
+          Show Actions (Destructive)
+        </IonButton>
+
+        <IonButton expand="block" onClick={showActionsWithCancel}>
+          Show Actions (With Cancel)
         </IonButton>
       </IonContent>
     </IonPage>

src/pages/ActionSheet.tsx

@@ -50,7 +50,8 @@ const Home: React.FC = () => {
             style={{
               fontSize: '30px',
               fontFamily: 'monospace',
-            }}>
+            }}
+          >
             App Resolution: {dimensions.width} × {dimensions.height}
           </div>
           <h1>Counter</h1>