bmi-next-brokers 3.0.6 → 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)}}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as
|
|
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
3
|
import { Icon as R } from "../../icons/Icon.js";
|
|
4
|
-
import '../../assets/Switch.css';const T = "
|
|
5
|
-
switch: "
|
|
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
6
|
fullWidth: T,
|
|
7
7
|
option: Z,
|
|
8
8
|
extraSmall: z,
|
|
@@ -21,77 +21,77 @@ import '../../assets/Switch.css';const T = "_fullWidth_o6vju_24", Z = "_option_o
|
|
|
21
21
|
large: 19,
|
|
22
22
|
extraLarge: 19
|
|
23
23
|
}, Q = ({
|
|
24
|
-
options:
|
|
25
|
-
active:
|
|
24
|
+
options: p = [],
|
|
25
|
+
active: a = 0,
|
|
26
26
|
onChange: c,
|
|
27
|
-
size:
|
|
28
|
-
simpleAnimation:
|
|
29
|
-
iconSize:
|
|
30
|
-
className:
|
|
31
|
-
activeColor:
|
|
32
|
-
activeTextColor:
|
|
33
|
-
inactiveTextColor:
|
|
34
|
-
background:
|
|
35
|
-
equalWidth:
|
|
36
|
-
fullWidth:
|
|
37
|
-
optionStyle:
|
|
27
|
+
size: d = "medium",
|
|
28
|
+
simpleAnimation: u = !1,
|
|
29
|
+
iconSize: I,
|
|
30
|
+
className: E = "",
|
|
31
|
+
activeColor: h,
|
|
32
|
+
activeTextColor: y,
|
|
33
|
+
inactiveTextColor: x,
|
|
34
|
+
background: L,
|
|
35
|
+
equalWidth: S = !0,
|
|
36
|
+
fullWidth: N = !1,
|
|
37
|
+
optionStyle: g
|
|
38
38
|
}) => {
|
|
39
|
-
const
|
|
39
|
+
const _ = w([]), $ = w(a), i = w(null), [b, W] = k({
|
|
40
40
|
left: 0,
|
|
41
41
|
width: 0
|
|
42
42
|
});
|
|
43
43
|
D(() => {
|
|
44
|
-
const t =
|
|
44
|
+
const t = _.current[a], e = _.current[$.current];
|
|
45
45
|
if (!t) return;
|
|
46
|
-
const l =
|
|
46
|
+
const l = _.current.filter(
|
|
47
47
|
(s) => s !== null
|
|
48
48
|
);
|
|
49
|
-
if (l.forEach((s) => s.style.width = "auto"),
|
|
49
|
+
if (l.forEach((s) => s.style.width = "auto"), S) {
|
|
50
50
|
const s = Math.max(...l.map((o) => o.offsetWidth));
|
|
51
51
|
l.forEach((o) => o.style.width = `${s}px`);
|
|
52
52
|
}
|
|
53
|
-
const f = () =>
|
|
54
|
-
if (!
|
|
53
|
+
const f = () => W({ left: t.offsetLeft, width: t.offsetWidth });
|
|
54
|
+
if (!u && e && e !== t) {
|
|
55
55
|
const s = Math.min(e.offsetLeft, t.offsetLeft), o = Math.max(
|
|
56
56
|
e.offsetLeft + e.offsetWidth,
|
|
57
57
|
t.offsetLeft + t.offsetWidth
|
|
58
58
|
);
|
|
59
|
-
|
|
59
|
+
W({ left: s, width: o - s }), i.current && clearTimeout(i.current), i.current = setTimeout(f, 160);
|
|
60
60
|
} else
|
|
61
61
|
f();
|
|
62
|
-
return
|
|
63
|
-
|
|
62
|
+
return $.current = a, () => {
|
|
63
|
+
i.current && clearTimeout(i.current);
|
|
64
64
|
};
|
|
65
|
-
}, [
|
|
66
|
-
const
|
|
67
|
-
...
|
|
68
|
-
...
|
|
69
|
-
...
|
|
70
|
-
...
|
|
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 },
|
|
70
|
+
...L && { "--switch-bg": L }
|
|
71
71
|
};
|
|
72
|
-
return /* @__PURE__ */
|
|
72
|
+
return /* @__PURE__ */ v(
|
|
73
73
|
"div",
|
|
74
74
|
{
|
|
75
|
-
className: `${r.switch} ${r[
|
|
76
|
-
style:
|
|
75
|
+
className: `${r.switch} ${r[d]} ${u ? r.simple : ""} ${N ? r.fullWidth : ""} ${E}`,
|
|
76
|
+
style: j,
|
|
77
77
|
children: [
|
|
78
78
|
/* @__PURE__ */ m(
|
|
79
79
|
"span",
|
|
80
80
|
{
|
|
81
81
|
className: r.indicator,
|
|
82
82
|
style: {
|
|
83
|
-
transform: `translateX(${
|
|
84
|
-
width: `${
|
|
83
|
+
transform: `translateX(${b.left}px)`,
|
|
84
|
+
width: `${b.width}px`
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
),
|
|
88
|
-
|
|
89
|
-
const l = typeof t == "string", f = l ? t : t.label, s = l ? null : t.icon, o =
|
|
90
|
-
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(
|
|
91
91
|
"div",
|
|
92
92
|
{
|
|
93
93
|
ref: (n) => {
|
|
94
|
-
|
|
94
|
+
_.current[e] = n;
|
|
95
95
|
},
|
|
96
96
|
role: "button",
|
|
97
97
|
tabIndex: 0,
|
|
@@ -100,9 +100,9 @@ import '../../assets/Switch.css';const T = "_fullWidth_o6vju_24", Z = "_option_o
|
|
|
100
100
|
(n.key === "Enter" || n.key === " ") && (n.preventDefault(), c == null || c(e));
|
|
101
101
|
},
|
|
102
102
|
className: `${r.option} ${o ? r.active : ""}`,
|
|
103
|
-
style:
|
|
103
|
+
style: g,
|
|
104
104
|
children: [
|
|
105
|
-
s && /* @__PURE__ */ m(R, { name: s, size:
|
|
105
|
+
s && /* @__PURE__ */ m(R, { name: s, size: M }),
|
|
106
106
|
f && /* @__PURE__ */ m("p", { className: r.label, children: f })
|
|
107
107
|
]
|
|
108
108
|
},
|
package/package.json
CHANGED