feat: Add disableAutoscroll prop (#484)

clauderic · Feb 7, 2019 · 7845e76 · 7845e76
1 parent 09fbe2b
commit 7845e76
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -120,6 +120,7 @@ There are already a number of great Drag & Drop libraries out there (for instanc
 | getContainer               | Function                                              |                                                                                                                | Optional function to return the scrollable container element. This property defaults to the `SortableContainer` element itself or (if `useWindowAsScrollContainer` is true) the window. Use this function to specify a custom container object (eg this is useful for integrating with certain 3rd party components such as `FlexTable`). This function is passed a single parameter (the `wrappedInstance` React element) and it is expected to return a DOM element. |
 | getHelperDimensions        | Function                                              | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L74-L77) | Optional `function({node, index, collection})` that should return the computed dimensions of the SortableHelper. See [default implementation](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L74-L77) for more details                                                                                                                                                                                                     |
 | helperContainer            | HTMLElement \| Function                               | `document.body`                                                                                                | By default, the cloned sortable helper is appended to the document body. Use this prop to specify a different container for the sortable clone to be appended to. Accepts an `HTMLElement` or a function returning an `HTMLElement` that will be invoked before right before sorting begins                                                                                                                                                                            |
+| disableAutoscroll          | Boolean                                               | `false`                                                                                                        | Disables autoscrolling while dragging                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 
 \* `OffsetValue` can either be a finite `Number` or a `String` made up of a number and a unit (`px` or `%`).
 Examples: `10` (which is the same as `"10px"`), `"50%"`

diff --git a/src/SortableContainer/index.js b/src/SortableContainer/index.js
@@ -75,6 +75,7 @@ export default function sortableContainer(
         width: node.offsetWidth,
         height: node.offsetHeight,
       }),
+      disableAutoscroll: false,
     };
 
     static propTypes = {
@@ -111,6 +112,7 @@ export default function sortableContainer(
           ? PropTypes.any
           : PropTypes.instanceOf(HTMLElement),
       ]),
+      disableAutoscroll: PropTypes.bool,
     };
 
     static childContextTypes = {
@@ -764,6 +766,12 @@ export default function sortableContainer(
     }
 
     autoscroll = () => {
+      const {disableAutoscroll} = this.props;
+
+      if (disableAutoscroll) {
+        return;
+      }
+
       const translate = this.translate;
       const direction = {
         x: 0,
@@ -800,23 +808,32 @@ export default function sortableContainer(
           Math.abs(
             (this.maxTranslate.y - this.height / 2 - translate.y) / this.height,
           );
-      } else if (translate.x >= this.maxTranslate.x - this.width / 2 && !isRight) {
+      } else if (
+        translate.x >= this.maxTranslate.x - this.width / 2 &&
+        !isRight
+      ) {
         // Scroll Right
         direction.x = 1;
         speed.x =
           acceleration.x *
           Math.abs(
             (this.maxTranslate.x - this.width / 2 - translate.x) / this.width,
           );
-      } else if (translate.y <= this.minTranslate.y + this.height / 2 && !isTop) {
+      } else if (
+        translate.y <= this.minTranslate.y + this.height / 2 &&
+        !isTop
+      ) {
         // Scroll Up
         direction.y = -1;
         speed.y =
           acceleration.y *
           Math.abs(
             (translate.y - this.height / 2 - this.minTranslate.y) / this.height,
           );
-      } else if (translate.x <= this.minTranslate.x + this.width / 2 && !isLeft) {
+      } else if (
+        translate.x <= this.minTranslate.x + this.width / 2 &&
+        !isLeft
+      ) {
         // Scroll Left
         direction.x = -1;
         speed.x =