ioedeveloper
4 years ago
parent
f0ffb69625
commit
16057f1f6f
@ -1,4 +1,4 @@ |
||||
module.exports = { |
||||
"presets": ["@babel/preset-react"], |
||||
"presets": ["@babel/preset-react", "@babel/preset-typescript"], |
||||
"plugins": ["@babel/plugin-transform-modules-commonjs"] |
||||
} |
||||
@ -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 |
||||
@ -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(); |
||||
}); |
||||
}); |
||||
@ -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 |
||||
} |
||||
@ -1 +1,2 @@ |
||||
export * from './lib/tree-view-item/tree-view-item'; |
||||
export * from './lib/remix-ui-tree-view'; |
||||
|
||||
@ -1,5 +0,0 @@ |
||||
import React from 'react' |
||||
|
||||
const useExtractData = () => { |
||||
|
||||
} |
||||
@ -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(); |
||||
}); |
||||
}); |
||||
@ -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 ( |
||||
<ul key="" data-id="treeViewUl" className="ul_tv ml-0 px-2"> |
||||
<li key="vm trace step" data-id="treeViewLivm trace step" className="li_tv"> |
||||
<div key="vm trace step" data-id="treeViewDivvm trace step" className="d-flex flex-row align-items-center"> |
||||
<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>) |
||||
<ul data-id={`treeViewUl${key}`} className="ul_tv ml-0 px-2" { ...otherProps }> |
||||
{ children } |
||||
</ul> |
||||
) |
||||
} |
||||
|
||||
export default RemixUiTreeView |
||||
export default TreeView |
||||
|
||||
@ -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; |
||||
@ -0,0 +1,4 @@ |
||||
export interface TreeViewProps { |
||||
children?: React.ReactNode, |
||||
key: string |
||||
} |
||||
Loading…
Reference in new issue