componentes-sinco 1.0.36-rc.2 → 1.0.36

package/dist/index.cjs

@@ -82,6 +82,7 @@ __export(index_exports, {
   ADCSincoTheme: () => ADCSincoTheme,
   AdproSincoTheme: () => AdproSincoTheme,
   Attachment: () => Attachment,
+  AttachmentMobile: () => AttachmentMobile,
   BasicMenu: () => BasicMenu,
   CALENDAR_CONSTANTS: () => CALENDAR_CONSTANTS,
   Calendar: () => Calendar,
@@ -4908,12 +4909,338 @@ var SCActivityCalendar = ({
   ))));
 };
 
+// src/Components/Adjuntar/mobile/AdjuntarMobile.tsx
+var import_react52 = __toESM(require("react"), 1);
+
+// src/Components/Adjuntar/mobile/components/button.tsx
+var import_react51 = __toESM(require("react"), 1);
+var import_material35 = require("@mui/material");
+
+// src/Components/Adjuntar/mobile/components/Utils.tsx
+var MuiIcons4 = __toESM(require("@mui/icons-material"), 1);
+var import_icons_material12 = require("@mui/icons-material");
+var getAttachmentIcon = (iconName) => {
+  return iconName && MuiIcons4[iconName] ? MuiIcons4[iconName] : import_icons_material12.AttachFileOutlined;
+};
+var getAttachmentColor = (state) => {
+  const colors = {
+    primary: "primary.50",
+    success: "success.50",
+    warning: "warning.50"
+  };
+  return colors[state];
+};
+
+// src/Components/Adjuntar/mobile/components/button.tsx
+var AttachmentButton = ({ buttonAttachment, open, setOpen }) => {
+  var _a, _b, _c, _d;
+  const handleToggle = () => {
+    if (setOpen) {
+      setOpen(!open);
+    }
+  };
+  const Icon = (0, import_react51.useMemo)(
+    () => getAttachmentIcon(buttonAttachment == null ? void 0 : buttonAttachment.icon),
+    [buttonAttachment == null ? void 0 : buttonAttachment.icon]
+  );
+  if (!buttonAttachment) return null;
+  return /* @__PURE__ */ import_react51.default.createElement(import_react51.default.Fragment, null, buttonAttachment && /* @__PURE__ */ import_react51.default.createElement(
+    import_material35.Button,
+    {
+      "data-testid": "test-buttonModal",
+      color: (_a = buttonAttachment == null ? void 0 : buttonAttachment.color) != null ? _a : "primary",
+      onClick: handleToggle,
+      variant: (_b = buttonAttachment == null ? void 0 : buttonAttachment.variant) != null ? _b : "text",
+      size: (_c = buttonAttachment == null ? void 0 : buttonAttachment.size) != null ? _c : "small",
+      startIcon: (buttonAttachment == null ? void 0 : buttonAttachment.iconPosition) === "left" && /* @__PURE__ */ import_react51.default.createElement(Icon, null),
+      endIcon: (buttonAttachment == null ? void 0 : buttonAttachment.iconPosition) === "right" && /* @__PURE__ */ import_react51.default.createElement(Icon, null)
+    },
+    capitalize((_d = buttonAttachment == null ? void 0 : buttonAttachment.text) != null ? _d : "Adjuntar")
+  ));
+};
+
+// src/Components/Adjuntar/mobile/AdjuntarMobile.tsx
+var import_material36 = require("@mui/material");
+var import_CssBaseline = __toESM(require("@mui/material/CssBaseline"), 1);
+var import_system = require("@mui/system");
+var import_icons_material13 = require("@mui/icons-material");
+var AttachmentMobile = ({
+  buttonAttachment,
+  maxSize = 400,
+  fileAccepted = "",
+  initialFiles,
+  deleteAction,
+  children,
+  onChange,
+  sx
+}) => {
+  const [files, setFiles] = (0, import_react52.useState)([]);
+  const [toast, setToast] = (0, import_react52.useState)(null);
+  const [open, setOpen] = import_react52.default.useState(false);
+  const toggleAttachment = (newOpen) => () => {
+    setOpen(newOpen);
+  };
+  const inputRef = (0, import_react52.useRef)(null);
+  const handleUpload = (event2) => {
+    const newFiles = event2.target.files;
+    if (!newFiles) return;
+    const nuevosArchivos = [];
+    const archivosValidos = [];
+    Array.from(newFiles).forEach((file) => {
+      const isDuplicateFile = files.some(
+        (existingFile) => existingFile.name === file.name && existingFile.size === file.size
+      );
+      const sizeMB = file.size / (1024 * 1024);
+      if (isDuplicateFile) {
+        setToast({
+          type: "error",
+          title: "Archivo duplicado",
+          listITems: [`El archivo "${file.name}" ya existe.`],
+          seeMore: true,
+          time: 5
+        });
+        return;
+      }
+      if (sizeMB > maxSize) {
+        nuevosArchivos.push({
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          progress: 0,
+          uploadError: true
+        });
+        setToast({
+          type: "error",
+          title: "Carga fallida",
+          seeMore: true,
+          listITems: [`El archivo "${file.name}" supera el l\xEDmite de ${maxSize}MB.`],
+          time: 5
+        });
+        return;
+      }
+      if (fileAccepted && !file.name.match(
+        new RegExp(
+          `(${fileAccepted.replace(/\./g, "\\.").replace(/,/g, "|")})$`,
+          "i"
+        )
+      )) {
+        setToast({
+          type: "error",
+          title: "Tipo de archivo no permitido",
+          listITems: [`El archivo "${file.name}" no es un tipo permitido.`],
+          seeMore: true,
+          time: 5
+        });
+        return;
+      }
+      nuevosArchivos.push({
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        progress: 0,
+        uploadError: false
+      });
+      archivosValidos.push(file);
+    });
+    if (nuevosArchivos.length > 0) {
+      setFiles((prevFiles) => {
+        const updatedFiles = [...prevFiles, ...nuevosArchivos];
+        if (archivosValidos.length > 0) {
+          onChange == null ? void 0 : onChange([
+            ...archivosValidos,
+            ...prevFiles.map((f) => new File([], f.name, { type: f.type }))
+          ]);
+        }
+        return updatedFiles;
+      });
+    }
+    setOpen(false);
+    event2.target.value = "";
+  };
+  const handleDeleteFile = (fileToRemove) => __async(null, null, function* () {
+    try {
+      if (deleteAction) {
+        yield deleteAction(fileToRemove.name);
+      }
+      const updatedFiles = files.filter(
+        (file) => !(file.name === fileToRemove.name && file.size === fileToRemove.size)
+      );
+      setFiles(updatedFiles);
+      if (onChange) {
+        const remainingValidFiles = updatedFiles.filter((f) => !f.uploadError).map((f) => new File([], f.name, { type: f.type }));
+        onChange(remainingValidFiles);
+      }
+      setToast({
+        type: "success",
+        title: "Archivo eliminado",
+        listITems: [`El archivo "${fileToRemove.name}" ha sido eliminado exitosamente.`],
+        seeMore: true,
+        time: 3
+      });
+    } catch (error) {
+      setToast({
+        type: "error",
+        title: "Error al eliminar",
+        listITems: [`No se pudo eliminar el archivo "${fileToRemove.name}".`],
+        seeMore: true,
+        time: 5
+      });
+    }
+  });
+  const AttachtmentActions = [
+    { icon: /* @__PURE__ */ import_react52.default.createElement(import_icons_material13.FolderOpenOutlined, { type: "file", color: "primary" }), color: "primary", label: "Galer\xEDa", onClick: () => alert("diste click en Galeria") },
+    { icon: /* @__PURE__ */ import_react52.default.createElement(import_icons_material13.PhotoCameraOutlined, { type: "file", color: "success" }), color: "success", label: "C\xE1mara", onClick: () => alert("diste click en Camara") },
+    { icon: /* @__PURE__ */ import_react52.default.createElement(import_icons_material13.FolderOpenOutlined, { type: "file", color: "warning" }), color: "warning", label: "Archivos", onClick: () => {
+      var _a;
+      return (_a = inputRef.current) == null ? void 0 : _a.click();
+    } }
+  ];
+  (0, import_react52.useEffect)(() => {
+    if (initialFiles && initialFiles.length > 0) {
+      setFiles(initialFiles);
+    }
+  }, []);
+  return /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { display: "flex", flexDirection: "column", gap: 1 }, /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center", sx }, children, /* @__PURE__ */ import_react52.default.createElement(
+    AttachmentButton,
+    {
+      buttonAttachment,
+      open,
+      setOpen
+    }
+  )), /* @__PURE__ */ import_react52.default.createElement(import_CssBaseline.default, null), /* @__PURE__ */ import_react52.default.createElement(
+    import_material36.SwipeableDrawer,
+    {
+      ModalProps: {
+        sx: {
+          "& .MuiPaper-root": {
+            borderRadius: "16px 16px 0 0"
+          }
+        }
+      },
+      anchor: "bottom",
+      swipeAreaWidth: 56,
+      open,
+      onClose: toggleAttachment(false),
+      onOpen: toggleAttachment(true)
+    },
+    toast && /* @__PURE__ */ import_react52.default.createElement(SCToastNotification, __spreadValues({}, toast)),
+    /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { display: "flex", flexDirection: "column", alignItems: "center", p: 2, gap: 2 }, /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center", gap: 1, p: 1 }, /* @__PURE__ */ import_react52.default.createElement(import_material36.Typography, { variant: "h6", color: "text.primary" }, "Agregar adjuntos"), /* @__PURE__ */ import_react52.default.createElement(import_material36.IconButton, { size: "medium", onClick: toggleAttachment(false) }, /* @__PURE__ */ import_react52.default.createElement(import_icons_material13.CloseOutlined, { color: "action" }))), /* @__PURE__ */ import_react52.default.createElement(
+      "input",
+      {
+        type: "file",
+        multiple: true,
+        hidden: true,
+        ref: inputRef,
+        onChange: handleUpload
+      }
+    ), /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { display: "flex", justifyContent: "space-around", alignItems: "center", width: "100%", gap: 2 }, AttachtmentActions.map((option, index) => /* @__PURE__ */ import_react52.default.createElement(
+      import_system.Box,
+      {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        width: 100,
+        height: 80,
+        borderRadius: 1,
+        bgcolor: "grey.100",
+        border: "1px solid",
+        borderColor: "grey.50",
+        boxShadow: 1,
+        justifyContent: "center",
+        p: 1,
+        gap: 1,
+        onClick: option.onClick,
+        sx: {
+          cursor: "pointer"
+        }
+      },
+      /* @__PURE__ */ import_react52.default.createElement(
+        import_material36.IconButton,
+        {
+          sx: {
+            bgcolor: getAttachmentColor(option.color)
+          },
+          size: "large"
+        },
+        option.icon
+      ),
+      /* @__PURE__ */ import_react52.default.createElement(import_material36.Typography, { variant: "body2", color: "text.primary" }, option.label)
+    ))))
+  ), files.length > 0 && /* @__PURE__ */ import_react52.default.createElement(
+    import_material36.Stack,
+    {
+      "data-testid": "ContenedorArchivosAdjuntos",
+      id: "ContenedorArchivosAdjuntos",
+      width: "100%",
+      sx: __spreadValues({
+        overflowY: "auto"
+      }, files.length > 5 && {
+        maxHeight: 250
+      }),
+      spacing: 1
+    },
+    files.map((file) => /* @__PURE__ */ import_react52.default.createElement(
+      import_material36.Stack,
+      {
+        height: 46,
+        key: file.name + (file.uploadError ? "_error" : ""),
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 2,
+        padding: 1,
+        borderRadius: 1,
+        sx: {
+          backgroundColor: file.uploadError ? "error.50" : "transparent",
+          ":hover": {
+            backgroundColor: file.uploadError ? "error.100" : "primary.50"
+          }
+        }
+      },
+      /* @__PURE__ */ import_react52.default.createElement(import_material36.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ import_react52.default.createElement(
+        import_icons_material13.UploadFileOutlined,
+        {
+          color: file.uploadError ? "error" : "primary",
+          fontSize: "small"
+        }
+      ), /* @__PURE__ */ import_react52.default.createElement(import_material36.Stack, { width: "100%" }, /* @__PURE__ */ import_react52.default.createElement(
+        import_material36.Typography,
+        {
+          variant: "body2",
+          color: "text.primary",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          maxWidth: "310px"
+        },
+        file.name
+      ), /* @__PURE__ */ import_react52.default.createElement(
+        import_material36.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_react52.default.createElement(import_material36.Tooltip, { title: "Eliminar" }, /* @__PURE__ */ import_react52.default.createElement(
+        import_material36.IconButton,
+        {
+          size: "small",
+          onClick: () => handleDeleteFile(file),
+          "aria-label": `Eliminar ${file.name}`
+        },
+        /* @__PURE__ */ import_react52.default.createElement(import_icons_material13.DeleteOutline, { fontSize: "small", color: "action" })
+      ))
+    ))
+  ));
+};
+
 // src/Theme/index.ts
 var import_styles3 = require("@mui/material/styles");
 
 // src/Theme/components.ts
-var import_react51 = __toESM(require("react"), 1);
-var import_icons_material12 = require("@mui/icons-material");
+var import_react53 = __toESM(require("react"), 1);
+var import_icons_material14 = require("@mui/icons-material");
 var components = {
   MuiSelect: {
     styleOverrides: {
@@ -5610,10 +5937,10 @@ var components = {
   MuiAlert: {
     defaultProps: {
       iconMapping: {
-        success: import_react51.default.createElement(import_icons_material12.CheckCircleRounded),
-        error: import_react51.default.createElement(import_icons_material12.ErrorRounded),
-        warning: import_react51.default.createElement(import_icons_material12.WarningRounded),
-        info: import_react51.default.createElement(import_icons_material12.InfoRounded)
+        success: import_react53.default.createElement(import_icons_material14.CheckCircleRounded),
+        error: import_react53.default.createElement(import_icons_material14.ErrorRounded),
+        warning: import_react53.default.createElement(import_icons_material14.WarningRounded),
+        info: import_react53.default.createElement(import_icons_material14.InfoRounded)
       }
     },
     variants: [
@@ -6451,8 +6778,8 @@ var paletteADC = __spreadValues({
 }, BasicPalette);
 
 // src/Theme/breakpoints.ts
-var import_system = require("@mui/system");
-var breakpoints = (0, import_system.createBreakpoints)({
+var import_system2 = require("@mui/system");
+var breakpoints = (0, import_system2.createBreakpoints)({
   values: {
     xs: 0,
     sm: 600,
@@ -6656,6 +6983,7 @@ var ADCSincoTheme = (0, import_styles3.createTheme)(__spreadValues({}, ADCTheme)
   ADCSincoTheme,
   AdproSincoTheme,
   Attachment,
+  AttachmentMobile,
   BasicMenu,
   CALENDAR_CONSTANTS,
   Calendar,