///
import type { CommonProps } from '../utils/index.js';
import '@itwin/itwinui-css/css/tree.css';
export declare type NodeData = {
/**
* Array of the child nodes contained in the node.
*/
subNodes?: Array;
/**
* Unique id of the node.
*/
nodeId: string;
/**
* Custom type used to map type `T` to `NodeData`
*/
node: T;
/**
* Flag whether the node is expanded.
*/
isExpanded?: boolean;
/**
* Flag whether the node is disabled.
*/
isDisabled?: boolean;
/**
* Flag whether the node is selected.
*/
isSelected?: boolean;
/**
* Flag whether the node has sub-nodes.
* Used to determine if node should be expandable.
*/
hasSubNodes: boolean;
};
export declare type NodeRenderProps = Omit, 'subNodes'>;
export declare type TreeProps = {
/**
* Render function that should return the node element.
* Recommended to use `TreeNode` component.
* Must be memoized.
* @example
* const nodeRenderer = React.useCallback(({ node, ...rest }: NodeRenderProps) => (
*
* ), [onNodeExpanded])
*/
nodeRenderer: (props: NodeRenderProps) => JSX.Element;
/**
* Array of custom data used for `TreeNodes` inside `Tree`.
*/
data: T[];
/**
* Function that maps your `data` entry to `NodeData` that has all info about the node state.
* It will be used to render a tree node in `nodeRenderer`.
* Must be memoized.
* @example
* const getNode = React.useCallback((node: DemoData): NodeData => {
* return {
* subNodes: node.subItems,
* nodeId: node.id,
* node,
* isExpanded: expandedNodes[node.id],
* hasSubNodes: node.subItems.length > 0,
* };
* }, [expandedNodes]);
*/
getNode: (node: T) => NodeData;
/**
* Virtualization is used to have a better performance with a lot of nodes.
*
* When enabled, Tree DOM structure will change - it will have a wrapper div
* to which `className` and `style` will be applied.
* @default false
* @beta
*/
enableVirtualization?: boolean;
} & Omit;
/**
* Tree component used to display a hierarchical structure of `TreeNodes`.
* User should control state of expanded, selected and disabled nodes using `getNode` prop.
* @example
type DemoData = {
id: string;
label: string;
subItems: DemoData[];
};
const data: Array = [
{
id: 'Node-1',
label: 'Facility 1',
subItems: [{ id: 'Node-1-1', label: 'Unit 1', subItems: [] }],
},
{
id: 'Node-2',
label: 'Facility 2',
subItems: [{ id: 'Node-2-1', label: 'Unit 2', subItems: [] }],
},
];
const [expandedNodes, setExpandedNodes] = React.useState>({});
const onNodeExpanded = React.useCallback((nodeId: string, isExpanded: boolean) => {
setExpandedNodes((oldExpanded) => ({ ...oldExpanded, [nodeId]: isExpanded }));
}, []);
const getNode = React.useCallback((node: DemoData): NodeData => {
return {
subNodes: node.subItems,
nodeId: node.id,
node,
isExpanded: expandedNodes[node.id],
hasSubNodes: node.subItems.length > 0,
};
}, [expandedNodes]);
data={data}
getNode={getNode}
nodeRenderer={React.useCallback(({ node, ...rest }) => (
), [onNodeExpanded])}
/>
*/
export declare const Tree: (props: TreeProps) => JSX.Element;
export default Tree;