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, and , 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'

$3

$3

| 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. |

$3

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.

$3

This function map a node for the tree

$3

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.

$3

This function return the path to the node is matched with the text.