import React , { useEffect , useState } from "react" ; import { Tree } from "@devtools-ds/tree" ; import { ResolvedASTNode , ASTNode } from "@devtools-ds/object-parser" ; import ObjectValue from "./ObjectValue" ; import ObjectLabel from "./ObjectLabel" ; interface ObjectInspectorItemProps { /** JSON ast to render in the tree. */ ast : ASTNode ; /** The current depth. */ depth : number ; /** Depth of the tree that is open at first render. */ expandLevel : number ; /** Callback when a particular node in the tree is actively selected */ onSelect ? : ( node ? : ASTNode | ResolvedASTNode ) => void ; } /** A simple component. */ export const ObjectInspectorItem = ( props ) => { const { ast , expandLevel , depth } = props ; const [ resolved , setResolved ] = useState < ResolvedASTNode | undefined > ( ) ; const [ open , setOpen ] = useState ( Boolean ( depth < expandLevel ) ) ; /** Handle async children */ useEffect ( ( ) => { /** Async function to resolve children */ const resolve = async ( ) => { if ( ast . type !== "value" ) { const promises = ast . children . map ( ( f ) => f ( ) ) ; const children = await Promise . all ( promises ) ; const r = { ... ast , children , } ; setResolved ( r ) ; } } ; resolve ( ) ; } , [ ast ] ) ; if ( resolved ) { return ( < Tree hover = { false } open = { open } label = { < ObjectLabel open = { open } ast = { resolved } / > } onSelect = { ( ) => { props . onSelect ?. ( ast ) ; } } onUpdate = { ( value ) => { setOpen ( value ) ; } } > { resolved . children . map ( ( child ) => { return ( < ObjectInspectorItem key = { child . key } ast = { child } depth = { depth + 1 } expandLevel = { expandLevel } onSelect = { props . onSelect } / > ) ; } ) } < /Tree>); } return ( < Tree hover = { false } label = { < ObjectValue ast = { ast } / > } onSelect = { ( ) => { props . onSelect ?. ( ast ) ; } } />); } ; ObjectInspectorItem . defaultProps = { expandLevel : 0 , depth : 0 , } ; export default ObjectInspectorItem ;