gantt-task-react-v 1.5.26 → 1.6.0

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

@@ -5034,6 +5034,16 @@
       }
     );
   };
+  const AssigneesColumn = ({ data: { task } }) => {
+    if (task.type === "empty") {
+      return null;
+    }
+    const assignees = task.assignees;
+    if (!assignees || assignees.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: assignees.join(", ") });
+  };
   function useTaskListColumnsBuilder() {
     const createNameColumn = React.useCallback(
       (title2, width) => {
@@ -5103,6 +5113,17 @@
         canResize: false
       };
     }, []);
+    const createAssigneesColumn = React.useCallback(
+      (title2, width) => {
+        return {
+          id: "AssigneesColumn",
+          component: AssigneesColumn,
+          width: width || 120,
+          title: title2
+        };
+      },
+      []
+    );
     return {
       createNameColumn,
       createStartDateColumn,
@@ -5110,7 +5131,8 @@
       createDependenciesColumn,
       createDeleteActionColumn,
       createEditActionColumn,
-      createAddActionColumn
+      createAddActionColumn,
+      createAssigneesColumn
     };
   }
   const DEFAULT_THEME = {
@@ -12193,6 +12215,17 @@
     }
     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;
@@ -12372,6 +12405,7 @@
     height,
     progressWidth,
     progressX,
+    progress,
     startMoveFullTask,
     width,
     x,
@@ -12472,6 +12506,24 @@
               rx: barCornerRadius,
               fill: processColor
             }
+          ),
+          showProgress && width > 40 && /* @__PURE__ */ jsxRuntime.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),
+                "%"
+              ]
+            }
           )
         ]
       }
@@ -12512,6 +12564,31 @@
       }
     );
   };
+  const BarProgressHandle = ({
+    taskId,
+    progressPoint,
+    startMoveProgress,
+    className
+  }) => {
+    return /* @__PURE__ */ jsxRuntime.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";
@@ -12723,7 +12800,7 @@
       showProgress = true,
       progressColor
     } = props;
-    React.useMemo(() => width < 30, [width]);
+    const isSmallWidth = React.useMemo(() => width < 30, [width]);
     const handleHeight = React.useMemo(() => taskHeight - 2, [taskHeight]);
     const rootRef = React.useRef();
     const [ctrlPressed, setCtrlPressed] = React.useState(true);
@@ -12757,12 +12834,17 @@
       },
       [onTaskEventStart]
     );
-    React.useCallback(
+    const startMoveProgress = React.useCallback(
       (clientX) => {
         onTaskEventStart("progress", clientX);
       },
       [onTaskEventStart]
     );
+    const progressPoint = getProgressPoint(
+      +!rtl * progressWidth + progressX,
+      taskYOffset,
+      taskHeight
+    );
     const renderBarDisplay = () => {
       if (task.type === "project") {
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -12799,6 +12881,7 @@
             height: taskHeight,
             progressX,
             progressWidth,
+            progress: task.progress,
             barCornerRadius,
             isSelected,
             isCritical,
@@ -12862,7 +12945,15 @@
         }
       ),
       relationHandles,
-      false
+      isProgressChangeable(task) && /* @__PURE__ */ jsxRuntime.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";
@@ -19582,12 +19673,12 @@
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.body, children: [
-            data && onGoToTask && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.goToTaskBar, children: data.type === "arrow" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
+            data && onGoToTask && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.goToTaskBar, children: [
+              data.type === "task" && /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
                   className: styles.goToTaskButton,
-                  onClick: () => onGoToTask(data.taskFrom.id),
+                  onClick: () => onGoToTask(data.task.id),
                   type: "button",
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -19600,35 +19691,59 @@
                         strokeLinejoin: "round"
                       }
                     ) }),
-                    "Go to ",
-                    data.taskFrom.name
+                    "Go to Task"
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  className: styles.goToTaskButton,
-                  onClick: () => onGoToTask(data.taskTo.id),
-                  type: "button",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    className: styles.goToTaskButton,
+                    onClick: () => onGoToTask(data.taskFrom.id),
+                    type: "button",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          d: "M2 7h10M8 3l4 4-4 4",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round"
+                        }
+                      ) }),
+                      "Go to ",
+                      data.taskFrom.name
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    className: styles.goToTaskButton,
+                    onClick: () => onGoToTask(data.taskTo.id),
+                    type: "button",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.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
           ] })
         ]
       }
@@ -19661,8 +19776,6 @@
       onSelectTaskIds,
       // Invoked when user right-clicks a row in the task list
       onRowContextMenu,
-      onClickTaskRow,
-      onDoubleClickTaskRow,
       onWheel,
       roundEndDate: clientRoundEndDate = defaultRoundEndDate,
       roundStartDate: clientRoundStartDate = defaultRoundStartDate,
@@ -20813,11 +20926,11 @@
         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);
         }
@@ -20850,11 +20963,11 @@
             setDrawerData({ type: "task", task });
           }
         }
-        if (onClickTaskRow) {
-          onClickTaskRow(task);
+        if (taskList.onClickTaskRow) {
+          taskList.onClickTaskRow(task);
         }
       },
-      [enableDrawer, drawerData, onClickTaskRow]
+      [enableDrawer, drawerData, taskList]
     );
     const handleTaskRowDoubleClick = React.useCallback(
       (task) => {
@@ -20869,11 +20982,11 @@
           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 = React.useCallback(() => {
       setDrawerData(null);
@@ -21132,6 +21245,16 @@
         language
       ]
     );
+    const drawerAwareSelectOnMouseDown = React.useCallback(
+      (taskId, event) => {
+        if (enableDrawer && drawerData) {
+          selectTask(taskId);
+          return;
+        }
+        selectTaskOnMouseDown(taskId, event);
+      },
+      [enableDrawer, drawerData, selectTask, selectTaskOnMouseDown]
+    );
     const renderTaskBarProps = React.useMemo(
       () => ({
         ...taskBar,
@@ -21168,7 +21291,7 @@
         activeTaskId,
         renderedRowIndexes,
         rtl,
-        selectTaskOnMouseDown,
+        selectTaskOnMouseDown: drawerAwareSelectOnMouseDown,
         selectedIdsMirror,
         startColumnIndex,
         taskHalfHeight,
@@ -21210,7 +21333,7 @@
         handleTaskClick,
         renderedRowIndexes,
         rtl,
-        selectTaskOnMouseDown,
+        drawerAwareSelectOnMouseDown,
         selectedIdsMirror,
         startColumnIndex,
         taskHalfHeight,

package/dist/types/public-types.d.ts

@@ -10,7 +10,7 @@ export type GanttDrawerData = {
     taskFrom: Task;
     taskTo: Task;
 };
-export type RenderDrawerContent = (data: GanttDrawerData) => ReactNode;
+export type RenderDrawerContent = (data: GanttDrawerData, goToTask: (taskId: string) => void) => ReactNode;
 export interface GanttDrawerProps {
     /**
      * Enable the drawer panel on task/arrow click
@@ -184,6 +184,14 @@ export interface GanttTaskListProps {
      * Render bottom table content
      */
     tableBottom?: TableRenderBottomProps;
+    /**
+     * Invokes on single click on a task list row. Receives the task data.
+     */
+    onClickTaskRow?: (task: RenderTask) => void;
+    /**
+     * Invokes on double click on a task list row. Receives the task data.
+     */
+    onDoubleClickTaskRow?: (task: RenderTask) => void;
 }
 export interface TableRenderBottomProps {
     height?: number;
@@ -408,14 +416,6 @@ export interface GanttProps {
      * Set to a task id to scroll both horizontally and vertically to that task.
      */
     scrollToTaskId?: TaskId;
-    /**
-     * Invokes on single click on a task list row. Receives the task data.
-     */
-    onClickTaskRow?: (task: RenderTask) => void;
-    /**
-     * Invokes on double click on a task list row. Receives the task data.
-     */
-    onDoubleClickTaskRow?: (task: RenderTask) => void;
     /**
      * Drawer panel options for task/arrow click
      */

package/package.json

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