gantt-task-react-v 1.7.7 → 1.7.9

package/dist/gantt-task-react.es.js

@@ -5693,35 +5693,26 @@ const TaskListTableHeadersDefaultInner = ({
 }) => {
   const pinnedStyles = useMemo(() => {
     const result = {};
-    let leftOffset = 0;
-    if (canMoveTasks) {
-      leftOffset = 24;
-    }
+    const base = {
+      position: "relative",
+      zIndex: 3,
+      backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+    };
     for (let i = 0; i < columns.length; i++) {
       if (columns[i].pinned === "left") {
         result[i] = {
-          position: "sticky",
-          left: leftOffset,
-          zIndex: 3,
-          backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+          ...base,
+          transform: "translateX(var(--pinned-translate-left, 0px))"
         };
-        leftOffset += columns[i].width;
-      }
-    }
-    let rightOffset = 0;
-    for (let i = columns.length - 1; i >= 0; i--) {
-      if (columns[i].pinned === "right") {
+      } else if (columns[i].pinned === "right") {
         result[i] = {
-          position: "sticky",
-          right: rightOffset,
-          zIndex: 3,
-          backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+          ...base,
+          transform: "translateX(var(--pinned-translate-right, 0px))"
         };
-        rightOffset += columns[i].width;
       }
     }
     return result;
-  }, [columns, canMoveTasks]);
+  }, [columns]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -10457,6 +10448,16 @@ const TaskListTableRowInner = forwardRef(
       }
       return isSelected ? "var(--gantt-table-selected-task-background-color)" : isEven ? "var(--gantt-table-even-background-color)" : "var(--gantt-background-color, #fff)";
     }, [isEven, isOverlay2, isSelected]);
+    const pinnedBgColor = useMemo(() => {
+      if (isOverlay2) {
+        return "var(--gantt-table-drag-task-background-color)";
+      }
+      if (isSelected) {
+        const base = isEven ? "var(--gantt-table-even-background-color, #f5f5f5)" : "var(--gantt-background-color, #fff)";
+        return `linear-gradient(var(--gantt-table-selected-task-background-color), var(--gantt-table-selected-task-background-color)), linear-gradient(${base}, ${base})`;
+      }
+      return isEven ? "var(--gantt-table-even-background-color)" : "var(--gantt-background-color, #fff)";
+    }, [isEven, isOverlay2, isSelected]);
     const rowClassName = useMemo(() => {
       const classNames = [styles$h.taskListTableRow];
       if (moveOverPosition === "after") {
@@ -10478,7 +10479,7 @@ const TaskListTableRowInner = forwardRef(
       const pinnedBase = {
         position: "relative",
         zIndex: 3,
-        backgroundColor: backgroundColor || "var(--gantt-background-color, #fff)"
+        background: pinnedBgColor
       };
       for (let i = 0; i < columns.length; i++) {
         if (columns[i].pinned === "left") {
@@ -10486,10 +10487,7 @@ const TaskListTableRowInner = forwardRef(
             ...pinnedBase,
             transform: "translateX(var(--pinned-translate-left, 0px))"
           };
-        }
-      }
-      for (let i = columns.length - 1; i >= 0; i--) {
-        if (columns[i].pinned === "right") {
+        } else if (columns[i].pinned === "right") {
           result[i] = {
             ...pinnedBase,
             transform: "translateX(var(--pinned-translate-right, 0px))"
@@ -10497,7 +10495,7 @@ const TaskListTableRowInner = forwardRef(
         }
       }
       return result;
-    }, [columns, backgroundColor]);
+    }, [columns, pinnedBgColor]);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -11185,10 +11183,13 @@ const TaskListInner = ({
     },
     [internalColumnVisibilityChange, onColumnVisibilityChange]
   );
-  const columns = useMemo(
-    () => allColumns.filter((col) => !col.hidden),
-    [allColumns]
-  );
+  const columns = useMemo(() => {
+    const visible = allColumns.filter((col) => !col.hidden);
+    const left = visible.filter((col) => col.pinned === "left");
+    const middle = visible.filter((col) => !col.pinned);
+    const right = visible.filter((col) => col.pinned === "right");
+    return [...left, ...middle, ...right];
+  }, [allColumns]);
   const horizontalScrollRef = useRef(null);
   const setHorizontalScrollRef = useCallback(
     (el) => {
@@ -11207,11 +11208,12 @@ const TaskListInner = ({
     const update = () => {
       const sl = scrollEl.scrollLeft;
       const maxSl = scrollEl.scrollWidth - scrollEl.clientWidth;
-      containerEl.style.setProperty("--pinned-translate-left", `${sl}px`);
-      containerEl.style.setProperty(
-        "--pinned-translate-right",
-        `${sl - maxSl}px`
-      );
+      const leftVal = `${sl}px`;
+      const rightVal = `${sl - maxSl}px`;
+      scrollEl.style.setProperty("--pinned-translate-left", leftVal);
+      scrollEl.style.setProperty("--pinned-translate-right", rightVal);
+      containerEl.style.setProperty("--pinned-translate-left", leftVal);
+      containerEl.style.setProperty("--pinned-translate-right", rightVal);
     };
     update();
     scrollEl.addEventListener("scroll", update, { passive: true });
@@ -11334,7 +11336,7 @@ const TaskListInner = ({
                         distances.minimumRowDisplayed * distances.rowHeight
                       ),
                       backgroundSize: `100% ${fullRowHeight * 2}px`,
-                      backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
+                      backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, var(--gantt-table-even-background-color, #f5f5f5) ${fullRowHeight}px)`
                     },
                     children: /* @__PURE__ */ jsx(
                       RenderTaskListTable,
@@ -14449,7 +14451,7 @@ const TaskGanttInner = (props) => {
       backgroundPositionX: additionalLeftSpace || void 0,
       backgroundImage: [
         `linear-gradient(to right, #ebeff2 1px, transparent 2px)`,
-        `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
+        `linear-gradient(to bottom, transparent ${fullRowHeight}px, var(--gantt-table-even-background-color, #f5f5f5) ${fullRowHeight}px)`
       ].join(", ")
     }),
     [

package/dist/gantt-task-react.umd.js

@@ -5710,35 +5710,26 @@
   }) => {
     const pinnedStyles = React.useMemo(() => {
       const result = {};
-      let leftOffset = 0;
-      if (canMoveTasks) {
-        leftOffset = 24;
-      }
+      const base = {
+        position: "relative",
+        zIndex: 3,
+        backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+      };
       for (let i = 0; i < columns.length; i++) {
         if (columns[i].pinned === "left") {
           result[i] = {
-            position: "sticky",
-            left: leftOffset,
-            zIndex: 3,
-            backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+            ...base,
+            transform: "translateX(var(--pinned-translate-left, 0px))"
           };
-          leftOffset += columns[i].width;
-        }
-      }
-      let rightOffset = 0;
-      for (let i = columns.length - 1; i >= 0; i--) {
-        if (columns[i].pinned === "right") {
+        } else if (columns[i].pinned === "right") {
           result[i] = {
-            position: "sticky",
-            right: rightOffset,
-            zIndex: 3,
-            backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+            ...base,
+            transform: "translateX(var(--pinned-translate-right, 0px))"
           };
-          rightOffset += columns[i].width;
         }
       }
       return result;
-    }, [columns, canMoveTasks]);
+    }, [columns]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -10474,6 +10465,16 @@
         }
         return isSelected ? "var(--gantt-table-selected-task-background-color)" : isEven ? "var(--gantt-table-even-background-color)" : "var(--gantt-background-color, #fff)";
       }, [isEven, isOverlay2, isSelected]);
+      const pinnedBgColor = React.useMemo(() => {
+        if (isOverlay2) {
+          return "var(--gantt-table-drag-task-background-color)";
+        }
+        if (isSelected) {
+          const base = isEven ? "var(--gantt-table-even-background-color, #f5f5f5)" : "var(--gantt-background-color, #fff)";
+          return `linear-gradient(var(--gantt-table-selected-task-background-color), var(--gantt-table-selected-task-background-color)), linear-gradient(${base}, ${base})`;
+        }
+        return isEven ? "var(--gantt-table-even-background-color)" : "var(--gantt-background-color, #fff)";
+      }, [isEven, isOverlay2, isSelected]);
       const rowClassName = React.useMemo(() => {
         const classNames = [styles$h.taskListTableRow];
         if (moveOverPosition === "after") {
@@ -10495,7 +10496,7 @@
         const pinnedBase = {
           position: "relative",
           zIndex: 3,
-          backgroundColor: backgroundColor || "var(--gantt-background-color, #fff)"
+          background: pinnedBgColor
         };
         for (let i = 0; i < columns.length; i++) {
           if (columns[i].pinned === "left") {
@@ -10503,10 +10504,7 @@
               ...pinnedBase,
               transform: "translateX(var(--pinned-translate-left, 0px))"
             };
-          }
-        }
-        for (let i = columns.length - 1; i >= 0; i--) {
-          if (columns[i].pinned === "right") {
+          } else if (columns[i].pinned === "right") {
             result[i] = {
               ...pinnedBase,
               transform: "translateX(var(--pinned-translate-right, 0px))"
@@ -10514,7 +10512,7 @@
           }
         }
         return result;
-      }, [columns, backgroundColor]);
+      }, [columns, pinnedBgColor]);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -11202,10 +11200,13 @@
       },
       [internalColumnVisibilityChange, onColumnVisibilityChange]
     );
-    const columns = React.useMemo(
-      () => allColumns.filter((col) => !col.hidden),
-      [allColumns]
-    );
+    const columns = React.useMemo(() => {
+      const visible = allColumns.filter((col) => !col.hidden);
+      const left = visible.filter((col) => col.pinned === "left");
+      const middle = visible.filter((col) => !col.pinned);
+      const right = visible.filter((col) => col.pinned === "right");
+      return [...left, ...middle, ...right];
+    }, [allColumns]);
     const horizontalScrollRef = React.useRef(null);
     const setHorizontalScrollRef = React.useCallback(
       (el) => {
@@ -11224,11 +11225,12 @@
       const update = () => {
         const sl = scrollEl.scrollLeft;
         const maxSl = scrollEl.scrollWidth - scrollEl.clientWidth;
-        containerEl.style.setProperty("--pinned-translate-left", `${sl}px`);
-        containerEl.style.setProperty(
-          "--pinned-translate-right",
-          `${sl - maxSl}px`
-        );
+        const leftVal = `${sl}px`;
+        const rightVal = `${sl - maxSl}px`;
+        scrollEl.style.setProperty("--pinned-translate-left", leftVal);
+        scrollEl.style.setProperty("--pinned-translate-right", rightVal);
+        containerEl.style.setProperty("--pinned-translate-left", leftVal);
+        containerEl.style.setProperty("--pinned-translate-right", rightVal);
       };
       update();
       scrollEl.addEventListener("scroll", update, { passive: true });
@@ -11351,7 +11353,7 @@
                           distances.minimumRowDisplayed * distances.rowHeight
                         ),
                         backgroundSize: `100% ${fullRowHeight * 2}px`,
-                        backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
+                        backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, var(--gantt-table-even-background-color, #f5f5f5) ${fullRowHeight}px)`
                       },
                       children: /* @__PURE__ */ jsxRuntime.jsx(
                         RenderTaskListTable,
@@ -14466,7 +14468,7 @@
         backgroundPositionX: additionalLeftSpace || void 0,
         backgroundImage: [
           `linear-gradient(to right, #ebeff2 1px, transparent 2px)`,
-          `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
+          `linear-gradient(to bottom, transparent ${fullRowHeight}px, var(--gantt-table-even-background-color, #f5f5f5) ${fullRowHeight}px)`
         ].join(", ")
       }),
       [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react-v",
-  "version": "1.7.7",
+  "version": "1.7.9",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",