gantt-task-react - npm Package Compare versions

Comparing version 0.1.5 to 0.1.6

dist/index.js

@@ -1477,2 +1477,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
       onTaskDelete = _ref.onTaskDelete;
+  var wrapperRef = React.useRef(null);
 
@@ -1491,2 +1492,6 @@ var _useState = React.useState(tasks),
 
+  var _useState4 = React.useState(false),
+      ignoreScrollEvent = _useState4[0],
+      setIgnoreScrollEvent = _useState4[1];
+
   var _ganttDateRange = ganttDateRange(ganttTasks, viewMode),
@@ -1500,9 +1505,37 @@ startDate = _ganttDateRange[0],
   var ganttFullHeight = ganttTasks.length * rowHeight;
+  React.useEffect(function () {
+    var handleWheel = function handleWheel(event) {
+      event.preventDefault();
+      var newScrollY = scrollY + event.deltaY;
 
-  var onTasksDateChange = function onTasksDateChange(tasks) {
-    setGanttTasks(tasks);
-  };
+      if (newScrollY < 0) {
+        setScrollY(0);
+      } else if (newScrollY > ganttFullHeight - ganttHeight) {
+        setScrollY(ganttFullHeight - ganttHeight);
+      } else {
+        setScrollY(newScrollY);
+      }
 
-  var handleScroll = function handleScroll(event) {
-    if (scrollY !== event.currentTarget.scrollTop) setScrollY(event.currentTarget.scrollTop);
+      setIgnoreScrollEvent(true);
+    };
+
+    if (wrapperRef.current && ganttHeight && ganttHeight < ganttTasks.length * rowHeight) {
+      wrapperRef.current.addEventListener("wheel", handleWheel, {
+        passive: false
+      });
+    }
+
+    return function () {
+      if (wrapperRef.current) {
+        wrapperRef.current.removeEventListener("wheel", handleWheel);
+      }
+    };
+  }, [wrapperRef.current, scrollY, ganttHeight, ganttTasks, rowHeight]);
+
+  var handleScrollY = function handleScrollY(event) {
+    if (scrollY !== event.currentTarget.scrollTop && !ignoreScrollEvent) {
+      setScrollY(event.currentTarget.scrollTop);
+    }
+
+    setIgnoreScrollEvent(false);
   };
@@ -1514,14 +1547,2 @@
 
-  var handleWheel = function handleWheel(event) {
-    var newScrollY = scrollY + event.deltaY;
-
-    if (newScrollY < 0) {
-      setScrollY(0);
-    } else if (newScrollY > ganttFullHeight - ganttHeight) {
-      setScrollY(ganttFullHeight - ganttHeight);
-    } else {
-      setScrollY(scrollY + event.deltaY);
-    }
-  };
-
   var handleKeyDown = function handleKeyDown(event) {
@@ -1574,4 +1595,10 @@ event.preventDefault();
     }
+
+    setIgnoreScrollEvent(true);
   };
 
+  var onTasksDateChange = function onTasksDateChange(tasks) {
+    setGanttTasks(tasks);
+  };
+
   var gridProps = {
@@ -1635,5 +1662,5 @@ columnWidth: columnWidth,
     className: styles$4.wrapper,
-    onWheel: handleWheel,
     onKeyDown: handleKeyDown,
-    tabIndex: 0
+    tabIndex: 0,
+    ref: wrapperRef
   }, listCellWidth && React__default.createElement(TaskList, Object.assign({}, tableProps)), React__default.createElement(TaskGantt, {
@@ -1652,3 +1679,3 @@ gridProps: gridProps,
     scroll: scrollY,
-    onScroll: handleScroll
+    onScroll: handleScrollY
   }));
@@ -1655,0 +1682,0 @@ };

dist/index.modern.js

@@ -1476,2 +1476,3 @@ import React, { useRef, useState, useEffect } from 'react';
       onTaskDelete = _ref.onTaskDelete;
+  var wrapperRef = useRef(null);
 
@@ -1490,2 +1491,6 @@ var _useState = useState(tasks),
 
+  var _useState4 = useState(false),
+      ignoreScrollEvent = _useState4[0],
+      setIgnoreScrollEvent = _useState4[1];
+
   var _ganttDateRange = ganttDateRange(ganttTasks, viewMode),
@@ -1499,9 +1504,37 @@ startDate = _ganttDateRange[0],
   var ganttFullHeight = ganttTasks.length * rowHeight;
+  useEffect(function () {
+    var handleWheel = function handleWheel(event) {
+      event.preventDefault();
+      var newScrollY = scrollY + event.deltaY;
 
-  var onTasksDateChange = function onTasksDateChange(tasks) {
-    setGanttTasks(tasks);
-  };
+      if (newScrollY < 0) {
+        setScrollY(0);
+      } else if (newScrollY > ganttFullHeight - ganttHeight) {
+        setScrollY(ganttFullHeight - ganttHeight);
+      } else {
+        setScrollY(newScrollY);
+      }
 
-  var handleScroll = function handleScroll(event) {
-    if (scrollY !== event.currentTarget.scrollTop) setScrollY(event.currentTarget.scrollTop);
+      setIgnoreScrollEvent(true);
+    };
+
+    if (wrapperRef.current && ganttHeight && ganttHeight < ganttTasks.length * rowHeight) {
+      wrapperRef.current.addEventListener("wheel", handleWheel, {
+        passive: false
+      });
+    }
+
+    return function () {
+      if (wrapperRef.current) {
+        wrapperRef.current.removeEventListener("wheel", handleWheel);
+      }
+    };
+  }, [wrapperRef.current, scrollY, ganttHeight, ganttTasks, rowHeight]);
+
+  var handleScrollY = function handleScrollY(event) {
+    if (scrollY !== event.currentTarget.scrollTop && !ignoreScrollEvent) {
+      setScrollY(event.currentTarget.scrollTop);
+    }
+
+    setIgnoreScrollEvent(false);
   };
@@ -1513,14 +1546,2 @@
 
-  var handleWheel = function handleWheel(event) {
-    var newScrollY = scrollY + event.deltaY;
-
-    if (newScrollY < 0) {
-      setScrollY(0);
-    } else if (newScrollY > ganttFullHeight - ganttHeight) {
-      setScrollY(ganttFullHeight - ganttHeight);
-    } else {
-      setScrollY(scrollY + event.deltaY);
-    }
-  };
-
   var handleKeyDown = function handleKeyDown(event) {
@@ -1573,4 +1594,10 @@ event.preventDefault();
     }
+
+    setIgnoreScrollEvent(true);
   };
 
+  var onTasksDateChange = function onTasksDateChange(tasks) {
+    setGanttTasks(tasks);
+  };
+
   var gridProps = {
@@ -1634,5 +1661,5 @@ columnWidth: columnWidth,
     className: styles$4.wrapper,
-    onWheel: handleWheel,
     onKeyDown: handleKeyDown,
-    tabIndex: 0
+    tabIndex: 0,
+    ref: wrapperRef
   }, listCellWidth && React.createElement(TaskList, Object.assign({}, tableProps)), React.createElement(TaskGantt, {
@@ -1651,3 +1678,3 @@ gridProps: gridProps,
     scroll: scrollY,
-    onScroll: handleScroll
+    onScroll: handleScrollY
   }));
@@ -1654,0 +1681,0 @@ };

package.json

 {
   "name": "gantt-task-react",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Interactive Gantt Chart for React with TypeScript.",
@@ -5,0 +5,0 @@ "author": "MaTeMaTuK <[e-mail]>",

README.md

@@ -110,3 +110,3 @@ # gantt-task-react
 
-- TooltipContent: [`React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;`](https://github.com/MaTeMaTuK/gantt-task-react/blob/main/src/components/Other/tooltip.tsx#L56)
+- TooltipContent: [`React.FC<{ task: Task; fontSize: string; fontFamily: string; }>;`](https://github.com/MaTeMaTuK/gantt-task-react/blob/main/src/components/other/tooltip.tsx#L56)
 - TaskListHeader: `React.FC<{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string;}>;`
@@ -113,0 +113,0 @@ - TaskListTable: `React.FC<{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; }>;`

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

366054

increased by1.37%

Lines of code

3533

increased by1.26%

No dependency changes