react-movable - npm Package Compare versions

Comparing version 3.0.4 to 3.2.0

lib/List.d.ts

@@ -71,3 +71,3 @@ import * as React from 'react';
     moveOtherItems: () => void;
-    autoScrolling: (clientY: number) => void;
+    autoScrolling: (clientY: number, delta: number) => void;
     animateItems: (needle: number, movedItem: number, offset: number, animateMovedItem?: boolean) => void;
@@ -74,0 +74,0 @@ isDraggedItemOutOfBounds: () => boolean;

lib/List.js

@@ -6,2 +6,3 @@ import * as React from 'react';
 const AUTOSCROLL_SPEED_RATIO = 10;
+const AUTOSCROLL_DELTA_THRESHOLD = 10;
 class List extends React.Component {
@@ -157,3 +158,3 @@ constructor(props) {
             transformItem(this.ghostRef.current, clientY - this.state.initialY, this.props.lockVertically ? 0 : clientX - this.state.initialX);
-            this.autoScrolling(clientY);
+            this.autoScrolling(clientY, clientY - this.state.initialY);
             this.moveOtherItems();
@@ -179,3 +180,3 @@ };
         };
-        this.autoScrolling = (clientY) => {
+        this.autoScrolling = (clientY, delta) => {
             const { top, bottom, height } = this.listRef.current.getBoundingClientRect();
@@ -185,6 +186,7 @@ const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
             if (bottom > viewportHeight &&
-                viewportHeight - clientY < AUTOSCROLL_ACTIVE_OFFSET) {
+                viewportHeight - clientY < AUTOSCROLL_ACTIVE_OFFSET &&
+                delta > AUTOSCROLL_DELTA_THRESHOLD) {
                 this.setState({
-                    scrollingSpeed: Math.round((AUTOSCROLL_ACTIVE_OFFSET - (viewportHeight - clientY)) /
-                        AUTOSCROLL_SPEED_RATIO),
+                    scrollingSpeed: Math.min(Math.round((AUTOSCROLL_ACTIVE_OFFSET - (viewportHeight - clientY)) /
+                        AUTOSCROLL_SPEED_RATIO), Math.round((delta - AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO)),
                     scrollWindow: true
@@ -194,5 +196,7 @@ });
             }
-            else if (top < 0 && clientY < AUTOSCROLL_ACTIVE_OFFSET) {
+            else if (top < 0 &&
+                clientY < AUTOSCROLL_ACTIVE_OFFSET &&
+                delta < -AUTOSCROLL_DELTA_THRESHOLD) {
                 this.setState({
-                    scrollingSpeed: Math.round((AUTOSCROLL_ACTIVE_OFFSET - clientY) / -AUTOSCROLL_SPEED_RATIO),
+                    scrollingSpeed: Math.max(Math.round((AUTOSCROLL_ACTIVE_OFFSET - clientY) / -AUTOSCROLL_SPEED_RATIO), Math.round((delta + AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO)),
                     scrollWindow: true
@@ -208,9 +212,13 @@ });
                     let scrollingSpeed = 0;
-                    if (clientY - top < AUTOSCROLL_ACTIVE_OFFSET) {
-                        scrollingSpeed = Math.round((AUTOSCROLL_ACTIVE_OFFSET - (clientY - top)) /
-                            -AUTOSCROLL_SPEED_RATIO);
+                    // (up)
+                    if (clientY - top < AUTOSCROLL_ACTIVE_OFFSET &&
+                        delta < -AUTOSCROLL_DELTA_THRESHOLD) {
+                        scrollingSpeed = Math.max(Math.round((AUTOSCROLL_ACTIVE_OFFSET - (clientY - top)) /
+                            -AUTOSCROLL_SPEED_RATIO), Math.round((delta + AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO));
+                        // (down)
                     }
-                    else if (bottom - clientY < AUTOSCROLL_ACTIVE_OFFSET) {
-                        scrollingSpeed = Math.round((AUTOSCROLL_ACTIVE_OFFSET - (bottom - clientY)) /
-                            AUTOSCROLL_SPEED_RATIO);
+                    else if (bottom - clientY < AUTOSCROLL_ACTIVE_OFFSET &&
+                        delta > AUTOSCROLL_DELTA_THRESHOLD) {
+                        scrollingSpeed = Math.min(Math.round((AUTOSCROLL_ACTIVE_OFFSET - (bottom - clientY)) /
+                            AUTOSCROLL_SPEED_RATIO), Math.round((delta - AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO));
                     }
@@ -217,0 +225,0 @@ if (this.state.scrollingSpeed !== scrollingSpeed) {

package.json

 {
   "name": "react-movable",
-  "version": "3.0.4",
+  "version": "3.2.0",
   "type": "module",
@@ -13,3 +13,3 @@ "description": "Drag and drop lists.",
     "type": "git",
-    "url": "https://github.com/tajo/react-movable"
+    "url": "git+https://github.com/tajo/react-movable.git"
   },
@@ -49,3 +49,3 @@ "author": "Vojtech Miksu <[e-mail]>",
   "devDependencies": {
-    "@ladle/react": "^0.8.1",
+    "@ladle/react": "^0.8.2",
     "@types/expect-puppeteer": "^4.4.5",
@@ -52,0 +52,0 @@ "@types/jest": "^26.0.20",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

51324

increased by1.49%

Lines of code

781

increased by1.03%

No dependency changes