vn-kooch-tree-core
A component to display hierarchized data in vn-kooch-react-admin. This package is UI agnostic. It provides redux actions, reducers and a component using render prop.
Installation
npm install --save vn-kooch-tree-core# or yarn add vn-kooch-tree-core
Usage
With a categories ressource having this structure where a category may have a parent category referenced by the parent_id
field:
// in src/category/list.js;;;; const CategoriesList = <List ...props> <TreeController> <Fragment> tree </Fragment> </TreeController> </List>;
vn-kooch-react-admin
will fetch the data and the TreeController
component will build a tree from it. Note that every category which do not have a parent will be considered a root node. The TreeController
component will call its children function which is responsible for the actual rendering.
API
Meant to be used as the child of the List
, ReferenceManyField
or ReferenceArrayField components.
The TreeController
accepts the following props:
getTreeFromArray
: The function used to build the tree from the fetched data. It defaults to one using performant-array-to-treegetTreeState
: A function which must return the tree state root from the redux state in case you mounted it on a different key thantree
. It will be called with a singlestate
argument which is the redux state.children
: A function which will be called with a single object argument having the following propstree
: an array of the root nodes. Each node have the following properties:children
: an array of its child nodesdepth
: a number indicating its depth in the hierarchyrecord
: the node's original data
getIsNodeExpanded
: a function which takes a node identifier and returns a boolean indicating whether this node is expandedtoggleNode
: a function which takes a node identifier and toggles its expanded stateexpandNode
: a function which takes a node identifier and explicitly expands itcloseNode
: a function which takes a node identifier and explicitly closes it- any additional props received by the
TreeController
component
parentSource
: The field used as the parent identifier for each node. Defaults toparent_id
Roadmap
- Support nested set hierarchical data
TreeSelectInputController
to select a value inside the hierarchical data (with autocomplete showing the matched nodes)TreeInputController
to edit a field containing hierarchical data as jsonTreeNodeFieldController
to show a node and its hierarchie. It should recursively fetch the parents by default, accepting a custom function to fetch them in one call (fetchHierarchy
).
License
This library is licensed under the MIT License, and sponsored by marmelab.