feat(treeview): include an initial version of the TreeView component

Author: assisrafael

demo/TreeViewExamples.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { TreeView } from '../dist/main';
+
+export function TreeViewExamples() {
+  const nodes = [
+    {
+      attrA: '1. Attr A Value',
+      children: [
+        {
+          attrA: '1.1. Attr A Value',
+          children: [
+            {
+              attrA: '1.1.1. Attr A Value',
+              children: [
+                {
+                  attrA: '1.1.1.1. Attr A Value',
+                  children: [
+                    {
+                      attrA: '1.1.1.1.1. Attr A Value',
+                      children: [
+                        {
+                          attrA: '1.1.1.1.1.1. Attr A Value',
+                          children: [
+                            {
+                              attrA: '1.1.1.1.1.1.1. Attr A Value',
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    {
+      attrA: '2. Attr A Value',
+      children: [
+        {
+          attrA: '2.1. Attr A Value',
+        },
+        {
+          attrA: '2.2. Attr A Value',
+        },
+      ],
+    },
+  ];
+
+  return <TreeView nodes={nodes} template={(item, index) => <em>{item.attrA}</em>} childrenPath={'children'} draggable={true} />;
+}

demo/demo.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/max-dependencies */
 /* eslint-disable no-console */
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -12,14 +13,15 @@ import { DialogExamples } from './DialogExamples';
 import { ListGroupExamples } from './ListGroupExamples';
 import { ToastsExamples } from './ToastsExamples';
 import { DropdownExamples } from './DropdownExamples';
+import { TreeViewExamples } from './TreeViewExamples';
 
 ReactDOM.render(
   <div className="mt-3">
     <React.StrictMode>
       <StatefulTabs
         vertical={true}
         onlyRenderActiveTab={true}
-        initialTab={0}
+        initialTab={8}
         tabs={[
           {
             title: 'Dialog',
@@ -57,6 +59,10 @@ ReactDOM.render(
               </ToastsContainer>
             ),
           },
+          {
+            title: 'TreeView',
+            content: <TreeViewExamples />,
+          },
         ]}
       />
     </React.StrictMode>

src/index.js

@@ -5,4 +5,5 @@ export * from './mixed';
 export * from './table';
 export * from './tabs';
 export * from './toasts';
+export * from './treeview';
 export * from './utils';

src/treeview/TreeView.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { getValueByPath } from '../utils';
+
+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} />
+      </ul>
+    </div>
+  );
+}
+TreeView.propTypes = {
+  childrenPath: PropTypes.string.isRequired,
+  draggable: PropTypes.bool,
+  nodes: PropTypes.array.isRequired,
+  template: PropTypes.func.isRequired,
+};
+
+function TreeNodes({ childrenPath, depth, draggable, nodes, template }) {
+  return (
+    <>
+      {nodes.map((node, index) => (
+        <TreeNode key={index} node={node} index={index} template={template} childrenPath={childrenPath} depth={depth} />
+      ))}
+    </>
+  );
+}
+
+TreeNodes.propTypes = {
+  childrenPath: PropTypes.string,
+  depth: PropTypes.number,
+  draggable: PropTypes.bool,
+  nodes: PropTypes.array,
+  template: PropTypes.func,
+};
+
+function TreeNode({ node, index, template, childrenPath, depth, draggable }) {
+  const childrenNodes = getValueByPath(node, childrenPath);
+
+  return (
+    <div draggable={draggable}>
+      <li className="list-group-item" style={{ marginLeft: `${depth * 20}px`, borderTopWidth: '1px' }}>
+        {template(node, index)}
+      </li>
+
+      {childrenNodes && (
+        <TreeNodes nodes={childrenNodes} template={template} childrenPath={childrenPath} depth={depth + 1} />
+      )}
+    </div>
+  );
+}
+TreeNode.propTypes = {
+  node: PropTypes.object,
+  index: PropTypes.number,
+  template: PropTypes.func,
+  childrenPath: PropTypes.string,
+  depth: PropTypes.number,
+  draggable: PropTypes.bool,
+};

src/treeview/index.js

@@ -0,0 +1,3 @@
+import { TreeView } from './TreeView';
+
+export * from './TreeView';