react-ecosistema-unp 0.4.5 → 0.5.0
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/CardHeaderContext-DVw0yHuy.js +6 -0
- package/dist/Tarjeta-Big0dus2.js +17 -0
- package/dist/assets/Encabezado.css +1 -0
- package/dist/assets/Tabla.css +1 -1
- package/dist/assets/TablaRegistros.css +1 -1
- package/dist/assets/Tarjeta.css +1 -0
- package/dist/assets/TituloModal.css +1 -1
- package/dist/lib/tables/components/Modal.d.ts +1 -1
- package/dist/lib/ui/components/ContenedorTarjeta.d.ts +8 -0
- package/dist/lib/ui/components/Encabezado.d.ts +3 -2
- package/dist/lib/ui/components/Tarjeta.d.ts +7 -0
- package/dist/lib/ui.d.ts +4 -0
- package/dist/shared/components/VentanaTabs.js +63 -64
- package/dist/tables/components/Modal.js +7 -7
- package/dist/tables/components/TablaRegistros.js +653 -653
- package/dist/tables/components/TituloModal.js +15 -12
- package/dist/ui/components/ContenedorTarjeta.js +6 -0
- package/dist/ui/components/Encabezado.js +11 -31
- package/dist/ui/components/Subtitulo.js +11 -9
- package/dist/ui/components/Tarjeta.js +154 -0
- package/dist/ui.js +10 -2
- package/package.json +1 -1
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as m from "react";
|
|
2
|
+
import { u as t, c as e } from "./ThemeProvider-CFCmmLJC.js";
|
|
3
|
+
import { jsx as c } from "react/jsx-runtime";
|
|
4
|
+
import './assets/Tarjeta.css';const p = /* @__PURE__ */ m.forwardRef(({
|
|
5
|
+
className: r,
|
|
6
|
+
bsPrefix: a,
|
|
7
|
+
as: o = "div",
|
|
8
|
+
...s
|
|
9
|
+
}, d) => (a = t(a, "card-body"), /* @__PURE__ */ c(o, {
|
|
10
|
+
ref: d,
|
|
11
|
+
className: e(r, a),
|
|
12
|
+
...s
|
|
13
|
+
})));
|
|
14
|
+
p.displayName = "CardBody";
|
|
15
|
+
export {
|
|
16
|
+
p as C
|
|
17
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.title-container{display:flex;gap:1rem;align-items:center;align-content:center}.logo-subtitle-container{height:100%;display:flex;gap:.66rem;align-items:center}.red-section{height:60px;width:10px;background-color:#d13c47;border-top-right-radius:7px;border-bottom-right-radius:7px}.img-logo{height:52px;object-fit:cover}.title{font-weight:500;font-size:1.55rem;color:#232323}.subtitle{font-size:1.05rem;color:#3f3f3f}.subtitle-container{display:flex;flex-direction:column}
|
package/dist/assets/Tabla.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.table_container{display:flex;flex-direction:column;gap:1.5rem;text-align:center;margin-top:2rem}.table-scroll{position:relative;max-height:70vh;overflow-y:auto;overflow-x:auto;margin-right:5px;margin-left:5px;border-radius:10px;box-shadow:0 2px 12px #00000016;background:#
|
|
1
|
+
.table_container{display:flex;flex-direction:column;gap:1.5rem;text-align:center;margin-top:2rem}.table-scroll{position:relative;max-height:70vh;overflow-y:auto;overflow-x:auto;margin-right:5px;margin-left:5px;border-radius:10px;box-shadow:0 2px 12px #00000016;background:#f7f7f9}.table-scroll th,.table-scroll td{white-space:nowrap;word-wrap:normal;min-width:100px;padding-left:15px;padding-right:15px}.table-scroll::-webkit-scrollbar{width:20px}.table-scroll::-webkit-scrollbar-track{background:linear-gradient(to bottom right,#f7f7f9,#f9f9f9,#fff);border-top-right-radius:10px;border-bottom-right-radius:10px}.table-scroll::-webkit-scrollbar-thumb{background-color:#303d50;border-radius:10px;border:6px solid transparent;background-clip:padding-box}thead tr th{background-color:#fff!important;border-bottom:1px solid #DEE2E6!important;position:sticky;top:0;z-index:2}.table td,.table th{text-align:center;vertical-align:middle}.table{margin-bottom:0!important}.table-header-unp{background-color:#f7f7f9!important;color:#2c2c2c!important;font-weight:600;font-size:1.1rem;padding:1.25rem 0!important}.cell-with-modal{transition:background-color .3s ease}.cell-with-modal:hover{background-color:#303d50!important;color:#fff;font-weight:600}.data-count,.data-unp{font-weight:500;font-size:.85rem;margin-top:1rem;margin-left:5px;margin-right:5px;color:#8c8c8f}.animation-container{gap:2rem;height:73vh;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#919191}@media (min-width: 1800px){.table-scroll{max-height:75vh}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.unp-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-left:5px;margin-right:5px;margin-top:
|
|
1
|
+
.unp-row{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin-left:5px;margin-right:5px;margin-top:1.25rem;margin-bottom:1.75rem}.title-container{display:flex;gap:1rem;align-items:center;align-content:center}.logo-subtitle-container{height:100%;display:flex;gap:.66rem;align-items:center}.red-section{height:60px;width:10px;background-color:#d13c47;border-top-right-radius:7px;border-bottom-right-radius:7px}.img-logo{height:52px;object-fit:cover}.title{font-weight:500;font-size:1.55rem;color:#232323}.subtitle{font-size:1.05rem;color:#3f3f3f}.subtitle-container{display:flex;flex-direction:column}.inputs-container{display:flex;justify-content:end;width:35%;gap:1rem}@media (max-width: 1400px){.inputs-container{width:40%}}@media (max-width: 1300px){.inputs-container{width:42.5%}}@media (max-width: 1200px){.inputs-container{width:45%}}@media (max-width: 992px){.inputs-container{width:50%}}@media (max-width: 768px){.inputs-container{width:60%}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.bg-unp{border-radius:6px 6px 0 0!important;background-color:#303d50!important}.tarjeta-unp{border-radius:12px!important;box-shadow:0 6px 10px #00000019;border-bottom-left-radius:12px}.tarjeta-header-unp{border-top-left-radius:12px!important;border-top-right-radius:12px!important;font-size:1.075rem}.tarjeta-container{padding-top:1.3rem!important;padding-bottom:1.35rem!important}.tarjeta-container-section{background-color:#f7f7f7}.tarjeta-container-last{border-bottom-left-radius:12px;border-bottom-right-radius:12px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.modal-title-container{display:flex;justify-content:space-between;align-items:center}.red-item{height:30px;width:8px;background-color:#d13c47;border-top-right-radius:5px;border-bottom-right-radius:5px}.modal-subtitle-container-left{display:flex;justify-content:center;align-items:center;font-weight:500;gap:.5rem}.modal-subtitle{margin:0;padding:0;font-size:1.1rem;color:#303d50;font-weight:600}.modal-subtitle-container-right{display:flex;justify-content:flex-end;overflow:visible}.animation-wrapper{position:relative;display:grid;grid-template-columns:1fr;width:100%}.buttons-group,.close-group{grid-row-start:1;grid-column-start:1;display:flex;gap:1rem;align-items:center;transition:all .2s cubic-bezier(.1,0,.1,1)}.buttons-group{opacity:1}.close-group{opacity:0;justify-content:flex-end}.buttons-group.hide{opacity:0}.close-group.show{opacity:1}.icon-registro{font-size:1.
|
|
1
|
+
.modal-title-container{display:flex;justify-content:space-between;align-items:center}.red-item{height:30px;width:8px;background-color:#d13c47;border-top-right-radius:5px;border-bottom-right-radius:5px}.modal-subtitle-container-left{display:flex;justify-content:center;align-items:center;font-weight:500;gap:.5rem}.modal-subtitle{margin:0;padding:0;font-size:1.1rem;color:#303d50;font-weight:600}.modal-subtitle-container-right{display:flex;justify-content:flex-end;overflow:visible}.animation-wrapper{position:relative;display:grid;grid-template-columns:1fr;width:100%}.buttons-group,.close-group{grid-row-start:1;grid-column-start:1;display:flex;gap:1rem;align-items:center;transition:all .2s cubic-bezier(.1,0,.1,1)}.buttons-group{opacity:1}.close-group{opacity:0;justify-content:flex-end}.buttons-group.hide{opacity:0}.close-group.show{opacity:1}.icon-registro{font-size:1.4rem;transition:all .3s ease-in-out;color:#646c73}.icon-registro:hover{color:#1f79ef;transition:all .3s ease-in-out;cursor:pointer}.icon-close-registro{font-size:1.4rem;transition:all .3s ease-in-out;color:#d13c47}.icon-close-registro:hover{color:#a31a23;transition:all .3s ease-in-out;cursor:pointer}.modal-horizontal-line{border-radius:10px;border-top:2px solid #D13C47;margin-top:.5rem;opacity:.75}.modal-title-body{height:calc(100% - 72px);overflow-y:auto}.modal-title-body::-webkit-scrollbar{width:10px}.modal-title-body::-webkit-scrollbar-track{background:transparent}.modal-title-body::-webkit-scrollbar-thumb{background-color:#303d50;border-radius:10px;border:3px solid transparent;background-clip:padding-box}.icon-container{position:relative;display:inline-block}.tooltip-text{z-index:9999;visibility:hidden;width:max-content;background-color:#737a83c0;color:#fff;text-align:center;border-radius:7px;padding:6px 10px;position:absolute;z-index:1000;top:100%;right:0;margin-top:8px;opacity:0;transition:opacity .1s;pointer-events:none;font-size:.9rem;transition:all .1s ease-in-out}.icon-container:hover .tooltip-text{visibility:visible;opacity:1}
|
package/dist/lib/ui.d.ts
CHANGED
|
@@ -1 +1,5 @@
|
|
|
1
|
+
export { Encabezado } from './ui/components/Encabezado';
|
|
1
2
|
export { Subtitulo } from './ui/components/Subtitulo';
|
|
3
|
+
export { TituloModal } from './tables/components/TituloModal';
|
|
4
|
+
export { Tarjeta } from './ui/components/Tarjeta';
|
|
5
|
+
export { ContenedorTarjeta } from './ui/components/ContenedorTarjeta';
|
|
@@ -1,21 +1,20 @@
|
|
|
1
1
|
import { jsx as r, jsxs as j } from "react/jsx-runtime";
|
|
2
|
-
import * as
|
|
3
|
-
import
|
|
2
|
+
import * as b from "react";
|
|
3
|
+
import C, { useRef as O, useContext as E, useEffect as M } from "react";
|
|
4
4
|
import { MenuLateral as F } from "./MenuLateral.js";
|
|
5
|
-
import { N as
|
|
6
|
-
import { u as
|
|
5
|
+
import { N as H, u as W, a as Y, d as z, b as G, q as J, c as D, e as L, f as Q, g as X } from "../../NotificacionUsuario-BA4-axVh.js";
|
|
6
|
+
import { u as Z, T as ee, g as te, a as ne, b as ae } from "../../Bootstrap-B6mAgGTS.js";
|
|
7
7
|
import { u as k, c as B } from "../../ThemeProvider-CFCmmLJC.js";
|
|
8
|
-
import { S as P, T as
|
|
9
|
-
|
|
10
|
-
U.displayName = "CardHeaderContext";
|
|
8
|
+
import { S as P, T as re, m as se } from "../../TabContext-BvNFEruk.js";
|
|
9
|
+
import { c as oe } from "../../CardHeaderContext-DVw0yHuy.js";
|
|
11
10
|
function A(n, e) {
|
|
12
11
|
let a = 0;
|
|
13
|
-
return
|
|
12
|
+
return b.Children.map(n, (t) => /* @__PURE__ */ b.isValidElement(t) ? e(t, a++) : t);
|
|
14
13
|
}
|
|
15
14
|
function le(n, e) {
|
|
16
15
|
let a = 0;
|
|
17
|
-
|
|
18
|
-
/* @__PURE__ */
|
|
16
|
+
b.Children.forEach(n, (t) => {
|
|
17
|
+
/* @__PURE__ */ b.isValidElement(t) && e(t, a++);
|
|
19
18
|
});
|
|
20
19
|
}
|
|
21
20
|
const ie = ["as", "onSelect", "activeKey", "role", "onKeyDown"];
|
|
@@ -29,7 +28,7 @@ function ce(n, e) {
|
|
|
29
28
|
return a;
|
|
30
29
|
}
|
|
31
30
|
const I = () => {
|
|
32
|
-
}, R =
|
|
31
|
+
}, R = z("event-key"), U = /* @__PURE__ */ b.forwardRef((n, e) => {
|
|
33
32
|
let {
|
|
34
33
|
// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
|
|
35
34
|
as: a = "div",
|
|
@@ -38,19 +37,19 @@ const I = () => {
|
|
|
38
37
|
role: c,
|
|
39
38
|
onKeyDown: o
|
|
40
39
|
} = n, u = ce(n, ie);
|
|
41
|
-
const x =
|
|
42
|
-
let
|
|
43
|
-
l && (c = c || "tablist", s = l.activeKey,
|
|
44
|
-
const f = O(null),
|
|
40
|
+
const x = W(), m = O(!1), y = E(P), l = E(re);
|
|
41
|
+
let v, N;
|
|
42
|
+
l && (c = c || "tablist", s = l.activeKey, v = l.getControlledId, N = l.getControllerId);
|
|
43
|
+
const f = O(null), p = (i) => {
|
|
45
44
|
const d = f.current;
|
|
46
45
|
if (!d) return null;
|
|
47
|
-
const T =
|
|
46
|
+
const T = J(d, `[${R}]:not([aria-disabled=true])`), S = d.querySelector("[aria-selected=true]");
|
|
48
47
|
if (!S || S !== document.activeElement) return null;
|
|
49
48
|
const w = T.indexOf(S);
|
|
50
49
|
if (w === -1) return null;
|
|
51
|
-
let
|
|
52
|
-
return
|
|
53
|
-
},
|
|
50
|
+
let g = w + i;
|
|
51
|
+
return g >= T.length && (g = 0), g < 0 && (g = T.length - 1), T[g];
|
|
52
|
+
}, h = (i, d) => {
|
|
54
53
|
i != null && (t == null || t(i, d), y == null || y(i, d));
|
|
55
54
|
}, K = (i) => {
|
|
56
55
|
if (o == null || o(i), !l)
|
|
@@ -59,47 +58,47 @@ const I = () => {
|
|
|
59
58
|
switch (i.key) {
|
|
60
59
|
case "ArrowLeft":
|
|
61
60
|
case "ArrowUp":
|
|
62
|
-
d =
|
|
61
|
+
d = p(-1);
|
|
63
62
|
break;
|
|
64
63
|
case "ArrowRight":
|
|
65
64
|
case "ArrowDown":
|
|
66
|
-
d =
|
|
65
|
+
d = p(1);
|
|
67
66
|
break;
|
|
68
67
|
default:
|
|
69
68
|
return;
|
|
70
69
|
}
|
|
71
|
-
d && (i.preventDefault(),
|
|
70
|
+
d && (i.preventDefault(), h(d.dataset[G("EventKey")] || null, i), m.current = !0, x());
|
|
72
71
|
};
|
|
73
72
|
M(() => {
|
|
74
|
-
if (f.current &&
|
|
73
|
+
if (f.current && m.current) {
|
|
75
74
|
const i = f.current.querySelector(`[${R}][aria-selected=true]`);
|
|
76
75
|
i == null || i.focus();
|
|
77
76
|
}
|
|
78
|
-
|
|
77
|
+
m.current = !1;
|
|
79
78
|
});
|
|
80
|
-
const
|
|
79
|
+
const q = Z(e, f);
|
|
81
80
|
return /* @__PURE__ */ r(P.Provider, {
|
|
82
|
-
value:
|
|
83
|
-
children: /* @__PURE__ */ r(
|
|
81
|
+
value: h,
|
|
82
|
+
children: /* @__PURE__ */ r(Y.Provider, {
|
|
84
83
|
value: {
|
|
85
84
|
role: c,
|
|
86
85
|
// used by NavLink to determine it's role
|
|
87
|
-
activeKey:
|
|
88
|
-
getControlledId:
|
|
86
|
+
activeKey: se(s),
|
|
87
|
+
getControlledId: v || I,
|
|
89
88
|
getControllerId: N || I
|
|
90
89
|
},
|
|
91
90
|
children: /* @__PURE__ */ r(a, Object.assign({}, u, {
|
|
92
91
|
onKeyDown: K,
|
|
93
|
-
ref:
|
|
92
|
+
ref: q,
|
|
94
93
|
role: c
|
|
95
94
|
}))
|
|
96
95
|
})
|
|
97
96
|
});
|
|
98
97
|
});
|
|
99
|
-
|
|
100
|
-
const de = Object.assign(
|
|
101
|
-
Item:
|
|
102
|
-
}), $ = /* @__PURE__ */
|
|
98
|
+
U.displayName = "Nav";
|
|
99
|
+
const de = Object.assign(U, {
|
|
100
|
+
Item: H
|
|
101
|
+
}), $ = /* @__PURE__ */ b.forwardRef(({
|
|
103
102
|
className: n,
|
|
104
103
|
bsPrefix: e,
|
|
105
104
|
as: a = "div",
|
|
@@ -110,7 +109,7 @@ const de = Object.assign(V, {
|
|
|
110
109
|
...t
|
|
111
110
|
})));
|
|
112
111
|
$.displayName = "NavItem";
|
|
113
|
-
const
|
|
112
|
+
const V = /* @__PURE__ */ b.forwardRef((n, e) => {
|
|
114
113
|
const {
|
|
115
114
|
as: a = "div",
|
|
116
115
|
bsPrefix: t,
|
|
@@ -119,34 +118,34 @@ const _ = /* @__PURE__ */ m.forwardRef((n, e) => {
|
|
|
119
118
|
justify: o = !1,
|
|
120
119
|
navbar: u,
|
|
121
120
|
navbarScroll: x,
|
|
122
|
-
className:
|
|
121
|
+
className: m,
|
|
123
122
|
activeKey: y,
|
|
124
123
|
...l
|
|
125
124
|
} = L(n, {
|
|
126
125
|
activeKey: "onSelect"
|
|
127
|
-
}),
|
|
128
|
-
let N, f,
|
|
129
|
-
const
|
|
130
|
-
return
|
|
126
|
+
}), v = k(t, "nav");
|
|
127
|
+
let N, f, p = !1;
|
|
128
|
+
const h = E(Q), K = E(oe);
|
|
129
|
+
return h ? (N = h.bsPrefix, p = u ?? !0) : K && ({
|
|
131
130
|
cardHeaderBsPrefix: f
|
|
132
131
|
} = K), /* @__PURE__ */ r(de, {
|
|
133
132
|
as: a,
|
|
134
133
|
ref: e,
|
|
135
134
|
activeKey: y,
|
|
136
|
-
className: B(
|
|
137
|
-
[
|
|
138
|
-
[`${N}-nav`]:
|
|
139
|
-
[`${N}-nav-scroll`]:
|
|
135
|
+
className: B(m, {
|
|
136
|
+
[v]: !p,
|
|
137
|
+
[`${N}-nav`]: p,
|
|
138
|
+
[`${N}-nav-scroll`]: p && x,
|
|
140
139
|
[`${f}-${s}`]: !!f,
|
|
141
|
-
[`${
|
|
142
|
-
[`${
|
|
143
|
-
[`${
|
|
140
|
+
[`${v}-${s}`]: !!s,
|
|
141
|
+
[`${v}-fill`]: c,
|
|
142
|
+
[`${v}-justified`]: o
|
|
144
143
|
}),
|
|
145
144
|
...l
|
|
146
145
|
});
|
|
147
146
|
});
|
|
148
|
-
|
|
149
|
-
const ue = Object.assign(
|
|
147
|
+
V.displayName = "Nav";
|
|
148
|
+
const ue = Object.assign(V, {
|
|
150
149
|
Item: $,
|
|
151
150
|
Link: D
|
|
152
151
|
});
|
|
@@ -180,7 +179,7 @@ function me(n) {
|
|
|
180
179
|
})
|
|
181
180
|
});
|
|
182
181
|
}
|
|
183
|
-
const
|
|
182
|
+
const _ = (n) => {
|
|
184
183
|
const {
|
|
185
184
|
id: e,
|
|
186
185
|
onSelect: a,
|
|
@@ -190,55 +189,55 @@ const q = (n) => {
|
|
|
190
189
|
variant: o = "tabs",
|
|
191
190
|
children: u,
|
|
192
191
|
activeKey: x = fe(u),
|
|
193
|
-
...
|
|
192
|
+
...m
|
|
194
193
|
} = L(n, {
|
|
195
194
|
activeKey: "onSelect"
|
|
196
195
|
});
|
|
197
|
-
return /* @__PURE__ */ j(
|
|
196
|
+
return /* @__PURE__ */ j(ee, {
|
|
198
197
|
id: e,
|
|
199
198
|
activeKey: x,
|
|
200
199
|
onSelect: a,
|
|
201
|
-
transition:
|
|
200
|
+
transition: te(t),
|
|
202
201
|
mountOnEnter: s,
|
|
203
202
|
unmountOnExit: c,
|
|
204
203
|
children: [/* @__PURE__ */ r(ue, {
|
|
205
204
|
id: e,
|
|
206
|
-
...
|
|
205
|
+
...m,
|
|
207
206
|
role: "tablist",
|
|
208
207
|
as: "ul",
|
|
209
208
|
variant: o,
|
|
210
209
|
children: A(u, me)
|
|
211
|
-
}), /* @__PURE__ */ r(
|
|
210
|
+
}), /* @__PURE__ */ r(ne, {
|
|
212
211
|
children: A(u, (y) => {
|
|
213
212
|
const l = {
|
|
214
213
|
...y.props
|
|
215
214
|
};
|
|
216
|
-
return delete l.title, delete l.disabled, delete l.tabClassName, delete l.tabAttrs, /* @__PURE__ */ r(
|
|
215
|
+
return delete l.title, delete l.disabled, delete l.tabClassName, delete l.tabAttrs, /* @__PURE__ */ r(ae, {
|
|
217
216
|
...l
|
|
218
217
|
});
|
|
219
218
|
})
|
|
220
219
|
})]
|
|
221
220
|
});
|
|
222
221
|
};
|
|
223
|
-
|
|
224
|
-
const
|
|
225
|
-
const [e, a] =
|
|
222
|
+
_.displayName = "Tabs";
|
|
223
|
+
const Ce = ({ children: n }) => {
|
|
224
|
+
const [e, a] = C.useState(!1), [t, s] = C.useState(void 0), c = () => {
|
|
226
225
|
a(!e);
|
|
227
226
|
};
|
|
228
|
-
return /* @__PURE__ */ j(
|
|
229
|
-
/* @__PURE__ */ r(
|
|
227
|
+
return /* @__PURE__ */ j(C.Fragment, { children: [
|
|
228
|
+
/* @__PURE__ */ r(X, {}),
|
|
230
229
|
/* @__PURE__ */ r(F, { onToggle: c, isOpen: e }),
|
|
231
230
|
/* @__PURE__ */ r("div", { className: `${e ? "menu-open" : ""}`, children: /* @__PURE__ */ r("div", { className: "main-section", children: /* @__PURE__ */ r(
|
|
232
|
-
|
|
231
|
+
_,
|
|
233
232
|
{
|
|
234
233
|
id: "controlled-tab",
|
|
235
234
|
activeKey: t,
|
|
236
235
|
onSelect: (o) => s(o !== null ? o : void 0),
|
|
237
|
-
children:
|
|
236
|
+
children: C.Children.map(n, (o) => C.isValidElement(o) ? o : null)
|
|
238
237
|
}
|
|
239
238
|
) }) })
|
|
240
239
|
] });
|
|
241
240
|
};
|
|
242
241
|
export {
|
|
243
|
-
|
|
242
|
+
Ce as VentanaTabs
|
|
244
243
|
};
|
|
@@ -2,12 +2,12 @@ import { jsx as s, jsxs as d } from "react/jsx-runtime";
|
|
|
2
2
|
import { useState as n, useEffect as f } from "react";
|
|
3
3
|
import '../../assets/Modal.css';const C = ({
|
|
4
4
|
show: o,
|
|
5
|
-
onHide:
|
|
5
|
+
onHide: l,
|
|
6
6
|
title: c,
|
|
7
7
|
children: r,
|
|
8
8
|
closeModalOut: m
|
|
9
9
|
}) => {
|
|
10
|
-
const [
|
|
10
|
+
const [a, t] = n(!1), [i, e] = n(!1);
|
|
11
11
|
return f(() => {
|
|
12
12
|
o ? t(!0) : (e(!0), setTimeout(() => {
|
|
13
13
|
t(!1), e(!1);
|
|
@@ -15,21 +15,21 @@ import '../../assets/Modal.css';const C = ({
|
|
|
15
15
|
}, [o]), /* @__PURE__ */ s(
|
|
16
16
|
"div",
|
|
17
17
|
{
|
|
18
|
-
className: `modal-overlay ${
|
|
18
|
+
className: `modal-overlay ${a ? "show" : ""} ${i ? "hide" : ""}`,
|
|
19
19
|
onClick: () => {
|
|
20
20
|
m && (e(!0), setTimeout(() => {
|
|
21
|
-
|
|
21
|
+
l(), e(!1);
|
|
22
22
|
}, 200));
|
|
23
23
|
},
|
|
24
24
|
children: /* @__PURE__ */ d(
|
|
25
25
|
"div",
|
|
26
26
|
{
|
|
27
|
-
className: `modal-container ${
|
|
27
|
+
className: `modal-container ${a ? "show" : ""} ${i ? "hide" : ""}`,
|
|
28
28
|
onClick: (h) => h.stopPropagation(),
|
|
29
29
|
children: [
|
|
30
30
|
/* @__PURE__ */ d("div", { className: "modal_header", children: [
|
|
31
31
|
/* @__PURE__ */ s("span", { children: c }),
|
|
32
|
-
/* @__PURE__ */ s("button", { className: "close_button", onClick:
|
|
32
|
+
/* @__PURE__ */ s("button", { className: "close_button", onClick: l, children: "×" })
|
|
33
33
|
] }),
|
|
34
34
|
/* @__PURE__ */ s("div", { className: "modal_body", children: r })
|
|
35
35
|
]
|
|
@@ -39,5 +39,5 @@ import '../../assets/Modal.css';const C = ({
|
|
|
39
39
|
);
|
|
40
40
|
};
|
|
41
41
|
export {
|
|
42
|
-
C as
|
|
42
|
+
C as CustomModal
|
|
43
43
|
};
|