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