1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
/** @jsx React.DOM */
//React utils. For other utilities, see ../utils.js
var Splitter = React.createClass({
getDefaultProps: function () {
return {
axis: "x"
}
},
getInitialState: function(){
return {
applied: false,
startX: false,
startY: false
};
},
onMouseDown: function(e){
this.setState({
startX: e.pageX,
startY: e.pageY
});
window.addEventListener("mousemove",this.onMouseMove);
window.addEventListener("mouseup",this.onMouseUp);
},
onMouseUp: function(e){
window.removeEventListener("mouseup",this.onMouseUp);
window.removeEventListener("mousemove",this.onMouseMove);
var node = this.getDOMNode();
var prev = node.previousElementSibling;
var next = node.nextElementSibling;
this.getDOMNode().style.transform="";
var dX = e.pageX-this.state.startX;
var dY = e.pageY-this.state.startY;
var flexBasis;
if(this.props.axis === "x"){
flexBasis = prev.offsetWidth + dX;
} else {
flexBasis = prev.offsetHeight + dY;
}
prev.style.flex = "0 0 "+Math.max(0, flexBasis)+"px";
next.style.flex = "1 1 auto";
this.setState({
applied: true
});
},
onMouseMove: function(e){
var dX = 0, dY = 0;
if(this.props.axis === "x"){
dX = e.pageX-this.state.startX;
} else {
dY = e.pageY-this.state.startY;
}
this.getDOMNode().style.transform = "translate("+dX+"px,"+dY+"px)";
},
reset: function(){
if(!this.state.applied){
return;
}
var node = this.getDOMNode();
var prev = node.previousElementSibling;
var next = node.nextElementSibling;
prev.style.flex = "";
next.style.flex = "";
},
render: function(){
var className = "splitter";
if(this.props.axis === "x"){
className += " splitter-x";
} else {
className += " splitter-y";
}
return <div className={className} onMouseDown={this.onMouseDown}></div>;
}
});
|
