pull/1856/head
lianahus 3 years ago committed by yann300
parent 14636a7815
commit 5adf07072a
  1. 64
      libs/remix-ui/editor-context-view/src/lib/remix-ui-editor-context-view.tsx

@ -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

Loading…
Cancel
Save