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 |
Extends
- React.Component
Quick reference
Methods
- componentDidMount()
- componentWillUpdate()
- handleNodeExpand()
- handleResize()
- handleResizeFinished()
- id(appendopt) → {string}
- render()
- renderTree(tree, displayChildrenopt, createRootopt, contextopt)
- renderTreeWrapper()
- renderWrapper()
Methods
componentDidMount()
When the component did mount initialize the sticky sidebar and header.
componentWillUpdate()
When the component will upate rehandle the sortable tree.
handleNodeExpand()
A node gets expanded / collapsed. Chain it to the onNodeExpand method and
save the state to the local storage if supported and enabled.
handleResize()
The sidebar gets resized through the ResizeButton and chain it to
the onResize method.
handleResizeFinished()
The sidebar is resized successfully. Chain it to the onResizeFinished method
and save the width to the local storage if supported and enabled.
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 |
Returns:
- Type
- string
render()
Render.
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 |
renderTreeWrapper()
Render the tree wrapper. In this part the sticky component is ensured and
you do not have to worry about it.
renderWrapper()
Render the main wrapper with sticky / resize functionality. It also
renders the Header with headline and toolbar.
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
|
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> |
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 |