ra-tree-core
A component to display hierarchized data in react-admin. This package is UI agnostic. It provides redux actions, reducers and a component using render prop.
Installation
npm install --save ra-tree-core# or yarn add ra-tree-core
Usage
With a categories
resource having this structure where a category may have a parent category referenced by the parent_id
field:
First, you need to register the tree reducer and the translations:
// in App.js;;;;; ;;; const messages = 'en': ;const i18nProvider = messageslocale; const App = <Admin dataProvider=dataProvider i18nProvider=i18nProvider locale="en" // Note that you cannot name it anything other than `tree` customReducers= tree > <Resource name="posts" ...posts /> <Resource name="tags" ...tags /> </Admin>
You can then use the tree components:
// in src/category/list.js;;;; const CategoriesList = <TreeController resource="categories" ...props> <Fragment> tree </Fragment> </TreeController>;
The TreeController
component calls the dataProvider
for the categories
resource, and build an internal tree structure based on the results. Note that every category which does not have a parent will be considered a root node. The TreeController
component then calls its child function, which is responsible for the actual rendering.
Note that your dataProvider
must handle three new verbs: GET_TREE_ROOT_NODES
, GET_TREE_CHILDREN_NODES
, and MOVE_NODE
.
GET_TREE_ROOT_NODES
Should fetch the root nodes for the specified resource. It receives no parameters and should return an array of records as its data
.
GET_TREE_CHILDREN_NODES
Should fetch the leaves of the specified node. It receives the following parameter:
id
: the identifier of the node for which we want to fetch the leaves
The dataProvider
should return an array of records as its data
.
MOVE_NODE
Called when a node is moved either to a new parent, or to a new position. It receives the following parameters:
data
: the new node, updatedpreviousData
: the node before the update
Note: It is your responsibility to correctly update the siblings if necessary according to the new node position.
API
Meant to be used as an alternative to the ListController
component.
The TreeController
accepts the following props:
children
: A function which will be called with a single object argument having the following propsnodes
: an array of the root nodes identifierstoggleNode
: 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
positionSource
: The field used to order nodes. Optional.
Actions
This package also exports several actions to interact with the Tree:
crudGetTreeRootNodes
: Called automatically by the<TreeController>
component, trigger a fetch of the root nodes.crudGetTreeChildrenNodes
: Trigger a fetch of the leaves for a specific node.crudMoveNode
: Trigger a fetch which will update a node parent and its position (if specified).toggleNode
,expandNode
andcloseNode
to control if a node is expanded.
Roadmap
- Support nested set hierarchical data
TreeSelectInputController
to select a value inside the hierarchical data (with autocomplete showing the matched nodes)TreeNodeFieldController
to show a node and its hierarchy. 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.