@sinco/react 1.2.2-rc.8 → 1.2.2

package/index.esm.js

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import React__default, { Children, isValidElement, cloneElement, useState, useCallback, useEffect } from 'react';
-import { CheckCircleRounded, ErrorRounded, WarningRounded, InfoRounded, Close, KeyboardArrowDown, KeyboardArrowUp } from '@mui/icons-material';
+import { CheckCircleRounded, ErrorRounded, WarningRounded, InfoRounded, Close, KeyboardArrowDown, KeyboardArrowUp, AttachFile, UploadFileOutlined, Autorenew, CancelOutlined, DeleteOutline } from '@mui/icons-material';
 import { withEmotionCache, ThemeContext, keyframes, css } from '@emotion/react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
+import { useDropzone } from 'react-dropzone';
 
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
@@ -14,6 +15,9 @@ function _arrayLikeToArray(r, a) {
 function _arrayWithHoles(r) {
   if (Array.isArray(r)) return r;
 }
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
 function asyncGeneratorStep(n, t, e, r, o, a, c) {
   try {
     var i = n[a](c),
@@ -47,6 +51,9 @@ function _defineProperty(e, r, t) {
     writable: !0
   }) : e[r] = t, e;
 }
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
 function _iterableToArrayLimit(r, l) {
   var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
   if (null != t) {
@@ -77,6 +84,9 @@ function _iterableToArrayLimit(r, l) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -402,6 +412,9 @@ function _regeneratorRuntime() {
 function _slicedToArray(r, e) {
   return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
 }
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
@@ -7793,8 +7806,33 @@ var components = {
       icon: {
         opacity: "70%"
       },
-      deleteIcon: function deleteIcon(_ref2) {
+      deleteIconSmall: {
+        height: 16,
+        width: 16
+      },
+      deleteIconMedium: {
+        height: 20,
+        width: 20
+      },
+      sizeSmall: {
+        height: 16
+      },
+      sizeMedium: {
+        height: 20
+      },
+      avatarMedium: {
+        height: 18,
+        width: 18
+      },
+      colorDefault: function colorDefault(_ref2) {
         var theme = _ref2.theme;
+        return {
+          backgroundColor: theme.palette["default"].main,
+          color: theme.palette["default"].contrastText
+        };
+      },
+      deleteIcon: function deleteIcon(_ref3) {
+        var theme = _ref3.theme;
         return {
           variants: [{
             props: {
@@ -7830,40 +7868,18 @@ var components = {
             }
           }, {
             props: {
-              variant: "outlined",
+              variant: "filled",
               color: "default"
             },
             style: {
-              color: theme.palette.action.active,
-              opacity: "54%",
-              ":hover": {
-                color: theme.palette.action.active,
-                opacity: "54%"
-              }
+              color: theme.palette["default"].contrastText,
+              opacity: "30%"
             }
           }]
         };
       },
-      deleteIconSmall: {
-        height: 16,
-        width: 16
-      },
-      deleteIconMedium: {
-        height: 20,
-        width: 20
-      },
-      sizeSmall: {
-        height: 16
-      },
-      sizeMedium: {
-        height: 20
-      },
-      avatarMedium: {
-        height: 18,
-        width: 18
-      },
-      avatar: function avatar(_ref3) {
-        var theme = _ref3.theme;
+      avatar: function avatar(_ref4) {
+        var theme = _ref4.theme;
         return {
           lineHeight: 1.8,
           variants: [{
@@ -7925,22 +7941,24 @@ var components = {
               color: "default"
             },
             style: {
-              backgroundColor: theme.palette.action.active,
-              color: theme.palette.background.paper,
-              opacity: "54%"
+              backgroundColor: theme.palette.grey[400],
+              color: theme.palette.background.paper
+            }
+          }, {
+            props: {
+              variant: "filled",
+              color: "default"
+            },
+            style: {
+              backgroundColor: theme.palette["default"].contrastText,
+              color: theme.palette.background.paper
             }
           }]
         };
       },
-      label: function label(_ref4) {
-        var theme = _ref4.theme;
-        return _objectSpread2({}, theme.typography.caption);
-      },
-      filled: function filled(_ref5) {
+      label: function label(_ref5) {
         var theme = _ref5.theme;
-        return {
-          color: theme.palette.background.paper
-        };
+        return _objectSpread2({}, theme.typography.caption);
       },
       root: function root(_ref6) {
         var theme = _ref6.theme;
@@ -7948,6 +7966,55 @@ var components = {
           height: "inherit",
           borderRadius: 4,
           variants: [{
+            props: {
+              variant: "outlined",
+              color: "default"
+            },
+            style: {
+              border: "1px solid ".concat(theme.palette.grey[400]),
+              backgroundColor: "transparent !important",
+              color: theme.palette["default"].contrastText,
+              ":hover": {
+                backgroundColor: theme.palette["default"].main
+              }
+            }
+          }, {
+            props: {
+              variant: "standard",
+              color: "default"
+            },
+            style: {
+              backgroundColor: theme.palette["default"].main,
+              color: theme.palette["default"].contrastText,
+              ":hover": {
+                backgroundColor: theme.palette["default"].dark
+              }
+            }
+          }, {
+            props: {
+              variant: "filled",
+              color: "default"
+            },
+            style: {
+              backgroundColor: theme.palette.grey[50],
+              color: theme.palette["default"].contrastText,
+              ":hover": {
+                backgroundColor: theme.palette.grey[100]
+              }
+            }
+          }, {
+            props: {
+              variant: "filled",
+              color: "default"
+            },
+            style: {
+              backgroundColor: theme.palette.grey[50],
+              color: theme.palette["default"].contrastText,
+              ":hover": {
+                backgroundColor: theme.palette.grey[100]
+              }
+            }
+          }, {
             props: {
               variant: "standard",
               avatar: true
@@ -8072,11 +8139,48 @@ var components = {
         padding: "0px 0px",
         minWidth: 0
       },
-      icon: {
-        padding: "4px",
-        marginRight: 0,
-        display: "flex",
-        alignItems: "center"
+      icon: function icon(_ref7) {
+        var theme = _ref7.theme;
+        return {
+          padding: "4px",
+          marginRight: "8px",
+          display: "flex",
+          alignItems: "center",
+          borderRadius: "50%",
+          variants: [{
+            props: {
+              variant: "standard",
+              severity: "info"
+            },
+            style: {
+              backgroundColor: theme.palette.info[100]
+            }
+          }, {
+            props: {
+              variant: "standard",
+              severity: "error"
+            },
+            style: {
+              backgroundColor: theme.palette.error[100]
+            }
+          }, {
+            props: {
+              variant: "standard",
+              severity: "success"
+            },
+            style: {
+              backgroundColor: theme.palette.success[100]
+            }
+          }, {
+            props: {
+              variant: "standard",
+              severity: "warning"
+            },
+            style: {
+              backgroundColor: theme.palette.warning[100]
+            }
+          }]
+        };
       },
       action: {
         display: "flex",
@@ -8190,9 +8294,9 @@ var components = {
             size: "small"
           },
           style: {
-            width: 32,
-            height: 32,
-            minHeight: 32,
+            width: 28,
+            height: 28,
+            minHeight: 28,
             svg: {
               height: 20,
               width: 20
@@ -8515,43 +8619,28 @@ var components = {
       dense: false
     },
     styleOverrides: {
-      root: {},
-      dense: {}
-    }
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      multiline: {},
-      root: {
-        marginBlock: " 4.4px ",
-        lineHeight: "20px",
-        letterSpacing: 0.17
-      },
-      dense: {
-        lineHeight: "14.3px",
-        letterSpacing: 0.15
-      }
-    }
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: {
-        padding: "8px 16px 8px 16px"
+      padding: {
+        ".MuiListItem-padding": {
+          paddingBlock: 1
+        }
       },
       dense: {
-        padding: "4px 16px 4px 16px"
+        ".MuiListItem-dense": {
+          padding: "0.25px 0px 0.25px 16px"
+        }
       }
     }
   },
   MuiListItemButton: {
     styleOverrides: {
       dense: {
-        marginBlock: 0,
-        padding: 0
+        padding: "4px 16px 4px 16px "
       },
       root: {
-        marginBlock: 0,
-        padding: 0
+        padding: "8.21px 16px",
+        ".MuiListItemText-multiline": {
+          marginBlock: "4px"
+        }
       }
     }
   },
@@ -17293,6 +17382,253 @@ var IncognitIconOutlined = createSvgIcon(React__default.createElement("svg", {
 var Incognit = IncognitIcon;
 var IncognitOutlined = IncognitIconOutlined;
 
+var AdjuntarArchivo = function AdjuntarArchivo(_ref) {
+  var compact = _ref.compact,
+    sx = _ref.sx,
+    controlArchivo = _ref.controlArchivo;
+  var _useState = useState(function () {
+      var guardarArchivo = localStorage.getItem("archivos");
+      return guardarArchivo ? JSON.parse(guardarArchivo).map(function (file) {
+        return {
+          file: new File([file], file.name),
+          progress: 0,
+          loadingComplete: false
+        };
+      }) : [];
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    archivos = _useState2[0],
+    setArchivos = _useState2[1];
+  useEffect(function () {
+    setArchivos([]);
+  }, []);
+  useEffect(function () {
+    archivos.forEach(function (archivo, index) {
+      if (archivo.progress < 100) {
+        var intervalo = setInterval(function () {
+          setArchivos(function (prevArchivos) {
+            return prevArchivos.map(function (item, idx) {
+              return idx === index ? _objectSpread2(_objectSpread2({}, item), {}, {
+                progress: Math.min(item.progress + 10, 100),
+                loadingComplete: Math.min(item.progress + 10, 100) === 100
+              }) : item;
+            });
+          });
+        }, 1000);
+        return function () {
+          return clearInterval(intervalo);
+        };
+      }
+    });
+  }, [archivos]);
+  var validarArchivoDuplicado = function validarArchivoDuplicado(file) {
+    var archivoDuplicado = archivos.some(function (archivoExistente) {
+      return archivoExistente.file.name === file.name;
+    });
+    if (archivoDuplicado) {
+      return {
+        code: "archivo-duplicado",
+        message: "No se puede elegir el mismo archivo, seleccione otro por favor"
+      };
+    }
+    return null;
+  };
+  var _useDropzone = useDropzone({
+      validator: validarArchivoDuplicado,
+      multiple: true,
+      onDrop: function onDrop(acceptedFiles) {
+        setArchivos(function (prev) {
+          var actualizarArchivos = [].concat(_toConsumableArray(prev), _toConsumableArray(acceptedFiles.map(function (file) {
+            return {
+              file: file,
+              progress: 0,
+              loadingComplete: false
+            };
+          })));
+          localStorage.setItem("archivos", JSON.stringify(actualizarArchivos.map(function (_ref2) {
+            var file = _ref2.file;
+            return file;
+          })));
+          return actualizarArchivos;
+        });
+      }
+    }),
+    getRootProps = _useDropzone.getRootProps,
+    getInputProps = _useDropzone.getInputProps;
+  var Eliminar = useCallback(function (index) {
+    setArchivos(function (prevFiles) {
+      var actualizarArchivos = prevFiles.filter(function (_, indexIteration) {
+        return indexIteration !== index;
+      });
+      localStorage.setItem("archivos", JSON.stringify(actualizarArchivos.map(function (_ref3) {
+        var file = _ref3.file;
+        return file;
+      })));
+      return actualizarArchivos;
+    });
+  }, [setArchivos]);
+  var Editar = useCallback(function (index) {
+    var input = document.createElement('input');
+    input.type = 'file';
+    input.onchange = function (event) {
+      var newFile = event.target.files[0];
+      if (newFile) {
+        setArchivos(function (prevFiles) {
+          var actualizarArchivos = prevFiles.map(function (archivo, idx) {
+            return idx === index ? _objectSpread2(_objectSpread2({}, archivo), {}, {
+              file: newFile,
+              progress: 0,
+              loadingComplete: false
+            }) : archivo;
+          });
+          localStorage.setItem("archivos", JSON.stringify(actualizarArchivos.map(function (_ref4) {
+            var file = _ref4.file;
+            return file;
+          })));
+          return actualizarArchivos;
+        });
+      }
+    };
+    input.click();
+  }, [setArchivos]);
+  var controlEventoAdjuntar = function controlEventoAdjuntar(e) {
+    e.stopPropagation();
+    controlArchivo(archivos.map(function (e) {
+      return e.file;
+    }));
+    setArchivos([]);
+    localStorage.removeItem("archivos");
+  };
+  return React__default.createElement(Stack, {
+    width: "100%",
+    alignItems: "center",
+    bgcolor: "transparent",
+    height: "100%",
+    gap: 1
+  }, React__default.createElement(Stack, _objectSpread2({
+    id: "dropzone",
+    alignItems: "center",
+    flexDirection: compact === true ? "row" : "column",
+    justifyContent: "center",
+    bgcolor: "transparent",
+    width: "100%",
+    boxShadow: 1,
+    gap: 1,
+    borderRadius: 1,
+    py: 3,
+    sx: _objectSpread2({
+      border: function border(theme) {
+        return "1px dashed ".concat(theme.palette.grey[500]);
+      },
+      cursor: "pointer",
+      ":hover": {
+        backgroundColor: "action.hover"
+      }
+    }, sx)
+  }, getRootProps()), React__default.createElement("input", _objectSpread2({}, getInputProps())), React__default.createElement("img", {
+    src: "src/assets/logoAdjuntarArchivos.svg",
+    alt: "icon"
+  }), React__default.createElement(Stack, {
+    gap: 0.5
+  }, React__default.createElement(Typography, {
+    variant: "body2",
+    color: "text.primary"
+  }, "Arrastrar o adjuntar archivos"), React__default.createElement(Typography, {
+    variant: "caption",
+    color: "text.secondary"
+  }, "DOCX, XML, PNG, JPG \u2022 Max 00 MB")), React__default.createElement(Button, {
+    size: "small",
+    startIcon: React__default.createElement(AttachFile, {
+      fontSize: "inherit"
+    }),
+    onClick: controlEventoAdjuntar
+  }, "Adjuntar")), React__default.createElement(Stack, {
+    id: "informacion",
+    width: "100%",
+    height: "auto",
+    gap: 1,
+    sx: {
+      overflowY: "auto"
+    }
+  }, archivos.map(function (_ref5, index) {
+    var file = _ref5.file,
+      progress = _ref5.progress,
+      loadingComplete = _ref5.loadingComplete;
+    return React__default.createElement(Stack, {
+      flexDirection: "row",
+      key: "".concat(file.name, "-").concat(index),
+      width: "100%",
+      gap: 1,
+      borderRadius: 0.5,
+      sx: {
+        ":hover": {
+          backgroundColor: "action.hover"
+        }
+      }
+    }, React__default.createElement(Stack, {
+      width: "100%",
+      alignItems: "center",
+      flexDirection: "row",
+      gap: 2,
+      p: 1
+    }, React__default.createElement(Stack, {
+      width: "100%",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 0.5
+    }, React__default.createElement(UploadFileOutlined, {
+      color: "primary",
+      fontSize: "small"
+    }), React__default.createElement(Stack, {
+      flexDirection: "column",
+      width: "100%"
+    }, React__default.createElement(Typography, {
+      variant: "body2",
+      color: "text.primary"
+    }, file.name), React__default.createElement(Typography, {
+      variant: "caption",
+      color: "text.secondary"
+    }, loadingComplete ? "".concat(new Date().toLocaleDateString(), " \u2022 ").concat(Math.round(file.size / 1024), " KB") : "  Cargando... \u2022 ".concat(Math.round(file.size / 1024), " KB")), !loadingComplete && React__default.createElement(LinearProgress, {
+      color: "primary",
+      variant: "determinate",
+      value: progress,
+      sx: {
+        width: "100%"
+      }
+    })))), React__default.createElement(Box$1, {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    }, !loadingComplete ? React__default.createElement(React__default.Fragment, null, React__default.createElement(IconButton, {
+      id: "editarArchivo",
+      size: "small",
+      onClick: function onClick() {
+        return Editar(index);
+      }
+    }, React__default.createElement(Autorenew, {
+      fontSize: "small",
+      color: "action"
+    })), React__default.createElement(IconButton, {
+      id: "EliminarArchivo",
+      size: "small",
+      onClick: function onClick() {
+        return Eliminar(index);
+      }
+    }, React__default.createElement(CancelOutlined, {
+      fontSize: "small",
+      color: "action"
+    }))) : React__default.createElement(IconButton, {
+      size: "medium",
+      onClick: function onClick() {
+        return Eliminar(index);
+      }
+    }, React__default.createElement(DeleteOutline, {
+      fontSize: "small",
+      color: "action"
+    }))));
+  })));
+};
+
 /**
  * @license
  * Copyright 2021 Google LLC
@@ -21706,4 +22042,4 @@ var useDynamicColor = function useDynamicColor(url) {
   };
 };
 
-export { AdproSincoTheme, CardRadio, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, FooterAction, Incognit, IncognitIcon, IncognitIconOutlined, IncognitOutlined, PageHeaderComponent as PageHeader, PageHeaderComponent, PageHeaderWraps, ProgressSinco, SincoTheme, ToastNotification, useDynamicColor };
+export { AdjuntarArchivo, AdproSincoTheme, CardRadio, DrawerComponent as Drawer, DrawerComponent, DynamicColor, EmptyStateComponent as EmptyState, EmptyStateComponent, FooterAction, Incognit, IncognitIcon, IncognitIconOutlined, IncognitOutlined, PageHeaderComponent as PageHeader, PageHeaderComponent, PageHeaderWraps, ProgressSinco, SincoTheme, ToastNotification, useDynamicColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sinco/react",
-  "version": "1.2.2-rc.8",
+  "version": "1.2.2",
   "description": "package for the configuration of mui react sinco",
   "private": false,
   "license": "MIT",

package/src/lib/Components/index.d.ts

@@ -6,3 +6,5 @@ export * from "./PageHeader";
 export * from "./ProgressSinco";
 export * from "./CardRadio";
 export * from "./Icons";
+export * from './adjuntar/';
+export * from './MultiSelect/';