@situaction/traq-ui-ste 1.2.42 → 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 +21 -21
- package/dist/styles/Menu.css +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { useState 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
3
|
import { Button as E } from "../button/Button.js";
|
|
4
|
-
import { IconButton as
|
|
4
|
+
import { IconButton as d } 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_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,
|
|
@@ -32,8 +32,8 @@ const O = "_fullHeight_rmd17_15", j = "_fullWidth_rmd17_18", D = "_open_rmd17_21
|
|
|
32
32
|
flexVerticalBetweenStart: lo,
|
|
33
33
|
flexHorizontalCenter: to,
|
|
34
34
|
flexVerticalBetweenCenter: so
|
|
35
|
-
}, vo = ({ menuItems: s = [], menuParams:
|
|
36
|
-
const [i, C] =
|
|
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
38
|
m != null && N(m);
|
|
39
39
|
}, [m]);
|
|
@@ -46,17 +46,17 @@ const O = "_fullHeight_rmd17_15", j = "_fullWidth_rmd17_18", D = "_open_rmd17_21
|
|
|
46
46
|
C(!i), f(!1);
|
|
47
47
|
}, k = (o) => {
|
|
48
48
|
var l;
|
|
49
|
-
if (
|
|
50
|
-
const t =
|
|
49
|
+
if (r) {
|
|
50
|
+
const t = r.find((b) => b.id === o);
|
|
51
51
|
if (!t) return;
|
|
52
52
|
t.content ? (S(t.content), W(t.position), u(!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__ */ e("nav", { ref: x, className: n.bottomNav, children: /* @__PURE__ */
|
|
57
|
+
}, [i]), V === "bottom" ? /* @__PURE__ */ e("nav", { ref: x, className: n.bottomNav, children: /* @__PURE__ */ c("div", { className: n.bottomInner, children: [
|
|
58
58
|
/* @__PURE__ */ e("div", { className: n.bottomItems, children: s && s.map((o) => /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
|
|
59
|
-
|
|
59
|
+
d,
|
|
60
60
|
{
|
|
61
61
|
mode: o.disabled ? "ghost" : _ === o.id ? "secondary" : "ghost",
|
|
62
62
|
children: o.icon,
|
|
@@ -64,8 +64,8 @@ const O = "_fullHeight_rmd17_15", j = "_fullWidth_rmd17_18", D = "_open_rmd17_21
|
|
|
64
64
|
onClick: (l) => h(l, o.id)
|
|
65
65
|
}
|
|
66
66
|
) }, `icon-${o.id}`)) }),
|
|
67
|
-
/* @__PURE__ */
|
|
68
|
-
|
|
67
|
+
/* @__PURE__ */ c("div", { className: n.bottomParams, children: [
|
|
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
69
|
/* @__PURE__ */ e(
|
|
70
70
|
R,
|
|
71
71
|
{
|
|
@@ -78,16 +78,16 @@ const O = "_fullHeight_rmd17_15", j = "_fullWidth_rmd17_18", D = "_open_rmd17_21
|
|
|
78
78
|
}
|
|
79
79
|
)
|
|
80
80
|
] })
|
|
81
|
-
] }) }) : /* @__PURE__ */ e("nav", { ref: x, children: /* @__PURE__ */
|
|
82
|
-
/* @__PURE__ */
|
|
81
|
+
] }) }) : /* @__PURE__ */ e("nav", { ref: x, children: /* @__PURE__ */ c("div", { className: `${n.flexVerticalBetweenStart} ${n.fullHeight} ${i ? n.open : n.close}`, children: [
|
|
82
|
+
/* @__PURE__ */ c("div", { className: n.fullWidth, children: [
|
|
83
83
|
/* @__PURE__ */ e(
|
|
84
84
|
"div",
|
|
85
85
|
{
|
|
86
86
|
className: `${n.flexHorizontalCenter} ${n.pointer} ${n.textEllipsis}`,
|
|
87
87
|
onClick: () => y(),
|
|
88
|
-
children: i ? /* @__PURE__ */
|
|
88
|
+
children: i ? /* @__PURE__ */ c("div", { className: n.fullImg, children: [
|
|
89
89
|
g && /* @__PURE__ */ e("img", { className: n.longLogo, src: g, alt: "Logo situaction" }),
|
|
90
|
-
/* @__PURE__ */ e(
|
|
90
|
+
/* @__PURE__ */ e(d, { mode: "ghost", size: "menu", children: /* @__PURE__ */ e(L, { icon: "CaretDoubleLeft", size: 16, weight: "duotone" }) })
|
|
91
91
|
] }) : /* @__PURE__ */ e(
|
|
92
92
|
"div",
|
|
93
93
|
{
|
|
@@ -95,7 +95,7 @@ const O = "_fullHeight_rmd17_15", j = "_fullWidth_rmd17_18", D = "_open_rmd17_21
|
|
|
95
95
|
onMouseEnter: () => f(!0),
|
|
96
96
|
onMouseLeave: () => f(!1),
|
|
97
97
|
onClick: () => C(!i),
|
|
98
|
-
children: P || !p ? /* @__PURE__ */ e(
|
|
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" })
|
|
99
99
|
}
|
|
100
100
|
)
|
|
101
101
|
}
|
|
@@ -110,7 +110,7 @@ const O = "_fullHeight_rmd17_15", j = "_fullWidth_rmd17_18", D = "_open_rmd17_21
|
|
|
110
110
|
childrenLeft: o.icon
|
|
111
111
|
}
|
|
112
112
|
) }, `button-${o.id}`) : /* @__PURE__ */ e("div", { className: n.textEllipsis, children: /* @__PURE__ */ e(
|
|
113
|
-
|
|
113
|
+
d,
|
|
114
114
|
{
|
|
115
115
|
mode: o.disabled ? "ghost" : _ === o.id ? "secondary" : "ghost",
|
|
116
116
|
children: o.icon,
|
|
@@ -120,13 +120,13 @@ const O = "_fullHeight_rmd17_15", j = "_fullWidth_rmd17_18", D = "_open_rmd17_21
|
|
|
120
120
|
) }, `icon-${o.id}`)) }),
|
|
121
121
|
/* @__PURE__ */ e("div", { className: n.line })
|
|
122
122
|
] }),
|
|
123
|
-
/* @__PURE__ */
|
|
124
|
-
|
|
123
|
+
/* @__PURE__ */ c("div", { className: `${n.menuParams} ${n.flexVerticalBetweenCenter}`, children: [
|
|
124
|
+
r && r.map((o) => /* @__PURE__ */ e(
|
|
125
125
|
"div",
|
|
126
126
|
{
|
|
127
127
|
className: `${n.fullWidth} ${n.textEllipsis}`,
|
|
128
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(
|
|
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 })
|
|
130
130
|
},
|
|
131
131
|
`param-icon-${o.id}`
|
|
132
132
|
)),
|
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}
|