74 lines
2.0 KiB
JavaScript
74 lines
2.0 KiB
JavaScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
|
|
export default class XPane extends React.Component {
|
|
|
|
render() {
|
|
let { getComponent, specSelectors, specActions, layoutSelectors, layoutActions } = this.props
|
|
let info = specSelectors.info()
|
|
let url = specSelectors.url()
|
|
let showEditor = layoutSelectors.isShown("editor")
|
|
|
|
let Info = getComponent("info")
|
|
let Operations = getComponent("operations", true)
|
|
let Overview = getComponent("overview", true)
|
|
let Editor = getComponent("editor", true)
|
|
let Footer = getComponent("footer", true)
|
|
let Header = getComponent("header", true)
|
|
|
|
let Container = getComponent("Container")
|
|
let Row = getComponent("Row")
|
|
let Col = getComponent("Col")
|
|
let Button = getComponent("Button")
|
|
|
|
let showEditorAction = ()=> layoutActions.show("editor", !showEditor)
|
|
|
|
return (
|
|
<Container fullscreen>
|
|
|
|
<Header/>
|
|
|
|
{
|
|
info && info.size ? <Info version={info.get("version")}
|
|
description={info.get("description")}
|
|
title={info.get("title")}
|
|
url={url}/>
|
|
: null
|
|
}
|
|
<Button onClick={showEditorAction}>{showEditor ? "Hide" : "Show"} Editor</Button>
|
|
<Button onClick={specActions.formatIntoYaml}>Format contents</Button>
|
|
|
|
<Row>
|
|
|
|
<Col desktop={3} >
|
|
<Overview/>
|
|
</Col>
|
|
|
|
<Col hide={!showEditor} keepContents={true} desktop={5} >
|
|
<Editor/>
|
|
</Col>
|
|
|
|
<Col desktop={showEditor ? 4 : 9} >
|
|
<Operations/>
|
|
</Col>
|
|
|
|
</Row>
|
|
|
|
<Footer></Footer>
|
|
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
}
|
|
|
|
XPane.propTypes = {
|
|
getComponent: PropTypes.func.isRequired,
|
|
specSelectors: PropTypes.object.isRequired,
|
|
specActions: PropTypes.object.isRequired,
|
|
layoutSelectors: PropTypes.object.isRequired,
|
|
layoutActions: PropTypes.object.isRequired
|
|
}
|
|
|
|
|