componentes-sinco 1.0.17 → 1.0.18

package/dist/index.cjs

@@ -461,25 +461,6 @@ var Attachment = ({
   const [openModal, setOpenModal] = (0, import_react5.useState)(false);
   const [isDragFile, setIsDragFile] = (0, import_react5.useState)(false);
   const inputRef = (0, import_react5.useRef)(null);
-  const handleDrop = (event2) => {
-    event2.preventDefault();
-    setIsDragFile(false);
-    const filesDropped = event2.dataTransfer.files;
-    if (filesDropped && filesDropped.length > 0) {
-      const fakeEvent = {
-        target: { files: filesDropped }
-      };
-      handleUpload(fakeEvent);
-    }
-  };
-  const handleDragOver = (event2) => {
-    event2.preventDefault();
-    setIsDragFile(true);
-  };
-  const handleDragLeave = (event2) => {
-    event2.preventDefault();
-    setIsDragFile(false);
-  };
   (0, import_react5.useEffect)(() => {
     if (initialFiles.length > 0) {
       setFiles(initialFiles);
@@ -500,14 +481,35 @@ var Attachment = ({
       });
     }, 1e3);
     return () => clearInterval(interval);
-  }, [files]);
+  }, []);
+  const handleDrop = (event2) => {
+    event2.preventDefault();
+    setIsDragFile(false);
+    const filesDropped = event2.dataTransfer.files;
+    if (filesDropped && filesDropped.length > 0) {
+      const fakeEvent = {
+        target: { files: filesDropped }
+      };
+      handleUpload(fakeEvent);
+    }
+  };
+  const handleDragOver = (event2) => {
+    event2.preventDefault();
+    setIsDragFile(true);
+  };
+  const handleDragLeave = (event2) => {
+    event2.preventDefault();
+    setIsDragFile(false);
+  };
   const handleUpload = (event2) => {
     const newFiles = event2.target.files;
     if (!newFiles) return;
     const nuevosArchivos = [];
     const archivosValidos = [];
     Array.from(newFiles).forEach((file) => {
-      const isDuplicatedFile = files.findIndex((e) => e.name === file.name && e.size === file.size);
+      const isDuplicatedFile = files.findIndex(
+        (e) => e.name === file.name && e.size === file.size
+      );
       const sizeMB = file.size / (1024 * 1024);
       if (isDuplicatedFile !== -1) {
         setToast({
@@ -536,7 +538,12 @@ var Attachment = ({
         });
         return;
       }
-      if (fileAccepted && !file.name.match(new RegExp(`(${fileAccepted.replace(/\./g, "\\.").replace(/,/g, "|")})$`, "i"))) {
+      if (fileAccepted && !file.name.match(
+        new RegExp(
+          `(${fileAccepted.replace(/\./g, "\\.").replace(/,/g, "|")})$`,
+          "i"
+        )
+      )) {
         setToast({
           type: "error",
           title: "Tipo de archivo no permitido",
@@ -558,18 +565,23 @@ var Attachment = ({
     if (nuevosArchivos.length > 0) {
       setFiles((prev) => {
         const actualizados = [...prev, ...nuevosArchivos];
-        const totalFiles = [...onChange ? archivosValidos : []];
-        onChange == null ? void 0 : onChange(totalFiles);
+        onChange == null ? void 0 : onChange([
+          ...archivosValidos,
+          ...prev.map((f) => new File([], f.name, { type: f.type }))
+        ]);
         return actualizados;
       });
     }
     event2.target.value = "";
   };
   const deleteFiles = (nameFile) => {
-    const filtered = files.filter((e) => e.name !== nameFile);
-    setFiles(filtered);
-    const remainingFiles = filtered.map((f) => new File([], f.name, { type: f.type }));
-    onChange == null ? void 0 : onChange(remainingFiles);
+    setFiles((prev) => {
+      const filtered = prev.filter((e) => e.name !== nameFile);
+      onChange == null ? void 0 : onChange(
+        filtered.map((f) => new File([], f.name, { type: f.type }))
+      );
+      return filtered;
+    });
   };
   return /* @__PURE__ */ import_react5.default.createElement(import_material3.Stack, { spacing: 2 }, toast && /* @__PURE__ */ import_react5.default.createElement(SCToastNotification, __spreadValues({}, toast)), /* @__PURE__ */ import_react5.default.createElement(
     "input",
@@ -607,7 +619,38 @@ var Attachment = ({
         }
       }, sx)
     },
-    onLoading ? /* @__PURE__ */ import_react5.default.createElement(import_material3.Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "100%", height: "450px" }, /* @__PURE__ */ import_react5.default.createElement(import_material3.CircularProgress, { sx: { width: "60px", height: "60px" }, variant: "indeterminate" })) : /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(import_material3.Box, { display: "flex", bgcolor: error ? "error.50" : "primary.50", borderRadius: "100%", p: 1 }, /* @__PURE__ */ import_react5.default.createElement(import_icons_material5.CloudUploadOutlined, { color: error ? "error" : "primary", fontSize: "medium" })), /* @__PURE__ */ import_react5.default.createElement(
+    onLoading ? /* @__PURE__ */ import_react5.default.createElement(
+      import_material3.Box,
+      {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "100%",
+        height: "450px"
+      },
+      /* @__PURE__ */ import_react5.default.createElement(
+        import_material3.CircularProgress,
+        {
+          sx: { width: "60px", height: "60px" },
+          variant: "indeterminate"
+        }
+      )
+    ) : /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(
+      import_material3.Box,
+      {
+        display: "flex",
+        bgcolor: error ? "error.50" : "primary.50",
+        borderRadius: "100%",
+        p: 1
+      },
+      /* @__PURE__ */ import_react5.default.createElement(
+        import_icons_material5.CloudUploadOutlined,
+        {
+          color: error ? "error" : "primary",
+          fontSize: "medium"
+        }
+      )
+    ), /* @__PURE__ */ import_react5.default.createElement(
       import_material3.Stack,
       {
         width: "100%",
@@ -616,18 +659,27 @@ var Attachment = ({
         justifyContent: compact ? "space-between" : "center",
         gap: 1
       },
-      /* @__PURE__ */ import_react5.default.createElement(import_material3.Stack, { flexDirection: "column", alignItems: compact ? "start" : "center", gap: 0.5 }, /* @__PURE__ */ import_react5.default.createElement(import_material3.Typography, { variant: "body2", color: "text.primary" }, "Arrastrar o adjuntar archivos"), /* @__PURE__ */ import_react5.default.createElement(
-        import_material3.Typography,
+      /* @__PURE__ */ import_react5.default.createElement(
+        import_material3.Stack,
         {
-          variant: "caption",
-          color: error ? "error" : "text.secondary",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          maxWidth: "450px"
+          flexDirection: "column",
+          alignItems: compact ? "start" : "center",
+          gap: 0.5
         },
-        error ? `${fileAccepted || "DOCX, XML, PNG, JPG"} \u2022 Archivo no soportado` : `${fileAccepted || "DOCX, XML, PNG, JPG"} \u2022 Max. ${maxSize}MB`
-      )),
+        /* @__PURE__ */ import_react5.default.createElement(import_material3.Typography, { variant: "body2", color: "text.primary" }, "Arrastrar o adjuntar archivos"),
+        /* @__PURE__ */ import_react5.default.createElement(
+          import_material3.Typography,
+          {
+            variant: "caption",
+            color: error ? "error" : "text.secondary",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            maxWidth: "450px"
+          },
+          error ? `${fileAccepted || "DOCX, XML, PNG, JPG"} \u2022 Archivo no soportado` : `${fileAccepted || "DOCX, XML, PNG, JPG"} \u2022 Max. ${maxSize}MB`
+        )
+      ),
       /* @__PURE__ */ import_react5.default.createElement(
         import_material3.Button,
         {
@@ -669,7 +721,13 @@ var Attachment = ({
           }
         }
       },
-      /* @__PURE__ */ import_react5.default.createElement(import_material3.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ import_react5.default.createElement(import_icons_material5.UploadFileOutlined, { color: file.uploadError ? "error" : "primary", fontSize: "small" }), /* @__PURE__ */ import_react5.default.createElement(import_material3.Stack, { width: "100%" }, /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react5.default.createElement(import_material3.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ import_react5.default.createElement(
+        import_icons_material5.UploadFileOutlined,
+        {
+          color: file.uploadError ? "error" : "primary",
+          fontSize: "small"
+        }
+      ), /* @__PURE__ */ import_react5.default.createElement(import_material3.Stack, { width: "100%" }, /* @__PURE__ */ import_react5.default.createElement(
         import_material3.Typography,
         {
           variant: "body2",
@@ -677,15 +735,29 @@ var Attachment = ({
           whiteSpace: "nowrap",
           overflow: "hidden",
           textOverflow: "ellipsis",
-          maxWidth: "210px"
+          maxWidth: "310px"
         },
         file.name
-      ), /* @__PURE__ */ import_react5.default.createElement(import_material3.Typography, { variant: "caption", color: file.uploadError ? "error" : "text.secondary" }, file.uploadError && file.size / (1024 * 1024) > maxSize ? "Archivo super\xF3 el l\xEDmite \u2022 Carga fallida" : file.uploadError ? "Archivo duplicado o inv\xE1lido \u2022 Carga fallida" : `${(file.size / (1024 * 1024)).toFixed(2)}MB \u2022 ${file.type}`))),
+      ), /* @__PURE__ */ import_react5.default.createElement(
+        import_material3.Typography,
+        {
+          variant: "caption",
+          color: file.uploadError ? "error" : "text.secondary"
+        },
+        file.uploadError && file.size / (1024 * 1024) > maxSize ? "Archivo super\xF3 el l\xEDmite \u2022 Carga fallida" : file.uploadError ? "Archivo duplicado o inv\xE1lido \u2022 Carga fallida" : `${(file.size / (1024 * 1024)).toFixed(2)}MB \u2022 ${file.type}`
+      ))),
       /* @__PURE__ */ import_react5.default.createElement(import_material3.Tooltip, { title: "Descargar" }, /* @__PURE__ */ import_react5.default.createElement(import_material3.IconButton, { size: "small", onClick: downloadAction }, /* @__PURE__ */ import_react5.default.createElement(import_icons_material5.FileDownload, { fontSize: "small", color: "action" }))),
-      /* @__PURE__ */ import_react5.default.createElement(import_material3.Tooltip, { title: "Eliminar" }, /* @__PURE__ */ import_react5.default.createElement(import_material3.IconButton, { size: "small", onClick: () => {
-        setFileToDelete(file);
-        setOpenModal(true);
-      } }, /* @__PURE__ */ import_react5.default.createElement(import_icons_material5.DeleteOutline, { fontSize: "small", color: "action" })))
+      /* @__PURE__ */ import_react5.default.createElement(import_material3.Tooltip, { title: "Eliminar" }, /* @__PURE__ */ import_react5.default.createElement(
+        import_material3.IconButton,
+        {
+          size: "small",
+          onClick: () => {
+            setFileToDelete(file);
+            setOpenModal(true);
+          }
+        },
+        /* @__PURE__ */ import_react5.default.createElement(import_icons_material5.DeleteOutline, { fontSize: "small", color: "action" })
+      ))
     ))
   ), /* @__PURE__ */ import_react5.default.createElement(
     SCModal,