Tree

Introduction

A Tree displays hierarchical data.

Examples

  • folder-closeEmpty Folder
  • chevron-rightfolder-openOpen Folder
    • documentItem 1
    • documentItem 2

Usage

import React from "react";
import { Tree } from "@commure/components-foundation";
const INITIAL_STATE = [
{
id: 0,
icon: "folder-open",
isExpanded: true,
label: "Open Folder",
childNodes: [
{
id: 1,
icon: "document",
label: "Item 1",
},
]
}
]
function MyTree() {
return (
<Tree contents={INITIAL_STATE} />
);
}
export 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 NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
contentstrueArray<ITreeNode<T>>The data specifying the contents and appearance of the tree.
onNodeClickfalseTreeEventHandler<T>Invoked when a node is clicked anywhere other than the caret for expanding/collapsing the node.
onNodeCollapsefalseTreeEventHandler<T>Invoked when caret of an expanded node is clicked.
onNodeContextMenufalseTreeEventHandler<T>Invoked when a node is right-clicked or the context menu button is pressed on a focused node.
onNodeDoubleClickfalseTreeEventHandler<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
onNodeExpandfalseTreeEventHandler<T>Invoked when the caret of a collapsed node is clicked.
onNodeMouseEnterfalseTreeEventHandler<T>Invoked when the mouse is moved over a node.
onNodeMouseLeavefalseTreeEventHandler<T>Invoked when the mouse is moved out of a node.

TreeNode

Prop NameRequired?TypeDescription
childNodesfalseArray<ITreeNode<T>>Child tree nodes of this node.
childrenfalseReact.ReactNode
classNamefalsestringA space-delimited list of class names to pass along to a child element.
contentReffalse(node: TreeNode<T>, element: HTMLDivElement | null) => void
depthtruenumber
disabledfalsebooleanWhether this tree node is non-interactive. Enabling this prop will ignore mouse event handlers (in particular click, down, enter, leave).
hasCaretfalsebooleanWhether 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.
iconfalseIconName | MaybeElementThe name of a Blueprint icon (or an icon element) to render next to the node's label.
idtruestring | numberA unique identifier for the node.
isExpandedfalseboolean
isSelectedfalsebooleanWhether this node is selected.
keyfalsestring | number
labeltruestring | ElementThe main label for the node.
nodeDatafalseTAn 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.
onClickfalse(node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void
onCollapsefalse(node: TreeNode<T>, e: MouseEvent<HTMLSpanElement>) => void
onContextMenufalse(node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void
onDoubleClickfalse(node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void
onExpandfalse(node: TreeNode<T>, e: MouseEvent<HTMLSpanElement>) => void
onMouseEnterfalse(node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void
onMouseLeavefalse(node: TreeNode<T>, e: MouseEvent<HTMLDivElement>) => void
pathtruenumber[]
secondaryLabelfalsestring | MaybeElementA secondary label/component that is displayed at the right side of the node.

Related Reading

Blueprint Reference