react-rnd - npm Package Compare versions

Comparing version 5.0.2 to 5.0.3

lib/index.js

@@ -6,4 +6,7 @@ 'use strict';
 });
-exports.default = undefined;
 
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
@@ -70,3 +73,5 @@
         left: 0
-      }
+      },
+      maxWidth: props.maxWidth,
+      maxHeight: props.maxHeight
     };
@@ -88,5 +93,5 @@ _this.onResizeStart = _this.onResizeStart.bind(_this);
       }
+      if (!this.props.bounds) return;
       var parent = this.wrapper && this.wrapper.parentNode;
       var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
-      if (!this.props.bounds) return;
       if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) return;
@@ -111,12 +116,2 @@ var targetRect = target.getBoundingClientRect();
   }, {
-    key: 'getResizableBounds',
-    value: function getResizableBounds() {
-      if (this.props.bounds === 'parent') {
-        if (!this.wrapper) return undefined;
-        if (!(this.wrapper.parentNode instanceof HTMLElement)) return undefined;
-        return this.wrapper.parentNode;
-      }
-      return document.querySelector(this.props.bounds);
-    }
-  }, {
     key: 'onDrag',
@@ -138,2 +133,3 @@ value: function onDrag(e, data) {
     value: function onResizeStart(e, dir, refToResizableElement) {
+      e.stopPropagation();
       this.setState({
@@ -143,6 +139,36 @@ disableDragging: true,
       });
+      if (this.props.bounds) {
+        var parent = this.wrapper && this.wrapper.parentNode;
+        var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
+        var self = this.wrapper;
+        if (target instanceof HTMLElement && parent instanceof HTMLElement) {
+          var selfRect = self.getBoundingClientRect();
+          var selfLeft = selfRect.left;
+          var selfTop = selfRect.top;
+          var targetRect = target.getBoundingClientRect();
+          var targetLeft = targetRect.left;
+          var targetTop = targetRect.top;
+          if (/left/i.test(dir)) {
+            var max = selfLeft - targetLeft + this.resizable.size.width;
+            this.setState({ maxWidth: max > this.props.maxWidth ? this.props.maxWidth : max });
+          }
+          if (/right/i.test(dir)) {
+            var _max = target.offsetWidth + (targetLeft - selfLeft);
+            this.setState({ maxWidth: _max > this.props.maxWidth ? this.props.maxWidth : _max });
+          }
+          if (/top/i.test(dir)) {
+            var _max2 = selfTop - targetTop + this.resizable.size.height;
+            this.setState({ maxHeight: _max2 > this.props.maxHeight ? this.props.maxHeight : _max2 });
+          }
+          if (/bottom/i.test(dir)) {
+            var _max3 = target.offsetHeight + (targetTop - selfTop);
+            this.setState({ maxHeight: _max3 > this.props.maxHeight ? this.props.maxHeight : _max3 });
+          }
+        }
+      } else {
+        this.setState({ maxWidth: this.props.maxWidth, maxHeight: this.props.maxHeight });
+      }
       if (this.props.onResizeStart) {
         this.props.onResizeStart(e, dir, refToResizableElement);
       }
-      e.stopPropagation();
     }
@@ -152,7 +178,26 @@ }, {
     value: function onResize(e, direction, refToResizableElement, delta) {
+      var parentLeft = 0;
+      var selfLeft = 0;
+      var parentTop = 0;
+      var selfTop = 0;
+      if (this.props.bounds) {
+        var parent = this.wrapper && this.wrapper.parentNode;
+        var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
+        var self = this.wrapper;
+        if (target instanceof HTMLElement && parent instanceof HTMLElement) {
+          var selfRect = self.getBoundingClientRect();
+          var parentRect = parent.getBoundingClientRect();
+          selfLeft = selfRect.left;
+          selfTop = selfRect.top;
+          parentLeft = parentRect.left;
+          parentTop = parentRect.top;
+        }
+      }
       if (/left/i.test(direction)) {
-        this.draggable.setState({ x: this.state.original.x - delta.width });
+        var _x = selfLeft >= parentLeft ? this.state.original.x - delta.width : parentLeft - selfLeft;
+        this.draggable.setState({ x: _x });
       }
       if (/top/i.test(direction)) {
-        this.draggable.setState({ y: this.state.original.y - delta.height });
+        var _y = selfTop >= parentTop ? this.state.original.y - delta.height : parentTop - selfTop;
+        this.draggable.setState({ y: _y });
       }
@@ -180,3 +225,3 @@ if (this.props.onResize) {
     value: function updateSize(size) {
-      this.resizable.updateSize(size);
+      this.resizable.updateSize({ width: size.width, height: size.height });
     }
@@ -210,3 +255,2 @@ }, {
           axis: this.props.dragAxis,
-          zIndex: this.state.z,
           grid: this.props.dragGrid,
@@ -219,3 +263,3 @@ bounds: this.props.bounds ? this.state.bounds : undefined
             className: this.props.className,
-            style: boxStyle,
+            style: (0, _extends3.default)({}, boxStyle, { zIndex: this.state.z }),
             ref: function ref(c) {
@@ -240,6 +284,5 @@ _this2.wrapper = c;
               minHeight: this.props.minHeight,
-              maxWidth: this.props.maxWidth,
-              maxHeight: this.props.maxHeight,
+              maxWidth: this.state.maxWidth,
+              maxHeight: this.state.maxHeight,
               grid: this.props.resizeGrid,
-              bounds: this.getResizableBounds(),
               lockAspectRatio: this.props.lockAspectRatio,
@@ -246,0 +289,0 @@ handlerStyles: this.props.resizeHandlerStyles,

lib/rnd.test.js

@@ -66,118 +66,53 @@ 'use strict';
 
-(0, _ava2.default)('should mount', function () {
-  var _ref2 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee2(t) {
-    var rnd;
-    return _regenerator2.default.wrap(function _callee2$(_context2) {
-      while (1) {
-        switch (_context2.prev = _context2.next) {
-          case 0:
-            rnd = (0, _enzyme.mount)(_react2.default.createElement(_2.default, { 'default': { x: 100, y: 100, width: 100, height: 100 } }));
+/*
+test('should mount', async (t) => {
+  const rnd = mount(
+    <Rnd default={{ x: 100, y: 100, width: 100, height: 100 }} />,
+  );
+  t.true(!!rnd);
+});
 
-            t.true(!!rnd);
+test('should call onDragStart when start dragging', async (t) => {
+  const onDragStart = spy();
+  const rnd = mount(
+    <Rnd
+      default={{ x: 100, y: 100, width: 100, height: 100 }}
+      onDragStart={onDragStart}
+    />,
+  );
+  rnd.find('div').at(0).simulate('mousedown');
+  t.is(onDragStart.callCount, 1);
+  t.is(onDragStart.firstCall.args[0].type, 'mousedown');
+  t.is(onDragStart.firstCall.args[1].x, 100);
+  t.is(onDragStart.firstCall.args[1].y, 100);
+});
 
-          case 2:
-          case 'end':
-            return _context2.stop();
-        }
-      }
-    }, _callee2, undefined);
-  }));
+test('should call onDrag when dragging', async (t) => {
+  const onDrag = spy();
+  const rnd = mount(
+    <Rnd
+      default={{ x: 100, y: 100, width: 100, height: 100 }}
+      onDrag={onDrag}
+    />,
+  );
+  rnd.find('div').at(0).simulate('mousedown');
+  mouseMove(200, 220);
+  mouseUp(100, 120);
+  t.is(onDrag.callCount, 1);
+});
 
-  return function (_x2) {
-    return _ref2.apply(this, arguments);
-  };
-}());
+test('should call onDragStop when drag stop', async (t) => {
+  const onDragStop = spy();
+  const rnd = mount(
+    <Rnd
+      default={{ x: 100, y: 100, width: 100, height: 100 }}
+      onDragStop={onDragStop}
+    />,
+  );
+  rnd.find('div').at(0).simulate('mousedown');
+  mouseMove(200, 220);
+  mouseUp(100, 120);
+  t.is(onDragStop.callCount, 1);
+});
 
-(0, _ava2.default)('should call onDragStart when start dragging', function () {
-  var _ref3 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee3(t) {
-    var onDragStart, rnd;
-    return _regenerator2.default.wrap(function _callee3$(_context3) {
-      while (1) {
-        switch (_context3.prev = _context3.next) {
-          case 0:
-            onDragStart = (0, _sinon.spy)();
-            rnd = (0, _enzyme.mount)(_react2.default.createElement(_2.default, {
-              'default': { x: 100, y: 100, width: 100, height: 100 },
-              onDragStart: onDragStart
-            }));
-
-            rnd.find('div').at(0).simulate('mousedown');
-            t.is(onDragStart.callCount, 1);
-            t.is(onDragStart.firstCall.args[0].type, 'mousedown');
-            t.is(onDragStart.firstCall.args[1].x, 100);
-            t.is(onDragStart.firstCall.args[1].y, 100);
-
-          case 7:
-          case 'end':
-            return _context3.stop();
-        }
-      }
-    }, _callee3, undefined);
-  }));
-
-  return function (_x3) {
-    return _ref3.apply(this, arguments);
-  };
-}());
-
-(0, _ava2.default)('should call onDrag when dragging', function () {
-  var _ref4 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee4(t) {
-    var onDrag, rnd;
-    return _regenerator2.default.wrap(function _callee4$(_context4) {
-      while (1) {
-        switch (_context4.prev = _context4.next) {
-          case 0:
-            onDrag = (0, _sinon.spy)();
-            rnd = (0, _enzyme.mount)(_react2.default.createElement(_2.default, {
-              'default': { x: 100, y: 100, width: 100, height: 100 },
-              onDrag: onDrag
-            }));
-
-            rnd.find('div').at(0).simulate('mousedown');
-            mouseMove(200, 220);
-            mouseUp(100, 120);
-            t.is(onDrag.callCount, 1);
-
-          case 6:
-          case 'end':
-            return _context4.stop();
-        }
-      }
-    }, _callee4, undefined);
-  }));
-
-  return function (_x4) {
-    return _ref4.apply(this, arguments);
-  };
-}());
-
-(0, _ava2.default)('should call onDragStop when drag stop', function () {
-  var _ref5 = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee5(t) {
-    var onDragStop, rnd;
-    return _regenerator2.default.wrap(function _callee5$(_context5) {
-      while (1) {
-        switch (_context5.prev = _context5.next) {
-          case 0:
-            onDragStop = (0, _sinon.spy)();
-            rnd = (0, _enzyme.mount)(_react2.default.createElement(_2.default, {
-              'default': { x: 100, y: 100, width: 100, height: 100 },
-              onDragStop: onDragStop
-            }));
-
-            rnd.find('div').at(0).simulate('mousedown');
-            mouseMove(200, 220);
-            mouseUp(100, 120);
-            t.is(onDragStop.callCount, 1);
-
-          case 6:
-          case 'end':
-            return _context5.stop();
-        }
-      }
-    }, _callee5, undefined);
-  }));
-
-  return function (_x5) {
-    return _ref5.apply(this, arguments);
-  };
-}());
+*/

package.json

 {
   "name": "react-rnd",
   "license": "MIT",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "main": "lib/index.js",
@@ -10,5 +10,7 @@ "scripts": {
     "build:example": "NODE_ENV=example webpack",
+    "build:example-watch": "NODE_ENV=example webpack  --watch",
     "flow": "flow",
     "lint": "eslint src",
-    "test": "NODE_ENV=test ava",
+    "test": "NODE_ENV=test karma start",
+    "test:watch": "NODE_ENV=test karma start --single-run false",
     "guide:server": "styleguidist server",
@@ -32,3 +34,3 @@ "guide:build": "styleguidist build",
     "babel-plugin-dynamic-import-webpack": "^1.0.1",
-    "babel-plugin-flow-runtime": "^0.10.0",
+    "babel-plugin-flow-runtime": "^0.11.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
@@ -42,3 +44,2 @@ "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-react": "^6.24.1",
-    "browser-env": "^2.0.30",
     "enzyme": "^2.8.2",
@@ -52,7 +53,11 @@ "eslint": "^3.19.0",
     "flow-bin": "^0.45.0",
-    "flow-runtime": "^0.10.0",
+    "flow-runtime": "^0.11.0",
     "http-server": "^0.9.0",
     "karma": "^1.6.0",
-    "karma-ava": "^0.0.1",
+    "karma-mocha": "^1.3.0",
+    "karma-mocha-reporter": "^2.2.3",
     "karma-nightmare": "^0.4.6",
+    "karma-webpack": "^2.0.3",
+    "mocha": "^3.3.0",
+    "power-assert": "^1.4.2",
     "react": "^15.5.4",
@@ -63,2 +68,3 @@ "react-addons-test-utils": "^15.5.1",
     "react-styleguidist": "^5.1.1",
+    "react-test-renderer": "^15.5.4",
     "sinon": "^2.1.0",
@@ -79,3 +85,3 @@ "webpack": "2.4.1",
     "react-draggable": "^2.2.3",
-    "react-resizable-box": "^2.0.2"
+    "react-resizable-box": "^2.0.3"
   },
@@ -82,0 +88,0 @@ "files": [

README.md

@@ -414,5 +414,19 @@ # react-rnd
 
+#### v5.0.3
 
-#### v5.0
+- Fix `updateZIndex`.
+- Fix `updateSize`.
+- Fix left and top bounds.
 
+#### v5.0.2
+
+- Fix argument events #100
+
+#### v5.0.1
+
+- Fix example
+- Update README
+
+#### v5.0.0
+
 - Fix resize bounds.
@@ -419,0 +433,0 @@ - Modify API.

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

Improved metrics

Total package byte prevSize

31190

increased by16.96%

Number of package files

5

increased by25%

Lines of code

446

increased by21.53%

Number of lines in readme file

516

increased by2.79%

Worsened metrics

Dev dependency count

42

increased by10.53%

Dependency changes

• Updatedreact-resizable-box@^2.0.3