mg-library 1.0.799 → 1.0.801

package/components.js

@@ -1,6 +1,7 @@
 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 { OverlayProvider } from '@react-native-aria/overlays';
+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 +168,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 +220,98 @@ 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 (
+        <OverlayProvider>
+            <>
+                <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
+                        w={300}
+                        alignSelf="center"
+                    >
+                        <AlertDialogBody>
+                            <Box alignItems="center" justifyContent="center" py="$2">
+                                <Icon
+                                    as={MaterialCommunityIcons}
+                                    name="alert-outline"
+                                    size={48}
+                                    color="$primary500"
+                                    mb="$3"
+                                />
+                                <MGText textAlign="center">
+                                    {mgFunctionsLib.i18nString('confirm', language)}?
+                                </MGText>
+                            </Box>
+                        </AlertDialogBody>
+                        <AlertDialogFooter>
+                            <Box
+                                flex={1}
+                                flexDirection="row"
+                                justifyContent="space-around"
+                                mt="$2"
+                                mb="$2"
+                                w="$full"
+                            >
+                                <Button
+                                    h={50}
+                                    action="primary"
+                                    variant="solid"
+                                    onPress={handleConfirm}
+                                >
+                                    <ButtonText>
+                                        {mgFunctionsLib.i18nString('yes', language)}
+                                    </ButtonText>
+                                </Button>
+                                <Button
+                                    h={50}
+                                    action="primary"
+                                    variant="outline"
+                                    onPress={() => setOpen(false)}
+                                >
+                                    <ButtonText>
+                                        {mgFunctionsLib.i18nString('no', language)}
+                                    </ButtonText>
+                                </Button>
+                            </Box>
+                        </AlertDialogFooter>
+                    </AlertDialogContent>
+                </AlertDialog>
+            </>
+        </OverlayProvider>
+    );
 }
 
 export function MGDivider({ style, ...props }) {
@@ -227,9 +320,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.801",
     "description": "",
     "main": "index.js",
     "react-native": "index.js",