@situaction/traq-ui-ste 1.2.41 → 1.2.43
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/components/menu/Menu.js +71 -75
- package/dist/styles/Menu.css +1 -1
- package/package.json +1 -1
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { Button as
|
|
4
|
-
import { IconButton as
|
|
1
|
+
import { jsx as e, jsxs as c } from "react/jsx-runtime";
|
|
2
|
+
import { useState as a, useRef as w, useEffect as H } from "react";
|
|
3
|
+
import { Button as E } from "../button/Button.js";
|
|
4
|
+
import { IconButton as d } from "../icon-button/IconButton.js";
|
|
5
5
|
import "react-dom";
|
|
6
6
|
import "../accordion/Accordion.js";
|
|
7
|
-
import { Icon as
|
|
7
|
+
import { Icon as L } from "../icon/Icon.js";
|
|
8
8
|
import { Modal as R } from "../modal/Modal.js";
|
|
9
9
|
import "../carousel/Carousel.js";
|
|
10
10
|
import "../carousel/FadeCarousel.js";
|
|
11
11
|
import "../theme/ThemeContext.js";
|
|
12
12
|
import '../../styles/Size.css';import '../../styles/Menu.css';/* empty css */
|
|
13
|
-
const O = "
|
|
13
|
+
const O = "_fullHeight_nmor3_15", j = "_fullWidth_nmor3_18", D = "_open_nmor3_21", q = "_close_nmor3_25", A = "_menuButton_nmor3_29", F = "_closeIcon_nmor3_37", G = "_textEllipsis_nmor3_47", J = "_pointer_nmor3_52", K = "_fullImg_nmor3_55", Q = "_menuParams_nmor3_61", T = "_line_nmor3_67", U = "_borderRadiusM_nmor3_74", X = "_menuItem_nmor3_78", Y = "_longLogo_nmor3_87", Z = "_bottomNav_nmor3_92", oo = "_bottomInner_nmor3_101", eo = "_bottomItems_nmor3_109", no = "_bottomParams_nmor3_117", lo = "_flexVerticalBetweenStart_nmor3_126", to = "_flexHorizontalCenter_nmor3_140", so = "_flexVerticalBetweenCenter_nmor3_155", n = {
|
|
14
14
|
fullHeight: O,
|
|
15
15
|
fullWidth: j,
|
|
16
16
|
open: D,
|
|
@@ -26,121 +26,117 @@ const O = "_fullHeight_rmd17_15", j = "_fullWidth_rmd17_18", D = "_open_rmd17_21
|
|
|
26
26
|
menuItem: X,
|
|
27
27
|
longLogo: Y,
|
|
28
28
|
bottomNav: Z,
|
|
29
|
-
bottomInner:
|
|
30
|
-
bottomItems:
|
|
31
|
-
bottomParams:
|
|
32
|
-
flexVerticalBetweenStart:
|
|
33
|
-
flexHorizontalCenter:
|
|
34
|
-
flexVerticalBetweenCenter:
|
|
35
|
-
},
|
|
36
|
-
const [
|
|
29
|
+
bottomInner: oo,
|
|
30
|
+
bottomItems: eo,
|
|
31
|
+
bottomParams: no,
|
|
32
|
+
flexVerticalBetweenStart: lo,
|
|
33
|
+
flexHorizontalCenter: to,
|
|
34
|
+
flexVerticalBetweenCenter: so
|
|
35
|
+
}, vo = ({ menuItems: s = [], menuParams: r = [], shortLogo: p, logo: g, isOpen: v, defaultOpen: z = !1, selectedId: m, mode: V = "left" }) => {
|
|
36
|
+
const [i, C] = a(z ?? !1), [_, N] = a(m ?? (s.length > 0 ? s[0].id : null)), x = w(null), [P, f] = a(!1), [I, u] = a(!1), [M, S] = a(null), [$, W] = a({}), B = w(null);
|
|
37
37
|
H(() => {
|
|
38
|
-
|
|
39
|
-
}, [
|
|
40
|
-
const
|
|
41
|
-
if (
|
|
42
|
-
const
|
|
43
|
-
|
|
38
|
+
m != null && N(m);
|
|
39
|
+
}, [m]);
|
|
40
|
+
const h = (o, l) => {
|
|
41
|
+
if (o.stopPropagation(), N(l), s) {
|
|
42
|
+
const t = s.find((b) => b.id === l);
|
|
43
|
+
t == null || t.onClick();
|
|
44
44
|
}
|
|
45
45
|
}, y = () => {
|
|
46
|
-
C(!
|
|
47
|
-
}, k = (
|
|
48
|
-
var
|
|
49
|
-
if (
|
|
50
|
-
const
|
|
51
|
-
if (!
|
|
52
|
-
|
|
53
|
-
const m = s ? "200px" : "40px";
|
|
54
|
-
S(l.content), W({ ...l.position, left: m }), h(!0);
|
|
55
|
-
} else
|
|
56
|
-
(t = l.onClick) == null || t.call(l);
|
|
46
|
+
C(!i), f(!1);
|
|
47
|
+
}, k = (o) => {
|
|
48
|
+
var l;
|
|
49
|
+
if (r) {
|
|
50
|
+
const t = r.find((b) => b.id === o);
|
|
51
|
+
if (!t) return;
|
|
52
|
+
t.content ? (S(t.content), W(t.position), u(!0)) : (l = t.onClick) == null || l.call(t);
|
|
57
53
|
}
|
|
58
54
|
};
|
|
59
55
|
return H(() => {
|
|
60
|
-
v && v(
|
|
61
|
-
}, [
|
|
62
|
-
/* @__PURE__ */
|
|
63
|
-
|
|
56
|
+
v && v(i);
|
|
57
|
+
}, [i]), V === "bottom" ? /* @__PURE__ */ e("nav", { ref: x, className: n.bottomNav, children: /* @__PURE__ */ c("div", { className: n.bottomInner, children: [
|
|
58
|
+
/* @__PURE__ */ e("div", { className: n.bottomItems, children: s && s.map((o) => /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
|
|
59
|
+
d,
|
|
64
60
|
{
|
|
65
|
-
mode:
|
|
66
|
-
children:
|
|
67
|
-
disabled:
|
|
68
|
-
onClick: (
|
|
61
|
+
mode: o.disabled ? "ghost" : _ === o.id ? "secondary" : "ghost",
|
|
62
|
+
children: o.icon,
|
|
63
|
+
disabled: o.disabled,
|
|
64
|
+
onClick: (l) => h(l, o.id)
|
|
69
65
|
}
|
|
70
|
-
) }, `icon-${
|
|
66
|
+
) }, `icon-${o.id}`)) }),
|
|
71
67
|
/* @__PURE__ */ c("div", { className: n.bottomParams, children: [
|
|
72
|
-
|
|
73
|
-
/* @__PURE__ */
|
|
68
|
+
r && r.map((o) => /* @__PURE__ */ e("div", { onClick: () => k(o.id), children: /* @__PURE__ */ e(d, { mode: "ghost", children: o.icon, disabled: o.disabled }) }, `param-icon-${o.id}`)),
|
|
69
|
+
/* @__PURE__ */ e(
|
|
74
70
|
R,
|
|
75
71
|
{
|
|
76
72
|
ref: B,
|
|
77
73
|
className: n.borderRadiusM,
|
|
78
74
|
open: I,
|
|
79
|
-
onClose: () =>
|
|
75
|
+
onClose: () => u(!1),
|
|
80
76
|
position: $,
|
|
81
77
|
children: M
|
|
82
78
|
}
|
|
83
79
|
)
|
|
84
80
|
] })
|
|
85
|
-
] }) }) : /* @__PURE__ */
|
|
81
|
+
] }) }) : /* @__PURE__ */ e("nav", { ref: x, children: /* @__PURE__ */ c("div", { className: `${n.flexVerticalBetweenStart} ${n.fullHeight} ${i ? n.open : n.close}`, children: [
|
|
86
82
|
/* @__PURE__ */ c("div", { className: n.fullWidth, children: [
|
|
87
|
-
/* @__PURE__ */
|
|
83
|
+
/* @__PURE__ */ e(
|
|
88
84
|
"div",
|
|
89
85
|
{
|
|
90
86
|
className: `${n.flexHorizontalCenter} ${n.pointer} ${n.textEllipsis}`,
|
|
91
87
|
onClick: () => y(),
|
|
92
|
-
children:
|
|
93
|
-
g && /* @__PURE__ */
|
|
94
|
-
/* @__PURE__ */
|
|
95
|
-
] }) : /* @__PURE__ */
|
|
88
|
+
children: i ? /* @__PURE__ */ c("div", { className: n.fullImg, children: [
|
|
89
|
+
g && /* @__PURE__ */ e("img", { className: n.longLogo, src: g, alt: "Logo situaction" }),
|
|
90
|
+
/* @__PURE__ */ e(d, { mode: "ghost", size: "menu", children: /* @__PURE__ */ e(L, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
|
|
91
|
+
] }) : /* @__PURE__ */ e(
|
|
96
92
|
"div",
|
|
97
93
|
{
|
|
98
94
|
className: n.closeIcon,
|
|
99
|
-
onMouseEnter: () =>
|
|
100
|
-
onMouseLeave: () =>
|
|
101
|
-
onClick: () => C(!
|
|
102
|
-
children: P || !
|
|
95
|
+
onMouseEnter: () => f(!0),
|
|
96
|
+
onMouseLeave: () => f(!1),
|
|
97
|
+
onClick: () => C(!i),
|
|
98
|
+
children: P || !p ? /* @__PURE__ */ e(d, { mode: "ghost", size: "menu", children: /* @__PURE__ */ e(L, { icon: "CaretDoubleRight", size: 22, weight: "duotone" }) }) : /* @__PURE__ */ e("img", { src: p, alt: "Logo situaction" })
|
|
103
99
|
}
|
|
104
100
|
)
|
|
105
101
|
}
|
|
106
102
|
),
|
|
107
|
-
/* @__PURE__ */
|
|
108
|
-
|
|
103
|
+
/* @__PURE__ */ e("div", { className: n.menuItem, children: s && s.map((o) => i ? /* @__PURE__ */ e("div", { className: `${n.textEllipsis} ${n.menuButton}`, children: /* @__PURE__ */ e(
|
|
104
|
+
E,
|
|
109
105
|
{
|
|
110
|
-
mode:
|
|
111
|
-
label:
|
|
112
|
-
disabled:
|
|
113
|
-
onClick: (
|
|
114
|
-
childrenLeft:
|
|
106
|
+
mode: o.disabled ? "ghost" : _ === o.id ? "secondary" : "ghost",
|
|
107
|
+
label: o.label,
|
|
108
|
+
disabled: o.disabled,
|
|
109
|
+
onClick: (l) => h(l, o.id),
|
|
110
|
+
childrenLeft: o.icon
|
|
115
111
|
}
|
|
116
|
-
) }, `button-${
|
|
117
|
-
|
|
112
|
+
) }, `button-${o.id}`) : /* @__PURE__ */ e("div", { className: n.textEllipsis, children: /* @__PURE__ */ e(
|
|
113
|
+
d,
|
|
118
114
|
{
|
|
119
|
-
mode:
|
|
120
|
-
children:
|
|
121
|
-
disabled:
|
|
122
|
-
onClick: (
|
|
115
|
+
mode: o.disabled ? "ghost" : _ === o.id ? "secondary" : "ghost",
|
|
116
|
+
children: o.icon,
|
|
117
|
+
disabled: o.disabled,
|
|
118
|
+
onClick: (l) => h(l, o.id)
|
|
123
119
|
}
|
|
124
|
-
) }, `icon-${
|
|
125
|
-
/* @__PURE__ */
|
|
120
|
+
) }, `icon-${o.id}`)) }),
|
|
121
|
+
/* @__PURE__ */ e("div", { className: n.line })
|
|
126
122
|
] }),
|
|
127
123
|
/* @__PURE__ */ c("div", { className: `${n.menuParams} ${n.flexVerticalBetweenCenter}`, children: [
|
|
128
|
-
|
|
124
|
+
r && r.map((o) => /* @__PURE__ */ e(
|
|
129
125
|
"div",
|
|
130
126
|
{
|
|
131
127
|
className: `${n.fullWidth} ${n.textEllipsis}`,
|
|
132
|
-
onClick: () => k(
|
|
133
|
-
children:
|
|
128
|
+
onClick: () => k(o.id),
|
|
129
|
+
children: i ? /* @__PURE__ */ e("div", { className: n.menuButton, children: /* @__PURE__ */ e(E, { mode: "ghost", label: o.label, disabled: o.disabled, childrenLeft: o.icon }, o.id) }) : /* @__PURE__ */ e(d, { mode: "ghost", children: o.icon, disabled: o.disabled })
|
|
134
130
|
},
|
|
135
|
-
`param-icon-${
|
|
131
|
+
`param-icon-${o.id}`
|
|
136
132
|
)),
|
|
137
|
-
/* @__PURE__ */
|
|
133
|
+
/* @__PURE__ */ e(
|
|
138
134
|
R,
|
|
139
135
|
{
|
|
140
136
|
ref: B,
|
|
141
137
|
className: n.borderRadiusM,
|
|
142
138
|
open: I,
|
|
143
|
-
onClose: () =>
|
|
139
|
+
onClose: () => u(!1),
|
|
144
140
|
position: $,
|
|
145
141
|
children: M
|
|
146
142
|
}
|
|
@@ -149,5 +145,5 @@ const O = "_fullHeight_rmd17_15", j = "_fullWidth_rmd17_18", D = "_open_rmd17_21
|
|
|
149
145
|
] }) });
|
|
150
146
|
};
|
|
151
147
|
export {
|
|
152
|
-
|
|
148
|
+
vo as Menu
|
|
153
149
|
};
|
package/dist/styles/Menu.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
nav{height:100vh;width:fit-content;padding:0 var(--spacing-xs-3) var(--spacing-xs-3);flex-shrink:1;transition:.3s;box-sizing:border-box;z-index:5}nav .
|
|
1
|
+
nav{height:100vh;width:fit-content;padding:0 var(--spacing-xs-3) var(--spacing-xs-3);flex-shrink:1;transition:.3s;box-sizing:border-box;z-index:5}nav ._fullHeight_nmor3_15{height:100%}nav ._fullWidth_nmor3_18{width:100%}nav ._open_nmor3_21{width:200px;transition:all ease .3s}nav ._close_nmor3_25{width:40px;transition:all ease-out .3s}nav ._menuButton_nmor3_29{width:100%}nav ._menuButton_nmor3_29 button{padding:var(--spacing-xs-4);width:inherit!important;justify-content:flex-start!important}nav ._closeIcon_nmor3_37{height:30px;cursor:pointer;margin:.875rem 0;padding:1px 0}nav ._label_nmor3_43{letter-spacing:.72px;font-weight:600}nav ._textEllipsis_nmor3_47{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}nav ._pointer_nmor3_52{cursor:pointer}nav ._fullImg_nmor3_55{margin:.875rem 0;display:flex;justify-content:space-between;width:100%}nav ._menuParams_nmor3_61{gap:.125rem;position:relative;width:100%}._line_nmor3_67{height:1px;width:100%;background-color:var(--general-border-window);margin:var(--spacing-xs-3) 0}._borderRadiusM_nmor3_74{border-radius:6px}._menuItem_nmor3_78{gap:.25rem;width:100%;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._longLogo_nmor3_87{transition:transform .25s ease,opacity .25s ease;will-change:transform,opacity}._bottomNav_nmor3_92{width:100%;height:fit-content;padding:var(--spacing-xs-3);box-sizing:border-box;z-index:5;flex-shrink:0}._bottomInner_nmor3_101{display:flex;justify-content:center;align-items:center;flex-direction:row;width:100%}._bottomItems_nmor3_109{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:var(--spacing-xs-6)}._bottomParams_nmor3_117{display:flex;justify-content:flex-end;align-items:center;flex-direction:row;gap:var(--spacing-xs-6);position:relative}._flexVerticalBetweenStart_nmor3_126{display:flex;justify-content:space-between;align-items:start;flex-direction:column}._flexHorizontalBetween_nmor3_133{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexHorizontalCenter_nmor3_140{height:60px;display:flex;justify-content:center;align-items:center;flex-direction:row}._flexVertical_nmor3_126{display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column}._flexVerticalBetweenCenter_nmor3_155{display:flex;justify-content:space-between;align-items:center;flex-direction:column}
|