130 lines
4.3 KiB
TypeScript
130 lines
4.3 KiB
TypeScript
import * as React from 'react'
|
|
import ChartPanel from '../ChartPanel'
|
|
import ReactSplitPaneImport from 'react-split-pane'
|
|
import Tree from '../Tree'
|
|
import { AppState } from '../../reducers'
|
|
import { ChartParameters } from '../../reducers/Charts'
|
|
import { connect } from 'react-redux'
|
|
import { List } from 'immutable'
|
|
import { Sidebar } from '../Sidebar'
|
|
import { useResizeDetector } from 'react-resize-detector'
|
|
|
|
// Type cast to any to work around React 18 compatibility issues with react-split-pane 0.1.x
|
|
const ReactSplitPane = ReactSplitPaneImport as any
|
|
|
|
interface Props {
|
|
heightProperty: any
|
|
paneDefaults: any
|
|
connectionId?: string
|
|
chartPanelItems: List<ChartParameters>
|
|
}
|
|
|
|
function ContentView(props: Props) {
|
|
const [height, setHeight] = React.useState<string | number>('100%')
|
|
const [sidebarWidth, setSidebarWidth] = React.useState<string | number>('40%')
|
|
const [detectedHeight, setDetectedHeight] = React.useState(0)
|
|
const [detectedSidebarWidth, setDetectedSidebarWidth] = React.useState(0)
|
|
|
|
const { height: resizeHeight, ref: heightRef } = useResizeDetector()
|
|
const { width: resizeWidth, ref: widthRef } = useResizeDetector()
|
|
|
|
React.useEffect(() => {
|
|
if (resizeHeight) setDetectedHeight(resizeHeight)
|
|
}, [resizeHeight])
|
|
|
|
React.useEffect(() => {
|
|
if (resizeWidth) setDetectedSidebarWidth(resizeWidth)
|
|
}, [resizeWidth])
|
|
|
|
const detectSize = React.useCallback((width: any, newHeight: any) => {
|
|
setDetectedHeight(newHeight)
|
|
}, [])
|
|
|
|
const detectSidebarSize = React.useCallback((width: any) => {
|
|
setDetectedSidebarWidth(width)
|
|
}, [])
|
|
|
|
const closeDrawerCompletelyIfItSitsOnTheEdge = React.useCallback(() => {
|
|
if (detectedHeight < 30) {
|
|
setHeight('100%')
|
|
}
|
|
}, [detectedHeight])
|
|
|
|
const closeSidebarCompletelyIfItSitsOnTheEdge = React.useCallback(() => {
|
|
if (detectedSidebarWidth < 30) {
|
|
setSidebarWidth('0%')
|
|
}
|
|
}, [detectedSidebarWidth])
|
|
|
|
// Open chart panel on start and when a new chart is added but the panel is closed
|
|
React.useEffect(() => {
|
|
const almostClosed = !isNaN(height as any) && detectedHeight < 30
|
|
if ((!height || height === '100%' || almostClosed) && props.chartPanelItems.count() > 0) {
|
|
setHeight('calc(100% - 250px)')
|
|
}
|
|
|
|
if (props.chartPanelItems.count() === 0) {
|
|
setHeight('100%')
|
|
}
|
|
}, [props.chartPanelItems])
|
|
|
|
return (
|
|
<div className={props.paneDefaults}>
|
|
<span>
|
|
<ReactSplitPane
|
|
step={20}
|
|
primary="second"
|
|
className={props.heightProperty}
|
|
split="vertical"
|
|
minSize={0}
|
|
size={sidebarWidth}
|
|
onChange={(size: number) => setSidebarWidth(size)}
|
|
onDragFinished={closeSidebarCompletelyIfItSitsOnTheEdge}
|
|
allowResize={true}
|
|
style={{ height: '100%' }}
|
|
pane1Style={{ overflowX: 'hidden' }}
|
|
resizerStyle={{ height: '100%' }}
|
|
>
|
|
<span>
|
|
<ReactSplitPane
|
|
step={10}
|
|
split="horizontal"
|
|
minSize={0}
|
|
size={height}
|
|
allowResize={true}
|
|
style={{ height: 'calc(100vh - 64px)' }}
|
|
pane1Style={{ maxHeight: '100%' }}
|
|
pane2Style={{ borderTop: '1px solid #999', display: 'flex' }}
|
|
onChange={(size: number) => setHeight(size)}
|
|
onDragFinished={closeDrawerCompletelyIfItSitsOnTheEdge}
|
|
>
|
|
<Tree />
|
|
{/** Passing height constraints via flex options down */}
|
|
<div ref={heightRef} style={{ flex: 1, display: 'flex', height: '100%', width: '100%' }}>
|
|
{/** Resize detector must not be in the scroll zone, it needs to detect actual available size */}
|
|
<ChartPanel />
|
|
</div>
|
|
</ReactSplitPane>
|
|
</span>
|
|
<div ref={widthRef} style={{ height: '100%' }}>
|
|
<div
|
|
className={props.paneDefaults}
|
|
style={{ minWidth: '250px', height: '100%', overflowY: 'auto', overflowX: 'hidden' }}
|
|
>
|
|
<Sidebar connectionId={props.connectionId} />
|
|
</div>
|
|
</div>
|
|
</ReactSplitPane>
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const mapStateToProps = (state: AppState) => {
|
|
return {
|
|
chartPanelItems: state.charts.get('charts'),
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps)(ContentView)
|