react-split-pane-refined - npm Package Compare versions

Comparing version 2.0.0-beta.5 to 2.0.0-beta.6

lib/Pane.js

@@ -73,5 +73,15 @@ 'use strict';
   function Pane() {
+    var _ref2;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, Pane);
 
-    return _possibleConstructorReturn(this, (Pane.__proto__ || Object.getPrototypeOf(Pane)).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Pane.__proto__ || Object.getPrototypeOf(Pane)).call.apply(_ref2, [this].concat(args))), _this), _this.setRef = function (element) {
+      _this.props.innerRef(_this.props.index, element);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
@@ -90,3 +100,7 @@
         'div',
-        { className: className, style: prefixedStyle },
+        {
+          className: className,
+          style: prefixedStyle,
+          ref: this.setRef
+        },
         children
@@ -102,2 +116,4 @@ );
   children: _propTypes2.default.node,
+  innerRef: _propTypes2.default.func,
+  index: _propTypes2.default.number,
   className: _propTypes2.default.string,
@@ -104,0 +120,0 @@ initialSize: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),

lib/SplitPane.js

@@ -16,4 +16,2 @@ 'use strict';
 
-var _reactDom = require('react-dom');
-
 var _propTypes = require('prop-types');
@@ -56,6 +54,3 @@
   overflow: 'hidden',
-  userSelect: 'text',
-
-  minHeight: '100%',
-  width: '100%'
+  userSelect: 'text'
 });
@@ -152,3 +147,3 @@
 
-      _this.onDown(resizerIndex);
+      _this.onDown(resizerIndex, event.clientX, event.clientY);
     };
@@ -159,9 +154,15 @@
 
-      _this.onDown(resizerIndex);
+      var _event$touches$ = event.touches[0],
+          clientX = _event$touches$.clientX,
+          clientY = _event$touches$.clientY;
+
+
+      _this.onDown(resizerIndex, clientX, clientY);
     };
 
-    _this.onDown = function (resizerIndex) {
+    _this.onDown = function (resizerIndex, clientX, clientY) {
       var _this$props = _this.props,
           allowResize = _this$props.allowResize,
-          onResizeStart = _this$props.onResizeStart;
+          onResizeStart = _this$props.onResizeStart,
+          split = _this$props.split;
 
@@ -175,2 +176,4 @@
       _this.dimensionsSnapshot = _this.getDimensionsSnapshot(_this.props);
+      _this.startClientX = clientX;
+      _this.startClientY = clientY;
 
@@ -198,5 +201,5 @@ document.addEventListener('mousemove', _this.onMouseMove);
 
-      var _event$touches$ = event.touches[0],
-          clientX = _event$touches$.clientX,
-          clientY = _event$touches$.clientY;
+      var _event$touches$2 = event.touches[0],
+          clientX = _event$touches$2.clientX,
+          clientY = _event$touches$2.clientY;
 
@@ -311,3 +314,3 @@
       }).map(function (el) {
-        return (0, _reactDom.findDOMNode)(el).getBoundingClientRect();
+        return el.getBoundingClientRect();
       });
@@ -325,3 +328,2 @@ }
           split = _props.split,
-          resizerSize = _props.resizerSize,
           onChange = _props.onChange;
@@ -338,38 +340,40 @@
 
+      var sizeDim = split === 'vertical' ? 'width' : 'height';
       var primary = paneDimensions[resizerIndex];
       var secondary = paneDimensions[resizerIndex + 1];
+      var maxSize = primary[sizeDim] + secondary[sizeDim];
+
       var primaryMinSizePx = minSizesPx[resizerIndex];
       var secondaryMinSizePx = minSizesPx[resizerIndex + 1];
-      var primaryMaxSizePx = maxSizesPx[resizerIndex];
-      var secondaryMaxSizePx = maxSizesPx[resizerIndex + 1];
+      var primaryMaxSizePx = Math.min(maxSizesPx[resizerIndex], maxSize);
+      var secondaryMaxSizePx = Math.min(maxSizesPx[resizerIndex + 1], maxSize);
 
-      var resizerSize1 = resizerSize / 2;
-      var resizerSize2 = resizerSize / 2;
-      var primarySizePx = void 0;
-      var secondarySizePx = void 0;
+      var moveOffset = split === 'vertical' ? this.startClientX - clientX : this.startClientY - clientY;
 
-      if (split === 'vertical') {
-        var mostLeft = Math.max(primary.left + resizerSize1, primary.left + primaryMinSizePx + resizerSize1, secondary.right - secondaryMaxSizePx - resizerSize2);
-        var mostRight = Math.min(secondary.right - resizerSize2, secondary.right - secondaryMinSizePx - resizerSize2, primary.left + primaryMaxSizePx + resizerSize1);
+      var primarySizePx = primary[sizeDim] - moveOffset;
+      var secondarySizePx = secondary[sizeDim] + moveOffset;
 
-        clientX = clientX < mostLeft ? mostLeft : clientX;
-        clientX = clientX > mostRight ? mostRight : clientX;
+      var primaryHasReachedLimit = false;
+      var secondaryHasReachedLimit = false;
 
-        var resizerLeft = clientX - resizerSize1;
-        var resizerRight = clientX + resizerSize2;
+      if (primarySizePx < primaryMinSizePx) {
+        primarySizePx = primaryMinSizePx;
+        primaryHasReachedLimit = true;
+      } else if (primarySizePx > primaryMaxSizePx) {
+        primarySizePx = primaryMaxSizePx;
+        primaryHasReachedLimit = true;
+      }
 
-        primarySizePx = resizerLeft - primary.left;
-        secondarySizePx = secondary.right - resizerRight;
-      } else {
-        var mostTop = Math.max(primary.top + resizerSize1, primary.top + primaryMinSizePx + resizerSize1, secondary.bottom - secondaryMaxSizePx - resizerSize2);
-        var mostBottom = Math.min(secondary.bottom - resizerSize2, secondary.bottom - secondaryMinSizePx - resizerSize2, primary.top + primaryMaxSizePx + resizerSize1);
+      if (secondarySizePx < secondaryMinSizePx) {
+        secondarySizePx = secondaryMinSizePx;
+        secondaryHasReachedLimit = true;
+      } else if (secondarySizePx > secondaryMaxSizePx) {
+        secondarySizePx = secondaryMaxSizePx;
+        secondaryHasReachedLimit = true;
+      }
 
-        clientY = clientY < mostTop ? mostTop : clientY;
-        clientY = clientY > mostBottom ? mostBottom : clientY;
-
-        var resizerTop = clientY - resizerSize1;
-        var resizerBottom = clientY + resizerSize2;
-
-        primarySizePx = resizerTop - primary.top;
-        secondarySizePx = secondary.bottom - resizerBottom;
+      if (primaryHasReachedLimit) {
+        secondarySizePx = primary[sizeDim] + secondary[sizeDim] - primarySizePx;
+      } else if (secondaryHasReachedLimit) {
+        primarySizePx = primary[sizeDim] + primary[sizeDim] - secondarySizePx;
       }
@@ -380,7 +384,6 @@
 
-      var panesSizes = [primarySizePx, secondarySizePx];
       var sizes = this.getSizes().concat();
       var updateRatio = void 0;
 
-      panesSizes.forEach(function (paneSize, idx) {
+      [primarySizePx, secondarySizePx].forEach(function (paneSize, idx) {
         var unit = getUnit(sizes[resizerIndex + idx]);
@@ -432,4 +435,3 @@ if (unit !== 'ratio') {
           className = _props2.className,
-          split = _props2.split,
-          allowResize = _props2.allowResize;
+          split = _props2.split;
 
@@ -448,10 +450,7 @@ var sizes = this.getSizes();
           key: 'Pane-' + idx,
-          ref: _this2.setPaneRef.bind(null, idx),
-          resizersSize: resizersSize
+          innerRef: _this2.setPaneRef,
+          resizersSize: resizersSize,
+          size: sizes[idx]
         };
 
-        if (sizes) {
-          paneProps.size = sizes[idx];
-        }
-
         if (isPane) {
@@ -458,0 +457,0 @@ pane = (0, _react.cloneElement)(child, paneProps);

package.json

@@ -6,3 +6,3 @@ {
   "types": "index.d.ts",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.6",
   "repository": {
@@ -9,0 +9,0 @@ "type": "git",

No alert changes

Improved metrics

Total package byte prevSize

38667

0.75%

Lines of code

636

2.25%

No dependency changes