You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.5 KiB
JavaScript
89 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import SplitPane from 'react-split-pane';
|
|
import { connect } from 'react-redux';
|
|
import _ from 'lodash';
|
|
import SplitPaneFillOverlay from 'vj/components/react-splitpane/SplitPaneFillOverlayComponent';
|
|
import Dom from 'vj/components/react/DomComponent';
|
|
import ScratchpadToolbar from './ScratchpadToolbarContainer';
|
|
import ScratchpadEditor from './ScratchpadEditorContainer';
|
|
import ScratchpadPretest from './ScratchpadPretestContainer';
|
|
import ScratchpadRecords from './ScratchpadRecordsContainer';
|
|
|
|
function buildNestedPane([a, ...panes]) {
|
|
const elements = [
|
|
a,
|
|
...panes.filter((p) => p.props.visible),
|
|
];
|
|
if (elements.length === 1) {
|
|
return a;
|
|
}
|
|
return elements
|
|
.reduce((prev, curr) => (
|
|
<SplitPane
|
|
split="horizontal"
|
|
primary="second"
|
|
defaultSize={curr.props.size}
|
|
key={curr.element.key}
|
|
onChange={curr.onChange}
|
|
>
|
|
{prev}
|
|
{curr.element}
|
|
</SplitPane>
|
|
));
|
|
}
|
|
|
|
const mapStateToProps = (state) => ({
|
|
ui: state.ui,
|
|
});
|
|
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
changeUiSize: _.debounce((uiElement, size) => {
|
|
dispatch({
|
|
type: 'SCRATCHPAD_UI_CHANGE_SIZE',
|
|
payload: {
|
|
uiElement,
|
|
size,
|
|
},
|
|
});
|
|
}, 500),
|
|
});
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(class ScratchpadContainer extends React.PureComponent {
|
|
handleChangeSize(uiElement, size) {
|
|
this.props.changeUiSize(uiElement, size);
|
|
$('#scratchpad').trigger('vjScratchpadRelayout');
|
|
this.props.ui.pretest.visible = !!this.props.ui.pretest.visible;
|
|
this.forceUpdate();
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<SplitPane
|
|
defaultSize={this.props.ui.main.size}
|
|
minSize={250}
|
|
split="vertical"
|
|
primary="second"
|
|
onChange={(size) => this.handleChangeSize('main', size)}
|
|
>
|
|
<Dom className="scratchpad__problem" childDom={$('.problem-content').get(0)} />
|
|
{buildNestedPane([
|
|
<SplitPaneFillOverlay key="editor" className="flex-col">
|
|
<ScratchpadToolbar />
|
|
<ScratchpadEditor />
|
|
</SplitPaneFillOverlay>,
|
|
{
|
|
props: this.props.ui.pretest,
|
|
onChange: (size) => this.handleChangeSize('pretest', size),
|
|
element: <ScratchpadPretest key="pretest" />,
|
|
},
|
|
{
|
|
props: this.props.ui.records,
|
|
onChange: (size) => this.handleChangeSize('records', size),
|
|
element: <ScratchpadRecords key="records" />,
|
|
},
|
|
])}
|
|
</SplitPane>
|
|
);
|
|
}
|
|
});
|