react-split-pane 0.1.75 → 0.1.82
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +809 -0
- package/dist/index.esm.js +805 -0
- package/index.d.ts +1 -1
- package/package.json +57 -31
- package/.editorconfig +0 -6
- package/.idea/jsLibraryMappings.xml +0 -6
- package/.idea/misc.xml +0 -7
- package/.idea/modules.xml +0 -8
- package/.idea/react-split-pane.iml +0 -9
- package/.idea/shelf/Get_Resizer_dimensions/shelved.patch +0 -206
- package/.idea/shelf/Get_Resizer_dimensions.xml +0 -4
- package/.idea/vcs.xml +0 -6
- package/.idea/workspace.xml +0 -1449
- package/.npmignore +0 -4
- package/.travis.yml +0 -10
- package/index.js +0 -3
- package/lib/Pane.js +0 -104
- package/lib/Resizer.js +0 -115
- package/lib/SplitPane.js +0 -417
- package/tsconfig.json +0 -11
- package/yarn.lock +0 -3983
package/.npmignore
DELETED
package/.travis.yml
DELETED
package/index.js
DELETED
package/lib/Pane.js
DELETED
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
8
|
-
|
|
9
|
-
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
10
|
-
|
|
11
|
-
var _react = require('react');
|
|
12
|
-
|
|
13
|
-
var _react2 = _interopRequireDefault(_react);
|
|
14
|
-
|
|
15
|
-
var _propTypes = require('prop-types');
|
|
16
|
-
|
|
17
|
-
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
18
|
-
|
|
19
|
-
var _inlineStylePrefixer = require('inline-style-prefixer');
|
|
20
|
-
|
|
21
|
-
var _inlineStylePrefixer2 = _interopRequireDefault(_inlineStylePrefixer);
|
|
22
|
-
|
|
23
|
-
var _reactStyleProptype = require('react-style-proptype');
|
|
24
|
-
|
|
25
|
-
var _reactStyleProptype2 = _interopRequireDefault(_reactStyleProptype);
|
|
26
|
-
|
|
27
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
28
|
-
|
|
29
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
30
|
-
|
|
31
|
-
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
|
32
|
-
|
|
33
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
34
|
-
|
|
35
|
-
var DEFAULT_USER_AGENT = 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.2 (KHTML, like Gecko) Safari/537.2';
|
|
36
|
-
var USER_AGENT = typeof navigator !== 'undefined' ? navigator.userAgent : DEFAULT_USER_AGENT;
|
|
37
|
-
|
|
38
|
-
var Pane = function (_React$Component) {
|
|
39
|
-
_inherits(Pane, _React$Component);
|
|
40
|
-
|
|
41
|
-
function Pane(props) {
|
|
42
|
-
_classCallCheck(this, Pane);
|
|
43
|
-
|
|
44
|
-
var _this = _possibleConstructorReturn(this, (Pane.__proto__ || Object.getPrototypeOf(Pane)).call(this, props));
|
|
45
|
-
|
|
46
|
-
_this.state = { size: _this.props.size };
|
|
47
|
-
return _this;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
_createClass(Pane, [{
|
|
51
|
-
key: 'render',
|
|
52
|
-
value: function render() {
|
|
53
|
-
var _props = this.props,
|
|
54
|
-
children = _props.children,
|
|
55
|
-
className = _props.className,
|
|
56
|
-
prefixer = _props.prefixer,
|
|
57
|
-
split = _props.split,
|
|
58
|
-
styleProps = _props.style;
|
|
59
|
-
var size = this.state.size;
|
|
60
|
-
|
|
61
|
-
var classes = ['Pane', split, className];
|
|
62
|
-
|
|
63
|
-
var style = _extends({}, styleProps || {}, {
|
|
64
|
-
flex: 1,
|
|
65
|
-
position: 'relative',
|
|
66
|
-
outline: 'none'
|
|
67
|
-
});
|
|
68
|
-
|
|
69
|
-
if (size !== undefined) {
|
|
70
|
-
if (split === 'vertical') {
|
|
71
|
-
style.width = size;
|
|
72
|
-
} else {
|
|
73
|
-
style.height = size;
|
|
74
|
-
style.display = 'flex';
|
|
75
|
-
}
|
|
76
|
-
style.flex = 'none';
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
return _react2.default.createElement(
|
|
80
|
-
'div',
|
|
81
|
-
{ className: classes.join(' '), style: prefixer.prefix(style) },
|
|
82
|
-
children
|
|
83
|
-
);
|
|
84
|
-
}
|
|
85
|
-
}]);
|
|
86
|
-
|
|
87
|
-
return Pane;
|
|
88
|
-
}(_react2.default.Component);
|
|
89
|
-
|
|
90
|
-
Pane.propTypes = {
|
|
91
|
-
className: _propTypes2.default.string.isRequired,
|
|
92
|
-
children: _propTypes2.default.node.isRequired,
|
|
93
|
-
prefixer: _propTypes2.default.instanceOf(_inlineStylePrefixer2.default).isRequired,
|
|
94
|
-
size: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
|
|
95
|
-
split: _propTypes2.default.oneOf(['vertical', 'horizontal']),
|
|
96
|
-
style: _reactStyleProptype2.default
|
|
97
|
-
};
|
|
98
|
-
|
|
99
|
-
Pane.defaultProps = {
|
|
100
|
-
prefixer: new _inlineStylePrefixer2.default({ userAgent: USER_AGENT })
|
|
101
|
-
};
|
|
102
|
-
|
|
103
|
-
exports.default = Pane;
|
|
104
|
-
module.exports = exports['default'];
|
package/lib/Resizer.js
DELETED
|
@@ -1,115 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.RESIZER_DEFAULT_CLASSNAME = undefined;
|
|
7
|
-
|
|
8
|
-
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
9
|
-
|
|
10
|
-
var _react = require('react');
|
|
11
|
-
|
|
12
|
-
var _react2 = _interopRequireDefault(_react);
|
|
13
|
-
|
|
14
|
-
var _propTypes = require('prop-types');
|
|
15
|
-
|
|
16
|
-
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
17
|
-
|
|
18
|
-
var _inlineStylePrefixer = require('inline-style-prefixer');
|
|
19
|
-
|
|
20
|
-
var _inlineStylePrefixer2 = _interopRequireDefault(_inlineStylePrefixer);
|
|
21
|
-
|
|
22
|
-
var _reactStyleProptype = require('react-style-proptype');
|
|
23
|
-
|
|
24
|
-
var _reactStyleProptype2 = _interopRequireDefault(_reactStyleProptype);
|
|
25
|
-
|
|
26
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
|
-
|
|
28
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
29
|
-
|
|
30
|
-
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
|
31
|
-
|
|
32
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
33
|
-
|
|
34
|
-
var DEFAULT_USER_AGENT = 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.2 (KHTML, like Gecko) Safari/537.2';
|
|
35
|
-
var USER_AGENT = typeof navigator !== 'undefined' ? navigator.userAgent : DEFAULT_USER_AGENT;
|
|
36
|
-
var RESIZER_DEFAULT_CLASSNAME = exports.RESIZER_DEFAULT_CLASSNAME = 'Resizer';
|
|
37
|
-
|
|
38
|
-
var Resizer = function (_React$Component) {
|
|
39
|
-
_inherits(Resizer, _React$Component);
|
|
40
|
-
|
|
41
|
-
function Resizer() {
|
|
42
|
-
_classCallCheck(this, Resizer);
|
|
43
|
-
|
|
44
|
-
return _possibleConstructorReturn(this, (Resizer.__proto__ || Object.getPrototypeOf(Resizer)).apply(this, arguments));
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
_createClass(Resizer, [{
|
|
48
|
-
key: 'render',
|
|
49
|
-
value: function render() {
|
|
50
|
-
var _props = this.props,
|
|
51
|
-
className = _props.className,
|
|
52
|
-
_onClick = _props.onClick,
|
|
53
|
-
_onDoubleClick = _props.onDoubleClick,
|
|
54
|
-
_onMouseDown = _props.onMouseDown,
|
|
55
|
-
_onTouchEnd = _props.onTouchEnd,
|
|
56
|
-
_onTouchStart = _props.onTouchStart,
|
|
57
|
-
prefixer = _props.prefixer,
|
|
58
|
-
resizerClassName = _props.resizerClassName,
|
|
59
|
-
split = _props.split,
|
|
60
|
-
style = _props.style;
|
|
61
|
-
|
|
62
|
-
var classes = [resizerClassName, split, className];
|
|
63
|
-
|
|
64
|
-
return _react2.default.createElement('span', {
|
|
65
|
-
className: classes.join(' '),
|
|
66
|
-
style: prefixer.prefix(style) || {},
|
|
67
|
-
onMouseDown: function onMouseDown(event) {
|
|
68
|
-
return _onMouseDown(event);
|
|
69
|
-
},
|
|
70
|
-
onTouchStart: function onTouchStart(event) {
|
|
71
|
-
event.preventDefault();
|
|
72
|
-
_onTouchStart(event);
|
|
73
|
-
},
|
|
74
|
-
onTouchEnd: function onTouchEnd(event) {
|
|
75
|
-
event.preventDefault();
|
|
76
|
-
_onTouchEnd(event);
|
|
77
|
-
},
|
|
78
|
-
onClick: function onClick(event) {
|
|
79
|
-
if (_onClick) {
|
|
80
|
-
event.preventDefault();
|
|
81
|
-
_onClick(event);
|
|
82
|
-
}
|
|
83
|
-
},
|
|
84
|
-
onDoubleClick: function onDoubleClick(event) {
|
|
85
|
-
if (_onDoubleClick) {
|
|
86
|
-
event.preventDefault();
|
|
87
|
-
_onDoubleClick(event);
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
});
|
|
91
|
-
}
|
|
92
|
-
}]);
|
|
93
|
-
|
|
94
|
-
return Resizer;
|
|
95
|
-
}(_react2.default.Component);
|
|
96
|
-
|
|
97
|
-
Resizer.propTypes = {
|
|
98
|
-
className: _propTypes2.default.string.isRequired,
|
|
99
|
-
onClick: _propTypes2.default.func,
|
|
100
|
-
onDoubleClick: _propTypes2.default.func,
|
|
101
|
-
onMouseDown: _propTypes2.default.func.isRequired,
|
|
102
|
-
onTouchStart: _propTypes2.default.func.isRequired,
|
|
103
|
-
onTouchEnd: _propTypes2.default.func.isRequired,
|
|
104
|
-
prefixer: _propTypes2.default.instanceOf(_inlineStylePrefixer2.default).isRequired,
|
|
105
|
-
split: _propTypes2.default.oneOf(['vertical', 'horizontal']),
|
|
106
|
-
style: _reactStyleProptype2.default,
|
|
107
|
-
resizerClassName: _propTypes2.default.string.isRequired
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
Resizer.defaultProps = {
|
|
111
|
-
prefixer: new _inlineStylePrefixer2.default({ userAgent: USER_AGENT }),
|
|
112
|
-
resizerClassName: RESIZER_DEFAULT_CLASSNAME
|
|
113
|
-
};
|
|
114
|
-
|
|
115
|
-
exports.default = Resizer;
|
package/lib/SplitPane.js
DELETED
|
@@ -1,417 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
8
|
-
|
|
9
|
-
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
10
|
-
|
|
11
|
-
var _react = require('react');
|
|
12
|
-
|
|
13
|
-
var _react2 = _interopRequireDefault(_react);
|
|
14
|
-
|
|
15
|
-
var _propTypes = require('prop-types');
|
|
16
|
-
|
|
17
|
-
var _propTypes2 = _interopRequireDefault(_propTypes);
|
|
18
|
-
|
|
19
|
-
var _reactDom = require('react-dom');
|
|
20
|
-
|
|
21
|
-
var _reactDom2 = _interopRequireDefault(_reactDom);
|
|
22
|
-
|
|
23
|
-
var _inlineStylePrefixer = require('inline-style-prefixer');
|
|
24
|
-
|
|
25
|
-
var _inlineStylePrefixer2 = _interopRequireDefault(_inlineStylePrefixer);
|
|
26
|
-
|
|
27
|
-
var _reactStyleProptype = require('react-style-proptype');
|
|
28
|
-
|
|
29
|
-
var _reactStyleProptype2 = _interopRequireDefault(_reactStyleProptype);
|
|
30
|
-
|
|
31
|
-
var _Pane = require('./Pane');
|
|
32
|
-
|
|
33
|
-
var _Pane2 = _interopRequireDefault(_Pane);
|
|
34
|
-
|
|
35
|
-
var _Resizer = require('./Resizer');
|
|
36
|
-
|
|
37
|
-
var _Resizer2 = _interopRequireDefault(_Resizer);
|
|
38
|
-
|
|
39
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
40
|
-
|
|
41
|
-
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
42
|
-
|
|
43
|
-
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
|
44
|
-
|
|
45
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
|
|
46
|
-
|
|
47
|
-
var DEFAULT_USER_AGENT = 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.2 (KHTML, like Gecko) Safari/537.2';
|
|
48
|
-
var USER_AGENT = typeof navigator !== 'undefined' ? navigator.userAgent : DEFAULT_USER_AGENT;
|
|
49
|
-
|
|
50
|
-
function unFocus(document, window) {
|
|
51
|
-
if (document.selection) {
|
|
52
|
-
document.selection.empty();
|
|
53
|
-
} else {
|
|
54
|
-
try {
|
|
55
|
-
window.getSelection().removeAllRanges();
|
|
56
|
-
// eslint-disable-next-line no-empty
|
|
57
|
-
} catch (e) {}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
var SplitPane = function (_React$Component) {
|
|
62
|
-
_inherits(SplitPane, _React$Component);
|
|
63
|
-
|
|
64
|
-
function SplitPane() {
|
|
65
|
-
_classCallCheck(this, SplitPane);
|
|
66
|
-
|
|
67
|
-
var _this = _possibleConstructorReturn(this, (SplitPane.__proto__ || Object.getPrototypeOf(SplitPane)).call(this));
|
|
68
|
-
|
|
69
|
-
_this.onMouseDown = _this.onMouseDown.bind(_this);
|
|
70
|
-
_this.onTouchStart = _this.onTouchStart.bind(_this);
|
|
71
|
-
_this.onMouseMove = _this.onMouseMove.bind(_this);
|
|
72
|
-
_this.onTouchMove = _this.onTouchMove.bind(_this);
|
|
73
|
-
_this.onMouseUp = _this.onMouseUp.bind(_this);
|
|
74
|
-
|
|
75
|
-
_this.state = {
|
|
76
|
-
active: false,
|
|
77
|
-
resized: false
|
|
78
|
-
};
|
|
79
|
-
return _this;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
_createClass(SplitPane, [{
|
|
83
|
-
key: 'componentDidMount',
|
|
84
|
-
value: function componentDidMount() {
|
|
85
|
-
this.setSize(this.props, this.state);
|
|
86
|
-
document.addEventListener('mouseup', this.onMouseUp);
|
|
87
|
-
document.addEventListener('mousemove', this.onMouseMove);
|
|
88
|
-
document.addEventListener('touchmove', this.onTouchMove);
|
|
89
|
-
}
|
|
90
|
-
}, {
|
|
91
|
-
key: 'componentWillReceiveProps',
|
|
92
|
-
value: function componentWillReceiveProps(props) {
|
|
93
|
-
this.setSize(props, this.state);
|
|
94
|
-
}
|
|
95
|
-
}, {
|
|
96
|
-
key: 'componentWillUnmount',
|
|
97
|
-
value: function componentWillUnmount() {
|
|
98
|
-
document.removeEventListener('mouseup', this.onMouseUp);
|
|
99
|
-
document.removeEventListener('mousemove', this.onMouseMove);
|
|
100
|
-
document.removeEventListener('touchmove', this.onTouchMove);
|
|
101
|
-
}
|
|
102
|
-
}, {
|
|
103
|
-
key: 'onMouseDown',
|
|
104
|
-
value: function onMouseDown(event) {
|
|
105
|
-
var eventWithTouches = _extends({}, event, {
|
|
106
|
-
touches: [{ clientX: event.clientX, clientY: event.clientY }]
|
|
107
|
-
});
|
|
108
|
-
this.onTouchStart(eventWithTouches);
|
|
109
|
-
}
|
|
110
|
-
}, {
|
|
111
|
-
key: 'onTouchStart',
|
|
112
|
-
value: function onTouchStart(event) {
|
|
113
|
-
var _props = this.props,
|
|
114
|
-
allowResize = _props.allowResize,
|
|
115
|
-
onDragStarted = _props.onDragStarted,
|
|
116
|
-
split = _props.split;
|
|
117
|
-
|
|
118
|
-
if (allowResize) {
|
|
119
|
-
unFocus(document, window);
|
|
120
|
-
var position = split === 'vertical' ? event.touches[0].clientX : event.touches[0].clientY;
|
|
121
|
-
|
|
122
|
-
if (typeof onDragStarted === 'function') {
|
|
123
|
-
onDragStarted();
|
|
124
|
-
}
|
|
125
|
-
this.setState({
|
|
126
|
-
active: true,
|
|
127
|
-
position: position
|
|
128
|
-
});
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
}, {
|
|
132
|
-
key: 'onMouseMove',
|
|
133
|
-
value: function onMouseMove(event) {
|
|
134
|
-
var eventWithTouches = _extends({}, event, {
|
|
135
|
-
touches: [{ clientX: event.clientX, clientY: event.clientY }]
|
|
136
|
-
});
|
|
137
|
-
this.onTouchMove(eventWithTouches);
|
|
138
|
-
}
|
|
139
|
-
}, {
|
|
140
|
-
key: 'onTouchMove',
|
|
141
|
-
value: function onTouchMove(event) {
|
|
142
|
-
var _props2 = this.props,
|
|
143
|
-
allowResize = _props2.allowResize,
|
|
144
|
-
maxSize = _props2.maxSize,
|
|
145
|
-
minSize = _props2.minSize,
|
|
146
|
-
onChange = _props2.onChange,
|
|
147
|
-
split = _props2.split,
|
|
148
|
-
step = _props2.step;
|
|
149
|
-
var _state = this.state,
|
|
150
|
-
active = _state.active,
|
|
151
|
-
position = _state.position;
|
|
152
|
-
|
|
153
|
-
if (allowResize && active) {
|
|
154
|
-
unFocus(document, window);
|
|
155
|
-
var isPrimaryFirst = this.props.primary === 'first';
|
|
156
|
-
var ref = isPrimaryFirst ? this.pane1 : this.pane2;
|
|
157
|
-
var ref2 = isPrimaryFirst ? this.pane2 : this.pane1;
|
|
158
|
-
if (ref) {
|
|
159
|
-
var node = _reactDom2.default.findDOMNode(ref);
|
|
160
|
-
var node2 = _reactDom2.default.findDOMNode(ref2);
|
|
161
|
-
|
|
162
|
-
if (node.getBoundingClientRect) {
|
|
163
|
-
var width = node.getBoundingClientRect().width;
|
|
164
|
-
var height = node.getBoundingClientRect().height;
|
|
165
|
-
var current = split === 'vertical' ? event.touches[0].clientX : event.touches[0].clientY;
|
|
166
|
-
var size = split === 'vertical' ? width : height;
|
|
167
|
-
var positionDelta = position - current;
|
|
168
|
-
if (step) {
|
|
169
|
-
if (Math.abs(positionDelta) < step) {
|
|
170
|
-
return;
|
|
171
|
-
}
|
|
172
|
-
// Integer division
|
|
173
|
-
// eslint-disable-next-line no-bitwise
|
|
174
|
-
positionDelta = ~~(positionDelta / step) * step;
|
|
175
|
-
}
|
|
176
|
-
var sizeDelta = isPrimaryFirst ? positionDelta : -positionDelta;
|
|
177
|
-
|
|
178
|
-
var pane1Order = parseInt(window.getComputedStyle(node).order);
|
|
179
|
-
var pane2Order = parseInt(window.getComputedStyle(node2).order);
|
|
180
|
-
if (pane1Order > pane2Order) {
|
|
181
|
-
sizeDelta = -sizeDelta;
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
var newMaxSize = maxSize;
|
|
185
|
-
if (maxSize !== undefined && maxSize <= 0) {
|
|
186
|
-
var splPane = this.splitPane;
|
|
187
|
-
if (split === 'vertical') {
|
|
188
|
-
newMaxSize = splPane.getBoundingClientRect().width + maxSize;
|
|
189
|
-
} else {
|
|
190
|
-
newMaxSize = splPane.getBoundingClientRect().height + maxSize;
|
|
191
|
-
}
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
var newSize = size - sizeDelta;
|
|
195
|
-
var newPosition = position - positionDelta;
|
|
196
|
-
|
|
197
|
-
if (newSize < minSize) {
|
|
198
|
-
newSize = minSize;
|
|
199
|
-
} else if (maxSize !== undefined && newSize > newMaxSize) {
|
|
200
|
-
newSize = newMaxSize;
|
|
201
|
-
} else {
|
|
202
|
-
this.setState({
|
|
203
|
-
position: newPosition,
|
|
204
|
-
resized: true
|
|
205
|
-
});
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
if (onChange) onChange(newSize);
|
|
209
|
-
this.setState({ draggedSize: newSize });
|
|
210
|
-
ref.setState({ size: newSize });
|
|
211
|
-
}
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
}, {
|
|
216
|
-
key: 'onMouseUp',
|
|
217
|
-
value: function onMouseUp() {
|
|
218
|
-
var _props3 = this.props,
|
|
219
|
-
allowResize = _props3.allowResize,
|
|
220
|
-
onDragFinished = _props3.onDragFinished;
|
|
221
|
-
var _state2 = this.state,
|
|
222
|
-
active = _state2.active,
|
|
223
|
-
draggedSize = _state2.draggedSize;
|
|
224
|
-
|
|
225
|
-
if (allowResize && active) {
|
|
226
|
-
if (typeof onDragFinished === 'function') {
|
|
227
|
-
onDragFinished(draggedSize);
|
|
228
|
-
}
|
|
229
|
-
this.setState({ active: false });
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
}, {
|
|
233
|
-
key: 'setSize',
|
|
234
|
-
value: function setSize(props, state) {
|
|
235
|
-
var primary = this.props.primary;
|
|
236
|
-
|
|
237
|
-
var ref = primary === 'first' ? this.pane1 : this.pane2;
|
|
238
|
-
var newSize = void 0;
|
|
239
|
-
if (ref) {
|
|
240
|
-
newSize = props.size || state && state.draggedSize || props.defaultSize || props.minSize;
|
|
241
|
-
ref.setState({
|
|
242
|
-
size: newSize
|
|
243
|
-
});
|
|
244
|
-
if (props.size !== state.draggedSize) {
|
|
245
|
-
this.setState({
|
|
246
|
-
draggedSize: newSize
|
|
247
|
-
});
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
}
|
|
251
|
-
}, {
|
|
252
|
-
key: 'render',
|
|
253
|
-
value: function render() {
|
|
254
|
-
var _this2 = this;
|
|
255
|
-
|
|
256
|
-
var _props4 = this.props,
|
|
257
|
-
allowResize = _props4.allowResize,
|
|
258
|
-
children = _props4.children,
|
|
259
|
-
className = _props4.className,
|
|
260
|
-
defaultSize = _props4.defaultSize,
|
|
261
|
-
minSize = _props4.minSize,
|
|
262
|
-
onResizerClick = _props4.onResizerClick,
|
|
263
|
-
onResizerDoubleClick = _props4.onResizerDoubleClick,
|
|
264
|
-
paneClassName = _props4.paneClassName,
|
|
265
|
-
pane1ClassName = _props4.pane1ClassName,
|
|
266
|
-
pane2ClassName = _props4.pane2ClassName,
|
|
267
|
-
paneStyle = _props4.paneStyle,
|
|
268
|
-
pane1StyleProps = _props4.pane1Style,
|
|
269
|
-
pane2StyleProps = _props4.pane2Style,
|
|
270
|
-
primary = _props4.primary,
|
|
271
|
-
prefixer = _props4.prefixer,
|
|
272
|
-
resizerClassName = _props4.resizerClassName,
|
|
273
|
-
resizerStyle = _props4.resizerStyle,
|
|
274
|
-
size = _props4.size,
|
|
275
|
-
split = _props4.split,
|
|
276
|
-
styleProps = _props4.style;
|
|
277
|
-
|
|
278
|
-
var disabledClass = allowResize ? '' : 'disabled';
|
|
279
|
-
var resizerClassNamesIncludingDefault = resizerClassName ? resizerClassName + ' ' + _Resizer.RESIZER_DEFAULT_CLASSNAME : resizerClassName;
|
|
280
|
-
|
|
281
|
-
var style = _extends({}, {
|
|
282
|
-
display: 'flex',
|
|
283
|
-
flex: 1,
|
|
284
|
-
height: '100%',
|
|
285
|
-
position: 'absolute',
|
|
286
|
-
outline: 'none',
|
|
287
|
-
overflow: 'hidden',
|
|
288
|
-
MozUserSelect: 'text',
|
|
289
|
-
WebkitUserSelect: 'text',
|
|
290
|
-
msUserSelect: 'text',
|
|
291
|
-
userSelect: 'text'
|
|
292
|
-
}, styleProps || {});
|
|
293
|
-
|
|
294
|
-
if (split === 'vertical') {
|
|
295
|
-
_extends(style, {
|
|
296
|
-
flexDirection: 'row',
|
|
297
|
-
left: 0,
|
|
298
|
-
right: 0
|
|
299
|
-
});
|
|
300
|
-
} else {
|
|
301
|
-
_extends(style, {
|
|
302
|
-
bottom: 0,
|
|
303
|
-
flexDirection: 'column',
|
|
304
|
-
minHeight: '100%',
|
|
305
|
-
top: 0,
|
|
306
|
-
width: '100%'
|
|
307
|
-
});
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
var classes = ['SplitPane', className, split, disabledClass];
|
|
311
|
-
var pane1Style = prefixer.prefix(_extends({}, paneStyle || {}, pane1StyleProps || {}));
|
|
312
|
-
var pane2Style = prefixer.prefix(_extends({}, paneStyle || {}, pane2StyleProps || {}));
|
|
313
|
-
|
|
314
|
-
var pane1Classes = ['Pane1', paneClassName, pane1ClassName].join(' ');
|
|
315
|
-
var pane2Classes = ['Pane2', paneClassName, pane2ClassName].join(' ');
|
|
316
|
-
|
|
317
|
-
return _react2.default.createElement(
|
|
318
|
-
'div',
|
|
319
|
-
{
|
|
320
|
-
className: classes.join(' '),
|
|
321
|
-
ref: function ref(node) {
|
|
322
|
-
_this2.splitPane = node;
|
|
323
|
-
},
|
|
324
|
-
style: prefixer.prefix(style)
|
|
325
|
-
},
|
|
326
|
-
_react2.default.createElement(
|
|
327
|
-
_Pane2.default,
|
|
328
|
-
{
|
|
329
|
-
className: pane1Classes,
|
|
330
|
-
key: 'pane1',
|
|
331
|
-
ref: function ref(node) {
|
|
332
|
-
_this2.pane1 = node;
|
|
333
|
-
},
|
|
334
|
-
size: primary === 'first' ? size || defaultSize || minSize : undefined,
|
|
335
|
-
split: split,
|
|
336
|
-
style: pane1Style
|
|
337
|
-
},
|
|
338
|
-
children[0]
|
|
339
|
-
),
|
|
340
|
-
_react2.default.createElement(_Resizer2.default, {
|
|
341
|
-
className: disabledClass,
|
|
342
|
-
onClick: onResizerClick,
|
|
343
|
-
onDoubleClick: onResizerDoubleClick,
|
|
344
|
-
onMouseDown: this.onMouseDown,
|
|
345
|
-
onTouchStart: this.onTouchStart,
|
|
346
|
-
onTouchEnd: this.onMouseUp,
|
|
347
|
-
key: 'resizer',
|
|
348
|
-
ref: function ref(node) {
|
|
349
|
-
_this2.resizer = node;
|
|
350
|
-
},
|
|
351
|
-
resizerClassName: resizerClassNamesIncludingDefault,
|
|
352
|
-
split: split,
|
|
353
|
-
style: resizerStyle || {}
|
|
354
|
-
}),
|
|
355
|
-
_react2.default.createElement(
|
|
356
|
-
_Pane2.default,
|
|
357
|
-
{
|
|
358
|
-
className: pane2Classes,
|
|
359
|
-
key: 'pane2',
|
|
360
|
-
ref: function ref(node) {
|
|
361
|
-
_this2.pane2 = node;
|
|
362
|
-
},
|
|
363
|
-
size: primary === 'second' ? size || defaultSize || minSize : undefined,
|
|
364
|
-
split: split,
|
|
365
|
-
style: pane2Style
|
|
366
|
-
},
|
|
367
|
-
children[1]
|
|
368
|
-
)
|
|
369
|
-
);
|
|
370
|
-
}
|
|
371
|
-
}]);
|
|
372
|
-
|
|
373
|
-
return SplitPane;
|
|
374
|
-
}(_react2.default.Component);
|
|
375
|
-
|
|
376
|
-
SplitPane.propTypes = {
|
|
377
|
-
allowResize: _propTypes2.default.bool,
|
|
378
|
-
children: _propTypes2.default.arrayOf(_propTypes2.default.node).isRequired,
|
|
379
|
-
className: _propTypes2.default.string,
|
|
380
|
-
primary: _propTypes2.default.oneOf(['first', 'second']),
|
|
381
|
-
minSize: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
|
|
382
|
-
maxSize: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
|
|
383
|
-
// eslint-disable-next-line react/no-unused-prop-types
|
|
384
|
-
defaultSize: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
|
|
385
|
-
size: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
|
|
386
|
-
split: _propTypes2.default.oneOf(['vertical', 'horizontal']),
|
|
387
|
-
onDragStarted: _propTypes2.default.func,
|
|
388
|
-
onDragFinished: _propTypes2.default.func,
|
|
389
|
-
onChange: _propTypes2.default.func,
|
|
390
|
-
onResizerClick: _propTypes2.default.func,
|
|
391
|
-
onResizerDoubleClick: _propTypes2.default.func,
|
|
392
|
-
prefixer: _propTypes2.default.instanceOf(_inlineStylePrefixer2.default).isRequired,
|
|
393
|
-
style: _reactStyleProptype2.default,
|
|
394
|
-
resizerStyle: _reactStyleProptype2.default,
|
|
395
|
-
paneClassName: _propTypes2.default.string,
|
|
396
|
-
pane1ClassName: _propTypes2.default.string,
|
|
397
|
-
pane2ClassName: _propTypes2.default.string,
|
|
398
|
-
paneStyle: _reactStyleProptype2.default,
|
|
399
|
-
pane1Style: _reactStyleProptype2.default,
|
|
400
|
-
pane2Style: _reactStyleProptype2.default,
|
|
401
|
-
resizerClassName: _propTypes2.default.string,
|
|
402
|
-
step: _propTypes2.default.number
|
|
403
|
-
};
|
|
404
|
-
|
|
405
|
-
SplitPane.defaultProps = {
|
|
406
|
-
allowResize: true,
|
|
407
|
-
minSize: 50,
|
|
408
|
-
prefixer: new _inlineStylePrefixer2.default({ userAgent: USER_AGENT }),
|
|
409
|
-
primary: 'first',
|
|
410
|
-
split: 'vertical',
|
|
411
|
-
paneClassName: '',
|
|
412
|
-
pane1ClassName: '',
|
|
413
|
-
pane2ClassName: ''
|
|
414
|
-
};
|
|
415
|
-
|
|
416
|
-
exports.default = SplitPane;
|
|
417
|
-
module.exports = exports['default'];
|