@lanaco/lnc-react-ui
Version:
React component library
242 lines (240 loc) • 6.3 kB
JavaScript
import { jsx as d, 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 l } from "./index-S5Cd7WrG.js";
import { n as Z } from "./emotion-styled.browser.esm-CjCaF13H.js";
import M from "./Icon.js";
import { b as s, c as I, h as N } 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) => s(
n.theme,
"MenuItem",
n.color,
n.isActive === !0 ? "active" : "enabled",
"text"
)};
&:hover {
${(n) => n.disabled === !1 && `background-color: ${s(
n.theme,
"MenuItem",
n.color,
"hover",
"background",
"backgroundOpacity"
)};`}
${(n) => n.disabled === !1 && `color: ${s(
n.theme,
"MenuItem",
n.color,
"hover",
"text"
)};`}
& .drop-down-icon-lnc {
${(n) => n.disabled === !1 && `color: ${s(
n.theme,
"MenuItem",
n.color,
"hover",
"icon"
)};`}
}
}
${(n) => I(n.theme, "MenuItem", n.size, "enabled")};
& .drop-down-icon-lnc {
color: ${(n) => n.isActive && n.disabled == !1 ? s(
n.theme,
"MenuItem",
n.color,
"focus",
"icon"
) : s(
n.theme,
"MenuItem",
n.color,
"enabled",
"icon"
)};
${(n) => n.disabled === !0 && N(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: ${s(
n.theme,
"MenuItem",
n.color,
"focus",
"background",
"backgroundOpacity"
)};
color: ${s(
n.theme,
"MenuItem",
n.color,
"focus",
"text"
)};
`}
outline: none;
${(n) => n.disabled === !0 && N(n.theme)};
`, $ = J((n, a) => {
const {
__TYPE__: oe = "MENU_ITEM",
active: f = !1,
icon: E,
disabled: m = !1,
isNested: r = !1,
showNested: k,
value: w,
//----------------
onFocus: C = () => {
},
onBlur: x = () => {
},
onClick: A = () => {
},
onKeyDown: p = () => {
},
onMouseEnter: le = () => {
},
onMouseLeave: te = () => {
},
toggleNested: c = () => {
},
onItemSelected: v = () => {
},
//----------------
color: S,
className: _ = "",
style: O = {},
size: P = "small",
iconProps: D,
children: u,
...T
} = n, F = { theme: ee(), color: S, style: O, size: P }, h = Q(), [z, b] = W(f);
X(() => {
b(f);
}, [f]);
const B = (e) => {
m == !1 && (r && c && c(), v(e, w, u), A(e));
}, K = (e) => {
b(!0), C(e);
}, R = (e) => {
b(!1), x(e);
}, j = (e) => {
e.preventDefault(), e.key == "ArrowDown" ? y(a ? a.current : h.current) : e.key == "ArrowUp" ? g(a ? a.current : h.current) : e.key == "Enter" && m == !1 && (r && c && c(), v(e, w, u)), p(e);
}, y = (e) => {
if (e != null && e.nextSibling) {
let o = L(e);
if (o != null && o.node && (o == null ? void 0 : o.type) == "item")
o.node.focus();
else if (o != null && o.node && (o == null ? void 0 : o.type) == "nested") {
let i = q(o.node);
i && i.focus();
} else e != null && e.parentElement && t(e.parentElement, "nested-item-lnc") && y(e.parentElement);
} else e != null && e.parentElement && t(e.parentElement, "nested-item-lnc") && y(e.parentElement);
}, g = (e) => {
if (e != null && e.previousSibling) {
let o = U(e);
if (o != null && o.node && (o == null ? void 0 : o.type) == "item")
o.node.focus();
else if (o != null && o.node && (o == null ? void 0 : o.type) == "nested") {
let i = Y(o.node);
i && i.focus();
} else e != null && e.parentElement && t(e.parentElement, "nested-item-lnc") && g(e.parentElement);
} else e != null && e.parentElement && t(e.parentElement, "nested-item-lnc") && g(e.parentElement);
}, L = (e) => {
for (; e = e.nextSibling; ) {
if (t(e, "menu-item-lnc"))
return { node: e, type: "item" };
if (t(e, "nested-item-lnc"))
return { node: e, type: "nested" };
}
return null;
}, U = (e) => {
for (; e = e.previousSibling; ) {
if (t(e, "menu-item-lnc"))
return { node: e, type: "item" };
if (t(e, "nested-item-lnc"))
return { node: e, type: "nested" };
}
return null;
}, q = (e) => {
var o;
return (o = Array.from(e.querySelectorAll(".menu-item-lnc"))) == null ? void 0 : o[0];
}, Y = (e) => {
var o;
return (o = Array.from(e.querySelectorAll(".menu-item-lnc"))) == null ? void 0 : o.pop();
}, t = (e, o) => {
var i = " " + e.className + " ", V = " " + o + " ";
return i.indexOf(V) != -1;
};
return /* @__PURE__ */ d(G, { children: /* @__PURE__ */ H(
ne,
{
ref: a || h,
className: "menu-item-lnc " + _,
disabled: m,
tabIndex: 0,
onKeyDown: j,
onFocus: K,
onBlur: R,
onClick: B,
isActive: z,
showNested: k,
...F,
...T,
children: [
E && /* @__PURE__ */ d(M, { icon: E, className: "drop-down-icon-lnc", ...D }),
/* @__PURE__ */ d("div", { className: "menu-item-text-lnc", children: u }),
r && /* @__PURE__ */ d(M, { icon: "angle-down", className: "sub-menu-icon-lnc" })
]
}
) });
});
$.propTypes = {
active: l.bool,
icon: l.string,
disabled: l.bool,
isNested: l.bool,
value: l.any,
//---------------------------------------------------------------
onBlur: l.func,
onFocus: l.func,
onClick: l.func,
onKeyDown: l.func,
onMouseEnter: l.func,
onMouseLeave: l.func,
//---------------------------------------------------------------
className: l.string,
style: l.object,
color: l.oneOf([
"primary",
"secondary",
"success",
"warning",
"danger",
"information",
"neutral",
"gray"
]),
iconProps: l.any,
size: l.oneOf(["small", "medium", "large"]),
__TYPE__: l.string
};
$.displayName = "MENU_ITEM";
export {
$ as default
};