67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
import * as React from "react";
|
|
import * as q from '../../../backend/src/Model'
|
|
import Drawer from '@material-ui/core/Drawer';
|
|
import TextField from '@material-ui/core/TextField';
|
|
import Paper from '@material-ui/core/Paper';
|
|
import { ValueRenderer } from './ValueRenderer'
|
|
|
|
interface Props {
|
|
node?: q.TreeNode | undefined
|
|
}
|
|
|
|
interface State {
|
|
node?: q.TreeNode | undefined
|
|
}
|
|
|
|
export class Sidebar extends React.Component<Props, State> {
|
|
private updateNode: (node?: q.TreeNode | undefined) => void
|
|
constructor(props: any) {
|
|
super(props);
|
|
this.state = {}
|
|
this.updateNode = (node) => {
|
|
if (!node) {
|
|
this.setState(this.state)
|
|
} else {
|
|
this.setState({node: node})
|
|
}
|
|
}
|
|
}
|
|
|
|
public componentWillReceiveProps(nextProps: Props) {
|
|
this.props.node && this.props.node.removeListener('update', this.updateNode)
|
|
nextProps.node && nextProps.node.on('update', this.updateNode)
|
|
nextProps.node && this.updateNode(nextProps.node)
|
|
}
|
|
|
|
private open() {
|
|
return this.props.node !== undefined
|
|
}
|
|
|
|
public render() {
|
|
return <Drawer open={this.open()} variant="permanent" anchor="right">
|
|
{this.renderNode()}
|
|
</Drawer>
|
|
}
|
|
|
|
private renderNode() {
|
|
let style: React.CSSProperties = {display: 'block', width: '40vw'}
|
|
let topicStyle: React.CSSProperties = {width: '100%'}
|
|
|
|
if (!this.state.node) {
|
|
return null
|
|
}
|
|
|
|
return <div style={style}>
|
|
<TextField style={topicStyle}
|
|
label="Topic"
|
|
value={this.state.node.path()}
|
|
margin="normal"
|
|
variant="outlined"
|
|
/>
|
|
<Paper>
|
|
<ValueRenderer node={this.state.node} />
|
|
</Paper>
|
|
</div>
|
|
}
|
|
}
|