@mamrp/components 1.7.16 → 1.7.18

package/dist/index.mjs

@@ -3895,7 +3895,8 @@ var UploadImage = ({
   setValue,
   height,
   allowGallery = false,
-  imageFit = "cover"
+  imageFit = "cover",
+  disableCamera = false
 }) => {
   const compressImage = (file, quality = 0.8, maxWidth = 800, maxHeight = 800) => {
     return new Promise((resolve) => {
@@ -4006,7 +4007,7 @@ var UploadImage = ({
             /* @__PURE__ */ React24.createElement(Box18, { sx: { paddingBottom: "0.5rem" } }, /* @__PURE__ */ React24.createElement(GrUpload, null)),
             placeholder
           ),
-          allowGallery && /* @__PURE__ */ React24.createElement(Stack5, { spacing: 1.5 }, /* @__PURE__ */ React24.createElement(
+          allowGallery && /* @__PURE__ */ React24.createElement(Stack5, { spacing: 1.5 }, !disableCamera && /* @__PURE__ */ React24.createElement(
             Button10,
             {
               sx: { width: "9rem" },
@@ -5059,19 +5060,198 @@ var DataTable = ({
 };
 var data_table_default = DataTable;
 
-// src/custom-dialog/index.tsx
+// src/img-viewer/index.tsx
 import {
-  Box as Box24,
   Dialog as Dialog7,
+  IconButton as IconButton10,
+  CircularProgress as CircularProgress10,
+  Box as Box24,
+  Typography as Typography17
+} from "@mui/material";
+import {
+  MdZoomIn as MdZoomIn2,
+  MdZoomOut as MdZoomOut2,
+  MdRotateLeft as MdRotateLeft2,
+  MdRotateRight as MdRotateRight2,
+  MdClose as MdClose5
+} from "react-icons/md";
+import Image6 from "next/image";
+import { useEffect as useEffect10, useState as useState15, useCallback as useCallback2 } from "react";
+function imgViewer({
+  open,
+  handleClose,
+  src,
+  isLoading,
+  title = "",
+  noResetBtn = false,
+  noRotate = false,
+  noZoom = false,
+  unoptimized = false
+}) {
+  const [zoom, setZoom] = useState15(1);
+  const [rotate, setRotate] = useState15(0);
+  const [loading, setLoading] = useState15(true);
+  const [position, setPosition] = useState15({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState15(false);
+  const [startMouse, setStartMouse] = useState15({ x: 0, y: 0 });
+  const [startOffset, setStartOffset] = useState15({ x: 0, y: 0 });
+  const reset = () => {
+    setZoom(1);
+    setRotate(0);
+    setPosition({ x: 0, y: 0 });
+  };
+  const handleWheel = useCallback2((e) => {
+    e.preventDefault();
+    const delta = -e.deltaY * 1e-3;
+    setZoom((z) => Math.min(5, Math.max(0.2, z + delta)));
+  }, []);
+  const handleMouseDown = (e) => {
+    setDragging(true);
+    setStartMouse({ x: e.clientX, y: e.clientY });
+    setStartOffset({ ...position });
+  };
+  const handleMouseMove = (e) => {
+    if (!dragging) return;
+    const dx = e.clientX - startMouse.x;
+    const dy = e.clientY - startMouse.y;
+    setPosition({
+      x: startOffset.x - dx,
+      y: startOffset.y + dy
+    });
+  };
+  const handleMouseUp = () => setDragging(false);
+  useEffect10(() => {
+    if (dragging) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    } else {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [dragging, startMouse, startOffset]);
+  useEffect10(() => {
+    if (open) reset();
+  }, [open]);
+  return /* @__PURE__ */ React.createElement(
+    Dialog7,
+    {
+      open,
+      onClose: handleClose,
+      maxWidth: "xl",
+      fullWidth: true,
+      sx: {
+        "& .MuiPaper-root": {
+          borderRadius: 3,
+          backgroundColor: "transparent"
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Box24,
+      {
+        sx: {
+          position: "relative",
+          width: "100%",
+          height: "90vh",
+          bgcolor: "rgba(17,17,17,0.9)",
+          overflow: "hidden",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        onWheel: handleWheel
+      },
+      /* @__PURE__ */ React.createElement(
+        Box24,
+        {
+          sx: {
+            position: "absolute",
+            top: 10,
+            left: 10,
+            zIndex: 20,
+            display: "flex",
+            gap: 1,
+            alignItems: "center"
+          }
+        },
+        /* @__PURE__ */ React.createElement(IconButton10, { onClick: handleClose }, /* @__PURE__ */ React.createElement(MdClose5, { color: "white" })),
+        !noResetBtn && /* @__PURE__ */ React.createElement(IconButton10, { onClick: reset }, /* @__PURE__ */ React.createElement("span", { style: { color: "white", fontSize: "0.9rem" } }, "\u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06CC")),
+        !noRotate && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconButton10, { onClick: () => setRotate((r) => r - 90) }, /* @__PURE__ */ React.createElement(MdRotateLeft2, { color: "white" })), /* @__PURE__ */ React.createElement(IconButton10, { onClick: () => setRotate((r) => r + 90) }, /* @__PURE__ */ React.createElement(MdRotateRight2, { color: "white" }))),
+        !noZoom && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconButton10, { onClick: () => setZoom((z) => z + 0.2) }, /* @__PURE__ */ React.createElement(MdZoomIn2, { color: "white" })), /* @__PURE__ */ React.createElement(
+          IconButton10,
+          {
+            onClick: () => setZoom((z) => Math.max(0.2, z - 0.2))
+          },
+          /* @__PURE__ */ React.createElement(MdZoomOut2, { color: "white" })
+        )),
+        /* @__PURE__ */ React.createElement(Typography17, { color: "white" }, title)
+      ),
+      (isLoading || loading) && /* @__PURE__ */ React.createElement(
+        Box24,
+        {
+          sx: {
+            position: "absolute",
+            zIndex: 10,
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            color: "white"
+          }
+        },
+        /* @__PURE__ */ React.createElement(CircularProgress10, { color: "inherit" })
+      ),
+      /* @__PURE__ */ React.createElement(
+        Box24,
+        {
+          onMouseDown: handleMouseDown,
+          sx: {
+            position: "relative",
+            cursor: dragging ? "grabbing" : "grab",
+            transform: `translate(${position.x}px, ${position.y}px) scale(${zoom}) rotate(${rotate}deg)`,
+            transition: dragging ? "none" : "transform 0.3s ease",
+            zIndex: 5
+          }
+        },
+        src && !isLoading && /* @__PURE__ */ React.createElement(
+          Image6,
+          {
+            src,
+            alt: title,
+            width: 1e3,
+            height: 800,
+            onLoad: () => setLoading(false),
+            onError: () => setLoading(false),
+            style: {
+              objectFit: "contain",
+              userSelect: "none",
+              pointerEvents: "none"
+            },
+            unoptimized,
+            ...unoptimized ? { loader: ({ src: src2 }) => src2 } : { loader: void 0 }
+          }
+        )
+      )
+    )
+  );
+}
+
+// src/custom-dialog/index.tsx
+import {
+  Box as Box25,
+  Dialog as Dialog8,
   DialogActions as DialogActions4,
   DialogContent as DialogContent6,
   DialogTitle as DialogTitle6,
   Divider as Divider4,
-  IconButton as IconButton10,
+  IconButton as IconButton11,
   Stack as Stack7,
   Tooltip as Tooltip4
 } from "@mui/material";
-import { MdClose as MdClose5 } from "react-icons/md";
+import { MdClose as MdClose6 } from "react-icons/md";
 function CustomDialog({
   title,
   icon: Icon,
@@ -5080,9 +5260,15 @@ function CustomDialog({
   onClose,
   maxWidth = "sm",
   fullWidth = true,
+  fullScreen = false,
   children,
   actions,
-  isSubmiting = false
+  isSubmiting = false,
+  sx,
+  paperSx,
+  contentSx,
+  titleSx,
+  actionsSx
 }) {
   const handleClose = (event, reason) => {
     if (isSubmiting) {
@@ -5091,79 +5277,156 @@ function CustomDialog({
     onClose();
   };
   return /* @__PURE__ */ React.createElement(
-    Dialog7,
+    Dialog8,
     {
       open,
       onClose: handleClose,
       maxWidth,
       fullWidth,
-      PaperComponent: DraggablePaper,
-      disableScrollLock: true
+      fullScreen,
+      PaperComponent: fullScreen ? void 0 : DraggablePaper,
+      disableScrollLock: true,
+      sx: [
+        fullScreen ? {
+          "& .MuiDialog-container": {
+            alignItems: "flex-start"
+          }
+        } : {},
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      PaperProps: {
+        sx: [
+          fullScreen ? {
+            height: "100vh",
+            maxHeight: "100vh",
+            width: "100%",
+            maxWidth: "100%",
+            margin: 0,
+            borderRadius: 0,
+            overflow: "hidden"
+          } : {
+            maxHeight: "calc(100vh - 64px)"
+          },
+          ...Array.isArray(paperSx) ? paperSx : [paperSx]
+        ]
+      }
     },
     /* @__PURE__ */ React.createElement(
-      DialogTitle6,
+      Box25,
       {
-        fontWeight: 700,
-        fontSize: "1.2rem",
-        display: "flex",
-        alignItems: "center",
-        gap: "4px",
-        sx: { cursor: "move" },
-        id: "draggable-dialog"
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          height: fullScreen ? "100%" : "auto"
+        }
       },
-      /* @__PURE__ */ React.createElement(Stack7, { direction: "row", alignItems: "center", spacing: 0.5 }, /* @__PURE__ */ React.createElement(Box24, null, Icon && /* @__PURE__ */ React.createElement(
-        Stack7,
+      /* @__PURE__ */ React.createElement(
+        DialogTitle6,
         {
+          fontWeight: 700,
+          fontSize: "1.2rem",
+          display: "flex",
           alignItems: "center",
-          sx: {
-            color: iconColor ? (theme3) => {
-              const paletteColors = [
-                "primary",
-                "secondary",
-                "error",
-                "warning",
-                "info",
-                "success",
-                "tertiary",
-                "accent",
-                "successLight",
-                "orange",
-                "indigo",
-                "teal",
-                "pinkLight",
-                "aqua",
-                "customRed"
-              ];
-              if (paletteColors.includes(iconColor)) {
-                const palette = theme3.palette;
-                return palette[iconColor]?.main || iconColor;
-              }
-              return iconColor;
-            } : (theme3) => theme3.palette.info.main,
-            pr: 0.5
-          }
+          gap: "4px",
+          sx: [
+            fullScreen ? { cursor: "default" } : { cursor: "move" },
+            {
+              flexShrink: 0,
+              py: 2,
+              px: 3
+            },
+            ...Array.isArray(titleSx) ? titleSx : [titleSx]
+          ],
+          id: fullScreen ? void 0 : "draggable-dialog"
         },
-        /* @__PURE__ */ React.createElement(Icon, { size: 20 })
-      )), /* @__PURE__ */ React.createElement(Box24, null, title))
-    ),
-    /* @__PURE__ */ React.createElement(Tooltip4, { title: "\u0628\u0633\u062A\u0646" }, /* @__PURE__ */ React.createElement(
-      IconButton10,
-      {
-        "aria-label": "close",
-        onClick: onClose,
-        sx: {
-          position: "absolute",
-          right: 8,
-          top: 8,
-          color: (theme3) => theme3.palette.grey[500]
+        /* @__PURE__ */ React.createElement(Stack7, { direction: "row", alignItems: "center", spacing: 0.5 }, /* @__PURE__ */ React.createElement(Box25, null, Icon && /* @__PURE__ */ React.createElement(
+          Stack7,
+          {
+            alignItems: "center",
+            sx: {
+              color: iconColor ? (theme3) => {
+                const paletteColors = [
+                  "primary",
+                  "secondary",
+                  "error",
+                  "warning",
+                  "info",
+                  "success",
+                  "tertiary",
+                  "accent",
+                  "successLight",
+                  "orange",
+                  "indigo",
+                  "teal",
+                  "pinkLight",
+                  "aqua",
+                  "customRed"
+                ];
+                if (paletteColors.includes(iconColor)) {
+                  const palette = theme3.palette;
+                  return palette[iconColor]?.main || iconColor;
+                }
+                return iconColor;
+              } : (theme3) => theme3.palette.info.main,
+              pr: 0.5
+            }
+          },
+          /* @__PURE__ */ React.createElement(Icon, { size: 20 })
+        )), /* @__PURE__ */ React.createElement(Box25, null, title))
+      ),
+      /* @__PURE__ */ React.createElement(Tooltip4, { title: "\u0628\u0633\u062A\u0646" }, /* @__PURE__ */ React.createElement(
+        IconButton11,
+        {
+          "aria-label": "close",
+          onClick: onClose,
+          sx: [
+            {
+              position: "absolute",
+              right: 8,
+              top: 8,
+              color: (theme3) => theme3.palette.grey[500]
+            },
+            fullScreen && {
+              top: 12,
+              right: 12
+            }
+          ],
+          disabled: isSubmiting
         },
-        disabled: isSubmiting
-      },
-      /* @__PURE__ */ React.createElement(MdClose5, null)
-    )),
-    /* @__PURE__ */ React.createElement(Divider4, null),
-    /* @__PURE__ */ React.createElement(DialogContent6, null, children),
-    actions && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DialogActions4, null, actions))
+        /* @__PURE__ */ React.createElement(MdClose6, null)
+      )),
+      /* @__PURE__ */ React.createElement(Divider4, { sx: { flexShrink: 0 } }),
+      /* @__PURE__ */ React.createElement(
+        DialogContent6,
+        {
+          sx: [
+            {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              overflow: "auto",
+              p: 0
+            },
+            ...Array.isArray(contentSx) ? contentSx : [contentSx]
+          ]
+        },
+        /* @__PURE__ */ React.createElement(Box25, { sx: { p: fullScreen ? 3 : 2, flex: 1, overflow: "auto" } }, children)
+      ),
+      actions && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        DialogActions4,
+        {
+          sx: [
+            {
+              flexShrink: 0,
+              py: 2,
+              px: 3
+            },
+            ...Array.isArray(actionsSx) ? actionsSx : [actionsSx]
+          ]
+        },
+        actions
+      ))
+    )
   );
 }
 export {
@@ -5186,6 +5449,7 @@ export {
   number_type_default as FormInputNumber,
   text_type_default as FormInputText,
   HorizontalStepper,
+  imgViewer as ImgViewer,
   LicensePlate,
   mobile_date_time_picker_default as MobileDateTimePicker,
   ConfirmationDialog2 as Modal,