tree-render-viewer v0.2.7
Tree-render-viewer
This component is used to render data in a tree structure. Better known as TreeMenu
Usage
To install run this command on terminal, need to have node and npm
$ npm install --save tree-render-viewer
Later import tree to your project
import { TreeWithSearchBar } from 'tree-render-viewer'
There are two kinds of components that you can export, <TreeWithSearchBar /> and <Tree />, the first contains a search toolbar with an expand/collapse all button, and the second only renders a tree.
It also imports this StyleSheet with predefined styles to show the tree, you want to change the style overwrite the classes.
import 'tree-render-viewer/build/_tree.css'
Props
<TreeWithSearchBar />
| Name | Function |
|---|---|
| treeData | Tree data is an array of objects, it must contain the necessary information of the tree, it is recommended that each object always have these attributes {id, name, children, parentId} those 4 are necessary for the rendering |
| onNodeClick | onNodeClick is a function that receives the information of each node of the tree, by clicking on the label of some of the components that are rendered. onNodeClick (node: object) |
| toggleAll | toggle All is a function, which changes the state of the collapsible, it is recommended to have a state called collapseAll: false and that this function changes to the new state. toggleAll () {this.setState ((prevState) => ({collapseAll: !prevState.collapseAll}))} |
| idAttr | idAttr is a string, which suggests to the tree, to know what the key ID is on the tree |
| labelAttr | labelAttr is a string, which suggests to the tree, to know what the key label is on the tree |
| childrenAttr | childrenAttr is a string, which suggests to the tree, to know what the key children is in the tree |
| collapseAll | collapseAll should be a state, in the implementation component. It is used to change the state of collapsables. |
| handleChangeTextFilter | handleChangeTextFilter is a function, which returns the text that is changed in the input of the search bar. In this function the text that is obtained is returned, ideal to make a search in the tree, using some function of the handlers, or one of its own. |
| contextual | contextual is a bool enabled the contextual menus for the nodes. |
| ctxMenuItems | ctxMenuItems is an array of objects, you can pass handler functions for actions with contextual menus, they always receive an event and the data for the node. Example const add = (e, data) => console.log(data) // data is all the node info that is clicked |
| labelForPlaceHolder | labelForPlaceHolder is an string, useful to change the label for placeholder of the searchbar input. |
Utils
There are added functions that can also be called, we call them handlers.
mapTree(@treeData: arrayOf(Object), @structure: Object)
This function receives the data, and a structure object from which to find the data and assign it a new key. First map a node, and added to the tree.
mapNode(@node: object, @structure: Object)
This function map a node for the tree
appendChildToFather(treeData: arrayOf(Object), child: Object, structure: Object)
This function, take all the array, and search by Id to ParentId the new child, mapped the node, and return a new tree with the new child append.
find(node: { name: root, children: arrayOf(Object) }, text)
This function return the path to the node is matched with the text.
