componentes-sinco 1.0.17 → 1.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +111 -47
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -4
- package/dist/index.d.ts +3 -4
- package/dist/index.js +111 -47
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -461,6 +461,19 @@ var Attachment = ({
|
|
|
461
461
|
const [openModal, setOpenModal] = (0, import_react5.useState)(false);
|
|
462
462
|
const [isDragFile, setIsDragFile] = (0, import_react5.useState)(false);
|
|
463
463
|
const inputRef = (0, import_react5.useRef)(null);
|
|
464
|
+
(0, import_react5.useEffect)(() => {
|
|
465
|
+
if (initialFiles.length > 0) {
|
|
466
|
+
const initials = initialFiles.map((f) => {
|
|
467
|
+
var _a, _b;
|
|
468
|
+
return __spreadProps(__spreadValues({}, f), {
|
|
469
|
+
progress: (_a = f.progress) != null ? _a : 100,
|
|
470
|
+
uploadError: (_b = f.uploadError) != null ? _b : false
|
|
471
|
+
});
|
|
472
|
+
});
|
|
473
|
+
setFiles(initials);
|
|
474
|
+
onChange == null ? void 0 : onChange(initials.map((f) => new File([], f.name, { type: f.type })));
|
|
475
|
+
}
|
|
476
|
+
}, []);
|
|
464
477
|
const handleDrop = (event2) => {
|
|
465
478
|
event2.preventDefault();
|
|
466
479
|
setIsDragFile(false);
|
|
@@ -480,34 +493,15 @@ var Attachment = ({
|
|
|
480
493
|
event2.preventDefault();
|
|
481
494
|
setIsDragFile(false);
|
|
482
495
|
};
|
|
483
|
-
(0, import_react5.useEffect)(() => {
|
|
484
|
-
if (initialFiles.length > 0) {
|
|
485
|
-
setFiles(initialFiles);
|
|
486
|
-
}
|
|
487
|
-
}, [initialFiles]);
|
|
488
|
-
(0, import_react5.useEffect)(() => {
|
|
489
|
-
const interval = setInterval(() => {
|
|
490
|
-
setFiles((prevFiles) => {
|
|
491
|
-
let updated = false;
|
|
492
|
-
const nuevosArchivos = prevFiles.map((file) => {
|
|
493
|
-
if (!file.uploadError && file.progress < 100) {
|
|
494
|
-
updated = true;
|
|
495
|
-
return __spreadProps(__spreadValues({}, file), { progress: Math.min(file.progress + 15, 100) });
|
|
496
|
-
}
|
|
497
|
-
return file;
|
|
498
|
-
});
|
|
499
|
-
return updated ? nuevosArchivos : prevFiles;
|
|
500
|
-
});
|
|
501
|
-
}, 1e3);
|
|
502
|
-
return () => clearInterval(interval);
|
|
503
|
-
}, [files]);
|
|
504
496
|
const handleUpload = (event2) => {
|
|
505
497
|
const newFiles = event2.target.files;
|
|
506
498
|
if (!newFiles) return;
|
|
507
499
|
const nuevosArchivos = [];
|
|
508
500
|
const archivosValidos = [];
|
|
509
501
|
Array.from(newFiles).forEach((file) => {
|
|
510
|
-
const isDuplicatedFile = files.findIndex(
|
|
502
|
+
const isDuplicatedFile = files.findIndex(
|
|
503
|
+
(e) => e.name === file.name && e.size === file.size
|
|
504
|
+
);
|
|
511
505
|
const sizeMB = file.size / (1024 * 1024);
|
|
512
506
|
if (isDuplicatedFile !== -1) {
|
|
513
507
|
setToast({
|
|
@@ -536,7 +530,12 @@ var Attachment = ({
|
|
|
536
530
|
});
|
|
537
531
|
return;
|
|
538
532
|
}
|
|
539
|
-
if (fileAccepted && !file.name.match(
|
|
533
|
+
if (fileAccepted && !file.name.match(
|
|
534
|
+
new RegExp(
|
|
535
|
+
`(${fileAccepted.replace(/\./g, "\\.").replace(/,/g, "|")})$`,
|
|
536
|
+
"i"
|
|
537
|
+
)
|
|
538
|
+
)) {
|
|
540
539
|
setToast({
|
|
541
540
|
type: "error",
|
|
542
541
|
title: "Tipo de archivo no permitido",
|
|
@@ -558,18 +557,23 @@ var Attachment = ({
|
|
|
558
557
|
if (nuevosArchivos.length > 0) {
|
|
559
558
|
setFiles((prev) => {
|
|
560
559
|
const actualizados = [...prev, ...nuevosArchivos];
|
|
561
|
-
|
|
562
|
-
|
|
560
|
+
onChange == null ? void 0 : onChange([
|
|
561
|
+
...archivosValidos,
|
|
562
|
+
...prev.map((f) => new File([], f.name, { type: f.type }))
|
|
563
|
+
]);
|
|
563
564
|
return actualizados;
|
|
564
565
|
});
|
|
565
566
|
}
|
|
566
567
|
event2.target.value = "";
|
|
567
568
|
};
|
|
568
569
|
const deleteFiles = (nameFile) => {
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
570
|
+
setFiles((prev) => {
|
|
571
|
+
const filtered = prev.filter((e) => e.name !== nameFile);
|
|
572
|
+
onChange == null ? void 0 : onChange(
|
|
573
|
+
filtered.map((f) => new File([], f.name, { type: f.type }))
|
|
574
|
+
);
|
|
575
|
+
return filtered;
|
|
576
|
+
});
|
|
573
577
|
};
|
|
574
578
|
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(
|
|
575
579
|
"input",
|
|
@@ -607,7 +611,38 @@ var Attachment = ({
|
|
|
607
611
|
}
|
|
608
612
|
}, sx)
|
|
609
613
|
},
|
|
610
|
-
onLoading ? /* @__PURE__ */ import_react5.default.createElement(
|
|
614
|
+
onLoading ? /* @__PURE__ */ import_react5.default.createElement(
|
|
615
|
+
import_material3.Box,
|
|
616
|
+
{
|
|
617
|
+
display: "flex",
|
|
618
|
+
alignItems: "center",
|
|
619
|
+
justifyContent: "center",
|
|
620
|
+
width: "100%",
|
|
621
|
+
height: "450px"
|
|
622
|
+
},
|
|
623
|
+
/* @__PURE__ */ import_react5.default.createElement(
|
|
624
|
+
import_material3.CircularProgress,
|
|
625
|
+
{
|
|
626
|
+
sx: { width: "60px", height: "60px" },
|
|
627
|
+
variant: "indeterminate"
|
|
628
|
+
}
|
|
629
|
+
)
|
|
630
|
+
) : /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(
|
|
631
|
+
import_material3.Box,
|
|
632
|
+
{
|
|
633
|
+
display: "flex",
|
|
634
|
+
bgcolor: error ? "error.50" : "primary.50",
|
|
635
|
+
borderRadius: "100%",
|
|
636
|
+
p: 1
|
|
637
|
+
},
|
|
638
|
+
/* @__PURE__ */ import_react5.default.createElement(
|
|
639
|
+
import_icons_material5.CloudUploadOutlined,
|
|
640
|
+
{
|
|
641
|
+
color: error ? "error" : "primary",
|
|
642
|
+
fontSize: "medium"
|
|
643
|
+
}
|
|
644
|
+
)
|
|
645
|
+
), /* @__PURE__ */ import_react5.default.createElement(
|
|
611
646
|
import_material3.Stack,
|
|
612
647
|
{
|
|
613
648
|
width: "100%",
|
|
@@ -616,18 +651,27 @@ var Attachment = ({
|
|
|
616
651
|
justifyContent: compact ? "space-between" : "center",
|
|
617
652
|
gap: 1
|
|
618
653
|
},
|
|
619
|
-
/* @__PURE__ */ import_react5.default.createElement(
|
|
620
|
-
import_material3.
|
|
654
|
+
/* @__PURE__ */ import_react5.default.createElement(
|
|
655
|
+
import_material3.Stack,
|
|
621
656
|
{
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
overflow: "hidden",
|
|
626
|
-
textOverflow: "ellipsis",
|
|
627
|
-
maxWidth: "450px"
|
|
657
|
+
flexDirection: "column",
|
|
658
|
+
alignItems: compact ? "start" : "center",
|
|
659
|
+
gap: 0.5
|
|
628
660
|
},
|
|
629
|
-
|
|
630
|
-
|
|
661
|
+
/* @__PURE__ */ import_react5.default.createElement(import_material3.Typography, { variant: "body2", color: "text.primary" }, "Arrastrar o adjuntar archivos"),
|
|
662
|
+
/* @__PURE__ */ import_react5.default.createElement(
|
|
663
|
+
import_material3.Typography,
|
|
664
|
+
{
|
|
665
|
+
variant: "caption",
|
|
666
|
+
color: error ? "error" : "text.secondary",
|
|
667
|
+
whiteSpace: "nowrap",
|
|
668
|
+
overflow: "hidden",
|
|
669
|
+
textOverflow: "ellipsis",
|
|
670
|
+
maxWidth: "450px"
|
|
671
|
+
},
|
|
672
|
+
error ? `${fileAccepted || "DOCX, XML, PNG, JPG"} \u2022 Archivo no soportado` : `${fileAccepted || "DOCX, XML, PNG, JPG"} \u2022 Max. ${maxSize}MB`
|
|
673
|
+
)
|
|
674
|
+
),
|
|
631
675
|
/* @__PURE__ */ import_react5.default.createElement(
|
|
632
676
|
import_material3.Button,
|
|
633
677
|
{
|
|
@@ -669,7 +713,13 @@ var Attachment = ({
|
|
|
669
713
|
}
|
|
670
714
|
}
|
|
671
715
|
},
|
|
672
|
-
/* @__PURE__ */ import_react5.default.createElement(import_material3.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ import_react5.default.createElement(
|
|
716
|
+
/* @__PURE__ */ import_react5.default.createElement(import_material3.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ import_react5.default.createElement(
|
|
717
|
+
import_icons_material5.UploadFileOutlined,
|
|
718
|
+
{
|
|
719
|
+
color: file.uploadError ? "error" : "primary",
|
|
720
|
+
fontSize: "small"
|
|
721
|
+
}
|
|
722
|
+
), /* @__PURE__ */ import_react5.default.createElement(import_material3.Stack, { width: "100%" }, /* @__PURE__ */ import_react5.default.createElement(
|
|
673
723
|
import_material3.Typography,
|
|
674
724
|
{
|
|
675
725
|
variant: "body2",
|
|
@@ -677,15 +727,29 @@ var Attachment = ({
|
|
|
677
727
|
whiteSpace: "nowrap",
|
|
678
728
|
overflow: "hidden",
|
|
679
729
|
textOverflow: "ellipsis",
|
|
680
|
-
maxWidth: "
|
|
730
|
+
maxWidth: "310px"
|
|
681
731
|
},
|
|
682
732
|
file.name
|
|
683
|
-
), /* @__PURE__ */ import_react5.default.createElement(
|
|
733
|
+
), /* @__PURE__ */ import_react5.default.createElement(
|
|
734
|
+
import_material3.Typography,
|
|
735
|
+
{
|
|
736
|
+
variant: "caption",
|
|
737
|
+
color: file.uploadError ? "error" : "text.secondary"
|
|
738
|
+
},
|
|
739
|
+
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}`
|
|
740
|
+
))),
|
|
684
741
|
/* @__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" }))),
|
|
685
|
-
/* @__PURE__ */ import_react5.default.createElement(import_material3.Tooltip, { title: "Eliminar" }, /* @__PURE__ */ import_react5.default.createElement(
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
742
|
+
/* @__PURE__ */ import_react5.default.createElement(import_material3.Tooltip, { title: "Eliminar" }, /* @__PURE__ */ import_react5.default.createElement(
|
|
743
|
+
import_material3.IconButton,
|
|
744
|
+
{
|
|
745
|
+
size: "small",
|
|
746
|
+
onClick: () => {
|
|
747
|
+
setFileToDelete(file);
|
|
748
|
+
setOpenModal(true);
|
|
749
|
+
}
|
|
750
|
+
},
|
|
751
|
+
/* @__PURE__ */ import_react5.default.createElement(import_icons_material5.DeleteOutline, { fontSize: "small", color: "action" })
|
|
752
|
+
))
|
|
689
753
|
))
|
|
690
754
|
), /* @__PURE__ */ import_react5.default.createElement(
|
|
691
755
|
SCModal,
|