bmi-next-brokers 1.1.3 → 1.1.4
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/index7.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._modalOverlay_dvid0_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;animation:_overlayFadeIn_dvid0_1 .25s ease-in-out forwards;overflow:hidden;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}._modalOverlay_dvid0_1._closing_dvid0_16{animation:_overlayFadeOut_dvid0_1 .25s ease-in-out forwards}@keyframes _overlayFadeIn_dvid0_1{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}@keyframes _overlayFadeOut_dvid0_1{0%{opacity:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}._modal_dvid0_1{display:flex;flex-direction:column;border-radius:24px;background-color:#fff;box-shadow:0 4px 6px #0000001a;max-height:calc(100dvh - 15px)}._modalHeader_dvid0_52{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;gap:8px}._modalTitle_dvid0_60{color:var(--Blacks-Black, #000);font-size:20px;font-style:normal;font-weight:600;line-height:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}._closeIcon_dvid0_71{display:flex;flex-direction:column;border-radius:50%;background-color:#d9d9d9;align-items:center;justify-content:center;aspect-ratio:1/1;padding:6.2px;cursor:pointer}._modalBody_dvid0_83{flex:1;overflow-y:auto;padding:0 16px 16px}._modalBody_dvid0_83::-webkit-scrollbar{display:none}._modalFooter_dvid0_93{display:grid;grid-template-columns:1fr 1fr;margin-left:auto;width:fit-content;gap:19px;padding-inline:16px;margin-block:16px}._modalFooter_dvid0_93 :only-child{grid-column:2}
|
|
@@ -4,37 +4,41 @@ import { default as React } from 'react';
|
|
|
4
4
|
*/
|
|
5
5
|
export interface ModalProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
6
6
|
isOpen: boolean;
|
|
7
|
-
setIsOpen: (isOpen: boolean) => void;
|
|
8
7
|
title?: string;
|
|
9
8
|
children?: React.ReactNode;
|
|
10
9
|
width?: number;
|
|
11
|
-
confirmButton?: string;
|
|
12
|
-
cancelButton?: string;
|
|
10
|
+
confirmButton?: string | boolean;
|
|
11
|
+
cancelButton?: string | boolean;
|
|
13
12
|
onConfirm?: () => Promise<void> | void;
|
|
14
13
|
onCancel?: () => Promise<void> | void;
|
|
15
14
|
zIndex?: number;
|
|
16
15
|
className?: string;
|
|
17
16
|
onClickOverlay?: (() => Promise<void> | void) | false;
|
|
18
17
|
onClose?: (() => Promise<void> | void) | false;
|
|
18
|
+
closeModal: () => void;
|
|
19
19
|
}
|
|
20
20
|
/**
|
|
21
21
|
* Componente Modal para mostrar un modal con overlay.
|
|
22
22
|
* Permite pasar título, contenido personalizado, botones de confirmación y cancelación,
|
|
23
23
|
* y manejar el cierre del modal mediante callbacks.
|
|
24
24
|
*
|
|
25
|
-
* @param isOpen Controla la visibilidad del modal.
|
|
26
|
-
* @param
|
|
27
|
-
* @param
|
|
28
|
-
* @param
|
|
29
|
-
* @param
|
|
30
|
-
* @param
|
|
31
|
-
* @param
|
|
32
|
-
* @param
|
|
33
|
-
* @param
|
|
34
|
-
* @param
|
|
35
|
-
* @param
|
|
36
|
-
* @param onClickOverlay Callback opcional al hacer click
|
|
37
|
-
*
|
|
25
|
+
* @param isOpen - Controla la visibilidad del modal.
|
|
26
|
+
* @param title - Título que se muestra en el header del modal.
|
|
27
|
+
* @param children - Contenido del modal; puede ser cualquier componente React.
|
|
28
|
+
* @param width - Ancho del modal en píxeles. Por defecto 752.
|
|
29
|
+
* @param confirmButton - Texto del botón de confirmación. Si es `true`, muestra "Confirmar". Si es `false`, no se renderiza. Se puede pasar texto personalizado.
|
|
30
|
+
* @param cancelButton - Texto del botón de cancelación. Si es `true`, muestra "Cancelar". Si es `false`, no se renderiza. Se puede pasar texto personalizado
|
|
31
|
+
* @param onConfirm - Callback opcional al pulsar el botón de confirmación.
|
|
32
|
+
* @param onCancel - Callback opcional al pulsar el botón de cancelación.
|
|
33
|
+
* @param zIndex - Número para controlar la superposición del modal.
|
|
34
|
+
* @param className - Clases CSS adicionales para el modal.
|
|
35
|
+
* @param style - Estilos inline adicionales para el contenedor del modal.
|
|
36
|
+
* @param onClickOverlay - Callback opcional al hacer click fuera del modal.
|
|
37
|
+
* Si se pasa `false`, el overlay no cerrará el modal ni ejecutará acción alguna.
|
|
38
|
+
* @param onClose - Callback opcional al hacer click en el icono de cierre.
|
|
39
|
+
* Si se pasa `false`, no se renderiza el icono.
|
|
40
|
+
* @param closeModal - Función obligatoria que cierra el modal desde el exterior.
|
|
41
|
+
*
|
|
38
42
|
*
|
|
39
43
|
* @example
|
|
40
44
|
* ```tsx
|
|
@@ -44,21 +48,34 @@ export interface ModalProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
|
44
48
|
* export default function Example() {
|
|
45
49
|
* const [isOpen, setIsOpen] = useState(false);
|
|
46
50
|
*
|
|
51
|
+
* const handleConfirm = () => console.log("Confirmado");
|
|
52
|
+
* const handleCancel = () => console.log("Cancelado");
|
|
53
|
+
*
|
|
47
54
|
* return (
|
|
48
55
|
* <>
|
|
49
56
|
* <Button onClick={() => setIsOpen(true)}>Abrir Modal</Button>
|
|
50
57
|
*
|
|
51
58
|
* <Modal
|
|
52
59
|
* isOpen={isOpen}
|
|
53
|
-
*
|
|
60
|
+
* closeModal={() => setIsOpen(false)}
|
|
54
61
|
* title="Ejemplo de Modal"
|
|
55
|
-
* width={
|
|
56
|
-
* confirmButton=
|
|
62
|
+
* width={500}
|
|
63
|
+
* confirmButton={false}
|
|
57
64
|
* cancelButton="Cancelar"
|
|
58
|
-
* onConfirm={
|
|
59
|
-
* onCancel={
|
|
65
|
+
* onConfirm={handleConfirm}
|
|
66
|
+
* onCancel={handleCancel}
|
|
67
|
+
* onClose={() => console.log("Click en el botón de cierre")}
|
|
60
68
|
* >
|
|
61
|
-
* <
|
|
69
|
+
* <div style={{ padding: "16px 0" }}>
|
|
70
|
+
* <p>
|
|
71
|
+
* Este es un contenido de ejemplo dentro del modal. Puedes poner
|
|
72
|
+
* cualquier componente aquí: formularios, listas, tablas, etc.
|
|
73
|
+
* </p>
|
|
74
|
+
* <p>
|
|
75
|
+
* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nisi vel
|
|
76
|
+
* consectetur interdum, aliquet nunc vitae convallis sapien.
|
|
77
|
+
* </p>
|
|
78
|
+
* </div>
|
|
62
79
|
* </Modal>
|
|
63
80
|
* </>
|
|
64
81
|
* );
|
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { Icon as
|
|
4
|
-
import { useScrollLock as
|
|
5
|
-
import { Button as
|
|
6
|
-
import { r as
|
|
7
|
-
import '../../assets/index7.css';const
|
|
8
|
-
modalOverlay:
|
|
9
|
-
closing:
|
|
10
|
-
modal:
|
|
11
|
-
modalHeader:
|
|
12
|
-
modalTitle:
|
|
13
|
-
closeIcon:
|
|
14
|
-
modalBody:
|
|
15
|
-
modalFooter:
|
|
16
|
-
},
|
|
17
|
-
isOpen:
|
|
18
|
-
|
|
19
|
-
title: r,
|
|
1
|
+
import { jsx as e, jsxs as n } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as O, useState as R } from "react";
|
|
3
|
+
import { Icon as S } from "../../icons/Icon.js";
|
|
4
|
+
import { useScrollLock as $ } from "../../hooks/useScrollLock.js";
|
|
5
|
+
import { Button as y } from "../Button/Button.js";
|
|
6
|
+
import { r as b } from "../../index-CGDUIzcq.js";
|
|
7
|
+
import '../../assets/index7.css';const D = "_modalOverlay_dvid0_1", L = "_closing_dvid0_16", j = "_modal_dvid0_1", V = "_modalHeader_dvid0_52", W = "_modalTitle_dvid0_60", X = "_closeIcon_dvid0_71", Y = "_modalBody_dvid0_83", Z = "_modalFooter_dvid0_93", o = {
|
|
8
|
+
modalOverlay: D,
|
|
9
|
+
closing: L,
|
|
10
|
+
modal: j,
|
|
11
|
+
modalHeader: V,
|
|
12
|
+
modalTitle: W,
|
|
13
|
+
closeIcon: X,
|
|
14
|
+
modalBody: Y,
|
|
15
|
+
modalFooter: Z
|
|
16
|
+
}, Q = ({
|
|
17
|
+
isOpen: r,
|
|
18
|
+
title: c,
|
|
20
19
|
children: g,
|
|
21
|
-
width:
|
|
22
|
-
confirmButton:
|
|
23
|
-
cancelButton: t,
|
|
20
|
+
width: p = 752,
|
|
21
|
+
confirmButton: d = !0,
|
|
22
|
+
cancelButton: t = !0,
|
|
24
23
|
onConfirm: i,
|
|
25
24
|
onCancel: m,
|
|
26
|
-
zIndex:
|
|
27
|
-
className:
|
|
28
|
-
style:
|
|
25
|
+
zIndex: I,
|
|
26
|
+
className: C,
|
|
27
|
+
style: N,
|
|
29
28
|
onClickOverlay: s,
|
|
30
|
-
onClose:
|
|
31
|
-
|
|
29
|
+
onClose: a,
|
|
30
|
+
closeModal: E,
|
|
31
|
+
...T
|
|
32
32
|
}) => {
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
|
|
33
|
+
const f = O(null), [k, _] = R(!1);
|
|
34
|
+
$(r);
|
|
35
|
+
const l = () => {
|
|
36
|
+
_(!0), setTimeout(() => {
|
|
37
|
+
E(), _(!1);
|
|
38
38
|
}, 250);
|
|
39
|
-
},
|
|
40
|
-
var
|
|
41
|
-
(
|
|
42
|
-
}, k = async () => {
|
|
43
|
-
d !== !1 && (typeof d == "function" && await d(), a());
|
|
39
|
+
}, x = async (H) => {
|
|
40
|
+
var h;
|
|
41
|
+
(h = f.current) != null && h.contains(H.target) || s !== !1 && (typeof s == "function" && await s(), l());
|
|
44
42
|
}, B = async () => {
|
|
45
|
-
|
|
46
|
-
},
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
return
|
|
52
|
-
|
|
43
|
+
a !== !1 && (typeof a == "function" && await a(), l());
|
|
44
|
+
}, w = async () => {
|
|
45
|
+
i && await i(), l();
|
|
46
|
+
}, A = async () => {
|
|
47
|
+
m && await m(), l();
|
|
48
|
+
}, u = t === !0 ? "Cancelar" : t || void 0, v = d === !0 ? "Confirmar" : d || void 0;
|
|
49
|
+
if (!r) return null;
|
|
50
|
+
const F = `${o.modal} ${C || ""}`;
|
|
51
|
+
return b.createPortal(
|
|
52
|
+
/* @__PURE__ */ e(
|
|
53
53
|
"div",
|
|
54
54
|
{
|
|
55
|
-
className: `${o.modalOverlay} ${
|
|
56
|
-
style: { zIndex: 3e3 + (
|
|
57
|
-
onClick:
|
|
58
|
-
children: /* @__PURE__ */
|
|
55
|
+
className: `${o.modalOverlay} ${k ? o.closing : ""}`,
|
|
56
|
+
style: { zIndex: 3e3 + (I || 0) },
|
|
57
|
+
onClick: x,
|
|
58
|
+
children: /* @__PURE__ */ n(
|
|
59
59
|
"div",
|
|
60
60
|
{
|
|
61
|
-
className:
|
|
62
|
-
style: { width:
|
|
63
|
-
ref:
|
|
64
|
-
...
|
|
61
|
+
className: F,
|
|
62
|
+
style: { width: p, ...N },
|
|
63
|
+
ref: f,
|
|
64
|
+
...T,
|
|
65
65
|
children: [
|
|
66
|
-
/* @__PURE__ */
|
|
67
|
-
|
|
68
|
-
/* @__PURE__ */
|
|
69
|
-
|
|
66
|
+
/* @__PURE__ */ n("div", { className: o.modalHeader, children: [
|
|
67
|
+
c && /* @__PURE__ */ e("h2", { className: o.modalTitle, children: c }),
|
|
68
|
+
a !== !1 && /* @__PURE__ */ e("div", { className: o.closeIcon, onClick: B, children: /* @__PURE__ */ e(
|
|
69
|
+
S,
|
|
70
70
|
{
|
|
71
71
|
name: "Close",
|
|
72
72
|
width: 12,
|
|
@@ -75,10 +75,10 @@ import '../../assets/index7.css';const $ = "_modalOverlay_tgv6x_2", b = "_closin
|
|
|
75
75
|
}
|
|
76
76
|
) })
|
|
77
77
|
] }),
|
|
78
|
-
/* @__PURE__ */
|
|
79
|
-
(
|
|
80
|
-
|
|
81
|
-
|
|
78
|
+
/* @__PURE__ */ e("div", { className: o.modalBody, children: g }),
|
|
79
|
+
(d || t) && /* @__PURE__ */ n("div", { className: o.modalFooter, children: [
|
|
80
|
+
u && /* @__PURE__ */ e(y, { variant: "outline", onClick: A, fullWidth: !0, children: u }),
|
|
81
|
+
v && /* @__PURE__ */ e(y, { variant: "brand", onClick: w, fullWidth: !0, children: v })
|
|
82
82
|
] })
|
|
83
83
|
]
|
|
84
84
|
}
|
|
@@ -89,5 +89,5 @@ import '../../assets/index7.css';const $ = "_modalOverlay_tgv6x_2", b = "_closin
|
|
|
89
89
|
);
|
|
90
90
|
};
|
|
91
91
|
export {
|
|
92
|
-
|
|
92
|
+
Q as Modal
|
|
93
93
|
};
|
package/package.json
CHANGED