126 lines
3.8 KiB
TypeScript
126 lines
3.8 KiB
TypeScript
import * as React from 'react'
|
|
import * as q from '../../backend/src/Model'
|
|
|
|
import { Theme, withStyles } from '@material-ui/core/styles'
|
|
|
|
import { AppState } from './reducers'
|
|
import Connection from './components/ConnectionSetup/Connection'
|
|
import CssBaseline from '@material-ui/core/CssBaseline'
|
|
const Settings = React.lazy(() => import('./components/Settings'))
|
|
import Sidebar from './components/Sidebar/Sidebar'
|
|
import TitleBar from './components/TitleBar'
|
|
import Tree from './components/Tree/Tree'
|
|
import UpdateNotifier from './UpdateNotifier'
|
|
import { connect } from 'react-redux'
|
|
import ErrorBoundary from './ErrorBoundary'
|
|
import { default as SplitPane } from 'react-split-pane'
|
|
|
|
interface Props {
|
|
name: string
|
|
connectionId: string
|
|
classes: any
|
|
settingsVisible: boolean
|
|
}
|
|
|
|
class App extends React.PureComponent<Props, {}> {
|
|
constructor(props: any) {
|
|
super(props)
|
|
this.state = { }
|
|
}
|
|
|
|
public render() {
|
|
const { settingsVisible } = this.props
|
|
const { content, contentShift, centerContent, paneDefaults, heightProperty } = this.props.classes
|
|
|
|
return (
|
|
<div className={centerContent}>
|
|
<CssBaseline />
|
|
<ErrorBoundary>
|
|
<React.Suspense fallback={<div>Loading...</div>}>
|
|
<Settings />
|
|
</React.Suspense>
|
|
<div className={centerContent}>
|
|
<div className={`${settingsVisible ? contentShift : content}`}>
|
|
<TitleBar />
|
|
</div>
|
|
<div>
|
|
<SplitPane
|
|
step={20}
|
|
primary="second"
|
|
className={`${settingsVisible ? contentShift : content} ${heightProperty}`}
|
|
split="vertical"
|
|
minSize={250}
|
|
defaultSize={500}
|
|
resizerStyle={{ width: '2px', margin: '0 -10px 0 0px' }}
|
|
allowResize={true}
|
|
style={{ position: 'relative' }}
|
|
pane1Style={{ overflow: 'hidden' }}
|
|
>
|
|
<div className={paneDefaults}>
|
|
<Tree />
|
|
</div>
|
|
<div className={paneDefaults}>
|
|
<Sidebar connectionId={this.props.connectionId} />
|
|
</div>
|
|
</SplitPane>
|
|
</div>
|
|
</div>
|
|
<UpdateNotifier />
|
|
<Connection />
|
|
</ErrorBoundary>
|
|
</div >
|
|
)
|
|
}
|
|
}
|
|
|
|
const mapStateToProps = (state: AppState) => {
|
|
return {
|
|
settingsVisible: state.settings.visible,
|
|
connectionId: state.connection.connectionId,
|
|
}
|
|
}
|
|
|
|
const styles = (theme: Theme) => {
|
|
const drawerWidth = 300
|
|
return {
|
|
heightProperty: {
|
|
height: 'calc(100vh - 64px) !important',
|
|
},
|
|
paneDefaults: {
|
|
backgroundColor: theme.palette.background.default,
|
|
color: theme.palette.text.primary,
|
|
overflowY: 'scroll' as 'scroll',
|
|
overflowX: 'hidden' as 'hidden',
|
|
display: 'block' as 'block',
|
|
height: 'calc(100vh - 64px)',
|
|
},
|
|
centerContent: {
|
|
width: '100vw',
|
|
overflow: 'hidden' as 'hidden',
|
|
},
|
|
content: {
|
|
width: '100vw',
|
|
overflowX: 'hidden' as 'hidden',
|
|
backgroundColor: theme.palette.background.default,
|
|
transition: theme.transitions.create('transform', {
|
|
easing: theme.transitions.easing.sharp,
|
|
duration: theme.transitions.duration.leavingScreen,
|
|
}),
|
|
transform: 'translateX(0px)',
|
|
},
|
|
contentShift: {
|
|
overflowX: 'hidden' as 'hidden',
|
|
width: '100vw',
|
|
padding: 0,
|
|
backgroundColor: theme.palette.background.default,
|
|
transition: theme.transitions.create('transform', {
|
|
easing: theme.transitions.easing.easeOut,
|
|
duration: theme.transitions.duration.enteringScreen,
|
|
}),
|
|
transform: `translateX(${drawerWidth}px)`,
|
|
},
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles)(connect(mapStateToProps)(App))
|