@frontify/fondue
Version:
Design system of Frontify
260 lines (259 loc) • 11.4 kB
JavaScript
import { jsx as x, jsxs as as } from "react/jsx-runtime";
import { memo as rs, forwardRef as os, useRef as ns, useEffect as ds, useCallback as L, Children as It, useMemo as V, createElement as ls } from "react";
import { useDndContext as ps, useDndMonitor as us } from "@dnd-kit/core";
import { useSortable as cs } from "@dnd-kit/sortable";
import { CSS as is } from "@dnd-kit/utilities";
import { noop as ms } from "lodash-es";
import { TreeItemColorsClassMap as ws, TreeItemBorderRadiusClassMap as W, TreeItemSpacingClassMap as fs, TreeItemBorderClassMap as Dt, TreeItemBorderStyleClassMap as bs, TreeItemShadowClassMap as hs } from "../types.es.js";
import { useDebounce as Tt } from "../../../hooks/useDebounce.es.js";
import { FOCUS_VISIBLE_STYLE as ys } from "../../../utilities/focusStyle.es.js";
import { merge as h } from "../../../utilities/merge.es.js";
import { DragHandle as gs } from "./DragHandle.es.js";
import { ExpandButton as Is } from "./ExpandButton.es.js";
import { useTreeItem as Ds } from "./useTreeItem.es.js";
import { removeFragmentsAndEnrichChildren as Ts } from "../utils/removeFragmentsAndEnrichChildren.es.js";
import { useDeepCompareEffect as Ns } from "../utils/useDeepCompareEffect.es.js";
import { INDENTATION_WIDTH as Nt, EXPAND_ONHOVER_DELAY as xs } from "../helpers/constants.es.js";
const Ss = ({ isSorting: a, wasDragging: H }) => !(a || H), As = rs(
os(
({
id: a,
type: H,
label: y,
onDrop: E,
accepts: xt,
showCaret: K,
children: g,
parentId: R,
level: p = 0,
contentComponent: I,
onClick: _,
onSelect: F,
onExpand: u,
onShrink: S,
registerOverlay: A,
registerNodeChildren: Y,
unregisterNodeChildren: d,
draggable: U = !0,
expandable: X = !0,
showDragHandlerOnHoverOnly: St = !0,
dragHandlerPosition: c = "left",
showContentWhileDragging: v = !0,
itemStyle: q,
ignoreItemDoubleClick: G = !1,
expandOnSelect: At = !1,
"data-test-id": vt = "fondue-tree-item"
}, w) => {
var rt, ot, nt, dt, lt, pt, ut, ct, it, mt, wt, ft, bt, ht, yt;
const { active: o, over: B } = ps(), { isSelected: i, isExpanded: m, projection: s } = Ds(a), J = ns(), e = (o == null ? void 0 : o.id) === a, t = e && s !== null && s !== void 0 ? s : null, Bt = typeof ((ot = (rt = B == null ? void 0 : B.data) == null ? void 0 : rt.current) == null ? void 0 : ot.accepts) == "string" ? (nt = B.data.current.accepts) == null ? void 0 : nt.split(", ") : [], Ct = typeof (t == null ? void 0 : t.accepts) == "string" ? (dt = t.accepts) == null ? void 0 : dt.split(", ") : [], D = ((lt = o == null ? void 0 : o.data.current) == null ? void 0 : lt.type) || "", T = ((pt = s == null ? void 0 : s.previousNode) == null ? void 0 : pt.depth) !== void 0 && (s == null ? void 0 : s.depth) > ((ut = s == null ? void 0 : s.previousNode) == null ? void 0 : ut.depth), Mt = T && s.depth - 1 === ((ct = s == null ? void 0 : s.previousNode) == null ? void 0 : ct.depth), $ = T && ((it = s == null ? void 0 : s.previousNode) == null ? void 0 : it.accepts) !== void 0 && (((mt = s == null ? void 0 : s.previousNode) == null ? void 0 : mt.accepts.includes(`${D}-deeper`)) || ((wt = s == null ? void 0 : s.previousNode) == null ? void 0 : wt.accepts.includes(`${D}-within`))), Lt = e && Mt && ((ft = t == null ? void 0 : t.previousNode) == null ? void 0 : ft.accepts) !== void 0 && ((bt = t == null ? void 0 : t.previousNode) == null ? void 0 : bt.accepts.includes(`${D}-within`)) || (t == null ? void 0 : t.isWithinParent) && Ct.includes(`${D}-within`), N = e && (o == null ? void 0 : o.data.current) && (Bt.includes(D) && !T || Lt), O = Tt((r) => {
J.current === r && (u == null || u(r));
}, xs);
ds(() => {
var r, l, b;
e && (J.current = T ? (r = t == null ? void 0 : t.previousNode) == null ? void 0 : r.id : null), e && $ && (t != null && t.parentId) && t.previousNode && t.parentId === t.previousNode.id && t.parentId !== ((b = (l = o == null ? void 0 : o.data) == null ? void 0 : l.current) == null ? void 0 : b.parentId) && O(t == null ? void 0 : t.parentId);
}, [
o == null ? void 0 : o.data,
t == null ? void 0 : t.parentId,
t == null ? void 0 : t.previousNode,
O,
e,
$,
T
]);
const Wt = L(
(r) => {
var gt;
const { over: l, active: b } = r;
!e || !t || b.id === (l == null ? void 0 : l.id) && (t == null ? void 0 : t.depth) === ((gt = b.data.current) == null ? void 0 : gt.level) || e && l && N && E && E({
id: b.id,
parentId: t.parentId,
sort: t.position,
contentComponent: I,
parentType: t.type
});
},
[e, t, N, E, I]
), Ht = L(
(r) => {
r.active.id === a && (A == null || A({
contentComponent: I,
children: g,
id: a,
label: y,
level: p,
dragHandlerPosition: c,
showContentWhileDragging: v
}));
},
[
g,
I,
c,
a,
y,
p,
A,
v
]
), Et = L(
(r) => {
r.active.id === a && document.body.style.setProperty("cursor", N ? "grabbing" : "no-drop");
},
[N, a]
);
us({
onDragEnd: Wt,
onDragStart: Ht,
onDragMove: Et
});
const Q = L(
(r) => {
r == null || r.stopPropagation(), m ? S == null || S(a) : u == null || u(a);
},
[a, m, u, S]
), Rt = Tt(
(r) => {
r.stopPropagation(), !(G && r.detail >= 2) && (At && Q(), F == null || F(a), _ == null || _(a));
},
G ? 300 : 0
), Z = R && (o == null ? void 0 : o.id) === R, P = It.count(g) > 0, { enrichedChildren: k, childrenIds: _t } = V(() => {
const r = Ts(g, { parentId: a, level: p + 1 });
return {
enrichedChildren: r,
childrenIds: r.map((l) => l.props.id)
};
}, [g, a, p]), {
attributes: Ft,
listeners: Yt,
transform: C,
transition: $t,
setDraggableNodeRef: kt,
setDroppableNodeRef: zt,
setActivatorNodeRef: Vt
} = cs({
id: a,
disabled: !U,
data: { type: H, accepts: xt, parentId: R, level: p },
animateLayoutChanges: Ss,
transition: null
});
Ns(() => {
if (It.count(k) === 0) {
d == null || d(a);
return;
}
if (e || Z) {
d == null || d(a);
return;
}
m ? Y == null || Y({ id: a, children: k }) : d == null || d(a);
}, [e, m, Z, k, a]);
const n = V(() => ({
spacingY: "none",
contentHight: "single-line",
shadow: "none",
borderRadius: "small",
borderWidth: "none",
borderStyle: "none",
activeColorStyle: "neutral",
...q
}), [q]), f = ws[n.activeColorStyle ?? "neutral"], { liClassName: Kt, backgroundClassName: Ut } = V(() => ({
liClassName: h([
ys,
"tw-box-content tw-relative tw-cursor-default tw-transition-colors tw-outline-none tw-ring-inset tw-group tw-no-underline tw-leading-5",
!e && i ? f.selectedTextColor : f.textColor,
fs[n.spacingY ?? "none"]
]),
backgroundClassName: h([
"tw-block tw-absolute tw-inset-0 tw-transition-colors -tw-z-10",
n.borderWidth !== "none" ? W[n.borderRadius ?? "small"] : "",
!e && (!i || n.activeColorStyle !== "neutral") && f.pressedBackgroundColor,
!e && i ? f.selectedBackgroundColor : f.backgroundColor
])
}), [e, i, n, f]), Xt = v ? !0 : !e, qt = h([
"tw-max-w-full tw-grow tw-overflow-hidden",
e && v ? "tw-opacity-75 tw-blur-sm tw-grayscale" : ""
]), Gt = m && !e, j = U && !e, Jt = y !== void 0 && !e, M = !e && X && (K === void 0 ? P : K);
let z = "";
!e && !m && M && $ && ((ht = s == null ? void 0 : s.previousNode) == null ? void 0 : ht.id) === a && (s == null ? void 0 : s.depth) > ((yt = s == null ? void 0 : s.previousNode) == null ? void 0 : yt.depth) && (z = h([
"tw-border-solid tw-border-box-selected-strong",
W[n.borderRadius ?? "small"],
Dt.small
]));
const Ot = n.borderWidth !== "none" && z === "" ? h([
Dt[n.borderWidth ?? "none"],
W[n.borderRadius ?? "small"],
bs[n.borderStyle ?? "none"]
]) : "", Qt = n.contentHight === "single-line" ? "tw-h-10" : "tw-h-fit", Zt = n.contentHight === "single-line" ? "tw-h-12" : "tw-h-fit", Pt = h([
"tw-relative tw-z-0 tw-transition-colors tw-flex tw-items-center tw-leading-5 tw-width-fit tw-justify-between",
hs[n.shadow ?? "none"],
e ? "tw-border-dashed tw-border-2 tw-pr-0" : Ot,
e && W[n.borderRadius ?? "small"],
e ? Zt : Qt,
e && (N ? "tw-border-box-selected-strong tw-bg-box-selected-hover" : "tw-bg-box-negative-hover tw-border-box-negative-strong-hover"),
z
]), tt = t != null && t.depth ? t.depth * Nt : void 0, st = e ? 0 : p * Nt, jt = { paddingLeft: tt ?? st }, ts = n.borderWidth !== "none" ? {} : { marginLeft: -1 * (tt ?? st) }, ss = {
transform: is.Transform.toString(C),
transition: $t
}, et = { ...Yt, ...Ft }, at = c !== "none" ? /* @__PURE__ */ x(
gs,
{
...c !== "none" ? et : {},
active: i,
ref: Vt,
disabled: !j,
"aria-hidden": !j,
showDragHandlerOnHoverOnly: St,
activeColorStyle: n.activeColorStyle ?? "neutral"
}
) : null, es = c === "none" ? { ...et } : {};
return /* @__PURE__ */ ls(
"li",
{
...es,
id: a,
key: a,
tabIndex: 0,
role: "treeitem",
style: jt,
onKeyDown: ms,
"aria-label": y,
"aria-level": p + 1,
onClick: Rt,
className: Kt,
ref: (r) => {
zt(r), typeof w == "function" ? w(r) : w != null && w.current && (w.current = r);
},
"data-test-id": vt,
"aria-selected": i,
"aria-expanded": m,
"data-has-children": P,
"aria-owns": _t.join(" ")
},
/* @__PURE__ */ as("div", { ref: kt, className: Pt, style: ss, children: [
/* @__PURE__ */ x("span", { className: Ut, style: ts, "aria-hidden": !0 }),
c === "left" && at,
X && /* @__PURE__ */ x(
Is,
{
active: C != null && C.y ? !1 : i,
onClick: Q,
expanded: Gt,
disabled: !M,
"aria-hidden": !M,
className: M ? "tw-visible" : "tw-invisible tw-pointer-events-none"
}
),
Jt && /* @__PURE__ */ x("span", { className: "first:tw-ml-3.5 tw-w-full tw-h-full tw-flex tw-items-center", children: y }),
Xt && /* @__PURE__ */ x("div", { className: qt, children: I }),
c === "right" && at
] })
);
}
)
);
As.displayName = "FondueTreeItem";
export {
As as TreeItem
};
//# sourceMappingURL=TreeItem.es.js.map