feat: include nodePath as argument to template functions in TreeView nodes (#48)

Author: joaoassisb

demo/TreeViewExamples.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { TreeView } from '../dist/main';
+import { Form, FormInput, TreeView } from '../dist/main';
 
 export function TreeViewExamples() {
   const nodes = [
@@ -51,15 +51,36 @@ export function TreeViewExamples() {
   ];
 
   return (
-    <TreeView
-      nodes={nodes}
-      template={(item, index, parentItem) => (
-        <em>
-          {item.attrA} (index: {index} parent: {parentItem?.attrA || <em>None</em>})
-        </em>
-      )}
-      childrenPath={'children'}
-      draggable={true}
-    />
+    <div>
+      <h1 className="h4">Simple Tree View</h1>
+
+      <TreeView
+        nodes={nodes}
+        template={(item, index, parentItem) => (
+          <em>
+            {item.attrA} (index: {index} parent: {parentItem?.attrA || <em>None</em>})
+          </em>
+        )}
+        childrenPath={'children'}
+        draggable={true}
+      />
+
+      <div className="mt-4">
+        <h1 className="h4">Tree View with Form</h1>
+        <Form initialValues={{ nodes }} onSubmit={(newValues) => console.log(newValues)}>
+          <TreeView
+            nodes={nodes}
+            template={(item, index, parentItem, path) => (
+              <em>
+                <p>Path: path</p>
+                <FormInput name={`nodes${path}.attrA`} />
+              </em>
+            )}
+            childrenPath={'children'}
+            draggable={true}
+          />
+        </Form>
+      </div>
+    </div>
   );
 }

src/treeview/TreeView.jsx

@@ -19,7 +19,7 @@ TreeView.propTypes = {
   template: PropTypes.func.isRequired,
 };
 
-function TreeNodes({ childrenPath, depth, draggable, nodes, parentNode, template }) {
+function TreeNodes({ childrenPath, depth, draggable, nodes, parentNode, template, nodePath }) {
   return (
     <>
       {nodes.map((node, index) => (
@@ -32,28 +32,34 @@ function TreeNodes({ childrenPath, depth, draggable, nodes, parentNode, template
           childrenPath={childrenPath}
           depth={depth}
           draggable={draggable}
+          nodePath={`${nodePath}[${index}]`}
         />
       ))}
     </>
   );
 }
 
+TreeNodes.defaultProps = {
+  nodePath: '',
+};
+
 TreeNodes.propTypes = {
   childrenPath: PropTypes.string,
   depth: PropTypes.number,
   draggable: PropTypes.bool,
   nodes: PropTypes.array,
   parentNode: PropTypes.object,
   template: PropTypes.func,
+  nodePath: PropTypes.string,
 };
 
-function TreeNode({ node, parentNode, index, template, childrenPath, depth, draggable }) {
+function TreeNode({ node, parentNode, index, template, childrenPath, depth, draggable, nodePath }) {
   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, nodePath)}
       </li>
 
       {childrenNodes && (
@@ -63,6 +69,7 @@ function TreeNode({ node, parentNode, index, template, childrenPath, depth, drag
           template={template}
           childrenPath={childrenPath}
           depth={depth + 1}
+          nodePath={`${nodePath}.${childrenPath}`}
         />
       )}
     </div>
@@ -76,4 +83,5 @@ TreeNode.propTypes = {
   childrenPath: PropTypes.string,
   depth: PropTypes.number,
   draggable: PropTypes.bool,
+  nodePath: PropTypes.string,
 };