namespace-ee / react-calendar-timeline

A modern and responsive react timeline component.
MIT License
1.91k stars 613 forks source link

Touchpad scrolling is very fast and broke timeline #929

Open serhiimahdiuk opened 3 months ago

serhiimahdiuk commented 3 months ago

Hi! πŸ‘‹

Firstly, thanks for your work on this project! πŸ™‚

Today I used patch-package to patch react-calendar-timeline@0.28.0 for the project I'm working on.

because the touchpad is on Mac, I guess, to quickly update the onScroll function, I tried to fix this with https://stackoverflow.com/a/5542105/23627578 - this helper function

Here is the diff that solved my problem:

diff --git a/node_modules/react-calendar-timeline/lib/lib/scroll/ScrollElement.js b/node_modules/react-calendar-timeline/lib/lib/scroll/ScrollElement.js
index ead0a36..6ec9bd2 100644
--- a/node_modules/react-calendar-timeline/lib/lib/scroll/ScrollElement.js
+++ b/node_modules/react-calendar-timeline/lib/lib/scroll/ScrollElement.js
@@ -65,8 +65,34 @@ function (_Component) {
       }
     });

+    function detectTrackPad(e) {
+      let isTrackpad = false;
+      if (e.wheelDeltaY) {
+        if (Math.abs(e.wheelDeltaY) !== 120) {
+          isTrackpad = true;
+        }
+      }
+      else if (e.deltaMode === 0) {
+        isTrackpad = true;
+      }
+      return isTrackpad
+    }
+
     _defineProperty(_assertThisInitialized(_this), "handleWheel", function (e) {
-      var traditionalZoom = _this.props.traditionalZoom; // zoom in the time dimension
+      e.preventDefault();
+      var traditionalZoom = _this.props.traditionalZoom; 
+     if(detectTrackPad(e)){
+      const wheelDistance = function(evt){
+        if (!evt) evt = event;
+        var w=evt.wheelDeltaX, d=evt.detail;
+        if (d){
+          if (w) return w/d/40*d>0?1:-1; 
+          else return -d/3;              
+        } else return w/120;             
+      };
+      _this.props.onScroll(_this.scrollComponent.scrollLeft + (wheelDistance(e) * -20))
+     }
+      

       if (e.ctrlKey || e.metaKey || e.altKey) {
         e.preventDefault();
@@ -78,6 +104,7 @@ function (_Component) {
       } else if (e.shiftKey) {
         e.preventDefault(); // shift+scroll event from a touchpad has deltaY property populated; shift+scroll event from a mouse has deltaX

+        
         _this.props.onScroll(_this.scrollComponent.scrollLeft + (e.deltaY || e.deltaX)); // no modifier pressed? we prevented the default event, so scroll or zoom as needed

       }

This issue body was partially generated by patch-package.