TreeNodeRenderer Variable

Default component for rendering tree node.

Type

NamedExoticComponent<ExtendedTreeNodeRendererProps> & { type: T }

Default Value

```typescript React.memo((props: ExtendedTreeNodeRendererProps) => { const label = ( );

function onExpansionToggle() { if (props.node.isExpanded) { props.treeActions.onNodeCollapsed(props.node.id);

  return;
}

props.treeActions.onNodeExpanded(props.node.id);

}

const createCheckboxProps = (checkboxInfo: CheckBoxInfo): NodeCheckboxProps => ({ state: checkboxInfo.state, tooltip: checkboxInfo.tooltip, isDisabled: checkboxInfo.isDisabled, onClick: (newState) => props.treeActions.onNodeCheckboxClicked(props.node.id, newState), });

return ( <TreeNode data-testid={TreeTest.TestId.Node} className={props.className} checkboxProps={props.node.checkbox.isVisible ? createCheckboxProps(props.node.checkbox) : undefined} style={props.style} isExpanded={props.node.isExpanded} isSelected={props.node.isSelected} isLoading={props.node.isLoading} isLeaf={props.node.numChildren === 0} icon={props.imageLoader ? : undefined} label={label} level={props.node.depth} onClick={(event) => props.treeActions.onNodeClicked(props.node.id, event)} onMouseDown={() => props.treeActions.onNodeMouseDown(props.node.id)} onMouseMove={() => props.treeActions.onNodeMouseMove(props.node.id)} onClickExpansionToggle={onExpansionToggle} renderOverrides={{ renderCheckbox: props.checkboxRenderer }} /> ); })```

Beta  

Defined in

• ui/components/src/ui-components/tree/controlled/component/TreeNodeRenderer.tsx Line 57

Last Updated: 13 June, 2024