react-split-pane - npm Package Compare versions

Comparing version 2.0.0 to 2.0.2

lib/Pane.js

@@ -21,2 +21,4 @@ 'use strict';
 
+var _SplitPane = require('./SplitPane');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,56 +32,40 @@
 
-var RowPx = function RowPx(_ref) {
-  var useInitial = _ref.useInitial,
+function PaneStyle(_ref) {
+  var split = _ref.split,
       initialSize = _ref.initialSize,
       size = _ref.size,
       minSize = _ref.minSize,
-      maxSize = _ref.maxSize;
-  return {
-    width: useInitial && initialSize ? initialSize : size + 'px',
-    minWidth: minSize,
-    maxWidth: maxSize,
-    outline: 'none'
-  };
-};
+      maxSize = _ref.maxSize,
+      resizersSize = _ref.resizersSize;
 
-var ColumnPx = function ColumnPx(_ref2) {
-  var useInitial = _ref2.useInitial,
-      initialSize = _ref2.initialSize,
-      size = _ref2.size,
-      minSize = _ref2.minSize,
-      maxSize = _ref2.maxSize;
-  return {
-    height: useInitial && initialSize ? initialSize : size + 'px',
-    minHeight: minSize,
-    maxHeight: maxSize,
-    outline: 'none'
+  var value = size || initialSize;
+  var vertical = split === 'vertical';
+  var styleProp = {
+    minSize: vertical ? 'minWidth' : 'minHeight',
+    maxSize: vertical ? 'maxWidth' : 'maxHeight',
+    size: vertical ? 'width' : 'height'
   };
-};
 
-var RowFlex = function RowFlex(_ref3) {
-  var ratio = _ref3.ratio,
-      minSize = _ref3.minSize,
-      maxSize = _ref3.maxSize;
-  return {
-    flex: ratio * 100,
-    minWidth: minSize,
-    maxWidth: maxSize,
+  var style = {
     display: 'flex',
     outline: 'none'
   };
-};
 
-var ColumnFlex = function ColumnFlex(_ref4) {
-  var ratio = _ref4.ratio,
-      minSize = _ref4.minSize,
-      maxSize = _ref4.maxSize;
-  return {
-    flex: ratio * 100,
-    minHeight: minSize,
-    maxHeight: maxSize,
-    display: 'flex',
-    outline: 'none'
-  };
-};
+  style[styleProp.minSize] = (0, _SplitPane.convertSizeToCssValue)(minSize, resizersSize);
+  style[styleProp.maxSize] = (0, _SplitPane.convertSizeToCssValue)(maxSize, resizersSize);
 
+  switch ((0, _SplitPane.getUnit)(value)) {
+    case 'ratio':
+      style.flex = value;
+      break;
+    case '%':
+    case 'px':
+      style.flexGrow = 0;
+      style[styleProp.size] = (0, _SplitPane.convertSizeToCssValue)(value, resizersSize);
+      break;
+  }
+
+  return style;
+}
+
 var Pane = function (_PureComponent) {
@@ -89,5 +75,15 @@ _inherits(Pane, _PureComponent);
   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);
   }
@@ -100,29 +96,13 @@
           children = _props.children,
-          className = _props.className,
-          resized = _props.resized,
-          split = _props.split,
-          useInitial = _props.useInitial,
-          initialSize = _props.initialSize;
+          className = _props.className;
 
+      var prefixedStyle = (0, _static2.default)(PaneStyle(this.props));
 
-      var prefixedStyle = void 0;
-
-      //console.log(`Pane.render`, resized && !(useInitial && initialSize), resized, useInitial, initialSize);
-
-      if (resized && !(useInitial && initialSize)) {
-        if (split === 'vertical') {
-          prefixedStyle = (0, _static2.default)(RowFlex(this.props));
-        } else {
-          prefixedStyle = (0, _static2.default)(ColumnFlex(this.props));
-        }
-      } else {
-        if (split === 'vertical') {
-          prefixedStyle = (0, _static2.default)(RowPx(this.props));
-        } else {
-          prefixedStyle = (0, _static2.default)(ColumnPx(this.props));
-        }
-      }
       return _react2.default.createElement(
         'div',
-        { className: className, style: prefixedStyle },
+        {
+          className: className,
+          style: prefixedStyle,
+          ref: this.setRef
+        },
         children
@@ -138,4 +118,6 @@ );
   children: _propTypes2.default.node,
+  innerRef: _propTypes2.default.func,
+  index: _propTypes2.default.number,
   className: _propTypes2.default.string,
-  initialSize: _propTypes2.default.string,
+  initialSize: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
   minSize: _propTypes2.default.string,
@@ -146,4 +128,5 @@ maxSize: _propTypes2.default.string
 Pane.defaultProps = {
+  initialSize: '1',
   split: 'vertical',
-  minSize: '0px',
+  minSize: '0',
   maxSize: '100%'
@@ -150,0 +133,0 @@ };

lib/SplitPane.js

@@ -7,6 +7,7 @@ 'use strict';
 
-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; };
-
 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; }; }();
 
+exports.getUnit = getUnit;
+exports.convertSizeToCssValue = convertSizeToCssValue;
+
 var _react = require('react');
@@ -16,4 +17,2 @@
 
-var _reactDom = require('react-dom');
-
 var _propTypes = require('prop-types');
@@ -45,25 +44,14 @@
 
-var debug = false;
+var DEFAULT_PANE_SIZE = '1';
+var DEFAULT_PANE_MIN_SIZE = '0';
+var DEFAULT_PANE_MAX_SIZE = '100%';
 
-var log = function log() {
-  var _console;
-
-  for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-
-  if (debug) (_console = console).log.apply(_console, ['SplitPane'].concat(args));
-};
-
 var ColumnStyle = _glamorous2.default.div({
   display: 'flex',
+  height: '100%',
+  flexDirection: 'column',
   flex: 1,
-  height: '100%',
   outline: 'none',
   overflow: 'hidden',
-  userSelect: 'text',
-
-  flexDirection: 'column',
-  minHeight: '100%',
-  width: '100%'
+  userSelect: 'text'
 });
@@ -73,24 +61,11 @@
   display: 'flex',
+  height: '100%',
+  flexDirection: 'row',
   flex: 1,
-  height: '100%',
   outline: 'none',
   overflow: 'hidden',
-  userSelect: 'text',
-
-  flexDirection: 'row'
+  userSelect: 'text'
 });
 
-var paneSize = function paneSize(split, dimensions, splitPaneDimensions) {
-  //console.log(`paneSize:`, split, dimensions, splitPaneDimensions);
-  var sizes = dimensions.map(function (dimension) {
-    return (split === 'vertical' ? dimension.width : dimension.height).toFixed(2);
-  });
-
-  var ratios = dimensions.map(function (dimension) {
-    return split === 'vertical' ? Math.round((dimension.width / splitPaneDimensions.width).toFixed(4) * 100) : Math.round((dimension.height / splitPaneDimensions.height).toFixed(4) * 100);
-  });
-  return { sizes: sizes, ratios: ratios };
-};
-
-var convert = function convert(str, size) {
+function convert(str, size) {
   var tokens = str.match(/([0-9]+)([px|%]*)/);
@@ -100,5 +75,5 @@ var value = tokens[1];
   return toPx(value, unit, size);
-};
+}
 
-var toPx = function toPx(value) {
+function toPx(value) {
   var unit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'px';
@@ -110,3 +85,3 @@ var size = arguments[2];
       {
-        return (size * value / 100).toFixed(2);
+        return +(size * value / 100).toFixed(2);
       }
@@ -118,4 +93,45 @@ default:
   }
-};
+}
 
+function getUnit(size) {
+  if (size.endsWith('px')) {
+    return 'px';
+  }
+
+  if (size.endsWith('%')) {
+    return '%';
+  }
+
+  return 'ratio';
+}
+
+function convertSizeToCssValue(value, resizersSize) {
+  if (getUnit(value) !== '%') {
+    return value;
+  }
+
+  if (!resizersSize) {
+    return value;
+  }
+
+  var idx = value.search('%');
+  var percent = value.slice(0, idx) / 100;
+  if (percent === 0) {
+    return value;
+  }
+
+  return 'calc(' + value + ' - ' + resizersSize + 'px*' + percent + ')';
+}
+
+function convertToUnit(size, unit, containerSize) {
+  switch (unit) {
+    case '%':
+      return (size / containerSize * 100).toFixed(2) + '%';
+    case 'px':
+      return size.toFixed(2) + 'px';
+    case 'ratio':
+      return (size * 100).toFixed(0);
+  }
+}
+
 var SplitPane = function (_Component) {
@@ -129,23 +145,94 @@ _inherits(SplitPane, _Component);
 
-    log('constructor');
-    _this.onMouseDown = _this.onMouseDown.bind(_this);
-    _this.onMouseMove = _this.onMouseMove.bind(_this);
-    _this.onMouseUp = _this.onMouseUp.bind(_this);
-    _this.onTouchStart = _this.onTouchStart.bind(_this);
-    _this.onTouchMove = _this.onTouchMove.bind(_this);
-    _this.onMove = _this.onMove.bind(_this);
-    _this.onDown = _this.onDown.bind(_this);
-    _this.calculateSize = _this.calculateSize.bind(_this);
-    _this.resize = _this.resize.bind(_this);
+    _this.onMouseDown = function (event, resizerIndex) {
+      if (event.button !== 0) {
+        return;
+      }
 
-    var paneCount = props.children.length;
+      event.preventDefault();
+
+      _this.onDown(resizerIndex, event.clientX, event.clientY);
+    };
+
+    _this.onTouchStart = function (event, resizerIndex) {
+      event.preventDefault();
+
+      var _event$touches$ = event.touches[0],
+          clientX = _event$touches$.clientX,
+          clientY = _event$touches$.clientY;
+
+
+      _this.onDown(resizerIndex, clientX, clientY);
+    };
+
+    _this.onDown = function (resizerIndex, clientX, clientY) {
+      var _this$props = _this.props,
+          allowResize = _this$props.allowResize,
+          onResizeStart = _this$props.onResizeStart,
+          split = _this$props.split;
+
+
+      if (!allowResize) {
+        return;
+      }
+
+      _this.resizerIndex = resizerIndex;
+      _this.dimensionsSnapshot = _this.getDimensionsSnapshot(_this.props);
+      _this.startClientX = clientX;
+      _this.startClientY = clientY;
+
+      document.addEventListener('mousemove', _this.onMouseMove);
+      document.addEventListener('mouseup', _this.onMouseUp);
+
+      document.addEventListener('touchmove', _this.onTouchMove);
+      document.addEventListener('touchend', _this.onMouseUp);
+      document.addEventListener('touchcancel', _this.onMouseUp);
+
+      if (onResizeStart) {
+        onResizeStart();
+      }
+    };
+
+    _this.onMouseMove = function (event) {
+      event.preventDefault();
+
+      _this.onMove(event.clientX, event.clientY);
+    };
+
+    _this.onTouchMove = function (event) {
+      event.preventDefault();
+
+      var _event$touches$2 = event.touches[0],
+          clientX = _event$touches$2.clientX,
+          clientY = _event$touches$2.clientY;
+
+
+      _this.onMove(clientX, clientY);
+    };
+
+    _this.onMouseUp = function (event) {
+      event.preventDefault();
+
+      document.removeEventListener('mouseup', _this.onMouseUp);
+      document.removeEventListener('mousemove', _this.onMouseMove);
+
+      document.removeEventListener('touchmove', _this.onTouchMove);
+      document.removeEventListener('touchend', _this.onMouseUp);
+      document.addEventListener('touchcancel', _this.onMouseUp);
+
+      if (_this.props.onResizeEnd) {
+        _this.props.onResizeEnd(_this.state.sizes);
+      }
+    };
+
+    _this.setPaneRef = function (idx, el) {
+      if (!_this.paneElements) {
+        _this.paneElements = [];
+      }
+
+      _this.paneElements[idx] = el;
+    };
+
     _this.state = {
-      useInitial: true,
-      resized: true,
-      active: false,
-      dimensions: [],
-      sizes: [],
-      ratios: Array(paneCount).fill((100 / paneCount).toFixed(2))
+      sizes: _this.getPanePropSize(props)
     };
-    _this.resizeTimer = undefined;
     return _this;
@@ -155,138 +242,68 @@ }
   _createClass(SplitPane, [{
-    key: 'resize',
-    value: function resize() {
-      var _this2 = this;
-
-      clearTimeout(this.resizeTimer);
-      this.resizeTimer = setTimeout(function () {
-        _this2.calculateSize();
-      }, 100);
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      this.setState({ sizes: this.getPanePropSize(nextProps) });
     }
   }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      log('componentDidMount');
-      document.addEventListener('mouseup', this.onMouseUp);
-      document.addEventListener('mousemove', this.onMouseMove);
-      document.addEventListener('touchmove', this.onTouchMove);
-      window.addEventListener('resize', this.resize);
-      this.calculateSize();
-
-      var minSizes = this.getPaneProp('minSize');
-      var maxSizes = this.getPaneProp('maxSize');
-
-      log('min, max sizes', minSizes, maxSizes);
-      this.setState({
-        minSizes: minSizes,
-        maxSizes: maxSizes
-      });
-    }
-  }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
-      log('componentWillUnmount');
       document.removeEventListener('mouseup', this.onMouseUp);
       document.removeEventListener('mousemove', this.onMouseMove);
+
       document.removeEventListener('touchmove', this.onTouchMove);
-      window.removeEventListener('resize', this.resize);
+      document.removeEventListener('touchend', this.onMouseUp);
     }
   }, {
-    key: 'onMouseDown',
-    value: function onMouseDown(event, resizerIndex) {
-      log('onMouseDown', resizerIndex);
-      this.onDown();
-      this.setState({
-        resizerIndex: resizerIndex
+    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);
       });
-    }
-  }, {
-    key: 'onTouchStart',
-    value: function onTouchStart(event, resizerIndex) {
-      log('onTouchStart', resizerIndex);
-      this.onDown();
-      this.setState({
-        resizerIndex: resizerIndex
+      var maxSizesPx = maxSizes.map(function (s) {
+        return convert(s, splitPaneSizePx);
       });
-    }
-  }, {
-    key: 'onDown',
-    value: function onDown() {
-      log('onDown');
-      var _props$allowResize = this.props.allowResize,
-          allowResize = _props$allowResize === undefined ? true : _props$allowResize;
+      var sizesPx = paneDimensions.map(function (d) {
+        return split === 'vertical' ? d.width : d.height;
+      });
 
-      if (allowResize) {
-        this.setState({
-          active: true,
-          resized: false
-        });
-      }
+      return {
+        resizersSize: resizersSize,
+        paneDimensions: paneDimensions,
+        splitPaneSizePx: splitPaneSizePx,
+        minSizesPx: minSizesPx,
+        maxSizesPx: maxSizesPx,
+        sizesPx: sizesPx
+      };
     }
   }, {
-    key: 'onMouseMove',
-    value: function onMouseMove(event) {
-      this.onMove(event.clientX, event.clientY);
-    }
-  }, {
-    key: 'onTouchMove',
-    value: function onTouchMove(event) {
-      this.onMove(event.touches[0].clientX, event.touches[0].clientY);
-    }
-  }, {
-    key: 'onMouseUp',
-    value: function onMouseUp() {
-      log('onMouseUp');
-      var split = this.props.split;
-      var active = this.state.active;
+    key: 'getPanePropSize',
+    value: function getPanePropSize(props) {
+      return _react2.default.Children.map(props.children, function (child) {
+        var value = child.props['size'] || child.props['initialSize'];
+        if (value === undefined) {
+          return DEFAULT_PANE_SIZE;
+        }
 
-      var dimensions = this.getPaneDimensions();
-      var node = (0, _reactDom.findDOMNode)(this.splitPane);
-      var splitPaneDimensions = (0, _reactDom.findDOMNode)(node).getBoundingClientRect();
-
-      var _paneSize = paneSize(split, dimensions, splitPaneDimensions),
-          ratios = _paneSize.ratios,
-          sizes = _paneSize.sizes;
-
-      if (active) {
-        this.setState({
-          active: false,
-          dimensions: dimensions,
-          sizes: sizes,
-          ratios: ratios
-        });
-      }
+        return String(value);
+      });
     }
   }, {
-    key: 'calculateSize',
-    value: function calculateSize() {
-      log('calculateSize', this.state);
-      var split = this.props.split;
+    key: 'getPanePropMinMaxSize',
+    value: function getPanePropMinMaxSize(props, key) {
+      return _react2.default.Children.map(props.children, function (child) {
+        var value = child.props[key];
+        if (value === undefined) {
+          return key === 'maxSize' ? DEFAULT_PANE_MAX_SIZE : DEFAULT_PANE_MIN_SIZE;
+        }
 
-      var dimensions = this.getPaneDimensions();
-
-      var node = (0, _reactDom.findDOMNode)(this.splitPane);
-      if (node) {
-        var splitPaneDimensions = (0, _reactDom.findDOMNode)(node).getBoundingClientRect();
-
-        var _paneSize2 = paneSize(split, dimensions, splitPaneDimensions),
-            ratios = _paneSize2.ratios,
-            sizes = _paneSize2.sizes;
-
-        this.setState({
-          useInitial: false,
-          resized: true,
-          dimensions: dimensions,
-          sizes: sizes,
-          ratios: ratios
-        });
-      }
-    }
-  }, {
-    key: 'getPaneProp',
-    value: function getPaneProp(key) {
-      var refs = this.refs;
-      return Object.keys(refs).filter(function (ref) {
-        return ref.startsWith('Pane');
-      }).map(function (ref) {
-        return refs[ref].props[key];
+        return value;
       });
@@ -297,18 +314,12 @@ }
     value: function getPaneDimensions() {
-      var refs = this.refs;
-      return Object.keys(refs).filter(function (ref) {
-        return ref.startsWith('Pane');
-      }).map(function (ref) {
-        return (0, _reactDom.findDOMNode)(refs[ref]).getBoundingClientRect();
+      return this.paneElements.filter(function (el) {
+        return el;
+      }).map(function (el) {
+        return el.getBoundingClientRect();
       });
     }
   }, {
-    key: 'getResizerDimensions',
-    value: function getResizerDimensions() {
-      var refs = this.refs;
-      return Object.keys(refs).filter(function (ref) {
-        return ref.startsWith('Resizer');
-      }).map(function (ref) {
-        return (0, _reactDom.findDOMNode)(refs[ref]).getBoundingClientRect();
-      });
+    key: 'getSizes',
+    value: function getSizes() {
+      return this.state.sizes;
     }
@@ -320,84 +331,103 @@ }, {
           split = _props.split,
-          resizerSize = _props.resizerSize;
-      var _state = this.state,
-          active = _state.active,
-          dimensions = _state.dimensions,
-          resizerIndex = _state.resizerIndex,
-          minSizes = _state.minSizes,
-          maxSizes = _state.maxSizes;
+          onChange = _props.onChange;
 
+      var resizerIndex = this.resizerIndex;
+      var _dimensionsSnapshot = this.dimensionsSnapshot,
+          sizesPx = _dimensionsSnapshot.sizesPx,
+          minSizesPx = _dimensionsSnapshot.minSizesPx,
+          maxSizesPx = _dimensionsSnapshot.maxSizesPx,
+          splitPaneSizePx = _dimensionsSnapshot.splitPaneSizePx,
+          paneDimensions = _dimensionsSnapshot.paneDimensions;
 
-      if (active) {
-        log('onMove ' + clientX + ',' + clientY, this.state);
-        var node = (0, _reactDom.findDOMNode)(this.splitPane);
-        var splitPaneDimensions = (0, _reactDom.findDOMNode)(node).getBoundingClientRect();
-        var resizerDimensions = this.getResizerDimensions()[resizerIndex];
 
-        var primary = dimensions[resizerIndex];
-        var secondary = dimensions[resizerIndex + 1];
+      var sizeDim = split === 'vertical' ? 'width' : 'height';
+      var primary = paneDimensions[resizerIndex];
+      var secondary = paneDimensions[resizerIndex + 1];
+      var maxSize = primary[sizeDim] + secondary[sizeDim];
 
-        if (split === 'vertical' && clientX >= primary.left && clientX <= secondary.right || split !== 'vertical' && clientY >= primary.top && clientY <= secondary.bottom) {
-          this.setState(function (state) {
-            var primarySize = void 0;
-            var secondarySize = void 0;
-            var splitPaneSize = void 0;
+      var primaryMinSizePx = minSizesPx[resizerIndex];
+      var secondaryMinSizePx = minSizesPx[resizerIndex + 1];
+      var primaryMaxSizePx = Math.min(maxSizesPx[resizerIndex], maxSize);
+      var secondaryMaxSizePx = Math.min(maxSizesPx[resizerIndex + 1], maxSize);
 
-            if (split === 'vertical') {
+      var moveOffset = split === 'vertical' ? this.startClientX - clientX : this.startClientY - clientY;
 
-              var resizerLeft = clientX - resizerSize / 2;
-              var resizerRight = clientX + resizerSize / 2;
+      var primarySizePx = primary[sizeDim] - moveOffset;
+      var secondarySizePx = secondary[sizeDim] + moveOffset;
 
-              primarySize = resizerLeft - primary.left;
-              secondarySize = secondary.right - resizerRight;
-              splitPaneSize = splitPaneDimensions.width;
-            } else {
+      var primaryHasReachedLimit = false;
+      var secondaryHasReachedLimit = false;
 
-              var resizerTop = clientY - resizerSize / 2;
-              var resizerBottom = clientY + resizerSize / 2;
+      if (primarySizePx < primaryMinSizePx) {
+        primarySizePx = primaryMinSizePx;
+        primaryHasReachedLimit = true;
+      } else if (primarySizePx > primaryMaxSizePx) {
+        primarySizePx = primaryMaxSizePx;
+        primaryHasReachedLimit = true;
+      }
 
-              primarySize = resizerTop - primary.top;
-              secondarySize = secondary.bottom - resizerBottom;
-              splitPaneSize = splitPaneDimensions.height;
-            }
+      if (secondarySizePx < secondaryMinSizePx) {
+        secondarySizePx = secondaryMinSizePx;
+        secondaryHasReachedLimit = true;
+      } else if (secondarySizePx > secondaryMaxSizePx) {
+        secondarySizePx = secondaryMaxSizePx;
+        secondaryHasReachedLimit = true;
+      }
 
-            var primaryMinSize = convert(minSizes[resizerIndex], splitPaneSize);
-            var secondaryMinSize = convert(minSizes[resizerIndex + 1], splitPaneSize);
+      if (primaryHasReachedLimit) {
+        secondarySizePx = primary[sizeDim] + secondary[sizeDim] - primarySizePx;
+      } else if (secondaryHasReachedLimit) {
+        primarySizePx = primary[sizeDim] + primary[sizeDim] - secondarySizePx;
+      }
 
-            var primaryMaxSize = convert(maxSizes[resizerIndex], splitPaneSize);
-            var secondaryMaxSize = convert(maxSizes[resizerIndex + 1], splitPaneSize);
+      sizesPx[resizerIndex] = primarySizePx;
+      sizesPx[resizerIndex + 1] = secondarySizePx;
 
-            var numResizers = resizerDimensions.length;
-            var totalResizerSize = numResizers * resizerSize;
+      var sizes = this.getSizes().concat();
+      var updateRatio = void 0;
 
-            if (primaryMinSize <= primarySize && primaryMaxSize >= primarySize && secondaryMinSize <= secondarySize && secondaryMaxSize >= secondarySize) {
-              var primaryRatio = (primarySize / (splitPaneSize - totalResizerSize)).toFixed(4) * 100;
-              var secondaryRatio = (secondarySize / (splitPaneSize - totalResizerSize)).toFixed(4) * 100;
+      [primarySizePx, secondarySizePx].forEach(function (paneSize, idx) {
+        var unit = getUnit(sizes[resizerIndex + idx]);
+        if (unit !== 'ratio') {
+          sizes[resizerIndex + idx] = convertToUnit(paneSize, unit, splitPaneSizePx);
+        } else {
+          updateRatio = true;
+        }
+      });
 
-              var ratios = state.ratios,
-                  sizes = state.sizes;
+      if (updateRatio) {
+        var ratioCount = 0;
+        var lastRatioIdx = void 0;
+        sizes = sizes.map(function (size, idx) {
+          if (getUnit(size) === 'ratio') {
+            ratioCount++;
+            lastRatioIdx = idx;
 
+            return convertToUnit(sizesPx[idx], 'ratio');
+          }
 
-              sizes[resizerIndex] = primarySize;
-              sizes[resizerIndex + 1] = secondarySize;
+          return size;
+        });
 
-              ratios[resizerIndex] = primaryRatio;
-              ratios[resizerIndex + 1] = secondaryRatio;
-
-              return _extends({
-                useInitial: false,
-                ratios: ratios,
-                sizes: sizes
-              }, state);
-            }
-            return state;
-          });
+        if (ratioCount === 1) {
+          sizes[lastRatioIdx] = '1';
         }
       }
+
+      onChange && onChange(sizes);
+
+      this.setState({
+        sizes: sizes
+      });
     }
   }, {
+    key: 'getResizersSize',
+    value: function getResizersSize() {
+      return (_react2.default.Children.count(this.props.children) - 1) * this.props.resizerSize;
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _this3 = this;
+      var _this2 = this;
 
-      log('render', this.state);
       var _props2 = this.props,
@@ -407,32 +437,23 @@ children = _props2.children,
           split = _props2.split;
-      var _state2 = this.state,
-          ratios = _state2.ratios,
-          sizes = _state2.sizes,
-          resized = _state2.resized,
-          useInitial = _state2.useInitial;
 
+      var sizes = this.getSizes();
+      var resizersSize = this.getResizersSize();
 
-      var paneIndex = 0;
-      var resizerIndex = 0;
-
-      var elements = children.reduce(function (acc, child) {
-        var size = sizes[paneIndex] ? sizes[paneIndex] : 0;
+      var elements = children.reduce(function (acc, child, idx) {
         var pane = void 0;
+        var resizerIndex = idx - 1;
         var isPane = child.type === _Pane2.default;
         var paneProps = {
-          index: paneIndex,
+          index: idx,
           'data-type': 'Pane',
-          size: size,
           split: split,
-          ratio: ratios[paneIndex],
-          key: 'Pane-' + paneIndex,
-          ref: 'Pane-' + paneIndex,
-          resized: resized,
-          useInitial: useInitial
+          key: 'Pane-' + idx,
+          innerRef: _this2.setPaneRef,
+          resizersSize: resizersSize,
+          size: sizes[idx]
         };
+
         if (isPane) {
-          log('clone Pane');
           pane = (0, _react.cloneElement)(child, paneProps);
         } else {
-          log('wrap with Pane');
           pane = _react2.default.createElement(
@@ -444,3 +465,3 @@ _Pane2.default,
         }
-        paneIndex++;
+
         if (acc.length === 0) {
@@ -452,9 +473,7 @@ return [].concat(_toConsumableArray(acc), [pane]);
             key: 'Resizer-' + resizerIndex,
-            ref: 'Resizer-' + resizerIndex,
             split: split,
-            onMouseDown: _this3.onMouseDown,
-            onTouchStart: _this3.onTouchStart,
-            onTouchEnd: _this3.onMouseUp
+            onMouseDown: _this2.onMouseDown,
+            onTouchStart: _this2.onTouchStart
           });
-          resizerIndex++;
+
           return [].concat(_toConsumableArray(acc), [resizer, pane]);
@@ -464,29 +483,16 @@ }
 
-      if (split === 'vertical') {
-        return _react2.default.createElement(
-          RowStyle,
-          {
-            className: className,
-            'data-type': 'SplitPane',
-            'data-split': split,
-            ref: function ref(splitPane) {
-              return _this3.splitPane = splitPane;
-            }
-          },
-          elements
-        );
-      } else {
-        return _react2.default.createElement(
-          ColumnStyle,
-          {
-            className: className,
-            'data-type': 'SplitPane',
-            'data-split': split,
-            ref: function ref(splitPane) {
-              return _this3.splitPane = splitPane;
-            }
-          },
-          elements
-        );
-      }
+      var StyleComponent = split === 'vertical' ? RowStyle : ColumnStyle;
+
+      return _react2.default.createElement(
+        StyleComponent,
+        {
+          className: className,
+          'data-type': 'SplitPane',
+          'data-split': split,
+          innerRef: function innerRef(el) {
+            _this2.splitPane = el;
+          }
+        },
+        elements
+      );
     }
@@ -502,3 +508,6 @@ }]);
   split: _propTypes2.default.oneOf(['vertical', 'horizontal']),
-  resizerSize: _propTypes2.default.number
+  resizerSize: _propTypes2.default.number,
+  onChange: _propTypes2.default.func,
+  onResizeStart: _propTypes2.default.func,
+  onResizeEnd: _propTypes2.default.func
 };
@@ -508,6 +517,6 @@
   split: 'vertical',
-  resizerSize: 1
+  resizerSize: 1,
+  allowResize: true
 };
 
-exports.default = SplitPane;
-module.exports = exports['default'];
+exports.default = SplitPane;

package.json

@@ -6,3 +6,3 @@ {
   "types": "index.d.ts",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "repository": {
@@ -54,2 +54,3 @@ "type": "git",
     "react-dom": "^16.2.0",
+    "sinon": "^5.0.7",
     "surge": "^0.19.0",
@@ -65,3 +66,2 @@ "typescript": "^2.6.2",
     "compile:watch": "babel -w -d lib/ src/",
-    "prepublish": "npm run compile",
     "test": "npm run compile && mochify -R spec",
@@ -75,3 +75,4 @@ "test:watch": "npm run compile:watch & mochify -R spec --watch",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "release:patch": "npm test && npm version patch && git push && npm publish --tag next"
   },
@@ -78,0 +79,0 @@ "browserify": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7292694

increased by89.92%

Number of package files

27

increased by8%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

25

increased by4.17%

Lines of code

687

decreased by-4.98%

No dependency changes