90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
import * as React from 'react'
|
|
import ChartPanel from '../ChartPanel'
|
|
import ReactSplitPane from 'react-split-pane'
|
|
import Tree from '../Tree/Tree'
|
|
import { AppState } from '../../reducers'
|
|
import { ChartParameters } from '../../reducers/Charts'
|
|
import { connect } from 'react-redux'
|
|
import { List } from 'immutable'
|
|
import { Sidebar } from '../Sidebar'
|
|
import ReactResizeDetector from 'react-resize-detector'
|
|
|
|
interface Props {
|
|
heightProperty: any
|
|
paneDefaults: any
|
|
connectionId?: string
|
|
chartPanelItems: List<ChartParameters>
|
|
}
|
|
|
|
function ContentView(props: Props) {
|
|
const [height, setHeight] = React.useState<string | number>('100%')
|
|
const [detectedHeight, setDetectedHeight] = React.useState(0)
|
|
const [chatPanelItemCount, setChartPanelItemCount] = React.useState(props.chartPanelItems.count())
|
|
const detectSize = React.useCallback((width, height) => {
|
|
console.log(width, height)
|
|
setDetectedHeight(height)
|
|
}, [])
|
|
|
|
// Open chart panel on start and when a new chart is added but the panel is closed
|
|
React.useEffect(() => {
|
|
const almostAtFullHeight = !isNaN(height as any) && Math.abs(detectedHeight - (height as number)) < 20
|
|
if ((!height || height === '100%' || almostAtFullHeight) && props.chartPanelItems.count() > 0) {
|
|
setHeight('calc(100% - 250px)')
|
|
}
|
|
|
|
if (props.chartPanelItems.count() === 0) {
|
|
setHeight('100%')
|
|
}
|
|
|
|
setChartPanelItemCount(props.chartPanelItems.count())
|
|
}, [props.chartPanelItems])
|
|
|
|
return (
|
|
<div className={props.paneDefaults}>
|
|
<ReactSplitPane
|
|
step={10}
|
|
split="horizontal"
|
|
minSize={0}
|
|
size={height}
|
|
defaultSize={'100%'}
|
|
allowResize={true}
|
|
style={{ height: 'calc(100vh - 64px)' }}
|
|
pane1Style={{ maxHeight: '100%' }}
|
|
pane2Style={{ maxWidth: '100%', overflow: 'hidden auto' }}
|
|
onChange={setHeight}
|
|
>
|
|
<span>
|
|
<ReactResizeDetector handleHeight={true} onResize={detectSize} />
|
|
|
|
<ReactSplitPane
|
|
step={20}
|
|
primary="second"
|
|
className={props.heightProperty}
|
|
split="vertical"
|
|
minSize={250}
|
|
defaultSize={500}
|
|
allowResize={true}
|
|
style={{ height: '100%' }}
|
|
pane1Style={{ overflowX: 'hidden' }}
|
|
resizerStyle={{ height: '100%' }}
|
|
>
|
|
<Tree />
|
|
<div className={props.paneDefaults} style={{ height: '100%', overflowY: 'auto', overflowX: 'hidden' }}>
|
|
<Sidebar connectionId={props.connectionId} />
|
|
</div>
|
|
</ReactSplitPane>
|
|
</span>
|
|
<ChartPanel />
|
|
</ReactSplitPane>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const mapStateToProps = (state: AppState) => {
|
|
return {
|
|
chartPanelItems: state.charts.get('charts'),
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps)(ContentView)
|