70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import * as React from 'react'
|
|
import * as q from '../../backend/src/Model'
|
|
|
|
import { Tree } from './components/Tree'
|
|
import TitleBar from './components/TitleBar'
|
|
import Sidebar from './components/Sidebar/Sidebar'
|
|
|
|
import { withTheme, Theme } from '@material-ui/core/styles'
|
|
|
|
class State {
|
|
public selectedNode?: q.TreeNode | undefined
|
|
}
|
|
|
|
interface Props {
|
|
name: string
|
|
theme: Theme
|
|
}
|
|
|
|
class App extends React.Component<Props, State> {
|
|
constructor(props: any) {
|
|
super(props)
|
|
this.state = {
|
|
selectedNode: undefined,
|
|
}
|
|
}
|
|
|
|
private getStyles(): {[s: string]: React.CSSProperties} {
|
|
const { theme } = this.props
|
|
return {
|
|
left: {
|
|
backgroundColor: theme.palette.background.default,
|
|
color: theme.palette.text.primary,
|
|
height: 'calc(100vh - 64px)',
|
|
float: 'left',
|
|
width: '60vw',
|
|
overflowY: 'scroll',
|
|
overflowX: 'hidden',
|
|
display: 'block',
|
|
},
|
|
right: {
|
|
height: 'calc(100vh - 64px)',
|
|
backgroundColor: theme.palette.background.default,
|
|
color: theme.palette.text.primary,
|
|
float: 'right', width: '40vw',
|
|
overflowY: 'scroll',
|
|
overflowX: 'hidden',
|
|
display: 'block',
|
|
},
|
|
}
|
|
}
|
|
|
|
public render() {
|
|
return <div>
|
|
<TitleBar />
|
|
<div>
|
|
<div style={this.getStyles().left}>
|
|
<Tree didSelectNode={(node: q.TreeNode) => {
|
|
this.setState({ selectedNode: node })
|
|
}} />
|
|
</div>
|
|
<div style={this.getStyles().right}>
|
|
<Sidebar node={this.state.selectedNode} />
|
|
</div>
|
|
</div>
|
|
</div >
|
|
}
|
|
}
|
|
|
|
export default withTheme()(App)
|