@itwin/presentation-hierarchies-react/lib/esm/presentation-hierarchies-react/itwinui/TreeRenderer.js

React components based on `@itwin/presentation-hierarchies`

import { jsx as _jsx } from "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.
 *--------------------------------------------------------------------------------------------*/
import { useCallback } from "react";
import { Tree } from "@itwin/itwinui-react";
import { useSelectionHandler } from "../UseSelectionHandler.js";
import { LocalizationContextProvider } from "./LocalizationContext.js";
import { TreeNodeRenderer } from "./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
 */
export function TreeRenderer({ rootNodes, expandNode, selectNodes, isNodeSelected, onFilterClick, getIcon, getLabel, getSublabel, getHierarchyLevelDetails, reloadTree, selectionMode, localizedStrings, size, filterButtonsVisibility, getActions, ...treeProps }) {
    const { onNodeClick, onNodeKeyDown } = useSelectionHandler({
        rootNodes,
        selectNodes: selectNodes ?? noopSelectNodes,
        selectionMode: selectionMode ?? "single",
    });
    const nodeRenderer = useCallback((nodeProps) => {
        return (_jsx(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 = useCallback((node) => createRenderedTreeNodeData(node, isNodeSelected ?? noopIsNodeSelected), [isNodeSelected]);
    return (_jsx(LocalizationContextProvider, { localizedStrings: localizedStrings, children: _jsx(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
 */
export 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