@itwin/presentation-hierarchies-react
Version:
React components based on `@itwin/presentation-hierarchies`
95 lines • 4.33 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TreeRenderer = TreeRenderer;
exports.createRenderedTreeNodeData = createRenderedTreeNodeData;
const jsx_runtime_1 = require("react/jsx-runtime");
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
const react_1 = require("react");
const itwinui_react_1 = require("@itwin/itwinui-react");
const UseSelectionHandler_js_1 = require("../UseSelectionHandler.js");
const LocalizationContext_js_1 = require("./LocalizationContext.js");
const TreeNodeRenderer_js_1 = require("./TreeNodeRenderer.js");
/**
* A component that renders a tree using the `Tree` component from `@itwin/itwinui-react`. The tree nodes
* are rendered using `TreeNodeRenderer` component from this package.
*
* @see https://itwinui.bentley.com/docs/tree
* @public
*/
function TreeRenderer({ rootNodes, expandNode, selectNodes, isNodeSelected, onFilterClick, getIcon, getLabel, getSublabel, getHierarchyLevelDetails, reloadTree, selectionMode, localizedStrings, size, filterButtonsVisibility, getActions, ...treeProps }) {
const { onNodeClick, onNodeKeyDown } = (0, UseSelectionHandler_js_1.useSelectionHandler)({
rootNodes,
selectNodes: selectNodes ?? noopSelectNodes,
selectionMode: selectionMode ?? "single",
});
const nodeRenderer = (0, react_1.useCallback)((nodeProps) => {
return ((0, jsx_runtime_1.jsx)(TreeNodeRenderer_js_1.TreeNodeRenderer, { ...nodeProps, filterButtonsVisibility: filterButtonsVisibility, expandNode: expandNode, getHierarchyLevelDetails: getHierarchyLevelDetails, onFilterClick: onFilterClick, onNodeClick: onNodeClick, onNodeKeyDown: onNodeKeyDown, getIcon: getIcon, getLabel: getLabel, getSublabel: getSublabel, reloadTree: reloadTree, size: size, getActions: getActions }));
}, [
filterButtonsVisibility,
expandNode,
getHierarchyLevelDetails,
onFilterClick,
onNodeClick,
onNodeKeyDown,
getIcon,
getLabel,
getSublabel,
reloadTree,
size,
getActions,
]);
const getNode = (0, react_1.useCallback)((node) => createRenderedTreeNodeData(node, isNodeSelected ?? noopIsNodeSelected), [isNodeSelected]);
return ((0, jsx_runtime_1.jsx)(LocalizationContext_js_1.LocalizationContextProvider, { localizedStrings: localizedStrings, children: (0, jsx_runtime_1.jsx)(itwinui_react_1.Tree, { ...treeProps, size: size, data: rootNodes, nodeRenderer: nodeRenderer, getNode: getNode, enableVirtualization: true }) }));
}
function noopSelectNodes() { }
function noopIsNodeSelected() {
return false;
}
/**
* An utility function that creates an `@itwin/itwinui-react` `NodeData` object for the `Tree` component from a
* `RenderedTreeNode` object.
*
* Usage example:
* ```tsx
* function MyComponent({ rootNodes, nodeRenderer }: MyComponentProps) {
* const getNode = useCallback<TreeProps["getNode"]>((node) => createRenderedTreeNodeData(node, () => false), []);
* return <Tree<RenderedTreeNode> data={rootNodes} getNode={getNode} nodeRenderer={nodeRenderer} />;
* }
* ```
*
* @public
*/
function createRenderedTreeNodeData(node, isNodeSelected) {
if ("type" in node) {
return {
nodeId: node.id,
node,
hasSubNodes: false,
isExpanded: false,
isSelected: false,
isDisabled: true,
};
}
return {
nodeId: node.id,
node,
hasSubNodes: node.children === true || node.children.length > 0,
subNodes:
// returns placeholder node to show as child while children is loading.
node.children === true
? [
{
id: `Loading-${node.id}`,
parentNodeId: node.id,
type: "ChildrenPlaceholder",
},
]
: node.children,
isExpanded: node.isExpanded,
isSelected: isNodeSelected(node.id),
};
}
//# sourceMappingURL=TreeRenderer.js.map