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.