Move grid into <DraggableCore>, it's more useful there

Author: STRML

README.md

@@ -185,7 +185,6 @@ on itself.
 
 * `axis`
 * `bounds`
-* `grid`
 * `start`
 * `zIndex`
 

lib/Draggable.es6

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import assign from 'object-assign';
 import {createUIEvent, createTransform} from './utils/domFns';
-import {canDragX, canDragY, getBoundPosition, snapToGrid} from './utils/positionFns';
+import {canDragX, canDragY, getBoundPosition} from './utils/positionFns';
 import {dontSetMe} from './utils/shims';
 import DraggableCore from './DraggableCore';
 import log from './utils/log';
@@ -64,25 +64,6 @@ export default class Draggable extends DraggableCore {
       PropTypes.oneOf(['parent', false])
     ]),
 
-    /**
-     * `grid` specifies the x and y that dragging should snap to.
-     *
-     * Example:
-     *
-     * ```jsx
-     *   let App = React.createClass({
-     *       render: function () {
-     *           return (
-     *               <Draggable grid={[25, 25]}>
-     *                   <div>I snap to a 25 x 25 grid</div>
-     *               </Draggable>
-     *           );
-     *       }
-     *   });
-     * ```
-     */
-    grid: PropTypes.arrayOf(PropTypes.number),
-
     /**
      * `start` specifies the x and y that the dragged item should start at
      *
@@ -135,7 +116,6 @@ export default class Draggable extends DraggableCore {
   static defaultProps = assign({}, DraggableCore.defaultProps, {
     axis: 'both',
     bounds: false,
-    grid: null,
     start: {x: 0, y: 0},
     zIndex: NaN
   });
@@ -184,15 +164,6 @@ export default class Draggable extends DraggableCore {
       clientY: this.state.clientY + coreEvent.position.deltaY
     };
 
-    // Snap to grid if prop has been provided
-    if (Array.isArray(this.props.grid)) {
-      newState.lastX = (this.state.lastX || newState.clientX) + coreEvent.position.deltaX;
-      newState.lastY = (this.state.lastY || newState.clientY) + coreEvent.position.deltaY;
-      // Eslint bug, it thinks newState.clientY is undefined
-      /*eslint no-undef:0*/
-      [newState.clientX, newState.clientY] = snapToGrid(this.props.grid, newState.lastX, newState.lastY);
-    }
-
     // Keep within bounds.
     if (this.props.bounds) {
       [newState.clientX, newState.clientY] = getBoundPosition(this, newState.clientX, newState.clientY);

lib/DraggableCore.es6

@@ -1,7 +1,7 @@
 import {default as React, PropTypes} from 'react';
 import {matchesSelector, createCoreEvent, addEvent, removeEvent, addUserSelectStyles,
         removeUserSelectStyles, styleHacks} from './utils/domFns';
-import {getControlPosition} from './utils/positionFns';
+import {getControlPosition, snapToGrid} from './utils/positionFns';
 import {dontSetMe} from './utils/shims';
 import log from './utils/log';
 
@@ -69,6 +69,25 @@ export default class DraggableCore extends React.Component {
      */
     enableUserSelectHack: PropTypes.bool,
 
+    /**
+     * `grid` specifies the x and y that dragging should snap to.
+     *
+     * Example:
+     *
+     * ```jsx
+     *   let App = React.createClass({
+     *       render: function () {
+     *           return (
+     *               <Draggable grid={[25, 25]}>
+     *                   <div>I snap to a 25 x 25 grid</div>
+     *               </Draggable>
+     *           );
+     *       }
+     *   });
+     * ```
+     */
+    grid: PropTypes.arrayOf(PropTypes.number),
+
     /**
      * `handle` specifies a selector to be used as the handle that initiates drag.
      *
@@ -195,6 +214,7 @@ export default class DraggableCore extends React.Component {
     disabled: false,
     enableUserSelectHack: true,
     handle: null,
+    grid: null,
     transform: null,
     onStart: function(){},
     onDrag: function(){},
@@ -285,10 +305,19 @@ export default class DraggableCore extends React.Component {
 
     let {clientX, clientY} = getControlPosition(e);
 
+    // Snap to grid if prop has been provided
+    if (Array.isArray(this.props.grid)) {
+      let deltaX = clientX - this.state.lastX, deltaY = clientY - this.state.lastY;
+      [deltaX, deltaY] = snapToGrid(this.props.grid, deltaX, deltaY);
+      if (!deltaX && !deltaY) return; // skip useless drag
+      clientX = this.state.lastX + deltaX, clientY = this.state.lastY + deltaY;
+    }
+
     let coreEvent = createCoreEvent(this, clientX, clientY);
 
     log('DraggableCore: handleDrag: %j', coreEvent.position);
 
+
     // Call event handler. If it returns explicit false, trigger end.
     let shouldUpdate = this.props.onDrag(e, coreEvent);
     if (shouldUpdate === false) {