import * as React from 'react' ; import { AppMessage } from '../../overmind/types' ; import Inspector from '../Inspector' ; import * as styles from './styles' ; type Props = { message : AppMessage < any > ; delimiter : string ; } ; const ConsoleRow = ( { message , delimiter } ) => { const [ expandedPaths , setExpandedPaths ] = React . useState < string [ ] > ( [ ] ) ; function onToggleExpand ( pathArray ) { const expandedPathsCopy = expandedPaths . slice ( ) ; const path = pathArray . join ( '.' ) ; if ( expandedPathsCopy . includes ( path ) ) { expandedPathsCopy . splice ( expandedPathsCopy . indexOf ( path ) , 1 ) ; } else { expandedPathsCopy . push ( path ) ; } setExpandedPaths ( expandedPathsCopy ) ; } return ( < div className = { styles . wrapper } > < div className = { styles . type } > { message . type } < /div> < Inspector delimiter = { delimiter } value = { message . data } expandedPaths = { expandedPaths } onToggleExpand = { onToggleExpand } / > < /div>); } ; export default ConsoleRow ;