bmi-next-brokers 3.0.5 → 3.0.7
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/Switch.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._switch_wo4ya_1{--switch-bg: var(--ui-blue-100);--switch-active-bg: #2054a5;--switch-active-text: #ffffff;--switch-inactive-text: #2054a5;--switch-inset: 4px;--switch-pad-y: 7px;--switch-pad-x: 12px;--switch-font: 16px;--switch-line-height: 19.2px;position:relative;display:flex;flex-direction:row;gap:0;padding:var(--switch-inset);border-radius:1000px;background:var(--switch-bg);width:fit-content}._switch_wo4ya_1._fullWidth_wo4ya_24{width:100%}._switch_wo4ya_1._fullWidth_wo4ya_24 ._option_wo4ya_28{flex:1}._extraSmall_wo4ya_33{--switch-inset: 3px;--switch-pad-y: 6px;--switch-pad-x: 12px;--switch-font: 12px;--switch-line-height: 14.4px}._small_wo4ya_41{--switch-inset: 3px;--switch-pad-y: 6px;--switch-pad-x: 12px;--switch-font: 14px;--switch-line-height: 16.8px}._large_wo4ya_49{--switch-inset: 4px;--switch-pad-y: 10px;--switch-pad-x: 16px;--switch-font: 18px;--switch-line-height: 21.6px}._extraLarge_wo4ya_57{--switch-inset: 6px;--switch-pad-y: 6px;--switch-pad-x: 14px;--switch-font: 20px;--switch-line-height: 24px}._switch_wo4ya_1 ._indicator_wo4ya_66{position:absolute;top:var(--switch-inset);bottom:var(--switch-inset);left:0;background:#2054a5;border-radius:1000px;transition:transform .42s cubic-bezier(.34,1.56,.64,1),width .42s cubic-bezier(.34,1.56,.64,1);pointer-events:none;z-index:0}._switch_wo4ya_1._simple_wo4ya_82 ._indicator_wo4ya_66{transition:transform .22s ease,width .22s ease}._switch_wo4ya_1._simple_wo4ya_82 ._option_wo4ya_28._active_wo4ya_88 ._label_wo4ya_88{animation:none}._switch_wo4ya_1 ._option_wo4ya_28{position:relative;z-index:1;border:none;background:transparent;color:var(--switch-inactive-text);font-family:var(--font-medium);font-size:var(--switch-font);line-height:var(--switch-line-height);cursor:pointer;transition:color .25s ease,transform .25s ease;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:4px;padding:var(--switch-pad-y) var(--switch-pad-x);border-radius:1000px}._switch_wo4ya_1 ._option_wo4ya_28:active{transform:scale(.94)}._switch_wo4ya_1 ._option_wo4ya_28._active_wo4ya_88{color:var(--switch-active-text)}._switch_wo4ya_1 ._option_wo4ya_28._active_wo4ya_88 ._label_wo4ya_88{animation:_pop_wo4ya_1 .32s ease}@keyframes _pop_wo4ya_1{0%{transform:scale(1)}45%{transform:scale(1.12)}to{transform:scale(1)}}
|
|
@@ -29,7 +29,9 @@ export interface SwitchProps {
|
|
|
29
29
|
background?: string;
|
|
30
30
|
/** si false, cada opción se adapta a su contenido; por defecto true (todas al ancho de la más larga) */
|
|
31
31
|
equalWidth?: boolean;
|
|
32
|
+
/** ancho de 100% */
|
|
33
|
+
fullWidth?: boolean;
|
|
32
34
|
/** estilos inline aplicados a todos los botones de opción */
|
|
33
35
|
optionStyle?: React.CSSProperties;
|
|
34
36
|
}
|
|
35
|
-
export declare const Switch: ({ options, active, onChange, size, simpleAnimation, iconSize, className, activeColor, activeTextColor, inactiveTextColor, background, equalWidth, optionStyle, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export declare const Switch: ({ options, active, onChange, size, simpleAnimation, iconSize, className, activeColor, activeTextColor, inactiveTextColor, background, equalWidth, fullWidth, optionStyle, }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,110 +1,112 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { Icon as
|
|
4
|
-
import '../../assets/Switch.css';const
|
|
5
|
-
switch: "
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
1
|
+
import { jsxs as v, jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as w, useState as k, useLayoutEffect as D } from "react";
|
|
3
|
+
import { Icon as R } from "../../icons/Icon.js";
|
|
4
|
+
import '../../assets/Switch.css';const T = "_fullWidth_wo4ya_24", Z = "_option_wo4ya_28", z = "_extraSmall_wo4ya_33", B = "_small_wo4ya_41", K = "_large_wo4ya_49", O = "_extraLarge_wo4ya_57", V = "_indicator_wo4ya_66", X = "_simple_wo4ya_82", Y = "_active_wo4ya_88", A = "_label_wo4ya_88", F = "_pop_wo4ya_1", r = {
|
|
5
|
+
switch: "_switch_wo4ya_1",
|
|
6
|
+
fullWidth: T,
|
|
7
|
+
option: Z,
|
|
8
|
+
extraSmall: z,
|
|
9
|
+
small: B,
|
|
10
|
+
large: K,
|
|
11
|
+
extraLarge: O,
|
|
12
|
+
indicator: V,
|
|
13
|
+
simple: X,
|
|
14
|
+
active: Y,
|
|
15
|
+
label: A,
|
|
16
|
+
pop: F
|
|
17
|
+
}, G = {
|
|
17
18
|
extraSmall: 15,
|
|
18
19
|
small: 15,
|
|
19
20
|
medium: 19,
|
|
20
21
|
large: 19,
|
|
21
22
|
extraLarge: 19
|
|
22
|
-
},
|
|
23
|
-
options:
|
|
24
|
-
active:
|
|
25
|
-
onChange:
|
|
26
|
-
size:
|
|
27
|
-
simpleAnimation:
|
|
28
|
-
iconSize:
|
|
29
|
-
className:
|
|
30
|
-
activeColor:
|
|
31
|
-
activeTextColor:
|
|
32
|
-
inactiveTextColor:
|
|
23
|
+
}, Q = ({
|
|
24
|
+
options: p = [],
|
|
25
|
+
active: a = 0,
|
|
26
|
+
onChange: c,
|
|
27
|
+
size: d = "medium",
|
|
28
|
+
simpleAnimation: u = !1,
|
|
29
|
+
iconSize: I,
|
|
30
|
+
className: E = "",
|
|
31
|
+
activeColor: h,
|
|
32
|
+
activeTextColor: y,
|
|
33
|
+
inactiveTextColor: x,
|
|
33
34
|
background: L,
|
|
34
35
|
equalWidth: S = !0,
|
|
36
|
+
fullWidth: N = !1,
|
|
35
37
|
optionStyle: g
|
|
36
38
|
}) => {
|
|
37
|
-
const _ =
|
|
39
|
+
const _ = w([]), $ = w(a), i = w(null), [b, W] = k({
|
|
38
40
|
left: 0,
|
|
39
41
|
width: 0
|
|
40
42
|
});
|
|
41
|
-
|
|
42
|
-
const t = _.current[
|
|
43
|
+
D(() => {
|
|
44
|
+
const t = _.current[a], e = _.current[$.current];
|
|
43
45
|
if (!t) return;
|
|
44
|
-
const
|
|
45
|
-
(
|
|
46
|
+
const l = _.current.filter(
|
|
47
|
+
(s) => s !== null
|
|
46
48
|
);
|
|
47
|
-
if (
|
|
48
|
-
const
|
|
49
|
-
|
|
49
|
+
if (l.forEach((s) => s.style.width = "auto"), S) {
|
|
50
|
+
const s = Math.max(...l.map((o) => o.offsetWidth));
|
|
51
|
+
l.forEach((o) => o.style.width = `${s}px`);
|
|
50
52
|
}
|
|
51
|
-
const
|
|
52
|
-
if (!
|
|
53
|
-
const
|
|
54
|
-
|
|
53
|
+
const f = () => W({ left: t.offsetLeft, width: t.offsetWidth });
|
|
54
|
+
if (!u && e && e !== t) {
|
|
55
|
+
const s = Math.min(e.offsetLeft, t.offsetLeft), o = Math.max(
|
|
56
|
+
e.offsetLeft + e.offsetWidth,
|
|
55
57
|
t.offsetLeft + t.offsetWidth
|
|
56
58
|
);
|
|
57
|
-
|
|
59
|
+
W({ left: s, width: o - s }), i.current && clearTimeout(i.current), i.current = setTimeout(f, 160);
|
|
58
60
|
} else
|
|
59
|
-
|
|
60
|
-
return
|
|
61
|
+
f();
|
|
62
|
+
return $.current = a, () => {
|
|
61
63
|
i.current && clearTimeout(i.current);
|
|
62
64
|
};
|
|
63
|
-
}, [
|
|
64
|
-
const
|
|
65
|
-
...
|
|
66
|
-
...
|
|
67
|
-
...
|
|
65
|
+
}, [a, p, u, S]);
|
|
66
|
+
const M = I ?? G[d], j = {
|
|
67
|
+
...h && { "--switch-active-bg": h },
|
|
68
|
+
...y && { "--switch-active-text": y },
|
|
69
|
+
...x && { "--switch-inactive-text": x },
|
|
68
70
|
...L && { "--switch-bg": L }
|
|
69
71
|
};
|
|
70
|
-
return /* @__PURE__ */
|
|
72
|
+
return /* @__PURE__ */ v(
|
|
71
73
|
"div",
|
|
72
74
|
{
|
|
73
|
-
className: `${
|
|
74
|
-
style:
|
|
75
|
+
className: `${r.switch} ${r[d]} ${u ? r.simple : ""} ${N ? r.fullWidth : ""} ${E}`,
|
|
76
|
+
style: j,
|
|
75
77
|
children: [
|
|
76
|
-
/* @__PURE__ */
|
|
78
|
+
/* @__PURE__ */ m(
|
|
77
79
|
"span",
|
|
78
80
|
{
|
|
79
|
-
className:
|
|
81
|
+
className: r.indicator,
|
|
80
82
|
style: {
|
|
81
|
-
transform: `translateX(${
|
|
82
|
-
width: `${
|
|
83
|
+
transform: `translateX(${b.left}px)`,
|
|
84
|
+
width: `${b.width}px`
|
|
83
85
|
}
|
|
84
86
|
}
|
|
85
87
|
),
|
|
86
|
-
|
|
87
|
-
const
|
|
88
|
-
return /* @__PURE__ */
|
|
88
|
+
p.map((t, e) => {
|
|
89
|
+
const l = typeof t == "string", f = l ? t : t.label, s = l ? null : t.icon, o = a === e;
|
|
90
|
+
return /* @__PURE__ */ v(
|
|
89
91
|
"div",
|
|
90
92
|
{
|
|
91
|
-
ref: (
|
|
92
|
-
_.current[
|
|
93
|
+
ref: (n) => {
|
|
94
|
+
_.current[e] = n;
|
|
93
95
|
},
|
|
94
96
|
role: "button",
|
|
95
97
|
tabIndex: 0,
|
|
96
|
-
onClick: () =>
|
|
97
|
-
onKeyDown: (
|
|
98
|
-
(
|
|
98
|
+
onClick: () => c == null ? void 0 : c(e),
|
|
99
|
+
onKeyDown: (n) => {
|
|
100
|
+
(n.key === "Enter" || n.key === " ") && (n.preventDefault(), c == null || c(e));
|
|
99
101
|
},
|
|
100
|
-
className: `${
|
|
102
|
+
className: `${r.option} ${o ? r.active : ""}`,
|
|
101
103
|
style: g,
|
|
102
104
|
children: [
|
|
103
|
-
|
|
104
|
-
|
|
105
|
+
s && /* @__PURE__ */ m(R, { name: s, size: M }),
|
|
106
|
+
f && /* @__PURE__ */ m("p", { className: r.label, children: f })
|
|
105
107
|
]
|
|
106
108
|
},
|
|
107
|
-
|
|
109
|
+
e
|
|
108
110
|
);
|
|
109
111
|
})
|
|
110
112
|
]
|
|
@@ -112,5 +114,5 @@ import '../../assets/Switch.css';const R = "_extraSmall_3r5ra_25", T = "_small_3
|
|
|
112
114
|
);
|
|
113
115
|
};
|
|
114
116
|
export {
|
|
115
|
-
|
|
117
|
+
Q as Switch
|
|
116
118
|
};
|
package/package.json
CHANGED