react-ecosistema-unp 1.7.9 → 1.7.10
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.
|
@@ -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.eco_modal_open{overflow:hidden}.eco_modal_overlay{position:fixed;
|
|
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.eco_modal_open{overflow:hidden}.eco_modal_overlay_bg{background:#00000080}.eco_modal_overlay{position:fixed;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}.eco_modal_overlay.eco_modal_primary_left{justify-content:flex-start}.eco_modal_overlay.eco_modal_primary_right{justify-content:flex-end}.eco_modal_overlay.eco_modal_primary_center{justify-content:center}.eco_modal_overlay.eco_modal_secondary_overlay{background:transparent!important;pointer-events:none}.eco_modal_overlay.eco_modal_show{opacity:1;visibility:visible}.eco_modal_overlay.eco_modal_hide{opacity:0;visibility:hidden}.eco_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}.eco_modal_container.primary{z-index:1001}.eco_modal_container.secondary{z-index:1002;flex:1 1 auto;min-width:0}.eco_modal_container.primary:not(.eco_modal_centered):not(.eco_modal_maximized){width:var(--modal-primary-width, 42%)!important;flex-shrink:0}.eco_modal_container.primary.eco_modal_centered:not(.eco_modal_maximized){width:var(--modal-primary-width, 50%)!important;flex-shrink:0}.eco_modal_container.eco_modal_primary_left.eco_modal_show{transform:translate(0)}.eco_modal_container.eco_modal_primary_right{transform:translate(100%)}.eco_modal_container.eco_modal_primary_right.eco_modal_show{transform:translate(0)}.eco_modal_container.eco_modal_primary_center{transform:scale(.8);opacity:0}.eco_modal_container.eco_modal_primary_center.eco_modal_show{transform:scale(1);opacity:1}.eco_modal_container.secondary-left{transform:translateY(-100%)}.eco_modal_container.secondary-left.eco_modal_show{transform:translateY(0)}.eco_modal_container.secondary-right{transform:translateY(100%)}.eco_modal_container.secondary-right.eco_modal_show{transform:translateY(0)}.eco_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}.eco_modal_body{flex-grow:1;overflow-y:auto;border-radius:0 0 12px 12px}.eco_modal_close_button,.eco_modal_max_button{background:none;border:none;font-size:1.5em;cursor:pointer;color:#fff}.eco_modal_close_button:disabled,.eco_modal_max_button:disabled{opacity:.5;cursor:not-allowed}.eco_modal_close_button:hover:not(:disabled),.eco_modal_max_button:hover:not(:disabled),.eco_modal_icon_header:hover{color:#d36269}.eco_modal_max_button{margin-bottom:1px}.eco_modal_body::-webkit-scrollbar{width:10px}.eco_modal_body::-webkit-scrollbar-track{background:transparent}.eco_modal_body::-webkit-scrollbar-thumb{background-color:#303d50;border-radius:10px;border:3px solid transparent;background-clip:padding-box}.eco_modal_container.eco_modal_maximized{position:fixed!important;z-index:1003!important}.eco_modal_container.eco_modal_maximized.eco_modal_primary_left,.eco_modal_container.eco_modal_maximized.eco_modal_primary_right{width:calc(100vw - 2 * var(--modal-padding))!important;transform:none!important}.eco_modal_container.eco_modal_maximized.eco_modal_primary_center{left:50%!important;right:auto!important;width:calc(100vw - 2 * var(--modal-padding))!important;transform:translate(-50%)!important}.eco_modal_container.eco_modal_maximized.secondary{width:calc(100vw - 2 * var(--modal-padding))!important;transform:none!important}.eco_modal_two_modals_50 .eco_modal_container:not(.eco_modal_maximized){position:fixed!important;height:95vh;transform:none!important;opacity:1!important;border-radius:12px}.eco_modal_two_modals_50.eco_modal_primary_right .eco_modal_container:not(.eco_modal_maximized).eco_modal_primary_right{right:0!important;left:auto!important;width:var(--half-available)!important}.eco_modal_two_modals_50.eco_modal_primary_right .eco_modal_container:not(.eco_modal_maximized).secondary{left:0!important;right:auto!important;width:var(--half-available)!important}.eco_modal_two_modals_50.eco_modal_primary_left .eco_modal_container:not(.eco_modal_maximized).eco_modal_primary_left{left:0!important;right:auto!important;width:var(--half-available)!important}.eco_modal_two_modals_50.eco_modal_primary_left .eco_modal_container:not(.eco_modal_maximized).secondary{right:0!important;left:auto!important;width:var(--half-available)!important}.eco_modal_two_modals_50 .eco_modal_overlay{gap:var(--modal-gap)}.eco_modal_two_modals_large .eco_modal_container:not(.eco_modal_maximized){position:fixed!important;height:95vh;transform:none!important;opacity:1!important;border-radius:12px}.eco_modal_two_modals_large.eco_modal_primary_right .eco_modal_container:not(.eco_modal_maximized).eco_modal_primary_right{right:0!important;left:auto!important;width:var(--primary-30)!important}.eco_modal_two_modals_large.eco_modal_primary_right .eco_modal_container:not(.eco_modal_maximized).secondary{left:0!important;right:auto!important;width:var(--secondary-70)!important}.eco_modal_two_modals_large.eco_modal_primary_left .eco_modal_container:not(.eco_modal_maximized).eco_modal_primary_left{left:0!important;right:auto!important;width:var(--primary-30)!important}.eco_modal_two_modals_large.eco_modal_primary_left .eco_modal_container:not(.eco_modal_maximized).secondary{right:0!important;left:auto!important;width:var(--secondary-70)!important}.eco_modal_two_modals_large .eco_modal_overlay{gap:var(--modal-gap)}@media (max-width: 992px){.eco_modal_two_modals_50 .eco_modal_container:not(.eco_modal_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}}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as t, jsxs as i } from "react/jsx-runtime";
|
|
2
|
-
import { useState as m, useRef as
|
|
3
|
-
import { R as
|
|
4
|
-
import { q as
|
|
2
|
+
import { useState as m, useRef as I, useEffect as u } from "react";
|
|
3
|
+
import { R as M } from "../../../index-BrykDZgK.js";
|
|
4
|
+
import { q as A, r as B } from "../../../index-069JzHFQ.js";
|
|
5
5
|
import '../../../assets/EcoModalStyles.css';/* empty css */
|
|
6
|
-
const
|
|
6
|
+
const X = ({
|
|
7
7
|
show: r,
|
|
8
8
|
onHide: f,
|
|
9
9
|
title: N,
|
|
@@ -16,18 +16,19 @@ const V = ({
|
|
|
16
16
|
primaryPosition: s = "right",
|
|
17
17
|
disableClose: h = !1,
|
|
18
18
|
hasSecondaryModalOpen: R = !1,
|
|
19
|
-
otherModalOpen:
|
|
19
|
+
otherModalOpen: n = !1,
|
|
20
20
|
widthPercent: y,
|
|
21
21
|
headerBgColor: j = "#303D50",
|
|
22
|
-
hasBody: D = !0
|
|
22
|
+
hasBody: D = !0,
|
|
23
|
+
showOverlay: $ = !0
|
|
23
24
|
}) => {
|
|
24
|
-
const [b, v] = m(!1), [c,
|
|
25
|
+
const [b, v] = m(!1), [c, _] = m(!1), [g, w] = m(!1), a = I(null);
|
|
25
26
|
u(() => (w(!0), o === "secondary" && !a.current && (a.current = document.createElement("div"), a.current.className = "modal_portal_container", document.body.appendChild(a.current)), () => {
|
|
26
27
|
w(!1), a.current && (document.body.removeChild(a.current), a.current = null);
|
|
27
28
|
}), [o]), u(() => {
|
|
28
29
|
const e = document.body;
|
|
29
|
-
return r ? (v(!0), e.classList.add("eco_modal_open")) : (
|
|
30
|
-
g && (v(!1),
|
|
30
|
+
return r ? (v(!0), e.classList.add("eco_modal_open")) : (_(!0), setTimeout(() => {
|
|
31
|
+
g && (v(!1), _(!1)), e.classList.remove("eco_modal_open");
|
|
31
32
|
}, 200)), () => {
|
|
32
33
|
e.classList.remove("eco_modal_open");
|
|
33
34
|
};
|
|
@@ -37,7 +38,7 @@ const V = ({
|
|
|
37
38
|
s === "left" ? "eco_modal_primary_left" : "eco_modal_primary_right"
|
|
38
39
|
));
|
|
39
40
|
const d = () => {
|
|
40
|
-
if (!(r &&
|
|
41
|
+
if (!(r && n && !l)) {
|
|
41
42
|
e.classList.remove("eco_modal_two_modals_50", "eco_modal_two_modals_large");
|
|
42
43
|
return;
|
|
43
44
|
}
|
|
@@ -46,25 +47,25 @@ const V = ({
|
|
|
46
47
|
return d(), window.addEventListener("resize", d), () => {
|
|
47
48
|
o === "primary" && e.classList.remove("eco_modal_primary_right", "eco_modal_primary_left"), e.classList.remove("eco_modal_two_modals_50", "eco_modal_two_modals_large"), window.removeEventListener("resize", d);
|
|
48
49
|
};
|
|
49
|
-
}, [o, s, r,
|
|
50
|
-
const
|
|
50
|
+
}, [o, s, r, n, l]);
|
|
51
|
+
const x = () => o === "primary" ? s === "center" ? "eco_modal_primary_center" : `eco_modal_primary_${s}` : `eco_modal_secondary_${s === "left" ? "right" : "left"}`, W = () => {
|
|
51
52
|
const e = ["eco_modal_overlay"];
|
|
52
|
-
return o === "primary" ? e.push(`eco_modal_primary_${s}`) : e.push("eco_modal_secondary_overlay"), b && !c && e.push("eco_modal_show"), c && e.push("eco_modal_hide"), e.join(" ");
|
|
53
|
-
},
|
|
54
|
-
const e = ["eco_modal_container", o,
|
|
53
|
+
return $ && e.push("eco_modal_overlay_bg"), o === "primary" ? e.push(`eco_modal_primary_${s}`) : e.push("eco_modal_secondary_overlay"), b && !c && e.push("eco_modal_show"), c && e.push("eco_modal_hide"), e.join(" ");
|
|
54
|
+
}, z = () => {
|
|
55
|
+
const e = ["eco_modal_container", o, x()];
|
|
55
56
|
return b && !c && e.push("eco_modal_show"), c && e.push("eco_modal_hide"), l && e.push("eco_modal_maximized"), s === "center" && e.push("eco_modal_centered"), e.join(" ");
|
|
56
|
-
}, C = o === "primary" ? h || R : h,
|
|
57
|
-
!C && o === "primary" && k && (
|
|
58
|
-
f(),
|
|
57
|
+
}, C = o === "primary" ? h || R : h, F = o === "primary" && r && n, O = () => {
|
|
58
|
+
!C && o === "primary" && k && (_(!0), setTimeout(() => {
|
|
59
|
+
f(), _(!1);
|
|
59
60
|
}, 200));
|
|
60
|
-
},
|
|
61
|
+
}, q = () => {
|
|
61
62
|
const e = {};
|
|
62
63
|
return o === "primary" && !l && y && (e["--modal-primary-width"] = `${y}%`), e;
|
|
63
|
-
}, L = /* @__PURE__ */ t("div", { className:
|
|
64
|
+
}, L = /* @__PURE__ */ t("div", { className: W(), onClick: O, children: /* @__PURE__ */ i(
|
|
64
65
|
"div",
|
|
65
66
|
{
|
|
66
|
-
className:
|
|
67
|
-
style:
|
|
67
|
+
className: z(),
|
|
68
|
+
style: q(),
|
|
68
69
|
onClick: (e) => e.stopPropagation(),
|
|
69
70
|
children: [
|
|
70
71
|
/* @__PURE__ */ i(
|
|
@@ -81,8 +82,8 @@ const V = ({
|
|
|
81
82
|
className: "eco_modal_max_button",
|
|
82
83
|
onClick: p,
|
|
83
84
|
type: "button",
|
|
84
|
-
disabled:
|
|
85
|
-
children: l ? /* @__PURE__ */ t(
|
|
85
|
+
disabled: F,
|
|
86
|
+
children: l ? /* @__PURE__ */ t(A, { size: 14, className: "eco_modal_icon_header" }) : /* @__PURE__ */ t(B, { size: 14, className: "eco_modal_icon_header" })
|
|
86
87
|
}
|
|
87
88
|
),
|
|
88
89
|
/* @__PURE__ */ t(
|
|
@@ -110,8 +111,8 @@ const V = ({
|
|
|
110
111
|
]
|
|
111
112
|
}
|
|
112
113
|
) });
|
|
113
|
-
return o === "secondary" && a.current ?
|
|
114
|
+
return o === "secondary" && a.current ? M.createPortal(L, a.current) : L;
|
|
114
115
|
};
|
|
115
116
|
export {
|
|
116
|
-
|
|
117
|
+
X as EcoModal
|
|
117
118
|
};
|