mg-library 1.0.717 → 1.0.719

package/components.js

@@ -106,7 +106,7 @@ export function MGButton({
         }).start();
     const effectiveDisabled = !!(isDisabled || disabled || isLoading);
     const isSolid = variant === "solid" || variant === "filled";
-    const isGhost = variant === "ghost";    
+    const isGhost = variant === "ghost";
     const gsVariant = variant === "ghost" ? "link" : variant;
     const textColor = isSolid ? "$white" : `$${action}700`;
     if (iconColor === undefined) iconColor = textColor;
@@ -170,61 +170,54 @@ export function MGButton({
 export function MGPopover(props) {
     const [visible, setVisible] = useState(false);
     const footer = (
-        <View style={{ flexGrow: 1, flexDirection: 'row', justifyContent: 'space-around', marginTop: 20, marginBottom: 20 }}>
+        <Box flexDirection="row" justifyContent="space-around" mt="$5" mb="$5">
             <MGButton
-                title={mgFunctionsLib.i18nString('yes', props.language)}
+                title={mgFunctionsLib.i18nString("yes", props.language)}
                 action="primary"
                 variant="solid"
                 py="$4"
-                style={{ flexGrow: 0.3 }}
                 onPress={() => {
                     setVisible(false);
-                    props.callback();
+                    props.callback?.();
                 }}
             />
             <MGButton
-                title={mgFunctionsLib.i18nString('no', props.language)}
+                title={mgFunctionsLib.i18nString("no", props.language)}
                 action="primary"
                 variant="solid"
                 py="$4"
-                style={{ flexGrow: 0.3 }}
                 onPress={() => setVisible(false)}
             />
-        </View>
+        </Box>
+    );
+    return (
+        <Popover isOpen={visible} onOpenChange={setVisible}>
+            <PopoverTrigger>
+                {(triggerProps) => (
+                    <Button {...triggerProps} action="primary" variant="solid" py="$4">
+                        {props.icon ? (
+                            <Icon as={MaterialCommunityIcons} name={props.icon} mr="$2" color="$white" />
+                        ) : null}
+                        <ButtonText>{props.title}</ButtonText>
+                    </Button>
+                )}
+            </PopoverTrigger>
+            <PopoverBackdrop />
+            <PopoverContent w={300} bg="$white">
+                <PopoverArrow />
+                <PopoverCloseButton />
+                <PopoverBody>
+                    <Box alignItems="center" justifyContent="center">
+                        <Icon as={MaterialCommunityIcons} name="alert-outline" size={16} color="$primary500" mb="$3" />
+                        <MGText textAlign="center">
+                            {mgFunctionsLib.i18nString("confirm", props.language)}?
+                        </MGText>
+                    </Box>
+                </PopoverBody>
+                <PopoverFooter>{footer}</PopoverFooter>
+            </PopoverContent>
+        </Popover>
     );
-    <Popover isOpen={visible} onClose={() => setVisible(false)}>
-        <PopoverTrigger>
-            <MGButton
-                icon={props.icon}
-                title={props.title}
-                action="primary"
-                variant="solid"
-                py="$4"
-                onPress={() => setVisible(true)}
-            />
-        </PopoverTrigger>
-        <PopoverContent w={300} bg="$white">
-            <PopoverArrow />
-            <PopoverCloseButton />
-            <PopoverBody>
-                <Box alignItems="center" justifyContent="center">
-                    <Icon
-                        as={MaterialCommunityIcons}
-                        name="alert-outline"
-                        size={16}
-                        color="$primary500"
-                        mb="$3"
-                    />
-                    <MGText textAlign="center">
-                        {mgFunctionsLib.i18nString('confirm', props.language)}?
-                    </MGText>
-                </Box>
-            </PopoverBody>
-            <PopoverFooter>
-                {footer}
-            </PopoverFooter>
-        </PopoverContent>
-    </Popover>
 }
 
 export function MGDivider({ style, ...props }) {

package/package.json

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