gantt-task-react-v 1.6.14 → 1.6.16

package/README.md

@@ -256,6 +256,33 @@ A slide-in panel for viewing task/arrow details with built-in "Go to" navigation
 
 The `goToTask(taskId)` function scrolls both horizontally and vertically to center the target task and selects it. Built-in "Go to" buttons also appear automatically in the drawer header for arrow-type panels and task-type panels.
 
+### Opening the drawer programmatically
+
+Pass `openDrawerTaskId` inside the `drawer` prop to open the drawer for a specific task without any user interaction. When the value changes the drawer updates to show the new task.
+
+```tsx
+const [inspect, setInspect] = useState<string | undefined>(undefined);
+
+<Gantt
+  tasks={tasks}
+  drawer={{
+    enableDrawer: true,
+    openDrawerTaskId: inspect,
+    renderDrawerContent: data => {
+      if (data.type === "task") return <div>{data.task.name}</div>;
+      return null;
+    },
+  }}
+/>;
+
+{
+  /* Open drawer for a specific task from anywhere in your UI */
+}
+<button onClick={() => setInspect("task-1")}>Inspect Task 1</button>;
+```
+
+> **Note:** `openDrawerTaskId` is only honoured when `enableDrawer` is `true`.
+
 ## Scroll To Task
 
 Programmatically scroll to and select any task by id.
@@ -643,11 +670,12 @@ const tasks: Task[] = [
 
 ### GanttDrawerProps
 
-| Prop                  | Type                  | Default | Description             |
-| --------------------- | --------------------- | ------- | ----------------------- |
-| `enableDrawer`        | `boolean`             | `false` | Enable drawer panel     |
-| `drawerWidth`         | `number`              | `360`   | Panel width in px       |
-| `renderDrawerContent` | `RenderDrawerContent` | —       | Custom content renderer |
+| Prop                  | Type                  | Default | Description                                                |
+| --------------------- | --------------------- | ------- | ---------------------------------------------------------- |
+| `enableDrawer`        | `boolean`             | `false` | Enable drawer panel                                        |
+| `drawerWidth`         | `number`              | `360`   | Panel width in px                                          |
+| `renderDrawerContent` | `RenderDrawerContent` | —       | Custom content renderer                                    |
+| `openDrawerTaskId`    | `string`              | —       | Programmatically open the drawer for the task with this id |
 
 `RenderDrawerContent = (data: GanttDrawerData, goToTask: (taskId: string) => void) => ReactNode`
 

package/dist/components/gantt/task-gantt-content.d.ts

@@ -45,6 +45,7 @@ export interface TaskGanttContentProps extends GanttTaskBarActions {
     taskBarMovingAction: (task: RenderTask) => TaskBarMoveAction | null;
     viewMode: ViewMode;
     showProgress?: boolean;
+    hideProjectProgress?: boolean;
     progressColor?: string;
 }
 export declare const TaskGanttContent: React.NamedExoticComponent<TaskGanttContentProps>;

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

@@ -33,6 +33,7 @@ export interface TaskItemProps extends Omit<GanttTaskBarActions, "taskBarMovingA
     renderCustomLabel?: RenderCustomLabel;
     viewMode: ViewMode;
     showProgress?: boolean;
+    hideProjectProgress?: boolean;
     progressColor?: string;
 }
 export declare const TaskItem: React.NamedExoticComponent<TaskItemProps>;

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

@@ -5175,10 +5175,10 @@ const DEFAULT_THEME = {
     projectProgressSelectedColor: "#0097A7",
     projectProgressCriticalColor: "#00838F",
     projectProgressSelectedCriticalColor: "#006064",
-    projectBackgroundColor: "#FFA726",
-    projectBackgroundSelectedColor: "#F57C00",
-    projectBackgroundCriticalColor: "#EF6C00",
-    projectBackgroundSelectedCriticalColor: "#E65100",
+    projectBackgroundColor: "#0A0A0A",
+    projectBackgroundSelectedColor: "#1A1A1A",
+    projectBackgroundCriticalColor: "#2A0000",
+    projectBackgroundSelectedCriticalColor: "#3A0000",
     milestoneBackgroundColor: "#FF7043",
     milestoneBackgroundSelectedColor: "#E64A19",
     milestoneBackgroundCriticalColor: "#D84315",
@@ -12781,6 +12781,7 @@ const Bar = (props) => {
     movingAction,
     ganttRelationEvent,
     showProgress = true,
+    hideProjectProgress = false,
     progressColor
   } = props;
   const isSmallWidth = useMemo(() => width < 30, [width]);
@@ -12848,7 +12849,7 @@ const Bar = (props) => {
           isCritical,
           hasChildren,
           startMoveFullTask,
-          showProgress,
+          showProgress: hideProjectProgress ? false : showProgress,
           progressColor
         }
       );
@@ -13446,6 +13447,7 @@ const TaskGanttContentInner = (props) => {
     waitCommitTasks,
     viewMode,
     showProgress = true,
+    hideProjectProgress = false,
     progressColor
   } = props;
   const renderedHolidays = useMemo(() => {
@@ -13616,6 +13618,7 @@ const TaskGanttContentInner = (props) => {
                 renderCustomLabel,
                 viewMode,
                 showProgress,
+                hideProjectProgress,
                 progressColor
               }
             )
@@ -13976,6 +13979,7 @@ const TaskGanttContentInner = (props) => {
     activeArrowKey,
     activeTaskId,
     showProgress,
+    hideProjectProgress,
     progressColor
   ]);
   return /* @__PURE__ */ jsxs("g", { className: "content", children: [
@@ -19784,6 +19788,7 @@ const Gantt = (props) => {
     todayLabel = "Today",
     dataDateLabel = "Data Date",
     showProgress = true,
+    hideProjectProgress = false,
     progressColor,
     scrollToTaskId,
     drawer: drawerProps
@@ -19806,6 +19811,7 @@ const Gantt = (props) => {
   const enableDrawer = (drawerProps == null ? void 0 : drawerProps.enableDrawer) ?? false;
   const drawerWidth = (drawerProps == null ? void 0 : drawerProps.drawerWidth) ?? 360;
   const renderDrawerContent = drawerProps == null ? void 0 : drawerProps.renderDrawerContent;
+  const openDrawerTaskId = drawerProps == null ? void 0 : drawerProps.openDrawerTaskId;
   const [drawerData, setDrawerData] = useState(null);
   const [activeArrowKey, setActiveArrowKey] = useState(null);
   const [activeTaskId, setActiveTaskId] = useState(null);
@@ -20138,6 +20144,24 @@ const Gantt = (props) => {
     setScrollYProgrammatically,
     selectTask
   ]);
+  const prevOpenDrawerTaskIdRef = useRef(void 0);
+  useEffect(() => {
+    if (!enableDrawer || !openDrawerTaskId)
+      return;
+    if (openDrawerTaskId === prevOpenDrawerTaskIdRef.current)
+      return;
+    prevOpenDrawerTaskIdRef.current = openDrawerTaskId;
+    for (const [, levelMap] of tasksMap) {
+      const task = levelMap.get(openDrawerTaskId);
+      if (!task || task.type === "empty")
+        continue;
+      setActiveArrowKey(null);
+      setActiveTaskId(openDrawerTaskId);
+      setDrawerData({ type: "task", task });
+      selectTask(openDrawerTaskId);
+      break;
+    }
+  }, [enableDrawer, openDrawerTaskId, tasksMap, selectTask]);
   const { contextMenu, handleCloseContextMenu, handleOpenContextMenu } = useContextMenu(wrapperRef, scrollToTask);
   const [ganttContextMenu, setGanttContextMenu] = useState({
     task: null,
@@ -21299,6 +21323,7 @@ const Gantt = (props) => {
       visibleTasksMirror,
       viewMode,
       showProgress,
+      hideProjectProgress,
       progressColor
     }),
     [
@@ -21344,6 +21369,7 @@ const Gantt = (props) => {
       changeInProgress == null ? void 0 : changeInProgress.action,
       handleDeleteTasks,
       showProgress,
+      hideProjectProgress,
       progressColor
     ]
   );

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

@@ -5192,10 +5192,10 @@
       projectProgressSelectedColor: "#0097A7",
       projectProgressCriticalColor: "#00838F",
       projectProgressSelectedCriticalColor: "#006064",
-      projectBackgroundColor: "#FFA726",
-      projectBackgroundSelectedColor: "#F57C00",
-      projectBackgroundCriticalColor: "#EF6C00",
-      projectBackgroundSelectedCriticalColor: "#E65100",
+      projectBackgroundColor: "#0A0A0A",
+      projectBackgroundSelectedColor: "#1A1A1A",
+      projectBackgroundCriticalColor: "#2A0000",
+      projectBackgroundSelectedCriticalColor: "#3A0000",
       milestoneBackgroundColor: "#FF7043",
       milestoneBackgroundSelectedColor: "#E64A19",
       milestoneBackgroundCriticalColor: "#D84315",
@@ -12798,6 +12798,7 @@
       movingAction,
       ganttRelationEvent,
       showProgress = true,
+      hideProjectProgress = false,
       progressColor
     } = props;
     const isSmallWidth = React.useMemo(() => width < 30, [width]);
@@ -12865,7 +12866,7 @@
             isCritical,
             hasChildren,
             startMoveFullTask,
-            showProgress,
+            showProgress: hideProjectProgress ? false : showProgress,
             progressColor
           }
         );
@@ -13463,6 +13464,7 @@
       waitCommitTasks,
       viewMode,
       showProgress = true,
+      hideProjectProgress = false,
       progressColor
     } = props;
     const renderedHolidays = React.useMemo(() => {
@@ -13633,6 +13635,7 @@
                   renderCustomLabel,
                   viewMode,
                   showProgress,
+                  hideProjectProgress,
                   progressColor
                 }
               )
@@ -13993,6 +13996,7 @@
       activeArrowKey,
       activeTaskId,
       showProgress,
+      hideProjectProgress,
       progressColor
     ]);
     return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "content", children: [
@@ -19801,6 +19805,7 @@
       todayLabel = "Today",
       dataDateLabel = "Data Date",
       showProgress = true,
+      hideProjectProgress = false,
       progressColor,
       scrollToTaskId,
       drawer: drawerProps
@@ -19823,6 +19828,7 @@
     const enableDrawer = (drawerProps == null ? void 0 : drawerProps.enableDrawer) ?? false;
     const drawerWidth = (drawerProps == null ? void 0 : drawerProps.drawerWidth) ?? 360;
     const renderDrawerContent = drawerProps == null ? void 0 : drawerProps.renderDrawerContent;
+    const openDrawerTaskId = drawerProps == null ? void 0 : drawerProps.openDrawerTaskId;
     const [drawerData, setDrawerData] = React.useState(null);
     const [activeArrowKey, setActiveArrowKey] = React.useState(null);
     const [activeTaskId, setActiveTaskId] = React.useState(null);
@@ -20155,6 +20161,24 @@
       setScrollYProgrammatically,
       selectTask
     ]);
+    const prevOpenDrawerTaskIdRef = React.useRef(void 0);
+    React.useEffect(() => {
+      if (!enableDrawer || !openDrawerTaskId)
+        return;
+      if (openDrawerTaskId === prevOpenDrawerTaskIdRef.current)
+        return;
+      prevOpenDrawerTaskIdRef.current = openDrawerTaskId;
+      for (const [, levelMap] of tasksMap) {
+        const task = levelMap.get(openDrawerTaskId);
+        if (!task || task.type === "empty")
+          continue;
+        setActiveArrowKey(null);
+        setActiveTaskId(openDrawerTaskId);
+        setDrawerData({ type: "task", task });
+        selectTask(openDrawerTaskId);
+        break;
+      }
+    }, [enableDrawer, openDrawerTaskId, tasksMap, selectTask]);
     const { contextMenu, handleCloseContextMenu, handleOpenContextMenu } = useContextMenu(wrapperRef, scrollToTask);
     const [ganttContextMenu, setGanttContextMenu] = React.useState({
       task: null,
@@ -21316,6 +21340,7 @@
         visibleTasksMirror,
         viewMode,
         showProgress,
+        hideProjectProgress,
         progressColor
       }),
       [
@@ -21361,6 +21386,7 @@
         changeInProgress == null ? void 0 : changeInProgress.action,
         handleDeleteTasks,
         showProgress,
+        hideProjectProgress,
         progressColor
       ]
     );

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

@@ -24,6 +24,12 @@ export interface GanttDrawerProps {
      * Render function for custom drawer content
      */
     renderDrawerContent?: RenderDrawerContent;
+    /**
+     * When set (or changed), the drawer will open and display the details of the
+     * task with this id. Requires `enableDrawer: true`.
+     * Set to `undefined` or change to a new id to control the drawer imperatively.
+     */
+    openDrawerTaskId?: string;
 }
 export type RenderTopHeader = (date: Date, viewMode: ViewMode, dateSetup: DateSetup) => ReactNode;
 export type RenderCustomLabel = (task: RenderTask, x1: number, width: number, taskHeight: number, arrowIndent: number, taskYOffset: number, movingAction: TaskBarMoveAction | null, viewMode: ViewMode, rtl?: boolean) => ReactNode;
@@ -407,6 +413,10 @@ export interface GanttProps {
      * Show/hide progress bar on task bars. Defaults to true.
      */
     showProgress?: boolean;
+    /**
+     * Hide the progress bar specifically on project type task bars. Defaults to false.
+     */
+    hideProjectProgress?: boolean;
     /**
      * Custom color for progress bars. If not provided, theme progress colors are used.
      */

package/package.json

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