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

Comparing version 2.0.0-beta.0 to 2.0.0-beta.1

lib/Pane.js

@@ -31,82 +31,39 @@ 'use strict';
 
-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 initialSize = _ref3.initialSize,
-      size = _ref3.size,
-      minSize = _ref3.minSize,
-      maxSize = _ref3.maxSize;
-
-  var value = size ? size : initialSize;
-
   var style = {
-    minWidth: minSize,
-    maxWidth: maxSize,
     display: 'flex',
-    outline: 'none',
-    position: 'relative'
+    outline: 'none'
   };
 
-  if ((0, _SplitPane.getUnit)(value) === "ratio") {
-    style.flex = value;
-  } else {
-    style.flexGrow = 0;
-    style.width = value;
-  }
+  style[styleProp.minSize] = (0, _SplitPane.convertSizeToCssValue)(minSize, resizersSize);
+  style[styleProp.maxSize] = (0, _SplitPane.convertSizeToCssValue)(maxSize, resizersSize);
 
-  return style;
-};
-
-var ColumnFlex = function ColumnFlex(_ref4) {
-  var initialSize = _ref4.initialSize,
-      size = _ref4.size,
-      minSize = _ref4.minSize,
-      maxSize = _ref4.maxSize;
-
-  var value = size ? size : initialSize;
-
-  var style = {
-    minHeight: minSize,
-    maxHeight: maxSize,
-    display: 'flex',
-    outline: 'none',
-    flexShrink: 1,
-    position: 'relative'
-  };
-
-  if ((0, _SplitPane.getUnit)(value) === "ratio") {
-    style.flex = value;
-  } else {
-    style.flexGrow = 0;
-    style.height = value;
+  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;
-};
+}
 
@@ -127,15 +84,6 @@ var Pane = function (_PureComponent) {
           children = _props.children,
-          className = _props.className,
-          split = _props.split,
-          useInitial = _props.useInitial;
+          className = _props.className;
 
+      var prefixedStyle = (0, _static2.default)(PaneStyle(this.props));
 
-      var prefixedStyle = void 0;
-
-      if (split === 'vertical') {
-        prefixedStyle = (0, _static2.default)(RowFlex(this.props));
-      } else {
-        prefixedStyle = (0, _static2.default)(ColumnFlex(this.props));
-      }
-
       return _react2.default.createElement(
@@ -142,0 +90,0 @@ 'div',

lib/Resizer.js

@@ -10,4 +10,4 @@ 'use strict';
 var _templateObject = _taggedTemplateLiteral(['\n  background: #000;\n  opacity: 0.2;\n  z-index: 1;\n  box-sizing: border-box;\n  background-clip: padding-box;\n\n  :hover {\n    transition: all 2s ease;\n  }\n'], ['\n  background: #000;\n  opacity: 0.2;\n  z-index: 1;\n  box-sizing: border-box;\n  background-clip: padding-box;\n\n  :hover {\n    transition: all 2s ease;\n  }\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  height: 11px;\n  margin: -5.5px 0;\n  border-top: 5px solid rgba(255, 255, 255, 0);\n  border-bottom: 5px solid rgba(255, 255, 255, 0);\n  cursor: row-resize;\n  width: 100%;\n\n  :hover {\n    border-top: 5px solid rgba(0, 0, 0, 0.5);\n    border-bottom: 5px solid rgba(0, 0, 0, 0.5);\n  }\n\n  .disabled {\n    cursor: not-allowed;\n  }\n  .disabled:hover {\n    border-color: transparent;\n  }\n'], ['\n  height: 11px;\n  margin: -5.5px 0;\n  border-top: 5px solid rgba(255, 255, 255, 0);\n  border-bottom: 5px solid rgba(255, 255, 255, 0);\n  cursor: row-resize;\n  width: 100%;\n\n  :hover {\n    border-top: 5px solid rgba(0, 0, 0, 0.5);\n    border-bottom: 5px solid rgba(0, 0, 0, 0.5);\n  }\n\n  .disabled {\n    cursor: not-allowed;\n  }\n  .disabled:hover {\n    border-color: transparent;\n  }\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  width: 11px;\n  margin: 0 -5.5px;\n  border-left: 5px solid rgba(255, 255, 255, 0);\n  border-right: 5px solid rgba(255, 255, 255, 0);\n  cursor: col-resize;\n\n  :hover {\n    border-left: 5px solid rgba(0, 0, 0, 0.5);\n    border-right: 5px solid rgba(0, 0, 0, 0.5);\n  }\n  .disabled {\n    cursor: not-allowed;\n  }\n  .disabled:hover {\n    border-color: transparent;\n  }\n'], ['\n  width: 11px;\n  margin: 0 -5.5px;\n  border-left: 5px solid rgba(255, 255, 255, 0);\n  border-right: 5px solid rgba(255, 255, 255, 0);\n  cursor: col-resize;\n\n  :hover {\n    border-left: 5px solid rgba(0, 0, 0, 0.5);\n    border-right: 5px solid rgba(0, 0, 0, 0.5);\n  }\n  .disabled {\n    cursor: not-allowed;\n  }\n  .disabled:hover {\n    border-color: transparent;\n  }\n']);
+    _templateObject2 = _taggedTemplateLiteral(['\n  height: 11px;\n  margin: -5px 0;\n  border-top: 5px solid rgba(255, 255, 255, 0);\n  border-bottom: 5px solid rgba(255, 255, 255, 0);\n  cursor: row-resize;\n  width: 100%;\n\n  :hover {\n    border-top: 5px solid rgba(0, 0, 0, 0.5);\n    border-bottom: 5px solid rgba(0, 0, 0, 0.5);\n  }\n\n  .disabled {\n    cursor: not-allowed;\n  }\n  .disabled:hover {\n    border-color: transparent;\n  }\n'], ['\n  height: 11px;\n  margin: -5px 0;\n  border-top: 5px solid rgba(255, 255, 255, 0);\n  border-bottom: 5px solid rgba(255, 255, 255, 0);\n  cursor: row-resize;\n  width: 100%;\n\n  :hover {\n    border-top: 5px solid rgba(0, 0, 0, 0.5);\n    border-bottom: 5px solid rgba(0, 0, 0, 0.5);\n  }\n\n  .disabled {\n    cursor: not-allowed;\n  }\n  .disabled:hover {\n    border-color: transparent;\n  }\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  width: 11px;\n  margin: 0 -5px;\n  border-left: 5px solid rgba(255, 255, 255, 0);\n  border-right: 5px solid rgba(255, 255, 255, 0);\n  cursor: col-resize;\n\n  :hover {\n    border-left: 5px solid rgba(0, 0, 0, 0.5);\n    border-right: 5px solid rgba(0, 0, 0, 0.5);\n  }\n  .disabled {\n    cursor: not-allowed;\n  }\n  .disabled:hover {\n    border-color: transparent;\n  }\n'], ['\n  width: 11px;\n  margin: 0 -5px;\n  border-left: 5px solid rgba(255, 255, 255, 0);\n  border-right: 5px solid rgba(255, 255, 255, 0);\n  cursor: col-resize;\n\n  :hover {\n    border-left: 5px solid rgba(0, 0, 0, 0.5);\n    border-right: 5px solid rgba(0, 0, 0, 0.5);\n  }\n  .disabled {\n    cursor: not-allowed;\n  }\n  .disabled:hover {\n    border-color: transparent;\n  }\n']);
 
@@ -14,0 +14,0 @@ var _react = require('react');

lib/SplitPane.js

@@ -10,2 +10,3 @@ 'use strict';
 exports.getUnit = getUnit;
+exports.convertSizeToCssValue = convertSizeToCssValue;
 
@@ -58,6 +59,3 @@ var _react = require('react');
   minHeight: '100%',
-  width: '100%',
-  '& > *': {
-    boxSizing: 'border-box'
-  }
+  width: '100%'
 });
@@ -89,3 +87,3 @@
       {
-        return (size * value / 100).toFixed(2);
+        return +(size * value / 100).toFixed(2);
       }
@@ -115,3 +113,21 @@ default:
 
-function convertUnits(size, unit, containerSize) {
+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) {
@@ -162,4 +178,5 @@ case "%":
       _this.dimensions = _this.getPaneDimensions();
-      _this.container = (0, _reactDom.findDOMNode)(_this.splitPane).getBoundingClientRect();
+      _this.container = _this.splitPane.getBoundingClientRect();
       _this.resizerIndex = resizerIndex;
+      _this.resizersSize = _this.getResizersSize();
 
@@ -246,2 +263,8 @@ document.addEventListener('mousemove', _this.onMouseMove);
   }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      // todo: if there are percentage panes
+      this.forceUpdate();
+    }
+  }, {
     key: 'getPanePropSize',
@@ -309,23 +332,7 @@ value: function getPanePropSize(props) {
 
-      if (split === 'vertical' && (clientX < primary.left || clientX > secondary.right) || split !== 'vertical' && (clientY < primary.top || clientY > secondary.bottom)) {
-        return;
-      }
+      var splitPaneSizePx = split === "vertical" ? splitPaneDimensions.width - this.resizersSize : splitPaneDimensions.height - this.resizersSize;
 
       var primarySizePx = void 0;
       var secondarySizePx = void 0;
-      var splitPaneSizePx = void 0;
 
-      if (split === 'vertical') {
-        primarySizePx = clientX - primary.left;
-        secondarySizePx = secondary.right - clientX;
-        splitPaneSizePx = splitPaneDimensions.width;
-      } else {
-        primarySizePx = clientY - primary.top;
-        secondarySizePx = secondary.bottom - clientY;
-        splitPaneSizePx = splitPaneDimensions.height;
-      }
-
-      sizesPx[resizerIndex] = primarySizePx;
-      sizesPx[resizerIndex + 1] = secondarySizePx;
-
       var primaryMinSizePx = convert(minSizes[resizerIndex], splitPaneSizePx);
@@ -337,6 +344,34 @@ var secondaryMinSizePx = convert(minSizes[resizerIndex + 1], splitPaneSizePx);
 
-      if (primaryMinSizePx > primarySizePx || primaryMaxSizePx < primarySizePx || secondaryMinSizePx > secondarySizePx || secondaryMaxSizePx < secondarySizePx) {
-        return;
+      var resizerSize1 = resizerSize / 2;
+      var resizerSize2 = resizerSize / 2;
+
+      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);
+
+        clientX = clientX < mostLeft ? mostLeft : clientX;
+        clientX = clientX > mostRight ? mostRight : clientX;
+
+        var resizerLeft = clientX - resizerSize1;
+        var resizerRight = clientX + resizerSize2;
+
+        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);
+
+        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;
       }
 
+      sizesPx[resizerIndex] = primarySizePx;
+      sizesPx[resizerIndex + 1] = secondarySizePx;
+
       var panesSizes = [primarySizePx, secondarySizePx];
@@ -349,3 +384,3 @@ var sizes = this.getSizes().concat();
         if (unit !== "ratio") {
-          sizes[resizerIndex + idx] = convertUnits(paneSize, unit, splitPaneSizePx);
+          sizes[resizerIndex + idx] = convertToUnit(paneSize, unit, splitPaneSizePx);
         } else {
@@ -363,3 +398,3 @@ updateRatio = true;
             lastRatioIdx = idx;
-            return convertUnits(sizesPx[idx], "ratio");
+            return convertToUnit(sizesPx[idx], "ratio");
           }
@@ -382,2 +417,11 @@
   }, {
+    key: 'getResizersSize',
+    value: function getResizersSize() {
+      if (!this.resizerElements) {
+        return 0;
+      }
+
+      return this.resizerElements.length * this.props.resizerSize;
+    }
+  }, {
     key: 'render',
@@ -394,2 +438,4 @@ value: function render() {
 
+      var resizersSize = this.getResizersSize();
+
       var elements = children.reduce(function (acc, child, idx) {
@@ -404,3 +450,4 @@ var pane = void 0;
           key: 'Pane-' + idx,
-          ref: _this2.setPaneRef.bind(null, idx)
+          ref: _this2.setPaneRef.bind(null, idx),
+          resizersSize: resizersSize
         };
@@ -446,4 +493,4 @@
           'data-split': split,
-          ref: function ref(splitPane) {
-            return _this2.splitPane = splitPane;
+          innerRef: function innerRef(el) {
+            return _this2.splitPane = el;
           }
@@ -450,0 +497,0 @@ },

package.json

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

stories/index.stories.js

-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import SplitPane from '../lib/SplitPane';
-import Pane from "../lib/Pane";
-
-import { Button, Welcome } from '@storybook/react/demo';
-
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Vertical', module)
-  .add('with divs', () =>
-    <SplitPane split="vertical">
-      <div>This is a div</div>
-      <div>This is a div</div>
-    </SplitPane>
-  )
-  .add('with Panes', () =>
-    <SplitPane split="vertical">
-      <Pane>This is a Pane</Pane>
-      <Pane>This is a Pane</Pane>
-    </SplitPane>
-  );
-
-storiesOf('Horizontal', module)
-  .add('with divs', () =>
-    <SplitPane split="horizontal">
-      <div>This is a div</div>
-      <div>This is a div</div>
-    </SplitPane>
-  )
-  .add('with Panes', () =>
-    <SplitPane split="horizontal">
-      <Pane>This is a Pane</Pane>
-      <Pane>This is a Pane</Pane>
-    </SplitPane>
-  );

No alert changes

Worsened metrics

Total package byte prevSize

38108

-1%

Number of package files

8

-11.11%

Lines of code

620

-6.49%

No dependency changes