mg-library 1.0.799 → 1.0.800

package/components.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from "react";
 import { Platform, Animated } from "react-native";
-import { Box, Text, Divider, Button, ButtonText, ButtonIcon, Icon, Popover, PopoverTrigger, PopoverBackdrop, PopoverContent, PopoverArrow, PopoverBody, PopoverFooter } from '@gluestack-ui/themed';
+import { AlertDialog, AlertDialogBackdrop, AlertDialogContent, AlertDialogBody, AlertDialogFooter, Box, Text, Divider, Button, ButtonText, ButtonIcon, Icon, Popover, PopoverTrigger, PopoverBackdrop, PopoverContent, PopoverArrow, PopoverBody, PopoverFooter } from '@gluestack-ui/themed';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import * as mgFunctionsLib from './functions.js';
@@ -167,7 +167,7 @@ export function MGButton({
     );
 }
 
-export function MGPopover(props) {
+/* export function MGPopover(props) {
     const { title, icon, language, callback } = props;
     const [open, setOpen] = useState(false);
 
@@ -219,6 +219,48 @@ export function MGPopover(props) {
             </PopoverContent>
         </Popover>
     );
+} */
+
+export function MGPopover(props) {
+    const { title, icon, language, callback } = props;
+    const [open, setOpen] = useState(false);
+    const handleConfirm = async () => {
+        try { await callback?.(); } finally { setOpen(false); }
+    };
+    return (
+        <>
+            <Button
+                action="primary"
+                variant="solid"
+                h={50}
+                onPress={() => setOpen(true)}
+            >
+                {icon ? <Icon as={MaterialCommunityIcons} name={icon} mr="$2" color="$white" /> : null}
+                <ButtonText>{title}</ButtonText>
+            </Button>
+            <AlertDialog isOpen={open} onClose={() => setOpen(false)}>
+                <AlertDialogBackdrop />
+                <AlertDialogContent>
+                    <AlertDialogBody>
+                        <Box alignItems="center">
+                            <Icon as={MaterialCommunityIcons} name="alert-outline" size={48} mb="$3" />
+                            <MGText textAlign="center">
+                                {mgFunctionsLib.i18nString('confirm', language)}?
+                            </MGText>
+                        </Box>
+                    </AlertDialogBody>
+                    <AlertDialogFooter>
+                        <Button onPress={handleConfirm}>
+                            <ButtonText>{mgFunctionsLib.i18nString('yes', language)}</ButtonText>
+                        </Button>
+                        <Button variant="outline" onPress={() => setOpen(false)}>
+                            <ButtonText>{mgFunctionsLib.i18nString('no', language)}</ButtonText>
+                        </Button>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </>
+    );
 }
 
 export function MGDivider({ style, ...props }) {
@@ -227,9 +269,9 @@ export function MGDivider({ style, ...props }) {
             h="$0.55"
             flexGrow={1}
             alignSelf="stretch"
-            style={style}         
+            style={style}
             {...props}
-            bg="$gray400"            
+            bg="$gray400"
         />
     );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mg-library",
-    "version": "1.0.799",
+    "version": "1.0.800",
     "description": "",
     "main": "index.js",
     "react-native": "index.js",