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

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

lib/Pane.js

@@ -40,3 +40,3 @@ 'use strict';
   var value = size || initialSize;
-  var vertical = split === "vertical";
+  var vertical = split === 'vertical';
   var styleProp = {
@@ -57,7 +57,7 @@ minSize: vertical ? 'minWidth' : 'minHeight',
   switch ((0, _SplitPane.getUnit)(value)) {
-    case "ratio":
+    case 'ratio':
       style.flex = value;
       break;
-    case "%":
-    case "px":
+    case '%':
+    case 'px':
       style.flexGrow = 0;
@@ -109,3 +109,3 @@ style[styleProp.size] = (0, _SplitPane.convertSizeToCssValue)(value, resizersSize);
 Pane.defaultProps = {
-  initialSize: "1",
+  initialSize: '1',
   split: 'vertical',
@@ -112,0 +112,0 @@ minSize: '0',

lib/SplitPane.js

@@ -44,5 +44,5 @@ 'use strict';
 
-var DEFAULT_PANE_SIZE = "1";
-var DEFAULT_PANE_MIN_SIZE = "0";
-var DEFAULT_PANE_MAX_SIZE = "100%";
+var DEFAULT_PANE_SIZE = '1';
+var DEFAULT_PANE_MIN_SIZE = '0';
+var DEFAULT_PANE_MAX_SIZE = '100%';
 
@@ -96,19 +96,15 @@ var ColumnStyle = _glamorous2.default.div({
 function getUnit(size) {
-  if (typeof size === "number") {
-    return "ratio";
+  if (size.endsWith('px')) {
+    return 'px';
   }
 
-  if (size.endsWith("px")) {
-    return "px";
+  if (size.endsWith('%')) {
+    return '%';
   }
 
-  if (size.endsWith("%")) {
-    return "%";
-  }
-
-  return "ratio";
+  return 'ratio';
 }
 
 function convertSizeToCssValue(value, resizersSize) {
-  if (getUnit(value) !== "%") {
+  if (getUnit(value) !== '%') {
     return value;
@@ -121,3 +117,3 @@ }
 
-  var idx = value.search("%");
+  var idx = value.search('%');
   var percent = value.slice(0, idx) / 100;
@@ -133,7 +129,7 @@ if (percent === 0) {
   switch (unit) {
-    case "%":
+    case '%':
       return (size / containerSize * 100).toFixed(2) + '%';
-    case "px":
+    case 'px':
       return size.toFixed(2) + 'px';
-    case "ratio":
+    case 'ratio':
       return (size * 100).toFixed(0);
@@ -177,6 +173,4 @@ }
 
-      _this.dimensions = _this.getPaneDimensions();
-      _this.container = _this.splitPane.getBoundingClientRect();
       _this.resizerIndex = resizerIndex;
-      _this.resizersSize = _this.getResizersSize();
+      _this.dimensionsSnapshot = _this.getDimensionsSnapshot(_this.props);
 
@@ -188,6 +182,6 @@ document.addEventListener('mousemove', _this.onMouseMove);
       document.addEventListener('touchend', _this.onMouseUp);
-      // document.addEventListener('touchcancel', this.onMouseUp);
+      document.addEventListener('touchcancel', _this.onMouseUp);
 
       if (onResizeStart) {
-        onResizeStart(resizerIndex);
+        onResizeStart();
       }
@@ -221,5 +215,6 @@ };
       document.removeEventListener('touchend', _this.onMouseUp);
+      document.addEventListener('touchcancel', _this.onMouseUp);
 
       if (_this.props.onResizeEnd) {
-        _this.props.onResizeEnd();
+        _this.props.onResizeEnd(_this.state.sizes);
       }
@@ -236,10 +231,2 @@ };
 
-    _this.setResizerRef = function (idx, el) {
-      if (!_this.resizerElements) {
-        _this.resizerElements = [];
-      }
-
-      _this.resizerElements[idx] = el;
-    };
-
     _this.state = {
@@ -266,6 +253,31 @@ sizes: _this.getPanePropSize(props)
   }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      // todo: if there are percentage panes
-      this.forceUpdate();
+    key: 'getDimensionsSnapshot',
+    value: function getDimensionsSnapshot(props) {
+      var split = props.split;
+      var paneDimensions = this.getPaneDimensions();
+      var splitPaneDimensions = this.splitPane.getBoundingClientRect();
+      var minSizes = this.getPanePropMinMaxSize(props, 'minSize');
+      var maxSizes = this.getPanePropMinMaxSize(props, 'maxSize');
+
+      var resizersSize = this.getResizersSize();
+      var splitPaneSizePx = split === 'vertical' ? splitPaneDimensions.width - resizersSize : splitPaneDimensions.height - resizersSize;
+
+      var minSizesPx = minSizes.map(function (s) {
+        return convert(s, splitPaneSizePx);
+      });
+      var maxSizesPx = maxSizes.map(function (s) {
+        return convert(s, splitPaneSizePx);
+      });
+      var sizesPx = paneDimensions.map(function (d) {
+        return split === 'vertical' ? d.width : d.height;
+      });
+
+      return {
+        resizersSize: resizersSize,
+        paneDimensions: paneDimensions,
+        splitPaneSizePx: splitPaneSizePx,
+        minSizesPx: minSizesPx,
+        maxSizesPx: maxSizesPx,
+        sizesPx: sizesPx
+      };
     }
@@ -276,3 +288,3 @@ }, {
       return _react2.default.Children.map(props.children, function (child) {
-        var value = child.props["size"] || child.props["initialSize"];
+        var value = child.props['size'] || child.props['initialSize'];
         if (value === undefined) {
@@ -291,3 +303,3 @@ return DEFAULT_PANE_SIZE;
         if (value === undefined) {
-          return key === "maxSize" ? DEFAULT_PANE_MAX_SIZE : DEFAULT_PANE_MIN_SIZE;
+          return key === 'maxSize' ? DEFAULT_PANE_MAX_SIZE : DEFAULT_PANE_MIN_SIZE;
         }
@@ -301,3 +313,5 @@
     value: function getPaneDimensions() {
-      return this.paneElements.map(function (el) {
+      return this.paneElements.filter(function (el) {
+        return el;
+      }).map(function (el) {
         return (0, _reactDom.findDOMNode)(el).getBoundingClientRect();
@@ -307,9 +321,2 @@ });
   }, {
-    key: 'getResizerDimensions',
-    value: function getResizerDimensions() {
-      return this.resizerElements.map(function (el) {
-        return (0, _reactDom.findDOMNode)(el).getBoundingClientRect();
-      });
-    }
-  }, {
     key: 'getSizes',
@@ -327,28 +334,23 @@ value: function getSizes() {
 
-      var minSizes = this.getPanePropMinMaxSize(this.props, 'minSize');
-      var maxSizes = this.getPanePropMinMaxSize(this.props, 'maxSize');
       var resizerIndex = this.resizerIndex;
-      var dimensions = this.dimensions;
-      var splitPaneDimensions = this.container;
-      var sizesPx = dimensions.map(function (d) {
-        return split === "vertical" ? d.width : d.height;
-      });
+      var _dimensionsSnapshot = this.dimensionsSnapshot,
+          sizesPx = _dimensionsSnapshot.sizesPx,
+          minSizesPx = _dimensionsSnapshot.minSizesPx,
+          maxSizesPx = _dimensionsSnapshot.maxSizesPx,
+          splitPaneSizePx = _dimensionsSnapshot.splitPaneSizePx,
+          paneDimensions = _dimensionsSnapshot.paneDimensions;
 
-      var primary = dimensions[resizerIndex];
-      var secondary = dimensions[resizerIndex + 1];
 
-      var splitPaneSizePx = split === "vertical" ? splitPaneDimensions.width - this.resizersSize : splitPaneDimensions.height - this.resizersSize;
+      var primary = paneDimensions[resizerIndex];
+      var secondary = paneDimensions[resizerIndex + 1];
+      var primaryMinSizePx = minSizesPx[resizerIndex];
+      var secondaryMinSizePx = minSizesPx[resizerIndex + 1];
+      var primaryMaxSizePx = maxSizesPx[resizerIndex];
+      var secondaryMaxSizePx = maxSizesPx[resizerIndex + 1];
 
+      var resizerSize1 = resizerSize / 2;
+      var resizerSize2 = resizerSize / 2;
       var primarySizePx = void 0;
       var secondarySizePx = void 0;
 
-      var primaryMinSizePx = convert(minSizes[resizerIndex], splitPaneSizePx);
-      var secondaryMinSizePx = convert(minSizes[resizerIndex + 1], splitPaneSizePx);
-
-      var primaryMaxSizePx = convert(maxSizes[resizerIndex], splitPaneSizePx);
-      var secondaryMaxSizePx = convert(maxSizes[resizerIndex + 1], splitPaneSizePx);
-
-      var resizerSize1 = resizerSize / 2;
-      var resizerSize2 = resizerSize / 2;
-
       if (split === 'vertical') {
@@ -389,3 +391,3 @@ var mostLeft = Math.max(primary.left + resizerSize1, primary.left + primaryMinSizePx + resizerSize1, secondary.right - secondaryMaxSizePx - resizerSize2);
         var unit = getUnit(sizes[resizerIndex + idx]);
-        if (unit !== "ratio") {
+        if (unit !== 'ratio') {
           sizes[resizerIndex + idx] = convertToUnit(paneSize, unit, splitPaneSizePx);
@@ -401,6 +403,7 @@ } else {
         sizes = sizes.map(function (size, idx) {
-          if (getUnit(size) === "ratio") {
+          if (getUnit(size) === 'ratio') {
             ratioCount++;
             lastRatioIdx = idx;
-            return convertToUnit(sizesPx[idx], "ratio");
+
+            return convertToUnit(sizesPx[idx], 'ratio');
           }
@@ -425,7 +428,3 @@
     value: function getResizersSize() {
-      if (!this.resizerElements) {
-        return 0;
-      }
-
-      return this.resizerElements.length * this.props.resizerSize;
+      return (_react2.default.Children.count(this.props.children) - 1) * this.props.resizerSize;
     }
@@ -440,6 +439,6 @@ }, {
           className = _props2.className,
-          split = _props2.split;
+          split = _props2.split,
+          allowResize = _props2.allowResize;
 
       var sizes = this.getSizes();
-
       var resizersSize = this.getResizersSize();
@@ -480,3 +479,2 @@
             key: 'Resizer-' + resizerIndex,
-            ref: _this2.setResizerRef.bind(null, resizerIndex),
             split: split,
@@ -500,3 +498,3 @@ onMouseDown: _this2.onMouseDown,
           innerRef: function innerRef(el) {
-            return _this2.splitPane = el;
+            _this2.splitPane = el;
           }
@@ -503,0 +501,0 @@ },

package.json

@@ -6,3 +6,3 @@ {
   "types": "index.d.ts",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.5",
   "repository": {
@@ -54,2 +54,3 @@ "type": "git",
     "react-dom": "^16.2.0",
+    "sinon": "^5.0.7",
     "surge": "^0.19.0",
@@ -56,0 +57,0 @@ "typescript": "^2.6.2",

No alert changes

Improved metrics

Total package byte prevSize

38378

0.71%

Lines of code

622

0.32%

Worsened metrics

Dev dependency count

25

4.17%

No dependency changes