import { css } from 'emotion' ; import * as React from 'react' ; import SplitPane from 'react-split-pane' ; import { useAppState , useActions } from '../../overmind' ; import { nameToColor } from '../../overmind/utils' ; import * as textStyles from '../../styles/text' ; import ActionsTools from '../ActionsTools' ; import Chart from '../Chart' ; import * as styles from './styles' ; const Charts = ( ) => { const state = useAppState ( ) ; const actions = useActions ( ) ; const chartKeys = Object . keys ( state . currentApp . charts ) ; return ( < div className = { styles . wrapper } > < ActionsTools /> { state . currentChart ? ( < div className = { styles . columns } > < SplitPane split = "vertical" minSize = { 100 } defaultSize = { state . chartsSplitSize } onChange = { ( size ) => actions . updateChartsSplitSize ( size ) } > < div className = { styles . listWrapper } > { chartKeys . map ( ( path ) => { return ( < div className = { css ( styles . chartItem , state . currentApp . currentChartId === path && styles . selected ) } key = { path } onClick = { ( ) => actions . selectChart ( path ) } > < span className = { styles . chartColor } style = { { backgroundColor : nameToColor ( path ) , } } /> < span className = { textStyles . denseNormal } > { path || '[ROOT]' } < /span> < /div>); } ) } < /div> < Chart chart = { state . currentChart } statePath = { [ ] } / > < /SplitPane> < /div>) : (<div className={styles.centerWrapper}> < span className = { textStyles . header } > no charts defined ... < /span> < /div>)} < /div>); } ; export default Charts ;