From 16057f1f6fa5031b7a5576c7a565e5e0ee2f7078 Mon Sep 17 00:00:00 2001 From: ioedeveloper Date: Fri, 4 Sep 2020 12:43:34 +0100 Subject: [PATCH] Treeview lib --- .../src/app/tabs/debugger/debuggerUI.js | 25 +++++++++ babel.config.js | 2 +- .../debugger-ui/src/hooks/extract-data.tsx | 51 +++++++++++++++++++ .../debugger-ui/src/lib/debugger-ui.spec.tsx | 11 ---- .../src/lib/vm-debugger/dropdown-panel.tsx | 35 ++++--------- libs/remix-ui/debugger-ui/src/types/index.ts | 30 +++++++++++ libs/remix-ui/tree-view/src/index.ts | 1 + .../tree-view/src/lib/hooks/extract-data.tsx | 5 -- .../src/lib/remix-ui-tree-view.spec.tsx | 11 ---- .../tree-view/src/lib/remix-ui-tree-view.tsx | 47 ++++------------- .../src/lib/tree-view-item/tree-view-item.css | 0 .../src/lib/tree-view-item/tree-view-item.tsx | 21 ++++++++ libs/remix-ui/tree-view/src/types/index.ts | 4 ++ workspace.json | 2 +- 14 files changed, 154 insertions(+), 91 deletions(-) create mode 100644 libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx delete mode 100644 libs/remix-ui/debugger-ui/src/lib/debugger-ui.spec.tsx create mode 100644 libs/remix-ui/debugger-ui/src/types/index.ts delete mode 100644 libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx delete mode 100644 libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.spec.tsx create mode 100644 libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.css create mode 100644 libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx create mode 100644 libs/remix-ui/tree-view/src/types/index.ts diff --git a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js b/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js index dc3ce73c57..a8205a4158 100644 --- a/apps/remix-ide/src/app/tabs/debugger/debuggerUI.js +++ b/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}
${this.statusMessage}
${this.debuggerPanelsView} +
` 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( + + + Item 2} /> + + + + + + + + + + + + + + + + , document.getElementById('treeViewReact')) } } diff --git a/babel.config.js b/babel.config.js index bc65f8695f..41068f8f4f 100644 --- a/babel.config.js +++ b/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"] } \ No newline at end of file diff --git a/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx b/libs/remix-ui/debugger-ui/src/hooks/extract-data.tsx new file mode 100644 index 0000000000..06e653a801 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.spec.tsx b/libs/remix-ui/debugger-ui/src/lib/debugger-ui.spec.tsx deleted file mode 100644 index 48e63a8426..0000000000 --- a/libs/remix-ui/debugger-ui/src/lib/debugger-ui.spec.tsx +++ /dev/null @@ -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(); - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx b/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx index ec9a062994..66af8a6a92 100644 --- a/libs/remix-ui/debugger-ui/src/lib/vm-debugger/dropdown-panel.tsx +++ b/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 = () => { diff --git a/libs/remix-ui/debugger-ui/src/types/index.ts b/libs/remix-ui/debugger-ui/src/types/index.ts new file mode 100644 index 0000000000..331c2af838 --- /dev/null +++ b/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 +} \ No newline at end of file diff --git a/libs/remix-ui/tree-view/src/index.ts b/libs/remix-ui/tree-view/src/index.ts index 875d8ff6e2..639d70eff2 100644 --- a/libs/remix-ui/tree-view/src/index.ts +++ b/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'; diff --git a/libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx b/libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx deleted file mode 100644 index 8564ed6b2d..0000000000 --- a/libs/remix-ui/tree-view/src/lib/hooks/extract-data.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react' - -const useExtractData = () => { - -} \ No newline at end of file diff --git a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.spec.tsx b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.spec.tsx deleted file mode 100644 index fdeff48351..0000000000 --- a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.spec.tsx +++ /dev/null @@ -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(); - expect(baseElement).toBeTruthy(); - }); -}); diff --git a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx b/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx index c2a03f9bfb..2396e692ba 100644 --- a/libs/remix-ui/tree-view/src/lib/remix-ui-tree-view.tsx +++ b/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 { - data: [] -} - -export const RemixUiTreeView = (props: RemixUiTreeViewProps) => { +export const TreeView = (props: TreeViewProps) => { + const { children, key, ...otherProps } = props + return ( -
    -
  • -
    -
    -
    - -
    - - -
    -     -
    -
    • -
  • -
    -
    -
    - -
    - - -
    -     -
    -
    • -
) +
    + { children } +
+ ) } -export default RemixUiTreeView +export default TreeView diff --git a/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.css b/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx b/libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx new file mode 100644 index 0000000000..796a8c6a04 --- /dev/null +++ b/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 ( +
  • +
    setIsExpanded(!isExpanded)}> +
    + + { label } + +
    + { isExpanded ? children : null } +
    • + ); +}; + +export default TreeViewItem; diff --git a/libs/remix-ui/tree-view/src/types/index.ts b/libs/remix-ui/tree-view/src/types/index.ts new file mode 100644 index 0000000000..800d92d40d --- /dev/null +++ b/libs/remix-ui/tree-view/src/types/index.ts @@ -0,0 +1,4 @@ +export interface TreeViewProps { + children?: React.ReactNode, + key: string +} \ No newline at end of file diff --git a/workspace.json b/workspace.json index de8e810393..073950cfc8 100644 --- a/workspace.json +++ b/workspace.json @@ -469,7 +469,7 @@ "projectType": "library", "schematics": {}, "architect": { - "lint": { + "lint": { "builder": "@nrwl/linter:lint", "options": { "linter": "eslint",