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

Comparing version 0.0.2 to 0.0.3

index.js

 module.exports = {
-  SplitPane: require('./lib/SplitPane'),
+  SplitPane: require('./lib/SplitPane').default,
   Pane: require('./lib/Pane')
 };

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: -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']);
+    _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']);
 
@@ -14,0 +14,0 @@ var _react = require('react');

lib/SplitPane.js

@@ -57,3 +57,6 @@ 'use strict';
   minHeight: '100%',
-  width: '100%'
+  width: '100%',
+  '& > *': {
+    boxSizing: 'border-box'
+  }
 });
@@ -69,3 +72,2 @@
   userSelect: 'text'
-
 });
@@ -119,3 +121,3 @@
     case "ratio":
-      return size.toFixed(2) * 100;
+      return (size * 100).toFixed(0);
   }
@@ -313,14 +315,8 @@ }
       if (split === 'vertical') {
-        var resizerLeft = clientX - resizerSize / 2;
-        var resizerRight = clientX + resizerSize / 2;
-
-        primarySizePx = resizerLeft - primary.left;
-        secondarySizePx = secondary.right - resizerRight;
+        primarySizePx = clientX - primary.left;
+        secondarySizePx = secondary.right - clientX;
         splitPaneSizePx = splitPaneDimensions.width;
       } else {
-        var resizerTop = clientY - resizerSize / 2;
-        var resizerBottom = clientY + resizerSize / 2;
-
-        primarySizePx = resizerTop - primary.top;
-        secondarySizePx = secondary.bottom - resizerBottom;
+        primarySizePx = clientY - primary.top;
+        secondarySizePx = secondary.bottom - clientY;
         splitPaneSizePx = splitPaneDimensions.height;
@@ -332,4 +328,2 @@ }
 
-      // const sizesPx = [primarySizePx, secondarySizePx];
-
       var primaryMinSizePx = convert(minSizes[resizerIndex], splitPaneSizePx);
@@ -372,3 +366,3 @@ var secondaryMinSizePx = convert(minSizes[resizerIndex + 1], splitPaneSizePx);
         if (ratioCount === 1) {
-          sizes[lastRatioIdx] = 1;
+          sizes[lastRatioIdx] = '1';
         }
@@ -375,0 +369,0 @@ }

package.json

 {
   "name": "react-split-pane-refined",
-  "description": "React split-pane component",
+  "description": "Fork of React split-pane component",
   "main": "index.js",
   "types": "index.d.ts",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "repository": {
     "type": "git",
-    "url": "https://github.com/tomkp/react-split-pane"
+    "url": "https://github.com/walerun/react-split-pane"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/tomkp/react-split-pane"
+    "url": "https://github.com/walerun/react-split-pane"
   },
-  "homepage": "https://github.com/tomkp/react-split-pane",
+  "homepage": "https://github.com/walerun/react-split-pane",
   "author": "tomkp <[e-mail]>",
@@ -17,0 +17,0 @@ "keywords": [

lib/Layout.js

-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-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; }; }();
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _propTypes = require("prop-types");
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _Pane = require("./Pane");
-
-var _Pane2 = _interopRequireDefault(_Pane);
-
-var _SplitPane = require("./SplitPane");
-
-var _SplitPane2 = _interopRequireDefault(_SplitPane);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-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; }
-
-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; }
-
-var TileLayout = function (_Component) {
-  _inherits(TileLayout, _Component);
-
-  function TileLayout() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, TileLayout);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TileLayout.__proto__ || Object.getPrototypeOf(TileLayout)).call.apply(_ref, [this].concat(args))), _this), _this.onChange = function (path, sizes) {
-      var _this$props = _this.props,
-          value = _this$props.value,
-          onChange = _this$props.onChange;
-
-      var newValue = _extends({}, value);
-
-      var idx = 0;
-      var node = newValue;
-      while (idx < path.length) {
-        node = node.panes[path[idx]];
-        idx++;
-      }
-
-      // update sizes
-      var newPanes = node.panes.map(function (pane, idx) {
-        return _extends({}, pane, {
-          size: sizes[idx]
-        });
-      });
-      node.panes = newPanes;
-
-      onChange && onChange(newValue);
-    }, _this.onResizeStart = function (path, index) {
-      _this.props.onResizeStart && _this.props.onResizeStart(index, path);
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  _createClass(TileLayout, [{
-    key: "renderRecursively",
-    value: function renderRecursively(node, path) {
-      var _this2 = this;
-
-      if (node.panes) {
-        var split = node.direction === "column" ? "vertical" : "horizontal";
-        var panes = node.panes.map(function (config, idx) {
-          var size = config.size,
-              maxSize = config.maxSize,
-              minSize = config.minSize;
-
-
-          var p = path.concat(idx);
-
-          return _react2.default.createElement(
-            _Pane2.default,
-            { key: p, size: size, maxSize: maxSize, minSize: minSize },
-            _this2.renderRecursively(config, p)
-          );
-        });
-
-        return _react2.default.createElement(
-          _SplitPane2.default,
-          {
-            split: split,
-            onChange: this.onChange.bind(null, path),
-            onResizeStart: this.onResizeStart.bind(null, path),
-            onResizeEnd: this.props.onResizeEnd,
-            controlled: true
-          },
-          panes
-        );
-      }
-
-      return this.props.renderTile(node.id, path);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.renderRecursively(this.props.value, []);
-    }
-  }]);
-
-  return TileLayout;
-}(_react.Component);
-
-TileLayout.propTypes = {
-  renderTile: _propTypes2.default.func,
-  onChange: _propTypes2.default.func,
-  value: _propTypes2.default.object
-};
-exports.default = TileLayout;
-module.exports = exports["default"];

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

87003

-5.65%

Number of package files

23

-4.17%

Lines of code

1100

-8.26%

No dependency changes