mg-library 1.0.720 → 1.0.721

package/components.js

@@ -167,54 +167,96 @@ export function MGButton({
     );
 }
 
-export function MGPopover(props) {
+export function MGPopover({
+    title,
+    icon,
+    language,
+    callback,
+    confirmText = mgFunctionsLib.i18nString("yes", language),
+    cancelText = mgFunctionsLib.i18nString("no", language),
+    confirmColor = "primary",
+    confirmVariant = "solid",
+    placement = "bottom",
+    isOpen: controlledOpen,
+    onOpenChange,
+    triggerProps = {},
+    contentWidth = 300,
+    confirmIcon,
+    ...rest
+}) {
     const [visible, setVisible] = useState(false);
-    const footer = (
-        <Box flexDirection="row" justifyContent="space-around" mt="$5" mb="$5">
-            <MGButton
-                title={mgFunctionsLib.i18nString("yes", props.language)}
-                action="primary"
-                variant="solid"
-                py="$4"
-                onPress={() => {
-                    setVisible(false);
-                    props.callback?.();
-                }}
-            />
-            <MGButton
-                title={mgFunctionsLib.i18nString("no", props.language)}
-                action="primary"
-                variant="solid"
-                py="$4"
-                onPress={() => setVisible(false)}
-            />
-        </Box>
-    );
+    const isControlled = controlledOpen !== undefined;
+    const open = isControlled ? controlledOpen : visible;
+    const setOpen = onOpenChange ?? setVisible;
+    const [loading, setLoading] = useState(false);
+    const handleConfirm = async () => {
+        try {
+            setLoading(true);
+            await callback?.();
+        } finally {
+            setLoading(false);
+            setOpen(false);
+        }
+    };
     return (
-        <Popover isOpen={visible} onOpenChange={setVisible}>
+        <Popover
+            isOpen={open}
+            onOpenChange={setOpen}
+            placement={placement}
+            {...rest}
+        >
             <PopoverTrigger>
-                {(triggerProps) => (
-                    <Button {...triggerProps} action="primary" variant="solid" py="$4">
-                        {props.icon ? (
-                            <Icon as={MaterialCommunityIcons} name={props.icon} mr="$2" color="$white" />
+                {(tp) => (
+                    <Button
+                        {...tp}
+                        action={triggerProps.action ?? "primary"}
+                        variant={triggerProps.variant ?? "solid"}
+                        py={triggerProps.py ?? "$4"}
+                        bg={triggerProps.bg}
+                        borderColor={triggerProps.borderColor}
+                        isDisabled={triggerProps.isDisabled}
+                    >
+                        {icon ? (
+                            <Icon as={MaterialCommunityIcons} name={icon} mr="$2" color="$white" />
                         ) : null}
-                        <ButtonText>{props.title}</ButtonText>
+                        <ButtonText>{title}</ButtonText>
                     </Button>
                 )}
             </PopoverTrigger>
             <PopoverBackdrop />
-            <PopoverContent w={300} bg="$white">
+            <PopoverContent w={contentWidth} 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)}?
+                            {mgFunctionsLib.i18nString("confirm", language)}?
                         </MGText>
                     </Box>
                 </PopoverBody>
-                <PopoverFooter>{footer}</PopoverFooter>
+                <PopoverFooter>
+                    <Box flexDirection="row" justifyContent="space-around" mt="$5" mb="$5">
+                        <MGButton
+                            title={confirmText}
+                            action={confirmColor}
+                            variant={confirmVariant}
+                            py="$4"
+                            icon={confirmIcon}
+                            isLoading={loading}
+                            disabled={loading}
+                            callback={handleConfirm}
+                        />
+                        <MGButton
+                            title={cancelText}
+                            action="primary"
+                            variant="outline"
+                            py="$4"
+                            disabled={loading}
+                            callback={() => setOpen(false)}
+                        />
+                    </Box>
+                </PopoverFooter>
             </PopoverContent>
         </Popover>
     );

package/package.json

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