@lanaco/lnc-react-ui
Version:
React component library
232 lines (228 loc) • 6.22 kB
JavaScript
import { jsx as m, Fragment as G, jsxs as H } from "react/jsx-runtime";
import { forwardRef as J, useRef as Q, useState as W, useEffect as X } from "react";
import { P as o } from "./index-S5Cd7WrG.js";
import { n as Z } from "./emotion-styled.browser.esm-CjCaF13H.js";
import k from "./Icon.js";
import { b as i, c as I, h as v } from "./utils-DtRLzzTZ.js";
import { u as ee } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const ne = Z.div`
box-sizing: border-box;
cursor: ${(n) => n.disabled == !1 ? "pointer" : "context-menu"};
width: 100%;
border-radius: 6px;
display: flex;
align-items: center;
min-height: 2.25rem;
gap: 0.563rem;
padding: 0.563rem;
color: ${(n) => i(n.theme, "MenuItem", n.color, "enabled", "text")};
${(n) => I(n.theme, "MenuItem", n.size, "enabled")};
& .menu-icon-lnc {
color: ${(n) => n.isActive && n.disabled == !1 ? i(
n.theme,
"MenuItem",
n.color,
"focus",
"icon"
) : i(
n.theme,
"MenuItem",
n.color,
"enabled",
"icon"
)};
${(n) => n.disabled === !0 && v(n.theme)};
background: transparent;
}
& .sub-menu-icon-lnc {
margin-left: auto;
transform: ${(n) => n.showNested ? "rotate(180deg)" : "rotate(0)"};
transition: transform 0.25s ease;
}
${(n) => n.isActive == !0 && n.disabled == !1 && `background-color: ${i(
n.theme,
"MenuItem",
n.color,
"focus",
"background",
"backgroundOpacity"
)};
color: ${i(
n.theme,
"MenuItem",
n.color,
"focus",
"text"
)};
`}
outline: none;
${(n) => n.disabled === !0 && v(n.theme)};
&:hover {
${(n) => n.disabled == !1 && `background-color: ${i(
n.theme,
"MenuItem",
n.color,
"hover",
"background",
"backgroundOpacity"
)};
color: ${i(
n.theme,
"MenuItem",
n.color,
"hover",
"text"
)};
`}
}
`, C = J((n, a) => {
const {
value: g,
active: c = null,
icon: E,
disabled: r = !1,
isNested: d = !1,
showNested: M,
justifyToEnd: le = !1,
//----------------
onFocus: p = () => {
},
onBlur: $ = () => {
},
onClick: w = () => {
},
onKeyDown: x = () => {
},
onMouseEnter: oe = () => {
},
onMouseLeave: se = () => {
},
toggleNested: f = () => {
},
onItemSelected: N = () => {
},
//----------------
className: A = "",
style: S = {},
color: T = "primary",
size: _ = "small",
iconProps: O,
__TYPE__: te = "MENU_ITEM",
children: P,
...D
} = n, F = { theme: ee(), color: T, style: S, size: _ }, u = Q(), [j, y] = W(c ?? !1);
X(() => {
y(c);
}, [c]);
const z = (e) => {
r == !1 && (d && f && f(), N(e, g)), w(w);
}, B = (e) => {
y(!0), p(e);
}, K = (e) => {
c == null && y(!1), $(e);
}, R = (e) => {
e.preventDefault(), e.key == "ArrowDown" ? h(a ? a.current : u.current) : e.key == "ArrowUp" ? b(a ? a.current : u.current) : (e.key == "Enter" || e.keyCode == 32) && r == !1 && (d && f && f(), N(e, g)), x(e);
}, h = (e) => {
if (e != null && e.nextSibling) {
let l = L(e);
if (l != null && l.node && (l == null ? void 0 : l.type) == "item")
l.node.focus();
else if (l != null && l.node && (l == null ? void 0 : l.type) == "nested") {
let t = q(l.node);
t && t.focus();
} else e != null && e.parentElement && s(e.parentElement, "nested-item-lnc") && h(e.parentElement);
} else e != null && e.parentElement && s(e.parentElement, "nested-item-lnc") && h(e.parentElement);
}, b = (e) => {
if (e != null && e.previousSibling) {
let l = U(e);
if (l != null && l.node && (l == null ? void 0 : l.type) == "item")
l.node.focus();
else if (l != null && l.node && (l == null ? void 0 : l.type) == "nested") {
let t = Y(l.node);
t && t.focus();
} else e != null && e.parentElement && s(e.parentElement, "nested-item-lnc") && b(e.parentElement);
} else e != null && e.parentElement && s(e.parentElement, "nested-item-lnc") && b(e.parentElement);
}, L = (e) => {
for (; e = e.nextSibling; ) {
if (s(e, "menu-item-lnc"))
return { node: e, type: "item" };
if (s(e, "nested-item-lnc"))
return { node: e, type: "nested" };
}
return null;
}, U = (e) => {
for (; e = e.previousSibling; ) {
if (s(e, "menu-item-lnc"))
return { node: e, type: "item" };
if (s(e, "nested-item-lnc"))
return { node: e, type: "nested" };
}
return null;
}, q = (e) => {
var l;
return (l = Array.from(e.querySelectorAll(".menu-item-lnc"))) == null ? void 0 : l[0];
}, Y = (e) => {
var l;
return (l = Array.from(e.querySelectorAll(".menu-item-lnc"))) == null ? void 0 : l.pop();
}, s = (e, l) => {
var t = " " + e.className + " ", V = " " + l + " ";
return t.indexOf(V) != -1;
};
return /* @__PURE__ */ m(G, { children: /* @__PURE__ */ H(
ne,
{
ref: a || u,
className: "menu-item-lnc " + (d ? "nested-menu-item-lnc " : "") + (M ? "spread-nested-item-lnc " : "") + A,
...F,
disabled: r,
tabIndex: 0,
onKeyDown: R,
onFocus: B,
onBlur: K,
onClick: z,
isActive: j,
showNested: M,
...D,
children: [
E && /* @__PURE__ */ m(k, { icon: E, className: "menu-icon-lnc", ...O }),
/* @__PURE__ */ m("div", { children: P }),
d && /* @__PURE__ */ m(k, { icon: "angle-down", className: "sub-menu-icon-lnc" })
]
}
) });
});
C.propTypes = {
value: o.any,
active: o.bool,
icon: o.string,
disabled: o.bool,
isNested: o.bool,
justifyToEnd: o.bool,
//---------------------------------------------------------------
onBlur: o.func,
onFocus: o.func,
onClick: o.func,
onKeyDown: o.func,
onMouseEnter: o.func,
onMouseLeave: o.func,
//---------------------------------------------------------------
className: o.string,
style: o.object,
color: o.oneOf([
"primary",
"secondary",
"success",
"warning",
"danger",
"information",
"neutral",
"gray"
]),
iconProps: o.any,
size: o.oneOf(["small", "medium", "large"]),
__TYPE__: o.string
};
C.displayName = "MENU_ITEM";
export {
C as default
};