86 lines
2.1 KiB
JavaScript
86 lines
2.1 KiB
JavaScript
import React from "react"
|
|
import PropTypes from "prop-types"
|
|
import SplitPane from "react-split-pane"
|
|
|
|
const MODE_KEY = ["split-pane-mode"]
|
|
const MODE_LEFT = "left"
|
|
const MODE_RIGHT = "right"
|
|
const MODE_BOTH = "both" // or anything other than left/right
|
|
|
|
export default class SplitPaneMode extends React.Component {
|
|
|
|
static propTypes = {
|
|
threshold: PropTypes.number,
|
|
|
|
children: PropTypes.array,
|
|
|
|
layoutSelectors: PropTypes.object.isRequired,
|
|
layoutActions: PropTypes.object.isRequired,
|
|
};
|
|
|
|
static defaultProps = {
|
|
threshold: 100, // in pixels
|
|
children: [],
|
|
};
|
|
|
|
initializeComponent = (c) => {
|
|
this.splitPane = c
|
|
}
|
|
|
|
onDragFinished = () => {
|
|
let { threshold, layoutActions } = this.props
|
|
let { position, draggedSize } = this.splitPane.state
|
|
this.draggedSize = draggedSize
|
|
|
|
let nearLeftEdge = position <= threshold
|
|
let nearRightEdge = draggedSize <= threshold
|
|
|
|
layoutActions
|
|
.changeMode(MODE_KEY, (
|
|
nearLeftEdge
|
|
? MODE_RIGHT : nearRightEdge
|
|
? MODE_LEFT : MODE_BOTH
|
|
))
|
|
}
|
|
|
|
sizeFromMode = (mode, defaultSize) => {
|
|
if(mode === MODE_LEFT) {
|
|
this.draggedSize = null
|
|
return "0px"
|
|
} else if (mode === MODE_RIGHT) {
|
|
this.draggedSize = null
|
|
return "100%"
|
|
}
|
|
// mode === "both"
|
|
return this.draggedSize || defaultSize
|
|
}
|
|
|
|
render() {
|
|
let { children, layoutSelectors } = this.props
|
|
|
|
const mode = layoutSelectors.whatMode(MODE_KEY)
|
|
const left = mode === MODE_RIGHT ? <noscript/> : children[0]
|
|
const right = mode === MODE_LEFT ? <noscript/> : children[1]
|
|
const size = this.sizeFromMode(mode, "50%")
|
|
|
|
return (
|
|
<SplitPane
|
|
disabledClass={""}
|
|
ref={this.initializeComponent}
|
|
split='vertical'
|
|
defaultSize={"50%"}
|
|
primary="second"
|
|
minSize={0}
|
|
size={size}
|
|
onDragFinished={this.onDragFinished}
|
|
allowResize={mode !== MODE_LEFT && mode !== MODE_RIGHT }
|
|
resizerStyle={{"flex": "0 0 auto", "position": "relative"}}
|
|
>
|
|
{ left }
|
|
{ right }
|
|
</SplitPane>
|
|
)
|
|
}
|
|
|
|
}
|