fix glitch when dragAxis is enabled and component is being resized (#780)

* fix glitch when dragAxis is enabled and component is being resized

* Added new axisGrid story

Author: VictorPeralta

src/index.tsx

@@ -616,6 +616,7 @@ export class Rnd extends React.PureComponent<Props, State> {
     }
     // INFO: Make uncontorolled component when resizing to control position by setPostion.
     const pos = this.resizing ? undefined : draggablePosition;
+    const dragAxisOrUndefined = this.resizing ? "both" : dragAxis;
 
     return (
       <Draggable
@@ -627,7 +628,7 @@ export class Rnd extends React.PureComponent<Props, State> {
         onStart={this.onDragStart}
         onDrag={this.onDrag}
         onStop={this.onDragStop}
-        axis={dragAxis}
+        axis={dragAxisOrUndefined}
         disabled={disableDragging}
         grid={dragGrid}
         bounds={bounds ? this.state.bounds : undefined}

stories/dragAxis/dragAxis.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Rnd } from "../../src";
+import { style } from "../styles";
+
+type State = {
+  x: number;
+  y: number;
+  width: number | string;
+  height: number | string;
+};
+
+export default class dragAxis extends React.Component<{}, State> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      width: 100,
+      height: 100,
+      x: 0,
+      y: 0,
+    };
+  }
+
+  render() {
+    return (
+      <Rnd
+        style={style}
+        size={{ width: this.state.width, height: this.state.height }}
+        position={{ x: this.state.x, y: this.state.y }}
+        onDragStop={(e, d) => {
+          this.setState({ ...this.state, ...d });
+        }}
+        onResizeStop={(e, direction, ref, delta, position) => {
+          this.setState({
+            ...this.state,
+            width: ref.style.width,
+            height: ref.style.height,
+            ...position,
+          });
+        }}
+        dragAxis="x"
+      >
+        001
+      </Rnd>
+    );
+  }
+}

stories/index.tsx

@@ -35,6 +35,8 @@ import Cancel from "./cancel/cancel";
 
 import ResizeHandleComponent from "./customization/resizeHandleComponent";
 
+import DragAxis from "./dragAxis/dragAxis";
+
 import GridResize from "./grid/resize";
 import GridDrag from "./grid/drag";
 import GridBoth from "./grid/both";
@@ -80,6 +82,8 @@ storiesOf("cancel", module).add("cancel", () => <Cancel />);
 
 storiesOf("customization", module).add("resizeHandleComponent", () => <ResizeHandleComponent />);
 
+storiesOf("dragAxis", module).add("dragAxis", () => <DragAxis />);
+
 storiesOf("grid", module)
   .add("resize", () => <GridResize />)
   .add("drag", () => <GridDrag />)