grid prop unused in handleDragStop (#621)

* fix: `grid` prop unused in `handleDragStop`

* call `onStop` even if `deltaX = 0` and `deltaY = 0`

* fix `const {x, y}` in `handleDragStop`; add test case for `grid` prop

Author: BrianHung

lib/DraggableCore.js

@@ -383,7 +383,15 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
 
     const position = getControlPosition(e, this.state.touchIdentifier, this);
     if (position == null) return;
-    const {x, y} = position;
+    let {x, y} = position;
+
+    // Snap to grid if prop has been provided
+    if (Array.isArray(this.props.grid)) {
+      let deltaX = x - this.state.lastX, deltaY = y - this.state.lastY;
+      [deltaX, deltaY] = snapToGrid(this.props.grid, deltaX, deltaY);
+      x = this.state.lastX + deltaX, y = this.state.lastY + deltaY;
+    }
+
     const coreEvent = createCoreData(this, x, y);
 
     // Call event handler

specs/draggable.spec.jsx

@@ -942,6 +942,33 @@ describe('react-draggable', function () {
       // (element, fromX, fromY, toX, toY)
       simulateMovementFromTo(drag, 0, 0, 100, 100);
     });
+
+    it('should call back with snapped data output when grid prop is provided', function(done) {
+      function onDrag(event, data) {
+        assert(data.x === 99);
+        assert(data.y === 96);
+        assert(data.deltaX === 99);
+        assert(data.deltaY === 96);
+        assert(data.node === ReactDOM.findDOMNode(drag));
+      }
+      function onStop(event, data) {
+        assert(data.x === 99);
+        assert(data.y === 96);
+        // Single drag-and-stop so stop {x, y} is same as drag {x, y}.
+        assert(data.deltaX === 0);
+        assert(data.deltaY === 0);
+        assert(data.node === ReactDOM.findDOMNode(drag));
+        done();
+      }
+      drag = TestUtils.renderIntoDocument(
+        <DraggableCore onDrag={onDrag} onStop={onStop} grid={[9, 16]}>
+          <div />
+        </DraggableCore>
+      );
+
+      // (element, fromX, fromY, toX, toY)
+      simulateMovementFromTo(drag, 0, 0, 100, 100);
+    });
   });