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