bmi-next-brokers 1.1.3 → 1.1.5
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_1x735_1{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;animation:_overlayFadeIn_1x735_1 .25s ease-in-out forwards;overflow:hidden}._modalOverlay_1x735_1._closing_1x735_15{animation:_overlayFadeOut_1x735_1 .25s ease-in-out forwards}@keyframes _overlayFadeIn_1x735_1{0%{opacity:0}to{opacity:1}}@keyframes _overlayFadeOut_1x735_1{0%{opacity:1}to{opacity:0}}._modal_1x735_1{display:flex;flex-direction:column;border-radius:24px;background-color:#fff;box-shadow:0 4px 6px #0000001a;max-height:calc(100dvh - 15px)}._modalHeader_1x735_47{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;gap:8px}._modalTitle_1x735_55{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_1x735_66{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;margin-left:auto}._modalBody_1x735_79{flex:1;overflow-y:auto;padding:0 16px 16px}._modalBody_1x735_79::-webkit-scrollbar{display:none}._modalFooter_1x735_89{display:grid;grid-template-columns:1fr 1fr;margin-left:auto;width:fit-content;gap:19px;padding-inline:16px;margin-block:16px}._modalFooter_1x735_89 :only-child{grid-column:2}
|
|
@@ -1,64 +1,95 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { ButtonSize, ButtonVariant } from '../Button';
|
|
3
|
+
type ModalButtonProps = {
|
|
4
|
+
show?: boolean;
|
|
5
|
+
text?: string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
action?: () => Promise<void> | void;
|
|
8
|
+
size?: ButtonSize;
|
|
9
|
+
variant?: ButtonVariant;
|
|
10
|
+
loading?: boolean;
|
|
11
|
+
};
|
|
2
12
|
/**
|
|
3
13
|
* Props del Modal
|
|
4
14
|
*/
|
|
5
15
|
export interface ModalProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
6
16
|
isOpen: boolean;
|
|
7
|
-
setIsOpen: (isOpen: boolean) => void;
|
|
8
17
|
title?: string;
|
|
9
18
|
children?: React.ReactNode;
|
|
10
19
|
width?: number;
|
|
11
|
-
confirmButton
|
|
12
|
-
cancelButton
|
|
13
|
-
onConfirm?: () => Promise<void> | void;
|
|
14
|
-
onCancel?: () => Promise<void> | void;
|
|
20
|
+
confirmButton: ModalButtonProps;
|
|
21
|
+
cancelButton: ModalButtonProps;
|
|
15
22
|
zIndex?: number;
|
|
16
23
|
className?: string;
|
|
17
24
|
onClickOverlay?: (() => Promise<void> | void) | false;
|
|
18
25
|
onClose?: (() => Promise<void> | void) | false;
|
|
26
|
+
closeModal: () => void;
|
|
19
27
|
}
|
|
20
28
|
/**
|
|
21
|
-
*
|
|
22
|
-
* Permite pasar título, contenido personalizado, botones de confirmación y cancelación,
|
|
23
|
-
* y manejar el cierre del modal mediante callbacks.
|
|
29
|
+
* Modal con overlay, header, body y footer configurable.
|
|
24
30
|
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
* @param
|
|
35
|
-
* @param
|
|
36
|
-
* @param
|
|
37
|
-
* @param
|
|
31
|
+
* Puedes pasar un objeto a `confirmButton` y `cancelButton` para controlar:
|
|
32
|
+
* - `show`: si se renderiza el botón (por defecto true)
|
|
33
|
+
* - `text`: texto del botón
|
|
34
|
+
* - `action`: función a ejecutar al hacer click
|
|
35
|
+
* - `variant`: variante visual del botón ("brand", "outline", etc.)
|
|
36
|
+
* - `size`: tamaño del botón ("small", "medium", "large")
|
|
37
|
+
* - `disabled`: deshabilita el botón
|
|
38
|
+
* - `loading`: muestra estado de carga en el botón
|
|
39
|
+
*
|
|
40
|
+
* @param isOpen - Controla la visibilidad del modal.
|
|
41
|
+
* @param title - Título que se muestra en el header del modal.
|
|
42
|
+
* @param children - Contenido del modal; puede ser cualquier componente React.
|
|
43
|
+
* @param width - Ancho del modal en píxeles. Por defecto 752.
|
|
44
|
+
* @param confirmButton - Configuración del botón de confirmación.
|
|
45
|
+
* @param cancelButton - Configuración del botón de cancelación.
|
|
46
|
+
* @param zIndex - Número para controlar la superposición del modal.
|
|
47
|
+
* @param className - Clases CSS adicionales para el modal.
|
|
48
|
+
* @param style - Estilos inline adicionales para el contenedor del modal.
|
|
49
|
+
* @param onClickOverlay - Callback opcional al hacer click fuera del modal. Si se pasa `false`, el overlay no cierra el modal ni ejecuta acción.
|
|
50
|
+
* @param onClose - Callback opcional al pulsar el icono de cierre. Si se pasa `false`, no se renderiza el icono de cierre.
|
|
51
|
+
* @param closeModal - Función obligatoria que cierra el modal desde el exterior.
|
|
38
52
|
*
|
|
39
53
|
* @example
|
|
40
54
|
* ```tsx
|
|
41
55
|
* import { useState } from "react";
|
|
42
|
-
* import { Modal, Button } from "
|
|
56
|
+
* import { Modal, Button } from "bmi-next-brokers";
|
|
43
57
|
*
|
|
44
58
|
* export default function Example() {
|
|
45
59
|
* const [isOpen, setIsOpen] = useState(false);
|
|
46
60
|
*
|
|
61
|
+
* const handleConfirm = () => console.log("Confirmado");
|
|
62
|
+
* const handleCancel = () => console.log("Cancelado");
|
|
63
|
+
*
|
|
47
64
|
* return (
|
|
48
65
|
* <>
|
|
49
66
|
* <Button onClick={() => setIsOpen(true)}>Abrir Modal</Button>
|
|
50
67
|
*
|
|
51
68
|
* <Modal
|
|
52
69
|
* isOpen={isOpen}
|
|
53
|
-
*
|
|
70
|
+
* closeModal={() => setIsOpen(false)}
|
|
54
71
|
* title="Ejemplo de Modal"
|
|
55
|
-
* width={
|
|
56
|
-
* confirmButton=
|
|
57
|
-
*
|
|
58
|
-
*
|
|
59
|
-
*
|
|
72
|
+
* width={500}
|
|
73
|
+
* confirmButton={{
|
|
74
|
+
* text: "Guardar",
|
|
75
|
+
* action: handleConfirm,
|
|
76
|
+
* variant: "brand",
|
|
77
|
+
* size: "small",
|
|
78
|
+
* loading: false
|
|
79
|
+
* }}
|
|
80
|
+
* cancelButton={{
|
|
81
|
+
* show: false, // no se renderiza
|
|
82
|
+
* text: "Cerrar",
|
|
83
|
+
* action: handleCancel,
|
|
84
|
+
* variant: "outline",
|
|
85
|
+
* size: "small",
|
|
86
|
+
* loading: false
|
|
87
|
+
* }}
|
|
88
|
+
* onClose={() => console.log("Click en el botón de cierre")}
|
|
60
89
|
* >
|
|
61
|
-
* <
|
|
90
|
+
* <div style={{ padding: "16px 0" }}>
|
|
91
|
+
* <p>Contenido del modal...</p>
|
|
92
|
+
* </div>
|
|
62
93
|
* </Modal>
|
|
63
94
|
* </>
|
|
64
95
|
* );
|
|
@@ -66,3 +97,4 @@ export interface ModalProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
|
66
97
|
* ```
|
|
67
98
|
*/
|
|
68
99
|
export declare const Modal: React.FC<ModalProps>;
|
|
100
|
+
export {};
|
|
@@ -1,72 +1,68 @@
|
|
|
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:
|
|
1
|
+
import { jsx as e, jsxs as r } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as z, useState as A } from "react";
|
|
3
|
+
import { Icon as F } from "../../icons/Icon.js";
|
|
4
|
+
import { useScrollLock as H } from "../../hooks/useScrollLock.js";
|
|
5
|
+
import { Button as y } from "../Button/Button.js";
|
|
6
|
+
import { r as O } from "../../index-CGDUIzcq.js";
|
|
7
|
+
import '../../assets/index7.css';const R = "_modalOverlay_1x735_1", $ = "_closing_1x735_15", D = "_modal_1x735_1", L = "_modalHeader_1x735_47", j = "_modalTitle_1x735_55", V = "_closeIcon_1x735_66", W = "_modalBody_1x735_79", X = "_modalFooter_1x735_89", o = {
|
|
8
|
+
modalOverlay: R,
|
|
9
|
+
closing: $,
|
|
10
10
|
modal: D,
|
|
11
11
|
modalHeader: L,
|
|
12
12
|
modalTitle: j,
|
|
13
13
|
closeIcon: V,
|
|
14
14
|
modalBody: W,
|
|
15
15
|
modalFooter: X
|
|
16
|
-
},
|
|
17
|
-
isOpen:
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
onConfirm: i,
|
|
25
|
-
onCancel: m,
|
|
26
|
-
zIndex: x,
|
|
16
|
+
}, K = ({
|
|
17
|
+
isOpen: t,
|
|
18
|
+
title: n,
|
|
19
|
+
children: x,
|
|
20
|
+
width: g = 752,
|
|
21
|
+
confirmButton: a,
|
|
22
|
+
cancelButton: l,
|
|
23
|
+
zIndex: v,
|
|
27
24
|
className: p,
|
|
28
|
-
style:
|
|
29
|
-
onClickOverlay:
|
|
30
|
-
onClose:
|
|
31
|
-
|
|
25
|
+
style: u,
|
|
26
|
+
onClickOverlay: i,
|
|
27
|
+
onClose: s,
|
|
28
|
+
closeModal: C,
|
|
29
|
+
...I
|
|
32
30
|
}) => {
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
const
|
|
36
|
-
|
|
37
|
-
|
|
31
|
+
const c = z(null), [w, m] = A(!1);
|
|
32
|
+
H(t);
|
|
33
|
+
const d = () => {
|
|
34
|
+
m(!0), setTimeout(() => {
|
|
35
|
+
C(), m(!1);
|
|
38
36
|
}, 250);
|
|
39
|
-
},
|
|
40
|
-
var
|
|
41
|
-
(
|
|
37
|
+
}, N = async (T) => {
|
|
38
|
+
var h;
|
|
39
|
+
(h = c.current) != null && h.contains(T.target) || i !== !1 && (typeof i == "function" && await i(), d());
|
|
40
|
+
}, E = async () => {
|
|
41
|
+
s !== !1 && (typeof s == "function" && await s(), d());
|
|
42
|
+
}, b = async () => {
|
|
43
|
+
a.action && await a.action(), d();
|
|
42
44
|
}, k = async () => {
|
|
43
|
-
|
|
44
|
-
},
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
m && await m(), a();
|
|
48
|
-
};
|
|
49
|
-
if (!n) return null;
|
|
50
|
-
const w = `${o.modal} ${p || ""}`;
|
|
51
|
-
return S.createPortal(
|
|
52
|
-
/* @__PURE__ */ l(
|
|
45
|
+
l.action && await l.action(), d();
|
|
46
|
+
}, _ = l.show ?? !0, f = a.show ?? !0, S = `${o.modal} ${p || ""}`;
|
|
47
|
+
return t ? O.createPortal(
|
|
48
|
+
/* @__PURE__ */ e(
|
|
53
49
|
"div",
|
|
54
50
|
{
|
|
55
|
-
className: `${o.modalOverlay} ${
|
|
56
|
-
style: { zIndex: 3e3 + (
|
|
57
|
-
onClick:
|
|
58
|
-
children: /* @__PURE__ */
|
|
51
|
+
className: `${o.modalOverlay} ${w ? o.closing : ""}`,
|
|
52
|
+
style: { zIndex: 3e3 + (v || 0) },
|
|
53
|
+
onClick: N,
|
|
54
|
+
children: /* @__PURE__ */ r(
|
|
59
55
|
"div",
|
|
60
56
|
{
|
|
61
|
-
className:
|
|
62
|
-
style: { width:
|
|
63
|
-
ref:
|
|
64
|
-
...
|
|
57
|
+
className: S,
|
|
58
|
+
style: { width: g, ...u },
|
|
59
|
+
ref: c,
|
|
60
|
+
...I,
|
|
65
61
|
children: [
|
|
66
|
-
/* @__PURE__ */
|
|
67
|
-
|
|
68
|
-
/* @__PURE__ */
|
|
69
|
-
|
|
62
|
+
/* @__PURE__ */ r("div", { className: o.modalHeader, children: [
|
|
63
|
+
n && /* @__PURE__ */ e("span", { className: o.modalTitle, children: n }),
|
|
64
|
+
s !== !1 && /* @__PURE__ */ e("div", { className: o.closeIcon, onClick: E, children: /* @__PURE__ */ e(
|
|
65
|
+
F,
|
|
70
66
|
{
|
|
71
67
|
name: "Close",
|
|
72
68
|
width: 12,
|
|
@@ -75,10 +71,32 @@ import '../../assets/index7.css';const $ = "_modalOverlay_tgv6x_2", b = "_closin
|
|
|
75
71
|
}
|
|
76
72
|
) })
|
|
77
73
|
] }),
|
|
78
|
-
/* @__PURE__ */
|
|
79
|
-
(
|
|
80
|
-
|
|
81
|
-
|
|
74
|
+
/* @__PURE__ */ e("div", { className: o.modalBody, children: x }),
|
|
75
|
+
(_ || f) && /* @__PURE__ */ r("div", { className: o.modalFooter, children: [
|
|
76
|
+
_ && /* @__PURE__ */ e(
|
|
77
|
+
y,
|
|
78
|
+
{
|
|
79
|
+
variant: l.variant || "outline",
|
|
80
|
+
onClick: k,
|
|
81
|
+
disabled: l.disabled || !1,
|
|
82
|
+
size: l.size || "small",
|
|
83
|
+
loading: l.loading,
|
|
84
|
+
fullWidth: !0,
|
|
85
|
+
children: l.text || "Cancelar"
|
|
86
|
+
}
|
|
87
|
+
),
|
|
88
|
+
f && /* @__PURE__ */ e(
|
|
89
|
+
y,
|
|
90
|
+
{
|
|
91
|
+
variant: a.variant || "brand",
|
|
92
|
+
onClick: b,
|
|
93
|
+
disabled: a.disabled || !1,
|
|
94
|
+
size: a.size || "small",
|
|
95
|
+
loading: a.loading,
|
|
96
|
+
fullWidth: !0,
|
|
97
|
+
children: a.text || "Confirmar"
|
|
98
|
+
}
|
|
99
|
+
)
|
|
82
100
|
] })
|
|
83
101
|
]
|
|
84
102
|
}
|
|
@@ -86,8 +104,8 @@ import '../../assets/index7.css';const $ = "_modalOverlay_tgv6x_2", b = "_closin
|
|
|
86
104
|
}
|
|
87
105
|
),
|
|
88
106
|
document.getElementById("root") || document.body
|
|
89
|
-
);
|
|
107
|
+
) : null;
|
|
90
108
|
};
|
|
91
109
|
export {
|
|
92
|
-
|
|
110
|
+
K as Modal
|
|
93
111
|
};
|
package/package.json
CHANGED