|
|
@ -1,11 +1,27 @@ |
|
|
|
import React, { useEffect, useState, useRef } from 'react' // eslint-disable-line
|
|
|
|
import React, { useEffect, useState, useRef } from 'react' // eslint-disable-line
|
|
|
|
import { sourceMappingDecoder } from '@remix-project/remix-debug' |
|
|
|
import { sourceMappingDecoder } from '@remix-project/remix-debug' |
|
|
|
|
|
|
|
|
|
|
|
import './remix-ui-editor-context-view.css'; |
|
|
|
import './remix-ui-editor-context-view.css' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* eslint-disable-next-line */ |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export type astNode = { |
|
|
|
|
|
|
|
name: string, |
|
|
|
|
|
|
|
id: number, |
|
|
|
|
|
|
|
children: Array<any>, |
|
|
|
|
|
|
|
typeDescriptions: any, |
|
|
|
|
|
|
|
nodeType: String, |
|
|
|
|
|
|
|
src: any, |
|
|
|
|
|
|
|
nodeId: any, |
|
|
|
|
|
|
|
position: any |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export type onContextListenerChangedListener = (nodes: Array<astNode>) => void |
|
|
|
export type onContextListenerChangedListener = (nodes: Array<astNode>) => void |
|
|
|
|
|
|
|
|
|
|
|
/* eslint-disable-next-line */ |
|
|
|
export type gasEstimationType = { |
|
|
|
|
|
|
|
executionCost: string, |
|
|
|
|
|
|
|
codeDepositCost: string |
|
|
|
|
|
|
|
} |
|
|
|
export interface RemixUiEditorContextViewProps { |
|
|
|
export interface RemixUiEditorContextViewProps { |
|
|
|
hide: boolean, |
|
|
|
hide: boolean, |
|
|
|
gotoLine: (line: number, column: number) => void, |
|
|
|
gotoLine: (line: number, column: number) => void, |
|
|
@ -29,39 +45,25 @@ function isDefinition (node: any) { |
|
|
|
node.nodeType === 'EventDefinition' |
|
|
|
node.nodeType === 'EventDefinition' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export type gasEstimationType = { |
|
|
|
|
|
|
|
executionCost: string, |
|
|
|
|
|
|
|
codeDepositCost: string |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export type astNode = { |
|
|
|
|
|
|
|
name: string, |
|
|
|
|
|
|
|
id: number, |
|
|
|
|
|
|
|
children: Array<any>, |
|
|
|
|
|
|
|
typeDescriptions: any, |
|
|
|
|
|
|
|
nodeType: String, |
|
|
|
|
|
|
|
src: any, |
|
|
|
|
|
|
|
nodeId: any, |
|
|
|
|
|
|
|
position: any |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
type nullableAstNode = astNode | null |
|
|
|
type nullableAstNode = astNode | null |
|
|
|
|
|
|
|
|
|
|
|
export function RemixUiEditorContextView(props: RemixUiEditorContextViewProps) { |
|
|
|
export function RemixUiEditorContextView (props: RemixUiEditorContextViewProps) { |
|
|
|
const nodesRef = useRef<Array<astNode>>([]) |
|
|
|
const nodesRef = useRef<Array<astNode>>([]) |
|
|
|
/* |
|
|
|
/* |
|
|
|
gotoLineDisableRef is used to temporarily disable the update of the view.
|
|
|
|
gotoLineDisableRef is used to temporarily disable the update of the view. |
|
|
|
e.g when the user ask the component to "gotoLine" we don't want to rerender the component (but just to put the mouse on the desired line) |
|
|
|
e.g when the user ask the component to "gotoLine" we don't want to rerender the component (but just to put the mouse on the desired line) |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
const referencesRef = useRef([]) |
|
|
|
const referencesRef = useRef([]) |
|
|
|
const activeHighlightsRef = useRef([]) |
|
|
|
const activeHighlightsRef = useRef([]) |
|
|
|
const currentNodeRef = useRef(null as nullableAstNode) |
|
|
|
const currentNodeRef = useRef(null as nullableAstNode) |
|
|
|
const gasEstimationRef = useRef({} as gasEstimationType) |
|
|
|
const gasEstimationRef = useRef({} as gasEstimationType) |
|
|
|
const gotoLineDisableRef = useRef(false)
|
|
|
|
const gotoLineDisableRef = useRef(false) |
|
|
|
const [nodesState, setNode] = useState<Array<astNode>>([]) |
|
|
|
const [, setNode] = useState<Array<astNode>>([]) |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
props.onContextListenerChanged(async (nodes: Array<astNode>) => {
|
|
|
|
props.onContextListenerChanged(async (nodes: Array<astNode>) => { |
|
|
|
if (gotoLineDisableRef.current) { |
|
|
|
if (gotoLineDisableRef.current) { |
|
|
|
gotoLineDisableRef.current = false |
|
|
|
gotoLineDisableRef.current = false |
|
|
|
return |
|
|
|
return |
|
|
@ -75,23 +77,23 @@ export function RemixUiEditorContextView(props: RemixUiEditorContextViewProps) { |
|
|
|
} |
|
|
|
} |
|
|
|
if (currentNodeRef.current) { |
|
|
|
if (currentNodeRef.current) { |
|
|
|
referencesRef.current = await props.referencesOf(currentNodeRef.current) |
|
|
|
referencesRef.current = await props.referencesOf(currentNodeRef.current) |
|
|
|
gasEstimationRef.current = await props.gasEstimation(currentNodeRef.current)
|
|
|
|
gasEstimationRef.current = await props.gasEstimation(currentNodeRef.current) |
|
|
|
} |
|
|
|
} |
|
|
|
activeHighlightsRef.current = await props.getActiveHighlights()
|
|
|
|
activeHighlightsRef.current = await props.getActiveHighlights() |
|
|
|
setNode(nodes) |
|
|
|
setNode(nodes) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, []) |
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
|
|
const _render = (node: nullableAstNode) => { |
|
|
|
const _render = (node: nullableAstNode) => { |
|
|
|
if (!node) return (<div></div>) |
|
|
|
if (!node) return (<div></div>) |
|
|
|
let references = referencesRef.current |
|
|
|
const references = referencesRef.current |
|
|
|
const type = node.typeDescriptions && node.typeDescriptions.typeString ? node.typeDescriptions.typeString : node.nodeType |
|
|
|
const type = node.typeDescriptions && node.typeDescriptions.typeString ? node.typeDescriptions.typeString : node.nodeType |
|
|
|
let referencesCount = `${references ? references.length : '0'} reference(s)` |
|
|
|
const referencesCount = `${references ? references.length : '0'} reference(s)` |
|
|
|
|
|
|
|
|
|
|
|
let ref = 0 |
|
|
|
let ref = 0 |
|
|
|
const nodes: Array<astNode> = activeHighlightsRef.current |
|
|
|
const nodes: Array<astNode> = activeHighlightsRef.current |
|
|
|
|
|
|
|
|
|
|
|
/* |
|
|
|
/* |
|
|
|
* show gas estimation |
|
|
|
* show gas estimation |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
const gasEstimation = () => { |
|
|
|
const gasEstimation = () => { |
|
|
@ -120,7 +122,7 @@ export function RemixUiEditorContextView(props: RemixUiEditorContextViewProps) { |
|
|
|
await props.openFile(fileName) |
|
|
|
await props.openFile(fileName) |
|
|
|
} |
|
|
|
} |
|
|
|
if (lineColumn.start && lineColumn.start.line && lineColumn.start.column) { |
|
|
|
if (lineColumn.start && lineColumn.start.line && lineColumn.start.column) { |
|
|
|
gotoLineDisableRef.current = true
|
|
|
|
gotoLineDisableRef.current = true |
|
|
|
props.gotoLine(lineColumn.start.line, lineColumn.end.column + 1) |
|
|
|
props.gotoLine(lineColumn.start.line, lineColumn.end.column + 1) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
@ -164,13 +166,13 @@ export function RemixUiEditorContextView(props: RemixUiEditorContextViewProps) { |
|
|
|
<i data-action='next' className="fas fa-chevron-down jump" aria-hidden="true" onClick={jump}></i> |
|
|
|
<i data-action='next' className="fas fa-chevron-down jump" aria-hidden="true" onClick={jump}></i> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) |
|
|
|
) |
|
|
|
}
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
!props.hide && <div className="container-context-view contextviewcontainer bg-light text-dark border-0 py-1"> |
|
|
|
!props.hide && <div className="container-context-view contextviewcontainer bg-light text-dark border-0 py-1"> |
|
|
|
{_render(currentNodeRef.current)} |
|
|
|
{_render(currentNodeRef.current)} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
); |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
export default RemixUiEditorContextView |
|
|
|
export default RemixUiEditorContextView |
|
|
|