@lanaco/lnc-react-ui
Version:
React component library
176 lines (172 loc) • 4.9 kB
JavaScript
import { jsx as e, jsxs as z } from "react/jsx-runtime";
import { forwardRef as d, memo as T } from "react";
import { n as m } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { P as r } from "./index-S5Cd7WrG.js";
import C from "./Icon.js";
import P from "./DropdownMenu.js";
import K from "./DropdownItem.js";
import { c as O } from "./index-Bq3leL2e.js";
import { u as $ } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
const j = "_Action_bw0a9_5", B = {
Action: j
}, D = d(
({ active: o, className: a, cursor: s, style: l, ...t }, i) => /* @__PURE__ */ e(
"button",
{
ref: i,
...t,
className: O(B.Action, a),
tabIndex: 0,
style: {
...l,
cursor: s,
"--fill": o == null ? void 0 : o.fill,
"--background": o == null ? void 0 : o.background
}
}
)
), I = d((o, a) => /* @__PURE__ */ e(D, { ref: a, cursor: "grab", "data-cypress": "draggable-handle", ...o, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 20 20", width: "12", children: /* @__PURE__ */ e("path", { d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z" }) }) })), M = m.div`
height: 100%;
width: 100%;
padding: ${(o) => `18px 20px 18px ${o.handle == !0 ? "10px" : "20px"}`};
position: relative;
word-wrap: break-word;
white-space: pre-wrap;
word-break: break-word;
display: flex;
gap: 8px;
& .card-action-lnc {
position: absolute;
right: 10px;
cursor: pointer;
}
& > .kanban-card-content {
${(o) => o.clickable && "cursor: pointer;"}
}
`, R = m.div`
display: flex;
& > *:first-of-type:not(:last-of-type) {
opacity: 0;
}
& > *:first-of-type:not(:last-of-type):focus-visible {
opacity: 1;
}
`, f = T(
d(
({
__TYPE__: o = "KANBAN_CARD",
id: a,
containerId: s,
item: l,
handle: t = !0,
handleProps: i,
actionsMenu: u = !1,
actions: c = [],
onDetails: p,
color: b = "primary",
size: y = "small",
className: A = "",
style: g = {},
children: h,
...w
}, x) => {
const _ = $();
return /* @__PURE__ */ z(
M,
{
ref: x,
handle: t,
theme: _,
className: A,
style: g,
clickable: !!p,
...w,
children: [
t && /* @__PURE__ */ e(R, { className: "Actions", children: /* @__PURE__ */ e(I, { ...i }) }),
u && /* @__PURE__ */ e(
P,
{
className: "card-action-lnc",
horizontalAlignment: "right",
verticalAlignment: "bottom",
color: b,
size: y,
control: /* @__PURE__ */ e(
C,
{
color: "neutral",
className: "card-action-lnc",
icon: "ellipsis-v"
}
),
children: c == null ? void 0 : c.map((n, N) => {
if ((n == null ? void 0 : n.show) != !1)
return /* @__PURE__ */ e(
K,
{
icon: n.icon,
disabled: n.enable == !1,
onClick: (k) => n.onAction(k, l, s),
children: n.name
},
N
);
})
}
),
/* @__PURE__ */ e(
"div",
{
className: "kanban-card-content-lnc",
onClick: (n) => {
p && p(n, l, s);
},
children: h
}
)
]
}
);
}
)
);
f.propTypes = {
__TYPE__: r.string,
id: r.oneOfType([r.string, r.number]),
containerId: r.oneOfType([r.string, r.number]),
className: r.string,
style: r.object,
handle: r.bool,
handleProps: r.any,
/**
* Show actions menu on Card
*/
actionsMenu: r.bool,
/**
* type of: [{ name: `<string>`, show: `<bool>`, enable: `<bool>`, onAction: `<func>`, icon: `<string>`}]
* show and enable are true by default
*/
actions: r.array,
//-------------------------------------------------------------
/**
* (e, item, columnId) => { }
*/
onDetails: r.func,
//-------------------------------------------------------------
color: r.oneOf([
"primary",
"secondary",
"success",
"warning",
"danger",
"information",
"neutral",
"gray"
]),
size: r.oneOf(["small", "medium", "large"])
};
f.displayName = "KANBAN_CARD";
export {
I as H,
f as K
};