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) => (
{prev}
{curr.element}
));
}
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 (
this.handleChangeSize('main', size)}
>
{buildNestedPane([
,
{
props: this.props.ui.pretest,
onChange: (size) => this.handleChangeSize('pretest', size),
element: ,
},
{
props: this.props.ui.records,
onChange: (size) => this.handleChangeSize('records', size),
element: ,
},
])}
);
}
});