import React , { Component } from 'react' ; import { withStyles } from '@material-ui/core/styles' ; import Tabs from '@material-ui/core/Tabs' ; import Tab from '@material-ui/core/Tab' ; import Tooltip from '@material-ui/core/Tooltip' ; import HtmlAttr from './HtmlAttr' ; import CodePreview from './CodePreview' ; import { ComponentInt , ComponentsInt , ChildInt } from '../utils/InterfaceDefinitions' ; import ComponentReduxSetup from './ComponentReduxSetup' ; interface PropsInt { focusChild : ChildInt ; components : ComponentsInt ; focusComponent : ComponentInt ; classes : any ; } const styles = ( theme ) : any => ( { root : { flexGrow : 1 , backgroundColor : '#333333' , height : '100%' , color : '#fff' , } , tabsRoot : { borderBottom : '0.5px solid #424242' , } , tabsIndicator : { backgroundColor : '#1de9b6' , } , tabRoot : { textTransform : 'initial' , minWidth : 72 , fontWeight : theme . typography . fontWeightRegular , marginRight : theme . spacing . unit * 4 , fontFamily : [ '-apple-system' , 'BlinkMacSystemFont' , '"Segoe UI"' , 'Roboto' , '"Helvetica Neue"' , 'Arial' , 'sans-serif' , '"Apple Color Emoji"' , '"Segoe UI Emoji"' , '"Segoe UI Symbol"' , ] . join ( ',' ) , '&:hover' : { color : '#1de9b6' , opacity : 1 , } , '&$tabSelected' : { color : '#33eb91' , fontWeight : theme . typography . fontWeightMedium , } , '&:focus' : { color : '#4aedc4' , } , } , tabSelected : { } , typography : { padding : theme . spacing . unit * 3 , } , padding : { padding : `0 ${ theme . spacing . unit * 2 }px` , } , } ) ; class BottomTabs extends Component < PropsInt > { state = { value : 0 , } ; handleChange = ( event , value ) => { this . setState ( { value } ) ; } ; generateComponentTree ( componentId , components ) { const component = components . find ( comp => comp . id === componentId ) ; const tree = { name : component . title , attributes : { } , children : [ ] } ; component . childrenArray . forEach ( ( child ) => { if ( child . childType === 'COMP' ) { tree . children . push ( this . generateComponentTree ( child . childComponentId , components ) ) ; } else { tree . children . push ( { name : child . componentName , attributes : { } , children : [ ] , } ) ; } } ) ; return tree ; } render ( ) { const { classes , components , focusComponent , focusChild , } = this . props ; const { value } = this . state ; const propCount = focusComponent . props . length ; const htmlAttribCount = focusComponent . childrenArray . filter ( child => child . childType === 'HTML' ) . length ; return ( < div className = { classes . root } > < Tabs value = { value } onChange = { this . handleChange } classes = { { root : classes . tabsRoot , indicator : classes . tabsIndicator } } > < Tab disableRipple classes = { { root : classes . tabRoot , selected : classes . tabSelected } } label = "code preview" / > < Tooltip title = "give selected component local state and/or connections to the redux store/actions" aria - label = "give selected component local state and/or connections to the redux store/actions" placement = "top" > < Tab disableRipple classes = { { root : classes . tabRoot , selected : classes . tabSelected } } label = { `local state & redux connections ${ propCount ? `(${ propCount })` : '' } ` } /> < /Tooltip> < Tooltip title = "edit attributes of currently selected HTML element" aria - label = "edit attributes of currently selected HTML element" placement = "top" > < Tab disableRipple classes = { { root : classes . tabRoot , selected : classes . tabSelected } } label = { 'edit HTML child attributes' } / > < /Tooltip> < /Tabs> < div id = "code-preview-outer" > { value === 0 && < CodePreview focusComponent = { focusComponent } components = { components } / > } { value === 1 && < ComponentReduxSetup focusComponent = { focusComponent } />} { value === 2 && focusChild . childType === 'HTML' && < HtmlAttr />} { value === 2 && focusChild . childType !== 'HTML' && ( < p > select an HTML element to view attributes < /p>)} < /div> < /div>); } } export default withStyles ( styles ) ( BottomTabs ) ;