react-ecosistema-unp 1.7.2-pre.0 → 1.7.3
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/assets/EcoModalStyles.css +1 -1
- package/dist/assets/Modal.css +1 -1
- package/dist/lib/tables/tabla-registros/modal/Modal.d.ts +2 -3
- package/dist/lib/tables/tabla-registros/{modal-test → modal-v2}/EcoModal.d.ts +2 -0
- package/dist/lib/ui.d.ts +1 -2
- package/dist/lib/utils/websocket-manager/websocket.d.ts +1 -1
- package/dist/tables/tabla-registros/TablaRegistros.js +2 -1
- package/dist/tables/tabla-registros/modal/Modal.js +23 -23
- package/dist/tables/tabla-registros/modal-v2/EcoModal.js +117 -0
- package/dist/ui/paginador/Paginador.js +24 -22
- package/dist/ui.js +12 -13
- package/dist/utils/websocket-manager/useWebSocket.js +10 -10
- package/package.json +1 -1
- package/dist/tables/tabla-registros/modal-test/EcoModal.js +0 -101
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--modal-gap: 10px;--modal-padding: 1.25rem;--modal-primary-width: 42%;--half-available: calc((99vw - 2 * var(--modal-padding) - var(--modal-gap)) / 2);--primary-30: calc((99vw - 2 * var(--modal-padding) - var(--modal-gap)) * .4);--secondary-70: calc((99vw - 2 * var(--modal-padding) - var(--modal-gap)) * .6)}body.modal-open{overflow:hidden}.modal-overlay{position:fixed;background:#00000080;display:flex;flex-direction:row;justify-content:flex-start;transition:opacity .4s ease,visibility .4s ease;opacity:0;visibility:hidden;z-index:1000;gap:var(--modal-gap);box-sizing:border-box;padding:0}.modal-overlay.primary-left{justify-content:flex-start}.modal-overlay.primary-right{justify-content:flex-end}.modal-overlay.primary-center{justify-content:center}.modal-overlay.secondary-overlay{background:transparent!important;pointer-events:none}.modal-overlay.show{opacity:1;visibility:visible}.modal-overlay.hide{opacity:0;visibility:hidden}.modal-container{height:95vh;background:#fff;box-shadow:0 4px 8px #0003;position:relative;
|
|
1
|
+
:root{--modal-gap: 10px;--modal-padding: 1.25rem;--modal-primary-width: 42%;--half-available: calc((99vw - 2 * var(--modal-padding) - var(--modal-gap)) / 2);--primary-30: calc((99vw - 2 * var(--modal-padding) - var(--modal-gap)) * .4);--secondary-70: calc((99vw - 2 * var(--modal-padding) - var(--modal-gap)) * .6)}body.modal-open{overflow:hidden}.modal-overlay{position:fixed;background:#00000080;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:row;justify-content:flex-start;transition:opacity .4s ease,visibility .4s ease;opacity:0;visibility:hidden;z-index:1000;gap:var(--modal-gap);box-sizing:border-box;padding:0}.modal-overlay.primary-left{justify-content:flex-start}.modal-overlay.primary-right{justify-content:flex-end}.modal-overlay.primary-center{justify-content:center}.modal-overlay.secondary-overlay{background:transparent!important;pointer-events:none}.modal-overlay.show{opacity:1;visibility:visible}.modal-overlay.hide{opacity:0;visibility:hidden}.modal-container{height:95vh;background:#fff;box-shadow:0 4px 8px #0003;position:relative;transition:left .4s ease,right .4s ease,width .4s ease,height .4s ease,border-radius .3s ease,transform .4s ease,opacity .4s ease;pointer-events:auto;display:flex;flex-direction:column;margin:var(--modal-padding);border-radius:.9rem}.modal-container.primary{z-index:1001}.modal-container.secondary{z-index:1002;flex:1 1 auto;min-width:0}.modal-container.primary:not(.centered):not(.maximized){width:var(--modal-primary-width, 42%)!important;flex-shrink:0}.modal-container.primary.centered:not(.maximized){width:var(--modal-primary-width, 50%)!important;flex-shrink:0}.modal-container.primary-left.show{transform:translate(0)}.modal-container.primary-right{transform:translate(100%)}.modal-container.primary-right.show{transform:translate(0)}.modal-container.primary-center{transform:scale(.8);opacity:0}.modal-container.primary-center.show{transform:scale(1);opacity:1}.modal-container.secondary-left{transform:translateY(-100%)}.modal-container.secondary-left.show{transform:translateY(0)}.modal-container.secondary-right{transform:translateY(100%)}.modal-container.secondary-right.show{transform:translateY(0)}.modal_header{display:flex;justify-content:space-between;align-items:center;padding:10px 30px;color:#fff;font-weight:500;font-size:16px;border-radius:12px 12px 0 0;flex-shrink:0}.modal_body{flex-grow:1;overflow-y:auto;border-radius:0 0 12px 12px}.close_button,.max_button{background:none;border:none;font-size:1.5em;cursor:pointer;color:#fff}.close_button:disabled,.max_button:disabled{opacity:.5;cursor:not-allowed}.close_button:hover:not(:disabled),.max_button:hover:not(:disabled),.icon-header:hover{color:#d36269}.max_button{margin-bottom:1px}.modal_body::-webkit-scrollbar{width:10px}.modal_body::-webkit-scrollbar-track{background:transparent}.modal_body::-webkit-scrollbar-thumb{background-color:#303d50;border-radius:10px;border:3px solid transparent;background-clip:padding-box}.modal-container.maximized{position:fixed!important;z-index:1003!important}.modal-container.maximized.primary-left,.modal-container.maximized.primary-right{width:calc(100vw - 2 * var(--modal-padding))!important;transform:none!important}.modal-container.maximized.primary-center{left:50%!important;right:auto!important;width:calc(100vw - 2 * var(--modal-padding))!important;transform:translate(-50%)!important}.modal-container.maximized.secondary{width:calc(100vw - 2 * var(--modal-padding))!important;transform:none!important}.two-modals-50 .modal-container:not(.maximized){position:fixed!important;height:95vh;transform:none!important;opacity:1!important;border-radius:12px}.two-modals-50.primary-right .modal-container:not(.maximized).primary-right{right:0!important;left:auto!important;width:var(--half-available)!important}.two-modals-50.primary-right .modal-container:not(.maximized).secondary{left:0!important;right:auto!important;width:var(--half-available)!important}.two-modals-50.primary-left .modal-container:not(.maximized).primary-left{left:0!important;right:auto!important;width:var(--half-available)!important}.two-modals-50.primary-left .modal-container:not(.maximized).secondary{right:0!important;left:auto!important;width:var(--half-available)!important}.two-modals-50 .modal-overlay{gap:var(--modal-gap)}.two-modals-large .modal-container:not(.maximized){position:fixed!important;height:95vh;transform:none!important;opacity:1!important;border-radius:12px}.two-modals-large.primary-right .modal-container:not(.maximized).primary-right{right:0!important;left:auto!important;width:var(--primary-30)!important}.two-modals-large.primary-right .modal-container:not(.maximized).secondary{left:0!important;right:auto!important;width:var(--secondary-70)!important}.two-modals-large.primary-left .modal-container:not(.maximized).primary-left{left:0!important;right:auto!important;width:var(--primary-30)!important}.two-modals-large.primary-left .modal-container:not(.maximized).secondary{right:0!important;left:auto!important;width:var(--secondary-70)!important}.two-modals-large .modal-overlay{gap:var(--modal-gap)}@media (max-width: 992px){.two-modals-50 .modal-container:not(.maximized){position:static!important;width:100%!important}}@media (max-width: 1920px){:root{--modal-primary-width: 40% !important}}@media (max-width: 1800px){:root{--modal-primary-width: 42.5% !important}}@media (max-width: 1650px){:root{--modal-primary-width: 45% !important}}@media (max-width: 1500px){:root{--modal-primary-width: 50% !important}}@media (max-width: 1425px){:root{--modal-primary-width: 55% !important}}@media (max-width: 1275px){:root{--modal-primary-width: 57.5% !important}}@media (max-width: 1150px){:root{--modal-primary-width: 60% !important}}@media (max-width: 992px){:root{--modal-primary-width: 70% !important}}@media (max-width: 768px){:root{--modal-primary-width: 85% !important}}
|
package/dist/assets/Modal.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:flex-end;align-items:center;transition:opacity .4s ease;opacity:0;visibility:hidden;z-index:1000}.modal-overlay.show{opacity:1;visibility:visible}.modal-overlay.hide{opacity:0;visibility:none}.modal-container{width:42%;height:95vh;background:#fff;box-shadow:0 4px 8px #0003;position:relative;transform:translate(100%);transition:transform .4s ease,opacity .4s ease;border-radius:12px;margin:1.75em}.modal-container.show{transform:translate(0);opacity:1}.modal-container.hide{transform:translate(100%);opacity:0}
|
|
1
|
+
.modal-overlay-old{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:flex-end;align-items:center;transition:opacity .4s ease;opacity:0;visibility:hidden;z-index:1000}.modal-overlay-old.show-old{opacity:1;visibility:visible}.modal-overlay-old.hide-old{opacity:0;visibility:none}.modal-container-old{width:42%;height:95vh;background:#fff;box-shadow:0 4px 8px #0003;position:relative;transform:translate(100%);transition:transform .4s ease,opacity .4s ease;border-radius:12px;margin:1.75em}.modal-container-old.show-old{transform:translate(0);opacity:1}.modal-container-old.hide-old{transform:translate(100%);opacity:0}.modal_header-old{display:flex;justify-content:space-between;align-items:center;padding:10px 30px;background-color:#303d50;color:#fff;font-weight:500;font-size:16px;border-radius:12px 12px 0 0}.modal_body_old{padding:1.25rem 1.75rem 1rem;height:calc(100% - 56px);border-radius:0 0 12px 12px;overflow-y:auto}.close_button_old{background:none;border:none;font-size:1.5em;cursor:pointer;color:#fff}.close_button_old:hover{color:#d36269}.modal_body_old::-webkit-scrollbar{width:10px}.modal_body_old::-webkit-scrollbar-track{background:transparent}.modal_body_old::-webkit-scrollbar-thumb{background-color:#303d50;border-radius:10px;border:3px solid transparent;background-clip:padding-box}
|
|
@@ -6,9 +6,8 @@ interface CustomModalProps {
|
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
closeModalOut: boolean;
|
|
8
8
|
}
|
|
9
|
-
declare const EcoModal: React.FC<CustomModalProps>;
|
|
10
9
|
/**
|
|
11
10
|
* @deprecated since version 1.7.x — use `EcoModal` instead.
|
|
12
11
|
*/
|
|
13
|
-
|
|
14
|
-
export {
|
|
12
|
+
declare const CustomModal: React.FC<CustomModalProps>;
|
|
13
|
+
export { CustomModal };
|
package/dist/lib/ui.d.ts
CHANGED
|
@@ -7,6 +7,5 @@ export { ItemsModal } from './ui/items-modal/ItemsModal.js';
|
|
|
7
7
|
export { IconoTooltip } from './ui/icono-tooltip/IconoTooltip.js';
|
|
8
8
|
export { ContenedorVentana } from './ui/contenedor-ventana/ContenedorVentana.js';
|
|
9
9
|
export { CustomModal } from './tables/tabla-registros/modal/Modal.js';
|
|
10
|
-
export { EcoModal } from './tables/tabla-registros/modal/
|
|
11
|
-
export { EcoModal as EcoModalTest } from './tables/tabla-registros/modal-test/EcoModal.js';
|
|
10
|
+
export { EcoModal } from './tables/tabla-registros/modal-v2/EcoModal.js';
|
|
12
11
|
export { Animacion } from './ui/animacion/Animacion.js';
|
|
@@ -2,7 +2,7 @@ import { jsxs as I, Fragment as Ze, jsx as B } from "react/jsx-runtime";
|
|
|
2
2
|
import { useState as D, useEffect as yn } from "react";
|
|
3
3
|
import { L as Ee, i as vn, n as kn, a as xn } from "../../isLoading-B9qN9mny.js";
|
|
4
4
|
import { Tabla as Cn } from "./tabla/Tabla.js";
|
|
5
|
-
import { EcoModal as An } from "./modal/
|
|
5
|
+
import { EcoModal as An } from "./modal-v2/EcoModal.js";
|
|
6
6
|
import { EncabezadoTabla as En } from "./encabezado-tabla/EncabezadoTabla.js";
|
|
7
7
|
import { useNavigate as Bn } from "react-router-dom";
|
|
8
8
|
import '../../assets/TablaRegistros.css';/*!
|
|
@@ -1726,6 +1726,7 @@ const gi = () => (/* @__PURE__ */ new Date()).getFullYear(), ct = (e) => e.norma
|
|
|
1726
1726
|
onHide: () => re(!1),
|
|
1727
1727
|
title: `${ie.column.label}`,
|
|
1728
1728
|
closeModalOut: sn,
|
|
1729
|
+
modalType: "primary",
|
|
1729
1730
|
children: n(
|
|
1730
1731
|
ie.row,
|
|
1731
1732
|
ie.column,
|
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as
|
|
1
|
+
import { jsx as o, jsxs as i } from "react/jsx-runtime";
|
|
2
|
+
import { useState as n, useEffect as h } from "react";
|
|
3
3
|
import '../../../assets/Modal.css';/* empty css */
|
|
4
|
-
const
|
|
5
|
-
show:
|
|
6
|
-
onHide:
|
|
4
|
+
const M = ({
|
|
5
|
+
show: l,
|
|
6
|
+
onHide: s,
|
|
7
7
|
title: c,
|
|
8
8
|
children: r,
|
|
9
9
|
closeModalOut: m
|
|
10
10
|
}) => {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
console.warn("react-ecosistema-unp - [CustomModal] is deprecated. Please use [EcoModal] instead.");
|
|
12
|
+
const [a, d] = n(!1), [t, e] = n(!1);
|
|
13
|
+
return h(() => {
|
|
14
|
+
l ? d(!0) : (e(!0), setTimeout(() => {
|
|
15
|
+
d(!1), e(!1);
|
|
15
16
|
}, 200));
|
|
16
|
-
}, [
|
|
17
|
+
}, [l]), /* @__PURE__ */ o(
|
|
17
18
|
"div",
|
|
18
19
|
{
|
|
19
|
-
className: `modal-overlay ${
|
|
20
|
+
className: `modal-overlay-old ${a ? "show-old" : ""} ${t ? "hide-old" : ""}`,
|
|
20
21
|
onClick: () => {
|
|
21
|
-
m && (
|
|
22
|
-
|
|
22
|
+
m && (e(!0), setTimeout(() => {
|
|
23
|
+
s(), e(!1);
|
|
23
24
|
}, 200));
|
|
24
25
|
},
|
|
25
|
-
children: /* @__PURE__ */
|
|
26
|
+
children: /* @__PURE__ */ i(
|
|
26
27
|
"div",
|
|
27
28
|
{
|
|
28
|
-
className: `modal-container ${
|
|
29
|
-
onClick: (
|
|
29
|
+
className: `modal-container-old ${a ? "show-old" : ""} ${t ? "hide-old" : ""}`,
|
|
30
|
+
onClick: (u) => u.stopPropagation(),
|
|
30
31
|
children: [
|
|
31
|
-
/* @__PURE__ */
|
|
32
|
-
/* @__PURE__ */
|
|
33
|
-
/* @__PURE__ */
|
|
32
|
+
/* @__PURE__ */ i("div", { className: "modal_header-old", children: [
|
|
33
|
+
/* @__PURE__ */ o("span", { children: c }),
|
|
34
|
+
/* @__PURE__ */ o("button", { className: "close_button_old", onClick: s, type: "button", children: "×" })
|
|
34
35
|
] }),
|
|
35
|
-
/* @__PURE__ */
|
|
36
|
+
/* @__PURE__ */ o("div", { className: "modal_body_old", children: r })
|
|
36
37
|
]
|
|
37
38
|
}
|
|
38
39
|
)
|
|
39
40
|
}
|
|
40
41
|
);
|
|
41
|
-
}
|
|
42
|
+
};
|
|
42
43
|
export {
|
|
43
|
-
|
|
44
|
-
f as EcoModal
|
|
44
|
+
M as CustomModal
|
|
45
45
|
};
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { jsx as a, jsxs as u } from "react/jsx-runtime";
|
|
2
|
+
import { useState as m, useRef as q, useEffect as f } from "react";
|
|
3
|
+
import { R as I } from "../../../index-BrykDZgK.js";
|
|
4
|
+
import { q as M, r as A } from "../../../index-069JzHFQ.js";
|
|
5
|
+
import '../../../assets/EcoModalStyles.css';/* empty css */
|
|
6
|
+
const V = ({
|
|
7
|
+
show: n,
|
|
8
|
+
onHide: p,
|
|
9
|
+
title: S,
|
|
10
|
+
children: k,
|
|
11
|
+
closeModalOut: E,
|
|
12
|
+
isMaximized: o,
|
|
13
|
+
onToggleMaximize: h,
|
|
14
|
+
showMaximizeButton: R = !1,
|
|
15
|
+
modalType: s = "primary",
|
|
16
|
+
primaryPosition: r = "right",
|
|
17
|
+
disableClose: y = !1,
|
|
18
|
+
hasSecondaryModalOpen: j = !1,
|
|
19
|
+
otherModalOpen: c = !1,
|
|
20
|
+
widthPercent: b,
|
|
21
|
+
headerBgColor: D = "#303D50",
|
|
22
|
+
hasBody: _ = !0
|
|
23
|
+
}) => {
|
|
24
|
+
const [v, g] = m(!1), [l, i] = m(!1), [w, C] = m(!1), t = q(null);
|
|
25
|
+
f(() => (C(!0), s === "secondary" && !t.current && (t.current = document.createElement("div"), t.current.className = "modal-portal-container", document.body.appendChild(t.current)), () => {
|
|
26
|
+
C(!1), t.current && (document.body.removeChild(t.current), t.current = null);
|
|
27
|
+
}), [s]), f(() => {
|
|
28
|
+
const e = document.body;
|
|
29
|
+
return n ? (g(!0), e.classList.add("modal-open")) : (i(!0), setTimeout(() => {
|
|
30
|
+
w && (g(!1), i(!1)), e.classList.remove("modal-open");
|
|
31
|
+
}, 200)), () => {
|
|
32
|
+
e.classList.remove("modal-open");
|
|
33
|
+
};
|
|
34
|
+
}, [n, w]), f(() => {
|
|
35
|
+
const e = document.body;
|
|
36
|
+
s === "primary" && (e.classList.remove("primary-right", "primary-left"), e.classList.add(
|
|
37
|
+
r === "left" ? "primary-left" : "primary-right"
|
|
38
|
+
));
|
|
39
|
+
const d = () => {
|
|
40
|
+
if (!(n && c && !o)) {
|
|
41
|
+
e.classList.remove("two-modals-50", "two-modals-large");
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
window.innerWidth >= 1200 ? (e.classList.add("two-modals-large"), e.classList.remove("two-modals-50")) : (e.classList.add("two-modals-50"), e.classList.remove("two-modals-large"));
|
|
45
|
+
};
|
|
46
|
+
return d(), window.addEventListener("resize", d), () => {
|
|
47
|
+
s === "primary" && e.classList.remove("primary-right", "primary-left"), e.classList.remove("two-modals-50", "two-modals-large"), window.removeEventListener("resize", d);
|
|
48
|
+
};
|
|
49
|
+
}, [s, r, n, c, o]);
|
|
50
|
+
const $ = () => s === "primary" ? r === "center" ? "primary-center" : `primary-${r}` : `secondary-${r === "left" ? "right" : "left"}`, x = () => {
|
|
51
|
+
const e = ["modal-overlay"];
|
|
52
|
+
return s === "primary" ? e.push(`primary-${r}`) : e.push("secondary-overlay"), v && !l && e.push("show"), l && e.push("hide"), e.join(" ");
|
|
53
|
+
}, W = () => {
|
|
54
|
+
const e = ["modal-container", s, $()];
|
|
55
|
+
return v && !l && e.push("show"), l && e.push("hide"), o && e.push("maximized"), r === "center" && e.push("centered"), e.join(" ");
|
|
56
|
+
}, L = s === "primary" ? y || j : y, z = s === "primary" && n && c, F = () => {
|
|
57
|
+
!L && s === "primary" && E && (i(!0), setTimeout(() => {
|
|
58
|
+
p(), i(!1);
|
|
59
|
+
}, 200));
|
|
60
|
+
}, O = () => {
|
|
61
|
+
const e = {};
|
|
62
|
+
return s === "primary" && !o && b && (e["--modal-primary-width"] = `${b}%`), e;
|
|
63
|
+
}, N = /* @__PURE__ */ a("div", { className: x(), onClick: F, children: /* @__PURE__ */ u(
|
|
64
|
+
"div",
|
|
65
|
+
{
|
|
66
|
+
className: W(),
|
|
67
|
+
style: O(),
|
|
68
|
+
onClick: (e) => e.stopPropagation(),
|
|
69
|
+
children: [
|
|
70
|
+
/* @__PURE__ */ u(
|
|
71
|
+
"div",
|
|
72
|
+
{
|
|
73
|
+
className: "modal_header",
|
|
74
|
+
style: { backgroundColor: D },
|
|
75
|
+
children: [
|
|
76
|
+
/* @__PURE__ */ a("span", { children: S }),
|
|
77
|
+
/* @__PURE__ */ u("div", { style: { display: "flex", gap: 10 }, children: [
|
|
78
|
+
R && h && /* @__PURE__ */ a(
|
|
79
|
+
"button",
|
|
80
|
+
{
|
|
81
|
+
className: "max_button",
|
|
82
|
+
onClick: h,
|
|
83
|
+
type: "button",
|
|
84
|
+
disabled: z,
|
|
85
|
+
children: o ? /* @__PURE__ */ a(M, { size: 14, className: "icon-header" }) : /* @__PURE__ */ a(A, { size: 14, className: "icon-header" })
|
|
86
|
+
}
|
|
87
|
+
),
|
|
88
|
+
/* @__PURE__ */ a(
|
|
89
|
+
"button",
|
|
90
|
+
{
|
|
91
|
+
className: "close_button",
|
|
92
|
+
onClick: p,
|
|
93
|
+
type: "button",
|
|
94
|
+
disabled: L,
|
|
95
|
+
children: "×"
|
|
96
|
+
}
|
|
97
|
+
)
|
|
98
|
+
] })
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
),
|
|
102
|
+
/* @__PURE__ */ a(
|
|
103
|
+
"div",
|
|
104
|
+
{
|
|
105
|
+
className: "modal_body",
|
|
106
|
+
style: { padding: _ ? "1rem" : "0rem" },
|
|
107
|
+
children: k
|
|
108
|
+
}
|
|
109
|
+
)
|
|
110
|
+
]
|
|
111
|
+
}
|
|
112
|
+
) });
|
|
113
|
+
return s === "secondary" && t.current ? I.createPortal(N, t.current) : N;
|
|
114
|
+
};
|
|
115
|
+
export {
|
|
116
|
+
V as EcoModal
|
|
117
|
+
};
|
|
@@ -1,66 +1,68 @@
|
|
|
1
1
|
import { jsxs as s, Fragment as h, jsx as i } from "react/jsx-runtime";
|
|
2
|
-
import { useState as p, useRef as
|
|
2
|
+
import { useState as p, useRef as y, useEffect as g } from "react";
|
|
3
3
|
import '../../assets/Bootstrap.css';import '../../assets/Paginador.css';/* empty css */
|
|
4
4
|
/* empty css */
|
|
5
5
|
import { C as v } from "../../Card-DAsInpjB.js";
|
|
6
6
|
import { B as f } from "../../Button-B87TJYml.js";
|
|
7
|
-
const w = ({ stepContent:
|
|
8
|
-
const [e,
|
|
9
|
-
return
|
|
7
|
+
const w = ({ stepContent: t, onSubmit: d, canJump: c = !0 }) => {
|
|
8
|
+
const [e, a] = p(0), o = y(null);
|
|
9
|
+
return g(() => {
|
|
10
10
|
o.current && e > 0 && o.current.scrollIntoView({
|
|
11
11
|
behavior: "smooth"
|
|
12
12
|
});
|
|
13
13
|
}, [e]), /* @__PURE__ */ s(h, { children: [
|
|
14
|
-
/* @__PURE__ */ i(v, { ref: o, className: "border-0 paginador-card", children: /* @__PURE__ */ i("ul", { id: "progressbar", children:
|
|
14
|
+
/* @__PURE__ */ i(v, { ref: o, className: "border-0 paginador-card", children: /* @__PURE__ */ i("ul", { id: "progressbar", children: t.map((n, r) => /* @__PURE__ */ s(
|
|
15
15
|
"li",
|
|
16
16
|
{
|
|
17
17
|
className: r <= e ? "active" : "",
|
|
18
18
|
onClick: async () => {
|
|
19
|
-
if (
|
|
20
|
-
const
|
|
19
|
+
if (t[e].handleNextClick && !c) {
|
|
20
|
+
const l = t[e].handleNextClick;
|
|
21
21
|
let u = !0;
|
|
22
|
-
if (
|
|
23
|
-
const m = await
|
|
22
|
+
if (l) {
|
|
23
|
+
const m = await l();
|
|
24
24
|
typeof m == "boolean" && (u = m);
|
|
25
25
|
}
|
|
26
|
-
u &&
|
|
27
|
-
} else c ? c &&
|
|
26
|
+
u && a(e + 1);
|
|
27
|
+
} else c ? c && a(r) : (r === e + 1 || r < e) && a(r);
|
|
28
28
|
},
|
|
29
29
|
children: [
|
|
30
|
-
/* @__PURE__ */ i("div", { className: `step ${r <= e ? "active" : ""}`, children: /* @__PURE__ */ i(
|
|
31
|
-
/* @__PURE__ */ i("strong", { children:
|
|
30
|
+
/* @__PURE__ */ i("div", { className: `step ${r <= e ? "active" : ""}`, children: /* @__PURE__ */ i(n.icon, { size: 18 }) }),
|
|
31
|
+
/* @__PURE__ */ i("strong", { children: n.label })
|
|
32
32
|
]
|
|
33
33
|
},
|
|
34
34
|
r
|
|
35
35
|
)) }) }),
|
|
36
|
-
/* @__PURE__ */ i("div", { className: "paginador-content", children:
|
|
36
|
+
/* @__PURE__ */ i("div", { className: "paginador-content", children: t[e].content }),
|
|
37
37
|
/* @__PURE__ */ s("div", { className: "paginador-buttons", style: { display: "flex", justifyContent: "end" }, children: [
|
|
38
38
|
e > 0 && /* @__PURE__ */ i(
|
|
39
39
|
f,
|
|
40
40
|
{
|
|
41
|
+
type: "button",
|
|
41
42
|
variant: "unp_secondary",
|
|
42
|
-
onClick: () =>
|
|
43
|
+
onClick: () => a(e - 1),
|
|
43
44
|
children: "Anterior"
|
|
44
45
|
}
|
|
45
46
|
),
|
|
46
|
-
e <
|
|
47
|
+
e < t.length - 1 && /* @__PURE__ */ i(
|
|
47
48
|
f,
|
|
48
49
|
{
|
|
50
|
+
type: "button",
|
|
49
51
|
variant: "unp_primary",
|
|
50
52
|
style: { justifySelf: "end", marginLeft: "1rem" },
|
|
51
53
|
onClick: async () => {
|
|
52
|
-
const
|
|
54
|
+
const n = t[e].handleNextClick;
|
|
53
55
|
let r = !0;
|
|
54
|
-
if (
|
|
55
|
-
const
|
|
56
|
-
typeof
|
|
56
|
+
if (n) {
|
|
57
|
+
const l = await n();
|
|
58
|
+
typeof l == "boolean" && (r = l);
|
|
57
59
|
}
|
|
58
|
-
r &&
|
|
60
|
+
r && a(e + 1);
|
|
59
61
|
},
|
|
60
62
|
children: "Siguiente"
|
|
61
63
|
}
|
|
62
64
|
),
|
|
63
|
-
e ===
|
|
65
|
+
e === t.length - 1 && d && /* @__PURE__ */ i(
|
|
64
66
|
f,
|
|
65
67
|
{
|
|
66
68
|
type: "submit",
|
package/dist/ui.js
CHANGED
|
@@ -1,25 +1,24 @@
|
|
|
1
1
|
import { Encabezado as t } from "./ui/encabezado/Encabezado.js";
|
|
2
|
-
import { Subtitulo as
|
|
3
|
-
import { ContenidoModal as
|
|
2
|
+
import { Subtitulo as m } from "./ui/subtitulo/Subtitulo.js";
|
|
3
|
+
import { ContenidoModal as a } from "./ui/contenido-modal/ContenidoModal.js";
|
|
4
4
|
import { Paginador as n } from "./ui/paginador/Paginador.js";
|
|
5
5
|
import { Logo as d } from "./ui/logo/Logo.js";
|
|
6
|
-
import { ItemsModal as
|
|
6
|
+
import { ItemsModal as l } from "./ui/items-modal/ItemsModal.js";
|
|
7
7
|
import { IconoTooltip as M } from "./ui/icono-tooltip/IconoTooltip.js";
|
|
8
|
-
import { ContenedorVentana as
|
|
9
|
-
import { CustomModal as
|
|
10
|
-
import { EcoModal as
|
|
8
|
+
import { ContenedorVentana as C } from "./ui/contenedor-ventana/ContenedorVentana.js";
|
|
9
|
+
import { CustomModal as g } from "./tables/tabla-registros/modal/Modal.js";
|
|
10
|
+
import { EcoModal as E } from "./tables/tabla-registros/modal-v2/EcoModal.js";
|
|
11
11
|
import { Animacion as z } from "./ui/animacion/Animacion.js";
|
|
12
12
|
export {
|
|
13
13
|
z as Animacion,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
I as EcoModalTest,
|
|
14
|
+
C as ContenedorVentana,
|
|
15
|
+
a as ContenidoModal,
|
|
16
|
+
g as CustomModal,
|
|
17
|
+
E as EcoModal,
|
|
19
18
|
t as Encabezado,
|
|
20
19
|
M as IconoTooltip,
|
|
21
|
-
|
|
20
|
+
l as ItemsModal,
|
|
22
21
|
d as Logo,
|
|
23
22
|
n as Paginador,
|
|
24
|
-
|
|
23
|
+
m as Subtitulo
|
|
25
24
|
};
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { useEffect as
|
|
2
|
-
import { webSocketService as
|
|
3
|
-
const u = (t,
|
|
4
|
-
|
|
5
|
-
if (
|
|
6
|
-
const
|
|
7
|
-
|
|
8
|
-
},
|
|
1
|
+
import { useEffect as b } from "react";
|
|
2
|
+
import { webSocketService as c } from "./websocket.js";
|
|
3
|
+
const u = (t, e) => {
|
|
4
|
+
b(() => {
|
|
5
|
+
if (c.connect(t), e) {
|
|
6
|
+
const r = (s) => {
|
|
7
|
+
e(s);
|
|
8
|
+
}, o = c.subscribe(r);
|
|
9
9
|
return () => {
|
|
10
|
-
|
|
10
|
+
o(), c.unsubscribe(r);
|
|
11
11
|
};
|
|
12
12
|
}
|
|
13
|
-
}, [t,
|
|
13
|
+
}, [t, e]);
|
|
14
14
|
};
|
|
15
15
|
export {
|
|
16
16
|
u as useWebSocket
|
package/package.json
CHANGED
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
import { jsx as a, jsxs as u } from "react/jsx-runtime";
|
|
2
|
-
import { useState as m, useRef as F, useEffect as f } from "react";
|
|
3
|
-
import { R as O } from "../../../index-BrykDZgK.js";
|
|
4
|
-
import { q, r as I } from "../../../index-069JzHFQ.js";
|
|
5
|
-
import '../../../assets/EcoModalStyles.css';/* empty css */
|
|
6
|
-
const Q = ({
|
|
7
|
-
show: n,
|
|
8
|
-
onHide: p,
|
|
9
|
-
title: S,
|
|
10
|
-
children: E,
|
|
11
|
-
closeModalOut: R,
|
|
12
|
-
isMaximized: o,
|
|
13
|
-
onToggleMaximize: h,
|
|
14
|
-
showMaximizeButton: j = !1,
|
|
15
|
-
modalType: s = "primary",
|
|
16
|
-
primaryPosition: r = "right",
|
|
17
|
-
disableClose: y = !1,
|
|
18
|
-
hasSecondaryModalOpen: k = !1,
|
|
19
|
-
otherModalOpen: c = !1,
|
|
20
|
-
widthPercent: v
|
|
21
|
-
}) => {
|
|
22
|
-
const [b, g] = m(!1), [l, i] = m(!1), [w, C] = m(!1), t = F(null);
|
|
23
|
-
f(() => (C(!0), s === "secondary" && !t.current && (t.current = document.createElement("div"), t.current.className = "modal-portal-container", document.body.appendChild(t.current)), () => {
|
|
24
|
-
C(!1), t.current && (document.body.removeChild(t.current), t.current = null);
|
|
25
|
-
}), [s]), f(() => {
|
|
26
|
-
const e = document.body;
|
|
27
|
-
return n ? (g(!0), e.classList.add("modal-open")) : (i(!0), setTimeout(() => {
|
|
28
|
-
w && (g(!1), i(!1)), e.classList.remove("modal-open");
|
|
29
|
-
}, 200)), () => {
|
|
30
|
-
e.classList.remove("modal-open");
|
|
31
|
-
};
|
|
32
|
-
}, [n, w]), f(() => {
|
|
33
|
-
const e = document.body;
|
|
34
|
-
s === "primary" && (e.classList.remove("primary-right", "primary-left"), e.classList.add(
|
|
35
|
-
r === "left" ? "primary-left" : "primary-right"
|
|
36
|
-
));
|
|
37
|
-
const d = () => {
|
|
38
|
-
if (!(n && c && !o)) {
|
|
39
|
-
e.classList.remove("two-modals-50", "two-modals-large");
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
window.innerWidth >= 1200 ? (e.classList.add("two-modals-large"), e.classList.remove("two-modals-50")) : (e.classList.add("two-modals-50"), e.classList.remove("two-modals-large"));
|
|
43
|
-
};
|
|
44
|
-
return d(), window.addEventListener("resize", d), () => {
|
|
45
|
-
s === "primary" && e.classList.remove("primary-right", "primary-left"), e.classList.remove("two-modals-50", "two-modals-large"), window.removeEventListener("resize", d);
|
|
46
|
-
};
|
|
47
|
-
}, [s, r, n, c, o]);
|
|
48
|
-
const _ = () => s === "primary" ? r === "center" ? "primary-center" : `primary-${r}` : `secondary-${r === "left" ? "right" : "left"}`, $ = () => {
|
|
49
|
-
const e = ["modal-overlay"];
|
|
50
|
-
return s === "primary" ? e.push(`primary-${r}`) : e.push("secondary-overlay"), b && !l && e.push("show"), l && e.push("hide"), e.join(" ");
|
|
51
|
-
}, x = () => {
|
|
52
|
-
const e = ["modal-container", s, _()];
|
|
53
|
-
return b && !l && e.push("show"), l && e.push("hide"), o && e.push("maximized"), r === "center" && e.push("centered"), e.join(" ");
|
|
54
|
-
}, L = s === "primary" ? y || k : y, D = s === "primary" && n && c, W = () => {
|
|
55
|
-
!L && s === "primary" && R && (i(!0), setTimeout(() => {
|
|
56
|
-
p(), i(!1);
|
|
57
|
-
}, 200));
|
|
58
|
-
}, z = () => {
|
|
59
|
-
const e = {};
|
|
60
|
-
return s === "primary" && !o && v && (e["--modal-primary-width"] = `${v}%`), e;
|
|
61
|
-
}, N = /* @__PURE__ */ a("div", { className: $(), onClick: W, children: /* @__PURE__ */ u(
|
|
62
|
-
"div",
|
|
63
|
-
{
|
|
64
|
-
className: x(),
|
|
65
|
-
style: z(),
|
|
66
|
-
onClick: (e) => e.stopPropagation(),
|
|
67
|
-
children: [
|
|
68
|
-
/* @__PURE__ */ u("div", { className: "modal_header", children: [
|
|
69
|
-
/* @__PURE__ */ a("span", { children: S }),
|
|
70
|
-
/* @__PURE__ */ u("div", { style: { display: "flex", gap: 5 }, children: [
|
|
71
|
-
j && h && /* @__PURE__ */ a(
|
|
72
|
-
"button",
|
|
73
|
-
{
|
|
74
|
-
className: "max_button",
|
|
75
|
-
onClick: h,
|
|
76
|
-
type: "button",
|
|
77
|
-
disabled: D,
|
|
78
|
-
children: o ? /* @__PURE__ */ a(q, { size: 14, className: "icon-header" }) : /* @__PURE__ */ a(I, { size: 14, className: "icon-header" })
|
|
79
|
-
}
|
|
80
|
-
),
|
|
81
|
-
/* @__PURE__ */ a(
|
|
82
|
-
"button",
|
|
83
|
-
{
|
|
84
|
-
className: "close_button",
|
|
85
|
-
onClick: p,
|
|
86
|
-
type: "button",
|
|
87
|
-
disabled: L,
|
|
88
|
-
children: "×"
|
|
89
|
-
}
|
|
90
|
-
)
|
|
91
|
-
] })
|
|
92
|
-
] }),
|
|
93
|
-
/* @__PURE__ */ a("div", { className: "modal_body", children: E })
|
|
94
|
-
]
|
|
95
|
-
}
|
|
96
|
-
) });
|
|
97
|
-
return s === "secondary" && t.current ? O.createPortal(N, t.current) : N;
|
|
98
|
-
};
|
|
99
|
-
export {
|
|
100
|
-
Q as EcoModal
|
|
101
|
-
};
|