gantt-task-react-v 1.6.15 → 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/gantt-task-react.es.js

@@ -19811,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);
@@ -20143,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,

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

@@ -19828,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);
@@ -20160,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,

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;

package/package.json

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