feat: include relative path as argument to render each node in tree view (#45)

* feat: include a afterChange function in useFormControl

* wip

* wip

* wip

* wip

* wip

* docs: includes instructions to run the application

* docs: fix readme subtitles

* wip

* feat: includes exports of FormLabel and FormValidationFeedbac

* wip

* feat: pass the relative path to each node in tree view

* wip

* wip

* wip

* wip

Co-authored-by: João Vitor <[email protected]>
Co-authored-by: Igor Rafael <[email protected]>

Author: 3 people

demo/TreeViewExamples.jsx

@@ -53,9 +53,9 @@ export function TreeViewExamples() {
   return (
     <TreeView
       nodes={nodes}
-      template={(item, index, parentItem) => (
+      template={(item, index, parentItem, relativePath) => (
         <em>
-          {item.attrA} (index: {index} parent: {parentItem?.attrA || <em>None</em>})
+          {item.attrA} (index: {index} parent: {parentItem?.attrA || <em>None</em>})<p>Path: {relativePath}</p>
         </em>
       )}
       childrenPath={'children'}

src/treeview/TreeView.jsx

@@ -7,7 +7,14 @@ export function TreeView({ childrenPath, draggable, nodes, template }) {
   return (
     <div className="rbu-treeview">
       <ul className="list-group">
-        <TreeNodes depth={0} nodes={nodes} template={template} childrenPath={childrenPath} draggable={draggable} />
+        <TreeNodes
+          depth={0}
+          nodes={nodes}
+          template={template}
+          childrenPath={childrenPath}
+          draggable={draggable}
+          relativePath={`${childrenPath}`}
+        />
       </ul>
     </div>
   );
@@ -19,7 +26,7 @@ TreeView.propTypes = {
   template: PropTypes.func.isRequired,
 };
 
-function TreeNodes({ childrenPath, depth, draggable, nodes, parentNode, template }) {
+function TreeNodes({ childrenPath, depth, draggable, nodes, parentNode, template, relativePath }) {
   return (
     <>
       {nodes.map((node, index) => (
@@ -32,6 +39,7 @@ function TreeNodes({ childrenPath, depth, draggable, nodes, parentNode, template
           childrenPath={childrenPath}
           depth={depth}
           draggable={draggable}
+          relativePath={`${relativePath}[${index}]`}
         />
       ))}
     </>
@@ -45,15 +53,16 @@ TreeNodes.propTypes = {
   nodes: PropTypes.array,
   parentNode: PropTypes.object,
   template: PropTypes.func,
+  relativePath: PropTypes.string,
 };
 
-function TreeNode({ node, parentNode, index, template, childrenPath, depth, draggable }) {
+function TreeNode({ node, parentNode, index, template, childrenPath, depth, draggable, relativePath }) {
   const childrenNodes = getValueByPath(node, childrenPath);
 
   return (
     <div draggable={draggable}>
       <li className="list-group-item" style={{ marginLeft: `${depth * 20}px`, borderTopWidth: '1px' }}>
-        {template(node, index, parentNode)}
+        {template(node, index, parentNode, relativePath)}
       </li>
 
       {childrenNodes && (
@@ -63,6 +72,7 @@ function TreeNode({ node, parentNode, index, template, childrenPath, depth, drag
           template={template}
           childrenPath={childrenPath}
           depth={depth + 1}
+          relativePath={`${relativePath}.${childrenPath}`}
         />
       )}
     </div>
@@ -76,4 +86,5 @@ TreeNode.propTypes = {
   childrenPath: PropTypes.string,
   depth: PropTypes.number,
   draggable: PropTypes.bool,
+  relativePath: PropTypes.string,
 };