Class: Tree

react-aiot~module:react-aiot~Tree

The ReactJS All-in-One-Tree.

Constructor

new Tree(props)

The constructor creates a local storage instance to save the sidebar width and expand states (if supported and enabled).
Parameters:
Name Type Description
props module:react-aiot~Tree~Properties ReactJS properties
Source:

Extends

  • React.Component

Quick reference

Methods

componentDidMount()

When the component did mount initialize the sticky sidebar and header.
Source:

componentWillUpdate()

When the component will upate rehandle the sortable tree.
Source:

handleNodeExpand()

A node gets expanded / collapsed. Chain it to the onNodeExpand method and save the state to the local storage if supported and enabled.
Source:

handleResize()

The sidebar gets resized through the ResizeButton and chain it to the onResize method.
Source:

handleResizeFinished()

The sidebar is resized successfully. Chain it to the onResizeFinished method and save the width to the local storage if supported and enabled.
Source:

id(appendopt) → {string}

Get an unique id for this container.
Parameters:
Name Type Attributes Description
append string <optional>
Append this string to the id with '--' suffix
Source:
Returns:
Type
string

render()

Render.
Source:

renderTree(tree, displayChildrenopt, createRootopt, contextopt)

Render a tree.
Parameters:
Name Type Attributes Default Description
tree Array.<object> The tree
displayChildren boolean <optional>
true If true the first nodes can have childNodes
createRoot object <optional>
Shows an additional node after the last one with an input field
context string('tree','static','search') <optional>
'tree' The tree context
Source:

renderTreeWrapper()

Render the tree wrapper. In this part the sticky component is ensured and you do not have to worry about it.
Source:

renderWrapper()

Render the main wrapper with sticky / resize functionality. It also renders the Header with headline and toolbar.
Source:

Type Definitions

onSort(event)

This function is called when a node item gets reordered per drag&drop.
Parameters:
Name Type Description
event object The event
Properties
Name Type Description
evt object The original event of sortablejs
from DOMElement From list (ul)
to DOMElement To list (ul)
oldIndex int The old indes within the old list
newIndex int The new index within the new list
id string | int The id of the
nextObj DOMElement The node next to the dragged one
prevObj DOMElement The node prev to the dragged one
nextId string | int The node id next to the dragged one
prevId string | int The node id prev to the dragged one
parentFromId string | int The node id of the from list (parent id)
parentToId string | int The node id of the to list (parent id)
buildTree function You can call this function to get the new tree property for this Tree, you can use it for your setState({ tree: buildTree }).
Source:

Properties

AIO properties
Properties:
Name Type Attributes Default Description
theme string <optional>
'default' The theme, appended as class aio-theme-{theme} to the rendered
id string <optional>
The id for the rendered
, otherwise an unique id is generated
className string <optional>
Additional classnames
innerClassName string <optional>
Additional classnames for the inner wrapper (.aio-pad)
attr object <optional>
Additional attributes for the rendered
isSticky boolean <optional>
false If true the sidebar gets sticky
isStickyHeader boolean <optional>
false If true the sidebar header gets sticky
isBusyHeader boolean <optional>
false Mark the header with a spinning loader
treeStickyAttr object <optional>
Sticky options (see react-stickynode)
headerStickyAttr object <optional>
Sticky options (see react-stickynode)
isResizable boolean <optional>
false If true the sidebar is resizable and collapsable
isFullWidth boolean <optional>
false If true the width of the sidebar is ignored and no longer resizable
defaultWidth int <optional>
250 The width in px. If there is already a width for this id in the local storage the default width is ignored
minWidth int <optional>
250 Forwarded to ResizeButton
maxWidth int <optional>
800 Forwarded to ResizeButton
opposite DOMElement <optional>
Forwarded to ResizeButton
oppositeOffset int <optional>
16 Forwarded to ResizeButton
isCreatableLinkDisabled boolean <optional>
false If true no new folder can be created
isCreatableLinkCancel boolean <optional>
false If true the creatable buttons are replaced with a Cancel button
isToolbarActive boolean <optional>
true If false the toolbar buttons can not be clicked
isToolbarBusy boolean <optional>
false If true the toolbar gets overlayed with a spinning loader
toolbarActiveButton string <optional>
If setted a "Cancel" and "Save" (optional) button is showed instead of the toolbar buttons
headline string <optional>
'Folders' The headline
renameSaveText string <optional>
'Save' The rename save text. If you are using a React element please use a single instance object (avoid rerendering).
renameAddText string <optional>
'Add' The rename add text If you are using a React element please use a single instance object (avoid rerendering).
createRoot object <optional>
The create node (TreeNode properties) when you want to create a new node on the root tree node
rootId int <optional>
0 The root id
sortableDelay int <optional>
100 The delay the user must hold down the node to make it draggable
noFoldersTitle string <optional>
'No folders found'
noFoldersDescription string <optional>
'Click the above button to create a new folder.'
noSearchResult string <optional>
'No search results found'
searchable boolean <optional>
true Shows a search input field and allows searching by name (simple contains pattern)
searchInputBusy boolean <optional>
false If true the input field is overlayed with a spinning loader
isTreeLinkDisabled boolean <optional>
false If true the nodes are no longer clickable (no action)
isTreeBusy boolean <optional>
false If true the tree is overlayed with a spinning loader
isSortable boolean <optional>
false If true the node is sortable (see sortablejs). If true the onSort property has to be set.
isSortableDisabled boolean <optional>
false If true the nodes are not sortable
isSortableBusy boolean <optional>
false If true all components which are affected by sort process are overlayed with a spinning loader
onNodePressF2 module:react-aiot/components/TreeNode#onNodePressF2 <optional>
onNodeExpand module:react-aiot/components/TreeNode#onExpand <optional>
onRenameClose module:react-aiot/components/TreeNode#onRenameClose <optional>
onAddClose module:react-aiot/components/TreeNode#onAddClose <optional>
onSelect module:react-aiot/components/TreeNode#onSelect <optional>
onResize module:react-aiot/components/ResizeButton#onResize <optional>
onResizeFinished module:react-aiot/components/ResizeButton#onResizeFinished <optional>
onSort module:react-aiot~Tree~onSort <optional>
onSortStart function <optional>
SortableJS onSort event
onSortEnd function <optional>
SortableJS onEnd event
staticTree Array.<object> <optional>
[] TreeNode properties. The static tree showed above the search field. The static tree can have no child nodes and is not sortable.
tree Array.<object> <optional>
[] TreeNode properties
renderItem module:react-aiot~Tree~onSort <optional>
Source:

renderItem(createTreeNode, TreeNode, node) → {module:react-aiot/components/TreeNode}

This function is called when a node item gets reordered.
Parameters:
Name Type Description
createTreeNode function A function that creates the default tree node (helpful for wrapper functions)
TreeNode module:react-aiot/components/TreeNode The ReactJS element
node object The node item
Source:
Returns:
Type
module:react-aiot/components/TreeNode