Tree

Introduction

A Tree displays hierarchical data.

The below information is a snippet from the

related section in the Blueprint reference documentation.

Examples

Empty Folder
Open Folder
Item 1
Item 2
Edit code

Usage

1import React from "react";
2import { Tree } from "@commure/components-foundation";
3
4const INITIAL_STATE = [
5  {
6    id: 0,
7    icon: "folder-open",
8    isExpanded: true,
9    label: "Open Folder",
10    childNodes: [
11      {
12        id: 1,
13        icon: "document",
14        label: "Item 1"
15      }
16    ]
17  }
18];
19
20function MyTree() {
21  return <Tree contents={INITIAL_STATE} />;
22}
23
24export default MyTree;

The state of a Tree is determined by its contents prop. To make an interactive Tree it must be wrapped in a stateful component to handle updates to contents.

API Reference

Tree

Prop Name	Required?	Type	Description
className	false	string	A space-delimited list of class names to pass along to a child element.
contents	true	Array<ITreeNode<T>>	The data specifying the contents and appearance of the tree.
onNodeClick	false	TreeEventHandler<T>	Invoked when a node is clicked anywhere other than the caret for expanding/collapsing the node.
onNodeCollapse	false	TreeEventHandler<T>	Invoked when caret of an expanded node is clicked.
onNodeContextMenu	false	TreeEventHandler<T>	Invoked when a node is right-clicked or the context menu button is pressed on a focused node.
onNodeDoubleClick	false	TreeEventHandler<T>	Invoked when a node is double-clicked. Be careful when using this in combination with an `onNodeClick` (single-click) handler, as the way this behaves can vary between browsers. See http://stackoverflow.com/q/5497073/3124288
onNodeExpand	false	TreeEventHandler<T>	Invoked when the caret of a collapsed node is clicked.
onNodeMouseEnter	false	TreeEventHandler<T>	Invoked when the mouse is moved over a node.
onNodeMouseLeave	false	TreeEventHandler<T>	Invoked when the mouse is moved out of a node.

TreeNode

Prop Name	Required?	Type	Description
childNodes	false	Array<ITreeNode<T>>	Child tree nodes of this node.
children	false	React.ReactNode
className	false	string	A space-delimited list of class names to pass along to a child element.
contentRef	false	(node: TreeNode<T>, element: HTMLDivElement | null) => void
depth	true	number
disabled	false	boolean	Whether this tree node is non-interactive. Enabling this prop will ignore mouse event handlers (in particular click, down, enter, leave).
hasCaret	false	boolean	Whether the caret to expand/collapse a node should be shown. If not specified, this will be true if the node has children and false otherwise.
icon	false	IconName | MaybeElement	The name of a Blueprint icon (or an icon element) to render next to the node's label.
id	true	string | number	A unique identifier for the node.
isExpanded	false	boolean
isSelected	false	boolean	Whether this node is selected.
key	false	string | number
label	true	string | Element	The main label for the node.
nodeData	false	T	An optional custom user object to associate with the node. This property can then be used in the `onClick`, `onContextMenu` and `onDoubleClick` event handlers for doing custom logic per node.
onClick	false	(node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void
onCollapse	false	(node: TreeNode<T>, e: MouseEvent<HTMLSpanElement>) => void
onContextMenu	false	(node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void
onDoubleClick	false	(node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void
onExpand	false	(node: TreeNode<T>, e: MouseEvent<HTMLSpanElement>) => void
onMouseEnter	false	(node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void
onMouseLeave	false	(node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void
path	true	number[]
secondaryLabel	false	string | MaybeElement	A secondary label/component that is displayed at the right side of the node.

Related Reading

Blueprint Reference