Update deps (#782)

* update deps

* env: Add workflow

* chore: format

* fix: callback position when dragAxis specified

* fix: ci

* fix: spec

* fix: callback data

* update deps

* fix:ci

* update deps

* remove circleci

Author: bokuweb

.circleci/config.yml

@@ -0,0 +1,42 @@
+name: Continuous Integration
+on: [push, pull_request]
+
+jobs:
+  lint:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@master
+        with:
+          node-version: 12
+      - name: yarn
+        run: yarn --frozen-lockfile
+      - name: lint
+        run: yarn lint
+
+  tsc:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@master
+        with:
+          node-version: 12
+      - name: yarn
+        run: yarn --frozen-lockfile
+      - name: tsc
+        run: yarn tsc
+
+  test:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@master
+        with:
+          node-version: 12
+      - name: yarn
+        run: yarn --frozen-lockfile
+      - name: test
+        run: |
+          export DISPLAY=:99
+          Xvfb -ac :99 -screen 0 1280x1024x24 >/dev/null 2>&1 &
+          yarn run test

.github/workflows/ci.yml

@@ -40,28 +40,28 @@
   },
   "homepage": "https://github.com/bokuweb/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",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
@@ -73,7 +73,7 @@
     "gh-pages": "2.2.0",
     "light-ts-loader": "1.1.2",
     "npm-run-all": "4.1.5",
-    "prettier": "2.0.4",
+    "prettier": "2.3.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-test-renderer": "16.14.0",
@@ -90,7 +90,7 @@
     "tslint-eslint-rules": "5.4.0",
     "tslint-plugin-prettier": "2.3.0",
     "tslint-react": "5.0.0",
-    "typescript": "3.8.3"
+    "typescript": "4.2.4"
   },
   "files": [
     "lib"
@@ -101,6 +101,6 @@
   "dependencies": {
     "re-resizable": "6.9.0",
     "react-draggable": "4.4.3",
-    "tslib": "2.0.3"
+    "tslib": "2.2.0"
   }
 }

package.json

@@ -160,7 +160,7 @@ test("should dragging disabled when axis equals none", async (t) => {
   });
   rnd.find("div").at(0).simulate("mousedown", { clientX: 0, clientY: 0 });
   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);
 });
 

src/index.test.tsx

@@ -55,7 +55,6 @@ type Size = {
 };
 
 type State = {
-  original: Position;
   bounds: {
     top: number;
     right: number;
@@ -214,14 +213,11 @@ export class Rnd extends React.PureComponent<Props, State> {
   resizingPosition = { x: 0, y: 0 };
   offsetFromParent = { left: 0, top: 0 };
   resizableElement: { current: HTMLElement | null } = { current: null };
+  originalPosition = { x: 0, y: 0 };
 
   constructor(props: Props) {
     super(props);
     this.state = {
-      original: {
-        x: 0,
-        y: 0,
-      },
       bounds: {
         top: 0,
         right: 0,
@@ -305,6 +301,8 @@ export class Rnd extends React.PureComponent<Props, State> {
     if (this.props.onDragStart) {
       this.props.onDragStart(e, data);
     }
+    const pos = this.getDraggablePosition();
+    this.originalPosition = pos;
     if (!this.props.bounds) return;
     const parent = this.getParent();
     const scale = this.props.scale as number;
@@ -359,16 +357,26 @@ export class Rnd extends React.PureComponent<Props, State> {
   }
 
   onDrag(e: RndDragEvent, data: DraggableData) {
-    if (this.props.onDrag) {
-      const offset = this.offsetFromParent;
-      return this.props.onDrag(e, { ...data, x: data.x - offset.left, y: data.y - offset.top });
+    if (!this.props.onDrag) return;
+    const { left, top } = this.offsetFromParent;
+    if (!this.props.dragAxis || this.props.dragAxis === "both") {
+      return this.props.onDrag(e, { ...data, x: data.x - left, y: data.y - top });
+    } else if (this.props.dragAxis === "x") {
+      return this.props.onDrag(e, { ...data, x: data.x + left, y: this.originalPosition.y + top, deltaY: 0 });
+    } else if (this.props.dragAxis === "y") {
+      return this.props.onDrag(e, { ...data, x: this.originalPosition.x + left, y: data.y + top, deltaX: 0 });
     }
   }
 
   onDragStop(e: RndDragEvent, data: DraggableData) {
-    if (this.props.onDragStop) {
-      const { left, top } = this.offsetFromParent;
+    if (!this.props.onDragStop) return;
+    const { left, top } = this.offsetFromParent;
+    if (!this.props.dragAxis || this.props.dragAxis === "both") {
       return this.props.onDragStop(e, { ...data, x: data.x + left, y: data.y + top });
+    } else if (this.props.dragAxis === "x") {
+      return this.props.onDragStop(e, { ...data, x: data.x + left, y: this.originalPosition.y + top, deltaY: 0 });
+    } else if (this.props.dragAxis === "y") {
+      return this.props.onDragStop(e, { ...data, x: this.originalPosition.x + left, y: data.y + top, deltaX: 0 });
     }
   }
 
@@ -384,9 +392,7 @@ export class Rnd extends React.PureComponent<Props, State> {
     const offset = this.offsetFromParent;
     const pos = this.getDraggablePosition();
     this.resizingPosition = { x: pos.x + offset.left, y: pos.y + offset.top };
-    this.setState({
-      original: pos,
-    });
+    this.originalPosition = pos;
     if (this.props.bounds) {
       const parent = this.getParent();
       let boundary;
@@ -477,7 +483,7 @@ export class Rnd extends React.PureComponent<Props, State> {
     delta: { height: number; width: number },
   ) {
     // INFO: Apply x and y position adjustments caused by resizing to draggable
-    const newPos = { x: this.state.original.x, y: this.state.original.y };
+    const newPos = { x: this.originalPosition.x, y: this.originalPosition.y };
     const left = -delta.width;
     const top = -delta.height;
     const directions = ["top", "left", "topLeft", "bottomLeft", "topRight"];

src/index.tsx

@@ -39,7 +39,7 @@ export default class Example extends React.Component<{}, State> {
           this.setState({
             width: ref.offsetWidth,
             height: ref.offsetHeight,
-            ...position
+            ...position,
           });
         }}
       >

stories/basic/controlled.tsx

@@ -15,7 +15,7 @@ export default class Example extends React.Component<{}, State> {
   constructor(props) {
     super(props);
     this.state = {
-      rnds: [0, 1, 2].map(i => ({
+      rnds: [0, 1, 2].map((i) => ({
         width: 200,
         height: 200,
         x: i * 100,
@@ -27,7 +27,7 @@ export default class Example extends React.Component<{}, State> {
   render() {
     return (
       <>
-        {[0, 1, 2].map(i => (
+        {[0, 1, 2].map((i) => (
           <Rnd
             key={`rnd${i}`}
             style={style}

stories/basic/multi-controlled.tsx

@@ -4,7 +4,7 @@ import { style } from "../styles";
 
 export default () => (
   <>
-    {[0, 1, 2].map(i => (
+    {[0, 1, 2].map((i) => (
       <Rnd
         style={{
           ...style,

stories/basic/multi-uncontrolled.tsx

@@ -8,7 +8,7 @@ const SouthEastArrow = () => (
   </svg>
 );
 
-const CustomHandle = props => (
+const CustomHandle = (props) => (
   <div
     style={{
       background: "#fff",