Treeview lib

apps/remix-ide/src/app/tabs/debugger/debuggerUI.js

@@ -1,3 +1,7 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { TreeView, TreeViewItem } from '@remix-ui/tree-view'
+
 var TxBrowser = require('./debuggerUI/TxBrowser')
 var StepManagerUI = require('./debuggerUI/StepManager')
 var VmDebugger = require('./debuggerUI/VmDebugger')
@@ -243,6 +247,7 @@ class DebuggerUI {
           ${this.debuggerHeadPanelsView}          
         <div class="${css.statusMessage}">${this.statusMessage}</div>
         ${this.debuggerPanelsView}
+        <div id="treeViewReact"></div>
       </div>
     `
     if (!this.view) {
@@ -272,6 +277,26 @@ class DebuggerUI {
     yo.update(this.debuggerHeadPanelsView, this.vmDebugger.renderHead())
     yo.update(this.debuggerPanelsView, this.vmDebugger.render())
     yo.update(this.stepManagerView, this.stepManager.render())
+    ReactDOM.render(
+      <TreeView>
+        <TreeViewItem label="Item 1" />
+        <TreeViewItem label={<strong style={{ color: 'blue' }}>Item 2</strong>} />
+        <TreeViewItem label="Item 3">
+          <TreeView>
+            <TreeViewItem label="Nested 1" />
+            <TreeViewItem label="Nested 2" />
+            <TreeViewItem label="Nested 3">
+              <TreeView>
+                  <TreeViewItem label="Sub Nested 1" />
+                  <TreeViewItem label="Sub Nested 2" />
+              </TreeView>
+            </TreeViewItem>
+            <TreeViewItem label="Nested 4" />
+          </TreeView>
+        </TreeViewItem>
+        <TreeViewItem label="Item 4" />
+      </TreeView>
+      , document.getElementById('treeViewReact'))
   }
 
 }

babel.config.js

@@ -1,4 +1,4 @@
 module.exports = {
-    "presets": ["@babel/preset-react"],
+    "presets": ["@babel/preset-react", "@babel/preset-typescript"],
     "plugins": ["@babel/plugin-transform-modules-commonjs"]
 }

libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react'
+import { ExtractData, ExtractFunc } from '../types'
+
+export const useExtractData = (json, extractFunc?): Array<{ [key: string]: ExtractData }> => {
+    const [data, setData] = useState(null)
+    const extractDataDefault = (item, parent?) => {
+        const ret: ExtractData = {}
+
+        if (item instanceof Array) {
+            ret.children = item.map((item, index) => {
+            return {key: index, value: item}
+            })
+            ret.self = 'Array'
+            ret.isNode = true
+            ret.isLeaf = false
+        } else if (item instanceof Object) {
+            ret.children = Object.keys(item).map((key) => {
+            return {key: key, value: item[key]}
+            })
+            ret.self = 'Object'
+            ret.isNode = true
+            ret.isLeaf = false
+        } else {
+            ret.self = item
+            ret.children = null
+            ret.isNode = false
+            ret.isLeaf = true
+        }
+        return ret
+    }
+
+    useEffect(() => {
+        const data: Array<{ [key: string]: ExtractData }> = Object.keys(json).map((innerKey) => {
+            if (extractFunc) {
+                return { [innerKey]: extractFunc(json[innerKey], json) }
+            } else {
+                return { [innerKey]: extractDataDefault(json[innerKey], json) }
+            }
+        })
+
+        setData(data)
+
+        return () => {
+            setData(null)
+        }
+    }, [json, extractFunc])
+
+    return data
+}
+
+export default useExtractData

libs/remix-ui/debugger-ui/src/lib/debugger-ui.spec.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import DebuggerUi from './debugger-ui';
-
-describe(' DebuggerUi', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<DebuggerUi />);
-    expect(baseElement).toBeTruthy();
-  });
-});

libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx

@@ -1,31 +1,19 @@
 import React, { useState, useRef, useEffect } from 'react'
 import AssemblyItems from './assembly-items'
+/* eslint-disable-next-line */
+import { TreeView, TreeViewItem } from '../../../../tree-view/src/index'
+import useExtractData from '../../hooks/extract-data'
+import { ExtractData, ExtractFunc, DropdownPanelProps } from '../../types'
+
+
 import './styles/dropdown-panel.css'
 import EventManager from '../../../../../apps/remix-ide/src/lib/events'
-import TreeView from '../../../../../apps/remix-ide/src/app/ui/TreeView'
 import copyToClipboard from '../../../../../apps/remix-ide/src/app/ui/copy-to-clipboard'
 
-export interface DropdownPanelProps {
-    dropdownName: string,
-    opts: {
-        json: boolean,
-        displayContentOnly?: boolean,
-        css?: {
-            [key: string]: string
-        }
-    },
-    codeView?: string[],
-    index?: number,
-    calldata?: {
-        [key: string]: string
-    },
-    header?: string
-}
-
 export const DropdownPanel = (props: DropdownPanelProps) => {
-    const { dropdownName, opts, codeView, index, calldata, header } = props
+    const { dropdownName, opts, codeView, index, calldata, header, extractFunc } = props
+    const data = useExtractData(calldata, extractFunc)
     const event = new EventManager()
-    const treeView = new TreeView(opts)
     const dropdownRawEl = useRef(null)
     const [state, setState] = useState({
         header: '',
@@ -112,7 +100,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
         })
     }
 
-    const update = function (data, header) {
+    const update = function (calldata, header) {
         setState(prevState => {
             return {
                 ...prevState,
@@ -122,7 +110,7 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
                     display: 'none'
                 },
                 dropdownRawContent: {
-                    innerText: JSON.stringify(data, null, '\t'),
+                    innerText: JSON.stringify(calldata, null, '\t'),
                     display: 'block'
                 }
             }
@@ -140,9 +128,6 @@ export const DropdownPanel = (props: DropdownPanelProps) => {
             })
         }
         message('')
-        if (state.json) {
-          treeView.update(data)
-        }
     }
 
     const hide = () => {

libs/remix-ui/debugger-ui/src/types/index.ts

@@ -0,0 +1,30 @@
+export interface ExtractData {
+    children?: Array<{key: number | string, value: string}> | { key: number | string, value: string }
+    self?: string,
+    isNode?: boolean,
+    isLeaf?: boolean,
+    isArray?: boolean,
+    isStruct?: boolean,
+    isMapping?: boolean,
+    type?: string
+}
+
+export type ExtractFunc = (json: any, parent?: any) => ExtractData
+
+export interface DropdownPanelProps {
+    dropdownName: string,
+    opts: {
+        json: boolean,
+        displayContentOnly?: boolean,
+        css?: {
+            [key: string]: string
+        }
+    },
+    codeView?: string[],
+    index?: number,
+    calldata?: {
+        [key: string]: string
+    },
+    header?: string,
+    extractFunc?: ExtractFunc
+}

libs/remix-ui/tree-view/src/index.ts

@@ -1 +1,2 @@
+export * from './lib/tree-view-item/tree-view-item';
 export * from './lib/remix-ui-tree-view';

libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx

@@ -1,5 +0,0 @@
-import React from 'react'
-
-const useExtractData = () => {
-    
-}

libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.spec.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import RemixUiTreeView from './remix-ui-tree-view';
-
-describe(' RemixUiTreeView', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<RemixUiTreeView />);
-    expect(baseElement).toBeTruthy();
-  });
-});

libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx

@@ -1,43 +1,16 @@
-import React, { useState } from 'react'
+import React from 'react'
+import { TreeViewProps } from '../types'
 
 import './remix-ui-tree-view.css'
 
-export interface RemixUiTreeViewProps {
+export const TreeView = (props: TreeViewProps) => {
-  data: []
+  const { children, key, ...otherProps } = props
-}
   
-export const RemixUiTreeView = (props: RemixUiTreeViewProps) => {
   return (
-    <ul key="" data-id="treeViewUl" className="ul_tv ml-0 px-2">
+    <ul data-id={`treeViewUl${key}`} className="ul_tv ml-0 px-2" { ...otherProps }>
-      <li key="vm trace step" data-id="treeViewLivm trace step" className="li_tv">
+      { children }
-        <div key="vm trace step" data-id="treeViewDivvm trace step" className="d-flex flex-row align-items-center">
+    </ul>
-          <div className="px-1 fas fa-caret-right caret caret_tv_2nzIvs" style={{ visibility: "hidden" }}>
+  )
-          </div>
-            <span className="w-100">
-              <div className="d-flex mb-1 flex-row label_item">
-                <label className="small font-weight-bold pr-1 label_key">
-                  vm trace step:
-                </label>
-                <label className="m-0 label_value">-</label>
-              </div>
-            </span>
-          </div>
-        </li>
-        <li key="execution step" data-id="treeViewLiexecution step" className="li_tv">
-          <div key="execution step" data-id="treeViewDivexecution step" className="d-flex flex-row align-items-center">
-            <div className="px-1 fas fa-caret-right caret caret_tv" style={{ visibility: "hidden" }}>
-            </div>
-            <span className="w-100">
-              <div className="d-flex mb-1 flex-row label_item">
-                <label className="small font-weight-bold pr-1 label_key">
-                  execution step:
-                </label>
-                <label className="m-0 label_value">-</label>
-              </div>
-            </span>
-          </div>
-        </li>
-      </ul>)
 }
 
-export default RemixUiTreeView
+export default TreeView

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+
+import './tree-view-item.css'
+
+export const TreeViewItem = ({ key, children, label, ...otherProps }) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  return (
+    <li key={`treeViewLi${key}`} data-id={`treeViewLi${key}`} className='li_tv' {...otherProps}>
+      <div key={`treeViewDiv${key}`} data-id={`treeViewDiv${key}`} className='d-flex flex-row align-items-center' onClick={() => setIsExpanded(!isExpanded)}>
+        <div className={isExpanded ? 'px-1 fas fa-caret-down caret caret_tv' : 'px-1 fas fa-caret-right caret caret_tv'}  style={{ visibility: children ? 'visible' : 'hidden' }}></div>
+        <span className='w-100 pl-1'>
+          { label }
+        </span>
+      </div>
+    { isExpanded ? children : null }
+    </li>
+  );
+};
+
+export default TreeViewItem;

libs/remix-ui/tree-view/src/types/index.ts

@@ -0,0 +1,4 @@
+export interface TreeViewProps {
+    children?: React.ReactNode,
+    key: string
+}