@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
111 lines (110 loc) • 4.14 kB
JavaScript
"use client";
import { findElementAncestor } from "../../core/utils/find-element-ancestor/find-element-ancestor.mjs";
import Tree_module_default from "./Tree.module.mjs";
import { memo, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Tree/FlatTreeNode.tsx
const FlatTreeNode = memo(function FlatTreeNode({ node, level, parent, hasChildren, expanded, tree, expandOnClick = true, selectOnClick, expandOnSpace = true, checkOnSpace, renderNode, style, tabIndex = -1, linesPath }) {
const ref = useRef(null);
const isLoading = tree.isNodeLoading(node.value);
const loadError = tree.getNodeLoadError(node.value);
const selected = tree.selectedState.includes(node.value);
const handleClick = (event) => {
event.stopPropagation();
if (expandOnClick && hasChildren) tree.toggleExpanded(node.value);
if (selectOnClick) tree.select(node.value);
ref.current?.focus();
};
const handleKeyDown = (event) => {
if (event.nativeEvent.code === "ArrowRight") {
event.stopPropagation();
event.preventDefault();
if (expanded && hasChildren) {
const root = findElementAncestor(event.currentTarget, "[data-tree-root]");
const nodes = root ? Array.from(root.querySelectorAll("[role=treeitem]")).filter((treeNode) => treeNode.style.display !== "none") : [];
const index = nodes.indexOf(event.currentTarget);
if (index !== -1) nodes[index + 1]?.focus();
} else if (hasChildren) tree.expand(node.value);
}
if (event.nativeEvent.code === "ArrowLeft") {
event.stopPropagation();
event.preventDefault();
if (expanded && hasChildren) tree.collapse(node.value);
else if (parent) (findElementAncestor(event.currentTarget, "[data-tree-root]")?.querySelector(`[role=treeitem][data-value="${CSS.escape(parent)}"]`))?.focus();
}
if (event.nativeEvent.code === "ArrowDown" || event.nativeEvent.code === "ArrowUp") {
const root = findElementAncestor(event.currentTarget, "[data-tree-root]");
if (!root) return;
event.stopPropagation();
event.preventDefault();
const nodes = Array.from(root.querySelectorAll("[role=treeitem]")).filter((treeNode) => treeNode.style.display !== "none");
const index = nodes.indexOf(event.currentTarget);
if (index === -1) return;
nodes[event.nativeEvent.code === "ArrowDown" ? index + 1 : index - 1]?.focus();
}
if (event.nativeEvent.code === "Space") {
if (expandOnSpace) {
event.stopPropagation();
event.preventDefault();
tree.toggleExpanded(node.value);
}
if (checkOnSpace) {
event.stopPropagation();
event.preventDefault();
if (tree.isNodeChecked(node.value)) tree.uncheckNode(node.value);
else tree.checkNode(node.value);
}
}
};
const elementProps = {
className: Tree_module_default.label,
style: {},
onClick: handleClick,
"data-selected": selected || void 0,
"data-value": node.value
};
return /* @__PURE__ */ jsxs("div", {
ref,
className: Tree_module_default.node,
style: {
"--label-offset": `calc(var(--level-offset, var(--mantine-spacing-lg)) * ${level - 1})`,
...style
},
role: "treeitem",
"aria-selected": selected,
"aria-expanded": hasChildren ? expanded : void 0,
"data-value": node.value,
"data-selected": selected || void 0,
"data-level": level,
tabIndex,
onKeyDown: handleKeyDown,
children: [linesPath?.map((state, idx) => {
if (state === "none") return null;
const column = idx + 2;
return /* @__PURE__ */ jsx("span", {
"aria-hidden": true,
className: `${Tree_module_default.flatLine}${state === "closing" ? ` ${Tree_module_default.flatLineClosing}` : ""}`,
style: { "--flat-line-column": column }
}, column);
}), typeof renderNode === "function" ? renderNode({
node,
level,
selected,
isRoot: level === 1,
tree,
expanded,
hasChildren,
isLoading,
loadError,
elementProps,
dragHandleProps: void 0
}) : /* @__PURE__ */ jsx("div", {
...elementProps,
children: node.label
})]
});
});
FlatTreeNode.displayName = "@mantine/core/FlatTreeNode";
//#endregion
export { FlatTreeNode };
//# sourceMappingURL=FlatTreeNode.mjs.map