desk-kit 2.1.2 → 2.1.3

package/dist/components/document/DocumentItem.js

@@ -198,7 +198,7 @@ var DocumentItem = function DocumentItem(props) {
     }
   }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
     src: iconSrc,
-    alt: filename,
+    alt: "Icono del tipo de documento",
     width: 100,
     height: 117
   })), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {

package/dist/components/document/Documents.js

@@ -20,9 +20,11 @@ var _WifiOff = _interopRequireDefault(require("@mui/icons-material/WifiOff"));
 var _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _DragAndDropAnimation = _interopRequireDefault(require("../draganddropanimation/DragAndDropAnimation"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
@@ -143,9 +145,13 @@ var Documents = function Documents(props) {
       startIcon: /*#__PURE__*/_react["default"].createElement(_AttachFile["default"], null),
       onClick: openFileDialog
     }, "A\xF1adir documento")
-  }), /*#__PURE__*/_react["default"].createElement(_CardContent["default"], getRootProps(), /*#__PURE__*/_react["default"].createElement("input", getInputProps()), /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/_react["default"].createElement(_CardContent["default"], _extends({}, getRootProps(), {
+    style: {
+      position: "relative"
+    }
+  }), /*#__PURE__*/_react["default"].createElement("input", getInputProps()), /*#__PURE__*/_react["default"].createElement("div", {
     className: "row"
-  }, isLoading && /*#__PURE__*/_react["default"].createElement("div", {
+  }, loadingFile && /*#__PURE__*/_react["default"].createElement("div", {
     className: "col col-12 col-md-6 col-lg-4"
   }, /*#__PURE__*/_react["default"].createElement(_DocumentItem.DocumentItemLoading, null)), documents.map(function (item) {
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -181,7 +187,9 @@ var Documents = function Documents(props) {
     onClick: function onClick() {
       return fetchDocuments();
     }
-  }, "Reintentar"))))), /*#__PURE__*/_react["default"].createElement(_ModalAction["default"], {
+  }, "Reintentar"))), /*#__PURE__*/_react["default"].createElement(_DragAndDropAnimation["default"], {
+    isDragging: isDragging
+  }))), /*#__PURE__*/_react["default"].createElement(_ModalAction["default"], {
     data: {
       title: "Confirmación",
       confirmText: "Eliminar",

package/dist/components/draganddropanimation/DragAndDropAnimation.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Receipt = _interopRequireDefault(require("@mui/icons-material/Receipt"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
+var _CloudUpload = _interopRequireDefault(require("@mui/icons-material/CloudUpload"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var DragAndDropAnimation = function DragAndDropAnimation(props) {
+  var _props$isDragging = props.isDragging,
+    isDragging = _props$isDragging === void 0 ? false : _props$isDragging,
+    _props$title = props.title,
+    title = _props$title === void 0 ? "Facturas" : _props$title;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('draganddropanimation', {
+      dragging_animation: isDragging
+    })
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "content_animation"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "icon_animation"
+  }, /*#__PURE__*/_react["default"].createElement(_CloudUpload["default"], {
+    sx: {
+      fontSize: 70,
+      color: "var(--primary-color)"
+    }
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "box_animation"
+  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    sx: {
+      color: "white",
+      fontWeight: 500
+    },
+    variant: "subtitle2"
+  }, "Suelta el archivo para subirlo a"), /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
+    direction: "row",
+    alignItems: "center",
+    spacing: 1
+  }, /*#__PURE__*/_react["default"].createElement(_Receipt["default"], {
+    sx: {
+      fontSize: 26,
+      color: "white"
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    sx: {
+      color: "white",
+      fontWeight: 500
+    },
+    variant: "subtitle2"
+  }, title)))));
+};
+var _default = exports["default"] = DragAndDropAnimation;

package/dist/components/header/index.js

@@ -263,8 +263,10 @@ var Header = function Header(props) {
     href: "/"
   }, /*#__PURE__*/_react["default"].createElement(_image["default"], {
     src: prefersDarkMode ? "/images/desk_mode_dark.png" : "/images/logo_desk.png",
+    alt: "Logotipo",
     width: 210,
-    height: 70
+    height: 70,
+    fetchPriority: "high"
   }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: "sections"
   }, /*#__PURE__*/_react["default"].createElement(_Breadcrumbs["default"], {

package/dist/style.css

@@ -860,4 +860,69 @@ header .search input {
 
 .table-footer-content.end td:last-child{
 	border:0px 0px 0px 10px;
-}
+}
+
+.draganddropanimation {
+	display: none;
+	position: absolute;
+	left: 0px;
+	right: 0px;
+	top: 0px;
+	bottom: 0px;
+	background-color: rgba(171, 204, 254, 0.5);
+	z-index: 10000;
+}
+
+.draganddropanimation.dragging_animation {
+	display: block;
+}
+
+.draganddropanimation .content_animation {
+	position: absolute;
+	left: 25px;
+	right: 25px;
+	top: 25px;
+	bottom: 25px;
+	display: flex;
+	border: 2px dashed #0568fd;
+	border: 2px dashed var(--primary-color);
+	border-radius: 10px;
+	gap: 10px;
+}
+
+.draganddropanimation .box_animation {
+	position: absolute;
+	bottom: 30px;
+	left: 50%;
+	transform: translateX(-50%);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 250px;
+	height: 70px;
+	border-radius: 50px;
+	background-color: #0568fd;
+	background-color: var(--primary-color);
+}
+
+/*el icono debe salta de su posicion actual  hacia arriba lo vamos a colocar justo arrib del boxcentrado*/
+
+.draganddropanimation .icon_animation {
+	animation: jump 1s infinite;
+	position: absolute;
+	bottom: 100px;
+	left: calc(50% - 35px);
+}
+
+@keyframes jump {
+	0% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-10px);
+	}
+	100% {
+		transform: translateY(0);
+	}
+}

package/dist/styles/global.css

@@ -780,4 +780,66 @@ header .search input {
 }
 .table-footer-content.end td:last-child{
 	border:0px 0px 0px 10px;
-}
+}
+
+.draganddropanimation {
+	display: none;
+	position: absolute;
+	left: 0px;
+	right: 0px;
+	top: 0px;
+	bottom: 0px;
+	background-color: rgba(171, 204, 254, 0.5);
+	z-index: 10000;
+}
+
+.draganddropanimation.dragging_animation {
+	display: block;
+}
+
+.draganddropanimation .content_animation {
+	position: absolute;
+	left: 25px;
+	right: 25px;
+	top: 25px;
+	bottom: 25px;
+	display: flex;
+	border: 2px dashed var(--primary-color);
+	border-radius: 10px;
+	gap: 10px;
+}
+
+.draganddropanimation .box_animation {
+	position: absolute;
+	bottom: 30px;
+	left: 50%;
+	transform: translateX(-50%);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 250px;
+	height: 70px;
+	border-radius: 50px;
+	background-color: var(--primary-color);
+}
+
+/*el icono debe salta de su posicion actual  hacia arriba lo vamos a colocar justo arrib del boxcentrado*/
+.draganddropanimation .icon_animation {
+	animation: jump 1s infinite;
+	position: absolute;
+	bottom: 100px;
+	left: calc(50% - 35px);
+}
+
+@keyframes jump {
+	0% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-10px);
+	}
+	100% {
+		transform: translateY(0);
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desk-kit",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.js",
@@ -34,6 +34,7 @@
     "@mui/system": "^7.0.2",
     "axios": "^1.8.4",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "classnames": "^2.5.1",
     "core-js": "^3.41.0",
     "next": "^15.3.0",
     "next-intl": "^3.26.0",