gantt-task-react-v 1.5.26 → 1.6.0

package/dist/components/task-item/bar/bar-display.d.ts

@@ -8,6 +8,7 @@ type BarDisplayProps = {
     height: number;
     progressWidth: number;
     progressX: number;
+    progress: number;
     startMoveFullTask: (clientX: number) => void;
     taskId: TaskId;
     width: number;

package/dist/components/task-list/task-list-table-columns/assignees-column.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ColumnProps } from "../../../types";
+export declare const AssigneesColumn: React.FC<ColumnProps>;

package/dist/components/task-list/task-list-table-columns/use-task-list-columns-builder.d.ts

@@ -42,4 +42,10 @@ export declare function useTaskListColumnsBuilder(): {
         width: number;
         canResize: boolean;
     };
+    createAssigneesColumn: (title: React.ReactNode | null, width?: number) => {
+        id: string;
+        component: React.FC<import("../../..").ColumnProps>;
+        width: number;
+        title: React.ReactNode;
+    };
 };

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

@@ -5017,6 +5017,16 @@ const AddColumn = ({
     }
   );
 };
+const AssigneesColumn = ({ data: { task } }) => {
+  if (task.type === "empty") {
+    return null;
+  }
+  const assignees = task.assignees;
+  if (!assignees || assignees.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: assignees.join(", ") });
+};
 function useTaskListColumnsBuilder() {
   const createNameColumn = useCallback(
     (title2, width) => {
@@ -5086,6 +5096,17 @@ function useTaskListColumnsBuilder() {
       canResize: false
     };
   }, []);
+  const createAssigneesColumn = useCallback(
+    (title2, width) => {
+      return {
+        id: "AssigneesColumn",
+        component: AssigneesColumn,
+        width: width || 120,
+        title: title2
+      };
+    },
+    []
+  );
   return {
     createNameColumn,
     createStartDateColumn,
@@ -5093,7 +5114,8 @@ function useTaskListColumnsBuilder() {
     createDependenciesColumn,
     createDeleteActionColumn,
     createEditActionColumn,
-    createAddActionColumn
+    createAddActionColumn,
+    createAssigneesColumn
   };
 }
 const DEFAULT_THEME = {
@@ -12176,6 +12198,17 @@ const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
   }
   return [progressWidth, progressX];
 };
+const getProgressPoint = (progressX, taskY, taskHeight) => {
+  const point = [
+    progressX - 5,
+    taskY + taskHeight,
+    progressX + 5,
+    taskY + taskHeight,
+    progressX,
+    taskY + taskHeight - 8.66
+  ];
+  return point.join(",");
+};
 const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
   const safeX = isNaN(x) || !isFinite(x) ? 0 : x;
   const safeTaskX = isNaN(taskX) || !isFinite(taskX) ? 0 : taskX;
@@ -12355,6 +12388,7 @@ const BarDisplay = ({
   height,
   progressWidth,
   progressX,
+  progress,
   startMoveFullTask,
   width,
   x,
@@ -12455,6 +12489,24 @@ const BarDisplay = ({
             rx: barCornerRadius,
             fill: processColor
           }
+        ),
+        showProgress && width > 40 && /* @__PURE__ */ jsxs(
+          "text",
+          {
+            x: x + width / 2,
+            y: y + height / 2,
+            dominantBaseline: "central",
+            textAnchor: "middle",
+            fill: "#fff",
+            fontSize: 11,
+            fontWeight: 600,
+            pointerEvents: "none",
+            style: { userSelect: "none" },
+            children: [
+              Math.round(progress),
+              "%"
+            ]
+          }
         )
       ]
     }
@@ -12495,6 +12547,31 @@ const BarDateHandle = ({
     }
   );
 };
+const BarProgressHandle = ({
+  taskId,
+  progressPoint,
+  startMoveProgress,
+  className
+}) => {
+  return /* @__PURE__ */ jsx(
+    "polygon",
+    {
+      "data-testid": `bar-progress-handle-${taskId}`,
+      className,
+      points: progressPoint,
+      onMouseDown: (e) => {
+        e.stopPropagation();
+        startMoveProgress(e.clientX);
+      },
+      onTouchStart: (e) => {
+        const firstTouch = e.touches[0];
+        if (firstTouch) {
+          startMoveProgress(firstTouch.clientX);
+        }
+      }
+    }
+  );
+};
 const projectWrapper = "_projectWrapper_1maxt_1";
 const projectBackground = "_projectBackground_1maxt_11";
 const projectTop = "_projectTop_1maxt_21";
@@ -12706,7 +12783,7 @@ const Bar = (props) => {
     showProgress = true,
     progressColor
   } = props;
-  useMemo(() => width < 30, [width]);
+  const isSmallWidth = useMemo(() => width < 30, [width]);
   const handleHeight = useMemo(() => taskHeight - 2, [taskHeight]);
   const rootRef = useRef();
   const [ctrlPressed, setCtrlPressed] = useState(true);
@@ -12740,12 +12817,17 @@ const Bar = (props) => {
     },
     [onTaskEventStart]
   );
-  useCallback(
+  const startMoveProgress = useCallback(
     (clientX) => {
       onTaskEventStart("progress", clientX);
     },
     [onTaskEventStart]
   );
+  const progressPoint = getProgressPoint(
+    +!rtl * progressWidth + progressX,
+    taskYOffset,
+    taskHeight
+  );
   const renderBarDisplay = () => {
     if (task.type === "project") {
       return /* @__PURE__ */ jsx(
@@ -12782,6 +12864,7 @@ const Bar = (props) => {
           height: taskHeight,
           progressX,
           progressWidth,
+          progress: task.progress,
           barCornerRadius,
           isSelected,
           isCritical,
@@ -12845,7 +12928,15 @@ const Bar = (props) => {
       }
     ),
     relationHandles,
-    false
+    isProgressChangeable(task) && /* @__PURE__ */ jsx(
+      BarProgressHandle,
+      {
+        className: `${styles$9.barHandle} ${isMovingProgress ? styles$9.barHandleImportantVisible : ""} ${isSmallWidth || isMovingDate || isRelationDrawMode ? styles$9.barHandleImportantHidden : ""}`,
+        taskId: task.id,
+        progressPoint,
+        startMoveProgress
+      }
+    )
   ] });
 };
 const milestoneWrapper = "_milestoneWrapper_vcirf_1";
@@ -19565,12 +19656,12 @@ const GanttDrawerInner = ({
           )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
-          data && onGoToTask && /* @__PURE__ */ jsx("div", { className: styles.goToTaskBar, children: data.type === "arrow" && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(
+          data && onGoToTask && /* @__PURE__ */ jsxs("div", { className: styles.goToTaskBar, children: [
+            data.type === "task" && /* @__PURE__ */ jsxs(
               "button",
               {
                 className: styles.goToTaskButton,
-                onClick: () => onGoToTask(data.taskFrom.id),
+                onClick: () => onGoToTask(data.task.id),
                 type: "button",
                 children: [
                   /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
@@ -19583,35 +19674,59 @@ const GanttDrawerInner = ({
                       strokeLinejoin: "round"
                     }
                   ) }),
-                  "Go to ",
-                  data.taskFrom.name
+                  "Go to Task"
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs(
-              "button",
-              {
-                className: styles.goToTaskButton,
-                onClick: () => onGoToTask(data.taskTo.id),
-                type: "button",
-                children: [
-                  /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
-                    "path",
-                    {
-                      d: "M2 7h10M8 3l4 4-4 4",
-                      stroke: "currentColor",
-                      strokeWidth: "1.5",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round"
-                    }
-                  ) }),
-                  "Go to ",
-                  data.taskTo.name
-                ]
-              }
-            )
-          ] }) }),
-          data && renderContent ? renderContent(data) : null
+            data.type === "arrow" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: styles.goToTaskButton,
+                  onClick: () => onGoToTask(data.taskFrom.id),
+                  type: "button",
+                  children: [
+                    /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M2 7h10M8 3l4 4-4 4",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ) }),
+                    "Go to ",
+                    data.taskFrom.name
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: styles.goToTaskButton,
+                  onClick: () => onGoToTask(data.taskTo.id),
+                  type: "button",
+                  children: [
+                    /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M2 7h10M8 3l4 4-4 4",
+                        stroke: "currentColor",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ) }),
+                    "Go to ",
+                    data.taskTo.name
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          data && renderContent ? renderContent(data, onGoToTask ?? (() => {
+          })) : null
         ] })
       ]
     }
@@ -19644,8 +19759,6 @@ const Gantt = (props) => {
     onSelectTaskIds,
     // Invoked when user right-clicks a row in the task list
     onRowContextMenu,
-    onClickTaskRow,
-    onDoubleClickTaskRow,
     onWheel,
     roundEndDate: clientRoundEndDate = defaultRoundEndDate,
     roundStartDate: clientRoundStartDate = defaultRoundStartDate,
@@ -20796,11 +20909,11 @@ const Gantt = (props) => {
       if (enableDrawer) {
         setActiveArrowKey(null);
         setActiveTaskId(task.id);
+        selectTask(task.id);
         if ((drawerData == null ? void 0 : drawerData.type) === "task") {
           setDrawerData({ type: "task", task });
         }
       }
-      selectTask(task.id);
       if (taskBar.onClick) {
         taskBar.onClick(task);
       }
@@ -20833,11 +20946,11 @@ const Gantt = (props) => {
           setDrawerData({ type: "task", task });
         }
       }
-      if (onClickTaskRow) {
-        onClickTaskRow(task);
+      if (taskList.onClickTaskRow) {
+        taskList.onClickTaskRow(task);
       }
     },
-    [enableDrawer, drawerData, onClickTaskRow]
+    [enableDrawer, drawerData, taskList]
   );
   const handleTaskRowDoubleClick = useCallback(
     (task) => {
@@ -20852,11 +20965,11 @@ const Gantt = (props) => {
         setActiveTaskId(task.id);
         setDrawerData({ type: "task", task });
       }
-      if (onDoubleClickTaskRow) {
-        onDoubleClickTaskRow(task);
+      if (taskList.onDoubleClickTaskRow) {
+        taskList.onDoubleClickTaskRow(task);
       }
     },
-    [enableDrawer, drawerData, onDoubleClickTaskRow, selectTask]
+    [enableDrawer, drawerData, taskList, selectTask]
   );
   const handleDrawerClose = useCallback(() => {
     setDrawerData(null);
@@ -21115,6 +21228,16 @@ const Gantt = (props) => {
       language
     ]
   );
+  const drawerAwareSelectOnMouseDown = useCallback(
+    (taskId, event) => {
+      if (enableDrawer && drawerData) {
+        selectTask(taskId);
+        return;
+      }
+      selectTaskOnMouseDown(taskId, event);
+    },
+    [enableDrawer, drawerData, selectTask, selectTaskOnMouseDown]
+  );
   const renderTaskBarProps = useMemo(
     () => ({
       ...taskBar,
@@ -21151,7 +21274,7 @@ const Gantt = (props) => {
       activeTaskId,
       renderedRowIndexes,
       rtl,
-      selectTaskOnMouseDown,
+      selectTaskOnMouseDown: drawerAwareSelectOnMouseDown,
       selectedIdsMirror,
       startColumnIndex,
       taskHalfHeight,
@@ -21193,7 +21316,7 @@ const Gantt = (props) => {
       handleTaskClick,
       renderedRowIndexes,
       rtl,
-      selectTaskOnMouseDown,
+      drawerAwareSelectOnMouseDown,
       selectedIdsMirror,
       startColumnIndex,
       taskHalfHeight,