react-rnd - npm Package Compare versions

Comparing version 10.2.5 to 10.3.0

lib/index.d.ts

@@ -30,3 +30,2 @@ import * as React from "react";
 declare type State = {
-    original: Position;
     bounds: {
@@ -158,2 +157,6 @@ top: number;
     };
+    originalPosition: {
+        x: number;
+        y: number;
+    };
     constructor(props: Props);
@@ -195,3 +198,3 @@ componentDidMount(): void;
     } | undefined;
-    refDraggable: (c: any) => void;
+    refDraggable: (c: $TODO) => void;
     refResizable: (c: Resizable | null) => void;
@@ -198,0 +201,0 @@ render(): JSX.Element;

lib/index.es5.js

@@ -90,2 +90,3 @@ 'use strict';
         _this.resizableElement = { current: null };
+        _this.originalPosition = { x: 0, y: 0 };
         _this.refDraggable = function (c) {
@@ -103,6 +104,2 @@ if (!c)
         _this.state = {
-            original: {
-                x: 0,
-                y: 0,
-            },
             bounds: {
@@ -182,2 +179,4 @@ top: 0,
         }
+        var pos = this.getDraggablePosition();
+        this.originalPosition = pos;
         if (!this.props.bounds)
@@ -242,12 +241,28 @@ return;
     Rnd.prototype.onDrag = function (e, data) {
-        if (this.props.onDrag) {
-            var offset = this.offsetFromParent;
-            return this.props.onDrag(e, __assign(__assign({}, data), { x: data.x - offset.left, y: data.y - offset.top }));
+        if (!this.props.onDrag)
+            return;
+        var _a = this.offsetFromParent, left = _a.left, top = _a.top;
+        if (!this.props.dragAxis || this.props.dragAxis === "both") {
+            return this.props.onDrag(e, __assign(__assign({}, data), { x: data.x - left, y: data.y - top }));
         }
+        else if (this.props.dragAxis === "x") {
+            return this.props.onDrag(e, __assign(__assign({}, data), { x: data.x + left, y: this.originalPosition.y + top, deltaY: 0 }));
+        }
+        else if (this.props.dragAxis === "y") {
+            return this.props.onDrag(e, __assign(__assign({}, data), { x: this.originalPosition.x + left, y: data.y + top, deltaX: 0 }));
+        }
     };
     Rnd.prototype.onDragStop = function (e, data) {
-        if (this.props.onDragStop) {
-            var _a = this.offsetFromParent, left = _a.left, top_3 = _a.top;
-            return this.props.onDragStop(e, __assign(__assign({}, data), { x: data.x + left, y: data.y + top_3 }));
+        if (!this.props.onDragStop)
+            return;
+        var _a = this.offsetFromParent, left = _a.left, top = _a.top;
+        if (!this.props.dragAxis || this.props.dragAxis === "both") {
+            return this.props.onDragStop(e, __assign(__assign({}, data), { x: data.x + left, y: data.y + top }));
         }
+        else if (this.props.dragAxis === "x") {
+            return this.props.onDragStop(e, __assign(__assign({}, data), { x: data.x + left, y: this.originalPosition.y + top, deltaY: 0 }));
+        }
+        else if (this.props.dragAxis === "y") {
+            return this.props.onDragStop(e, __assign(__assign({}, data), { x: this.originalPosition.x + left, y: data.y + top, deltaX: 0 }));
+        }
     };
@@ -261,5 +276,3 @@ Rnd.prototype.onResizeStart = function (e, dir, elementRef) {
         this.resizingPosition = { x: pos.x + offset.left, y: pos.y + offset.top };
-        this.setState({
-            original: pos,
-        });
+        this.originalPosition = pos;
         if (this.props.bounds) {
@@ -352,3 +365,3 @@ var parent_1 = this.getParent();
         // INFO: Apply x and y position adjustments caused by resizing to draggable
-        var newPos = { x: this.state.original.x, y: this.state.original.y };
+        var newPos = { x: this.originalPosition.x, y: this.originalPosition.y };
         var left = -delta.width;
@@ -355,0 +368,0 @@ var top = -delta.height;

lib/index.js

@@ -84,2 +84,3 @@ import { createElement, PureComponent } from 'react';
         _this.resizableElement = { current: null };
+        _this.originalPosition = { x: 0, y: 0 };
         _this.refDraggable = function (c) {
@@ -97,6 +98,2 @@ if (!c)
         _this.state = {
-            original: {
-                x: 0,
-                y: 0,
-            },
             bounds: {
@@ -176,2 +173,4 @@ top: 0,
         }
+        var pos = this.getDraggablePosition();
+        this.originalPosition = pos;
         if (!this.props.bounds)
@@ -236,12 +235,28 @@ return;
     Rnd.prototype.onDrag = function (e, data) {
-        if (this.props.onDrag) {
-            var offset = this.offsetFromParent;
-            return this.props.onDrag(e, __assign(__assign({}, data), { x: data.x - offset.left, y: data.y - offset.top }));
+        if (!this.props.onDrag)
+            return;
+        var _a = this.offsetFromParent, left = _a.left, top = _a.top;
+        if (!this.props.dragAxis || this.props.dragAxis === "both") {
+            return this.props.onDrag(e, __assign(__assign({}, data), { x: data.x - left, y: data.y - top }));
         }
+        else if (this.props.dragAxis === "x") {
+            return this.props.onDrag(e, __assign(__assign({}, data), { x: data.x + left, y: this.originalPosition.y + top, deltaY: 0 }));
+        }
+        else if (this.props.dragAxis === "y") {
+            return this.props.onDrag(e, __assign(__assign({}, data), { x: this.originalPosition.x + left, y: data.y + top, deltaX: 0 }));
+        }
     };
     Rnd.prototype.onDragStop = function (e, data) {
-        if (this.props.onDragStop) {
-            var _a = this.offsetFromParent, left = _a.left, top_3 = _a.top;
-            return this.props.onDragStop(e, __assign(__assign({}, data), { x: data.x + left, y: data.y + top_3 }));
+        if (!this.props.onDragStop)
+            return;
+        var _a = this.offsetFromParent, left = _a.left, top = _a.top;
+        if (!this.props.dragAxis || this.props.dragAxis === "both") {
+            return this.props.onDragStop(e, __assign(__assign({}, data), { x: data.x + left, y: data.y + top }));
         }
+        else if (this.props.dragAxis === "x") {
+            return this.props.onDragStop(e, __assign(__assign({}, data), { x: data.x + left, y: this.originalPosition.y + top, deltaY: 0 }));
+        }
+        else if (this.props.dragAxis === "y") {
+            return this.props.onDragStop(e, __assign(__assign({}, data), { x: this.originalPosition.x + left, y: data.y + top, deltaX: 0 }));
+        }
     };
@@ -255,5 +270,3 @@ Rnd.prototype.onResizeStart = function (e, dir, elementRef) {
         this.resizingPosition = { x: pos.x + offset.left, y: pos.y + offset.top };
-        this.setState({
-            original: pos,
-        });
+        this.originalPosition = pos;
         if (this.props.bounds) {
@@ -346,3 +359,3 @@ var parent_1 = this.getParent();
         // INFO: Apply x and y position adjustments caused by resizing to draggable
-        var newPos = { x: this.state.original.x, y: this.state.original.y };
+        var newPos = { x: this.originalPosition.x, y: this.originalPosition.y };
         var left = -delta.width;
@@ -349,0 +362,0 @@ var top = -delta.height;

lib/index.test.js

 "use strict";
 /* tslint:disable */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -42,9 +61,2 @@ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -222,3 +234,3 @@ var ava_1 = __importDefault(require("ava"));
         mouseMove(200, 220);
-        t.is(onDrag.callCount, 1);
+        t.is(onDrag.callCount, 0);
         t.not((rnd.getDOMNode().getAttribute("style") || "").indexOf("transform: translate(100px, 100px)"), -1);
@@ -225,0 +237,0 @@ return [2 /*return*/];

package.json

 {
   "name": "react-rnd",
-  "version": "10.2.5",
+  "version": "10.3.0",
   "description": "",
@@ -43,24 +43,24 @@ "title": "react-rnd",
   "devDependencies": {
-    "@babel/cli": "7.12.8",
-    "@babel/core": "7.12.9",
-    "@babel/plugin-proposal-class-properties": "7.12.1",
-    "@babel/plugin-transform-modules-commonjs": "7.12.1",
-    "@babel/preset-react": "7.12.7",
-    "@babel/preset-typescript": "7.12.7",
-    "@babel/traverse": "7.12.9",
-    "@babel/types": "7.12.7",
-    "@emotion/core": "10.0.28",
-    "@storybook/addon-actions": "5.3.18",
-    "@storybook/addon-info": "5.3.18",
-    "@storybook/addon-links": "5.3.18",
-    "@storybook/addon-options": "5.3.18",
-    "@storybook/react": "5.3.18",
+    "@babel/cli": "7.14.3",
+    "@babel/core": "7.14.3",
+    "@babel/plugin-proposal-class-properties": "7.13.0",
+    "@babel/plugin-transform-modules-commonjs": "7.14.0",
+    "@babel/preset-react": "7.13.13",
+    "@babel/preset-typescript": "7.13.0",
+    "@babel/traverse": "7.14.2",
+    "@babel/types": "7.14.2",
+    "@emotion/core": "11.0.0",
+    "@storybook/addon-actions": "6.2.9",
+    "@storybook/addon-info": "5.3.21",
+    "@storybook/addon-links": "6.2.9",
+    "@storybook/addon-options": "5.3.21",
+    "@storybook/react": "6.2.9",
     "@types/enzyme": "3.1.16",
     "@types/enzyme-adapter-react-16": "1.0.6",
-    "@types/node": "^12.0.10",
+    "@types/node": "^15.3.1",
     "@types/react": "16.4.1",
     "@types/react-dom": "16.0.11",
     "@types/sinon": "9.0.0",
-    "@types/storybook__addon-actions": "3.4.3",
-    "@types/storybook__react": "4.0.2",
+    "@types/storybook__addon-actions": "5.2.1",
+    "@types/storybook__react": "5.2.1",
     "avaron": "0.2.0",
@@ -77,3 +77,3 @@ "babel-core": "7.0.0-bridge.0",
     "npm-run-all": "4.1.5",
-    "prettier": "2.0.4",
+    "prettier": "2.3.0",
     "react": "16.14.0",
@@ -95,3 +95,3 @@ "react-dom": "16.14.0",
     "tslint-react": "5.0.0",
-    "typescript": "3.8.3"
+    "typescript": "4.2.4"
   },
@@ -107,4 +107,4 @@ "files": [
     "react-draggable": "4.4.3",
-    "tslib": "2.0.3"
+    "tslib": "2.2.0"
   }
 }

README.md

@@ -515,2 +515,6 @@ <p align="center"><img src ="https://github.com/bokuweb/react-rnd/blob/master/logo.png?raw=true" /></p>
 
+#### v10.3.0
+
+- Fixed a callback position when dragAxis specified
+
 #### v10.2.5
@@ -517,0 +521,0 @@

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

127513

increased by2.17%

Lines of code

1875

increased by2.24%

Number of lines in readme file

864

increased by0.47%

Dependency changes

• + Addedtslib@2.2.0(transitive)

• - Removedtslib@2.0.3(transitive)

• Updatedtslib@2.2.0