Merge pull request clauderic#159 from clauderic/feature/pressThreshold

[Feature] Added pressThreshold prop
codemotionapps · Mar 9, 2017 · c462030 · c462030
2 parents 22e141b + e74baf5
commit c462030
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -99,6 +99,7 @@ There are already a number of great Drag & Drop libraries out there (for instanc
 | helperClass                | String            |                                                                                                            | You can provide a class you'd like to add to the sortable helper to add some styles to it                                                                                                                                                                                                                                                                                                                                                                              |
 | transitionDuration         | Number            | `300`                                                                                                      | The duration of the transition when elements shift positions. Set this to `0` if you'd like to disable transitions                                                                                                                                                                                                                                                                                                                                                     |
 | pressDelay                 | Number            | `0`                                                                                                        | If you'd like elements to only become sortable after being pressed for a certain time, change this property. A good sensible default value for mobile is `200`. Cannot be used in conjunction with the `distance` prop.                                                                                                                                                                                                                                                |
+| pressThreshold             | Number            | `5`                                                                                                        | Number of pixels to to tolerate movement before ignoring a press event.                                                                                                                                                                                                                                                                                                                                                                                                |
 | distance                   | Number            | `0`                                                                                                        | If you'd like elements to only become sortable after being dragged a certain number of pixels. Cannot be used in conjunction with the `pressDelay` prop.                                                                                                                                                                                                                                                                                                               |
 | shouldCancelStart          | Function          | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L34) | This function get's invoked before sorting begins, and can be used to programatically cancel sorting before it begins. By default, it will cancel sorting if the event target is either an `input`, `textarea`, `select` or `option`.                                                                                                                                                                                                                                  |
 | onSortStart                | Function          |                                                                                                            | Callback that get's invoked when sorting begins. `function({node, index, collection}, event)`                                                                                                                                                                                                                                                                                                                                                                          |

diff --git a/src/SortableContainer/index.js b/src/SortableContainer/index.js
@@ -39,6 +39,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
       axis: 'y',
       transitionDuration: 300,
       pressDelay: 0,
+      pressThreshold: 5,
       distance: 0,
       useWindowAsScrollContainer: false,
       hideSortableGhost: true,
@@ -191,7 +192,7 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
     };
 
     handleMove = e => {
-      const {distance} = this.props;
+      const {distance, pressThreshold} = this.props;
 
       if (!this.state.sorting && this._touched) {
         this._delta = {
@@ -200,10 +201,10 @@ export default function sortableContainer(WrappedComponent, config = {withRef: f
         };
         const delta = Math.abs(this._delta.x) + Math.abs(this._delta.y);
 
-        if (!distance) {
+        if (!distance && (!pressThreshold || pressThreshold && delta >= pressThreshold)) {
           clearTimeout(this.cancelTimer);
           this.cancelTimer = setTimeout(this.cancel, 0);
-        } else if (delta >= distance) {
+        } else if (distance && delta >= distance) {
           this.handlePress(e);
         }
       }