@mamrp/components 1.7.15 → 1.7.17

package/dist/index.mjs

@@ -157,8 +157,8 @@ function LicensePlate({
         sx: {
           backgroundColor: "#172554",
           width: size === "small" ? "30px" : "36px",
-          minHeight: size === "small" ? "40px" : "52px",
-          maxHeight: size === "small" ? "40px" : "52px",
+          minHeight: "52px",
+          maxHeight: "52px",
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
@@ -2397,7 +2397,7 @@ function SearchLicensePlate({
         sx: {
           backgroundColor: "#172554",
           width: "2.25rem",
-          height: "3.25rem",
+          height: "3rem",
           display: "flex",
           justifyContent: "center",
           alignItems: "center",
@@ -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,
@@ -5091,7 +5271,7 @@ function CustomDialog({
     onClose();
   };
   return /* @__PURE__ */ React.createElement(
-    Dialog7,
+    Dialog8,
     {
       open,
       onClose: handleClose,
@@ -5111,7 +5291,7 @@ function CustomDialog({
         sx: { cursor: "move" },
         id: "draggable-dialog"
       },
-      /* @__PURE__ */ React.createElement(Stack7, { direction: "row", alignItems: "center", spacing: 0.5 }, /* @__PURE__ */ React.createElement(Box24, null, Icon && /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(Stack7, { direction: "row", alignItems: "center", spacing: 0.5 }, /* @__PURE__ */ React.createElement(Box25, null, Icon && /* @__PURE__ */ React.createElement(
         Stack7,
         {
           alignItems: "center",
@@ -5144,10 +5324,10 @@ function CustomDialog({
           }
         },
         /* @__PURE__ */ React.createElement(Icon, { size: 20 })
-      )), /* @__PURE__ */ React.createElement(Box24, null, title))
+      )), /* @__PURE__ */ React.createElement(Box25, null, title))
     ),
     /* @__PURE__ */ React.createElement(Tooltip4, { title: "\u0628\u0633\u062A\u0646" }, /* @__PURE__ */ React.createElement(
-      IconButton10,
+      IconButton11,
       {
         "aria-label": "close",
         onClick: onClose,
@@ -5159,7 +5339,7 @@ function CustomDialog({
         },
         disabled: isSubmiting
       },
-      /* @__PURE__ */ React.createElement(MdClose5, null)
+      /* @__PURE__ */ React.createElement(MdClose6, null)
     )),
     /* @__PURE__ */ React.createElement(Divider4, null),
     /* @__PURE__ */ React.createElement(DialogContent6, null, children),
@@ -5186,6 +5366,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,