gantt-task-react-v 1.0.5 → 1.0.8

package/README.md

@@ -7,14 +7,14 @@
 ## Install
 
 ```
-npm install webagility-gantt-task-react
+npm install gantt-task-react-v
 ```
 
 ## How to use it
 
 ```ts
-import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react';
-import "gantt-task-react/dist/index.css";
+import { Gantt, Task, EventOption, StylingOption, ViewMode, DisplayOption } from 'gantt-task-react-v';
+import "gantt-task-react-v/dist/index.css";
 
 let tasks: Task[] = [
     {

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

@@ -5,6 +5,7 @@ import { CalendarProps } from "../calendar/calendar";
 import { TaskGanttContentProps } from "./task-gantt-content";
 import { GanttTaskBarActions } from "../../types";
 export interface TaskGanttProps extends GanttTaskBarActions {
+    ganttHeight?: number;
     barProps: TaskGanttContentProps;
     calendarProps: Omit<CalendarProps, "scrollRef">;
     fullRowHeight: number;

package/dist/components/task-list/index.d.ts

@@ -14,6 +14,7 @@ export type TaskListProps = {
     distances: Distances;
     fullRowHeight: number;
     ganttFullHeight: number;
+    ganttHeight?: number;
     getTaskCurrentState: (task: Task) => Task;
     handleAddTask: (task: Task | null) => void;
     handleDeleteTasks: (task: RenderTask[]) => void;

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

@@ -10720,7 +10720,8 @@ const TaskListInner = ({
   tasks,
   onResizeColumn,
   canReorderTasks,
-  tableBottom
+  tableBottom,
+  ganttHeight
 }) => {
   const [
     columns,
@@ -10829,7 +10830,7 @@ const TaskListInner = ({
                 className: styles$d.horizontalContainer,
                 style: {
                   height: Math.min(
-                    ganttFullHeight,
+                    ganttHeight || ganttFullHeight,
                     distances.minimumRowDisplayed * distances.rowHeight
                   ),
                   width: taskListWidth
@@ -13154,13 +13155,17 @@ const TaskGanttContentInner = (props) => {
   ] });
 };
 const TaskGanttContent = memo(TaskGanttContentInner);
-const ganttVerticalContainer = "_ganttVerticalContainer_1unzl_1";
-const horizontalContainer = "_horizontalContainer_1unzl_71";
-const wrapper = "_wrapper_1unzl_83";
-const calendarDragging = "_calendarDragging_1unzl_105";
+const ganttVerticalContainer = "_ganttVerticalContainer_1044x_1";
+const horizontalContainer = "_horizontalContainer_1044x_75";
+const ganttHeader = "_ganttHeader_1044x_87";
+const ganttBodyScroll = "_ganttBodyScroll_1044x_97";
+const wrapper = "_wrapper_1044x_109";
+const calendarDragging = "_calendarDragging_1044x_131";
 const styles$2 = {
   ganttVerticalContainer,
   horizontalContainer,
+  ganttHeader,
+  ganttBodyScroll,
   wrapper,
   calendarDragging
 };
@@ -13295,7 +13300,7 @@ const TaskGanttInner = (props) => {
       onScroll: onVerticalScrollbarScrollX,
       dir: "ltr",
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: styles$2.ganttHeader, children: /* @__PURE__ */ jsx(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -13304,8 +13309,8 @@ const TaskGanttInner = (props) => {
             fontFamily: "var(--gantt-font-family)",
             children: /* @__PURE__ */ jsx(Calendar, { scrollRef: verticalGanttContainerRef, ...calendarProps })
           }
-        ),
-        /* @__PURE__ */ jsx(
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: styles$2.ganttBodyScroll, children: /* @__PURE__ */ jsx(
           "div",
           {
             ref: horizontalContainerRef,
@@ -13335,7 +13340,7 @@ const TaskGanttInner = (props) => {
               }
             ) })
           }
-        )
+        ) })
       ]
     }
   );
@@ -18548,7 +18553,8 @@ const Gantt = (props) => {
     viewDate,
     viewMode = ViewMode.Day,
     locale: clientLocale,
-    language
+    language,
+    height: clientHeight
   } = props;
   const ganttSVGRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -18557,6 +18563,7 @@ const Gantt = (props) => {
   const theme = useMemo(() => buildGanttTheme(clientTheme), [clientTheme]);
   const { distances, dateFormats: dateFormats2, rtl } = theme;
   const [waitCommitTasks, setWaitCommitTasks] = useState(false);
+  const [measuredHeight, setMeasuredHeight] = useState();
   const taskBar = useMemo(() => {
     return mergeDeepObj(
       {},
@@ -18696,11 +18703,25 @@ const Gantt = (props) => {
   );
   const ganttHeight = useMemo(() => {
     const minRowsHeight = distances.minimumRowDisplayed * distances.rowHeight;
-    if (typeof distances.ganttHeight === "number") {
-      return Math.min(distances.ganttHeight, ganttFullHeight, minRowsHeight);
-    }
-    return Math.min(ganttFullHeight, minRowsHeight);
-  }, [distances, ganttFullHeight]);
+    const resolvedHeightFromProp = typeof clientHeight === "number" ? clientHeight : void 0;
+    const resolvedHeightFromMeasured = measuredHeight;
+    const resolvedThemeHeight = typeof distances.ganttHeight === "number" ? distances.ganttHeight : void 0;
+    const candidateHeights = [
+      resolvedHeightFromProp,
+      resolvedHeightFromMeasured,
+      resolvedThemeHeight,
+      ganttFullHeight
+    ].filter((v) => typeof v === "number");
+    if (candidateHeights.length === 0) {
+      return Math.min(ganttFullHeight, minRowsHeight);
+    }
+    const chosen = Math.min(
+      ...candidateHeights,
+      ganttFullHeight,
+      minRowsHeight
+    );
+    return chosen;
+  }, [distances, ganttFullHeight, clientHeight, measuredHeight]);
   const [taskToRowIndexMap, rowIndexToTaskMap, mapGlobalRowIndexToTask] = useMemo(
     () => getMapTaskToRowIndex(visibleTasks, comparisonLevels),
     [visibleTasks, comparisonLevels]
@@ -18883,6 +18904,37 @@ const Gantt = (props) => {
       setScrollXProgrammatically(datesLength * distances.columnWidth);
     }
   }, [datesLength, distances, rtl, setScrollXProgrammatically, scrollX]);
+  useEffect(() => {
+    if (typeof clientHeight === "number") {
+      setMeasuredHeight(clientHeight);
+      return () => {
+      };
+    }
+    const node = wrapperRef.current;
+    if (!node) {
+      return () => {
+      };
+    }
+    setMeasuredHeight(node.getBoundingClientRect().height);
+    const ResizeObserverCtor = window.ResizeObserver;
+    let ro;
+    if (typeof ResizeObserverCtor === "function") {
+      const ctor = ResizeObserverCtor;
+      ro = new ctor(() => {
+        const rect = node.getBoundingClientRect();
+        setMeasuredHeight(rect.height);
+      });
+      ro.observe(node);
+    }
+    return () => {
+      if (ro) {
+        try {
+          ro.disconnect();
+        } catch (e) {
+        }
+      }
+    };
+  }, [clientHeight, wrapperRef]);
   useEffect(() => {
     if (viewDate && !currentViewDate || viewDate && (currentViewDate == null ? void 0 : currentViewDate.valueOf()) !== viewDate.valueOf()) {
       const index2 = getDatesDiff(viewDate, startDate, viewMode);
@@ -19782,6 +19834,7 @@ const Gantt = (props) => {
       distances,
       fullRowHeight,
       ganttFullHeight,
+      ganttHeight,
       getTaskCurrentState,
       handleAddTask,
       handleDeleteTasks,
@@ -19811,6 +19864,7 @@ const Gantt = (props) => {
       distances,
       fullRowHeight,
       ganttFullHeight,
+      ganttHeight,
       getTaskCurrentState,
       handleAddTask,
       handleDeleteTasks,
@@ -19851,6 +19905,7 @@ const Gantt = (props) => {
             fullRowHeight,
             fullSvgWidth,
             ganttFullHeight,
+            ganttHeight,
             ganttSVGRef,
             ganttTodayProps: gridProps,
             horizontalContainerRef,

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

@@ -10737,7 +10737,8 @@
     tasks,
     onResizeColumn,
     canReorderTasks,
-    tableBottom
+    tableBottom,
+    ganttHeight
   }) => {
     const [
       columns,
@@ -10846,7 +10847,7 @@
                   className: styles$d.horizontalContainer,
                   style: {
                     height: Math.min(
-                      ganttFullHeight,
+                      ganttHeight || ganttFullHeight,
                       distances.minimumRowDisplayed * distances.rowHeight
                     ),
                     width: taskListWidth
@@ -13171,13 +13172,17 @@
     ] });
   };
   const TaskGanttContent = React.memo(TaskGanttContentInner);
-  const ganttVerticalContainer = "_ganttVerticalContainer_1unzl_1";
-  const horizontalContainer = "_horizontalContainer_1unzl_71";
-  const wrapper = "_wrapper_1unzl_83";
-  const calendarDragging = "_calendarDragging_1unzl_105";
+  const ganttVerticalContainer = "_ganttVerticalContainer_1044x_1";
+  const horizontalContainer = "_horizontalContainer_1044x_75";
+  const ganttHeader = "_ganttHeader_1044x_87";
+  const ganttBodyScroll = "_ganttBodyScroll_1044x_97";
+  const wrapper = "_wrapper_1044x_109";
+  const calendarDragging = "_calendarDragging_1044x_131";
   const styles$2 = {
     ganttVerticalContainer,
     horizontalContainer,
+    ganttHeader,
+    ganttBodyScroll,
     wrapper,
     calendarDragging
   };
@@ -13312,7 +13317,7 @@
         onScroll: onVerticalScrollbarScrollX,
         dir: "ltr",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2.ganttHeader, children: /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -13321,8 +13326,8 @@
               fontFamily: "var(--gantt-font-family)",
               children: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { scrollRef: verticalGanttContainerRef, ...calendarProps })
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$2.ganttBodyScroll, children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               ref: horizontalContainerRef,
@@ -13352,7 +13357,7 @@
                 }
               ) })
             }
-          )
+          ) })
         ]
       }
     );
@@ -18565,7 +18570,8 @@
       viewDate,
       viewMode = ViewMode.Day,
       locale: clientLocale,
-      language
+      language,
+      height: clientHeight
     } = props;
     const ganttSVGRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
@@ -18574,6 +18580,7 @@
     const theme = React.useMemo(() => buildGanttTheme(clientTheme), [clientTheme]);
     const { distances, dateFormats: dateFormats2, rtl } = theme;
     const [waitCommitTasks, setWaitCommitTasks] = React.useState(false);
+    const [measuredHeight, setMeasuredHeight] = React.useState();
     const taskBar = React.useMemo(() => {
       return mergeDeepObj(
         {},
@@ -18713,11 +18720,25 @@
     );
     const ganttHeight = React.useMemo(() => {
       const minRowsHeight = distances.minimumRowDisplayed * distances.rowHeight;
-      if (typeof distances.ganttHeight === "number") {
-        return Math.min(distances.ganttHeight, ganttFullHeight, minRowsHeight);
-      }
-      return Math.min(ganttFullHeight, minRowsHeight);
-    }, [distances, ganttFullHeight]);
+      const resolvedHeightFromProp = typeof clientHeight === "number" ? clientHeight : void 0;
+      const resolvedHeightFromMeasured = measuredHeight;
+      const resolvedThemeHeight = typeof distances.ganttHeight === "number" ? distances.ganttHeight : void 0;
+      const candidateHeights = [
+        resolvedHeightFromProp,
+        resolvedHeightFromMeasured,
+        resolvedThemeHeight,
+        ganttFullHeight
+      ].filter((v) => typeof v === "number");
+      if (candidateHeights.length === 0) {
+        return Math.min(ganttFullHeight, minRowsHeight);
+      }
+      const chosen = Math.min(
+        ...candidateHeights,
+        ganttFullHeight,
+        minRowsHeight
+      );
+      return chosen;
+    }, [distances, ganttFullHeight, clientHeight, measuredHeight]);
     const [taskToRowIndexMap, rowIndexToTaskMap, mapGlobalRowIndexToTask] = React.useMemo(
       () => getMapTaskToRowIndex(visibleTasks, comparisonLevels),
       [visibleTasks, comparisonLevels]
@@ -18900,6 +18921,37 @@
         setScrollXProgrammatically(datesLength * distances.columnWidth);
       }
     }, [datesLength, distances, rtl, setScrollXProgrammatically, scrollX]);
+    React.useEffect(() => {
+      if (typeof clientHeight === "number") {
+        setMeasuredHeight(clientHeight);
+        return () => {
+        };
+      }
+      const node = wrapperRef.current;
+      if (!node) {
+        return () => {
+        };
+      }
+      setMeasuredHeight(node.getBoundingClientRect().height);
+      const ResizeObserverCtor = window.ResizeObserver;
+      let ro;
+      if (typeof ResizeObserverCtor === "function") {
+        const ctor = ResizeObserverCtor;
+        ro = new ctor(() => {
+          const rect = node.getBoundingClientRect();
+          setMeasuredHeight(rect.height);
+        });
+        ro.observe(node);
+      }
+      return () => {
+        if (ro) {
+          try {
+            ro.disconnect();
+          } catch (e) {
+          }
+        }
+      };
+    }, [clientHeight, wrapperRef]);
     React.useEffect(() => {
       if (viewDate && !currentViewDate || viewDate && (currentViewDate == null ? void 0 : currentViewDate.valueOf()) !== viewDate.valueOf()) {
         const index2 = getDatesDiff(viewDate, startDate, viewMode);
@@ -19799,6 +19851,7 @@
         distances,
         fullRowHeight,
         ganttFullHeight,
+        ganttHeight,
         getTaskCurrentState,
         handleAddTask,
         handleDeleteTasks,
@@ -19828,6 +19881,7 @@
         distances,
         fullRowHeight,
         ganttFullHeight,
+        ganttHeight,
         getTaskCurrentState,
         handleAddTask,
         handleDeleteTasks,
@@ -19868,6 +19922,7 @@
               fullRowHeight,
               fullSvgWidth,
               ganttFullHeight,
+              ganttHeight,
               ganttSVGRef,
               ganttTodayProps: gridProps,
               horizontalContainerRef,

package/dist/style.css

@@ -568,8 +568,10 @@
   user-select: none;
   stroke-width: 0;
 }
-._ganttVerticalContainer_1unzl_1 {
-  overflow-x: scroll;
+._ganttVerticalContainer_1044x_1 {
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
   overflow-y: hidden;
   font-size: 0;
   margin: 0;
@@ -579,16 +581,16 @@
   flex-grow: 1;
 }
 
-._ganttVerticalContainer_1unzl_1::-webkit-scrollbar {
+._ganttVerticalContainer_1044x_1::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._ganttVerticalContainer_1unzl_1::-webkit-scrollbar-corner {
+._ganttVerticalContainer_1044x_1::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._ganttVerticalContainer_1unzl_1::-webkit-scrollbar-thumb {
+._ganttVerticalContainer_1044x_1::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -596,20 +598,31 @@
   background-clip: padding-box;
 }
 
-._ganttVerticalContainer_1unzl_1::-webkit-scrollbar-thumb:hover {
+._ganttVerticalContainer_1044x_1::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._horizontalContainer_1unzl_71 {
+._horizontalContainer_1044x_75 {
   margin: 0;
   padding: 0;
   overflow: hidden;
 }
 
-._wrapper_1unzl_83 {
+._ganttHeader_1044x_87 {
+  flex: 0 0 auto;
+  z-index: 3;
+}
+
+._ganttBodyScroll_1044x_97 {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+._wrapper_1044x_109 {
   display: flex;
   padding: 0;
   margin: 0;
@@ -620,7 +633,7 @@
   border-bottom: 1px solid var(--gantt-divider-color);
 }
 
-._calendarDragging_1unzl_105 {
+._calendarDragging_1044x_131 {
   cursor: grabbing;
 }
 /*noinspection CssUnresolvedCustomProperty*/

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

@@ -320,6 +320,13 @@ export interface GanttProps {
      * Move dates of tasks to working days during change
      */
     isAdjustToWorkingDates?: boolean;
+    /**
+     * Height of the Gantt component. Can be a number (pixels) or a CSS height string
+     * (for example "100%" to fill a parent container). When a CSS string is
+     * provided the component will measure its rendered height and use it for
+     * internal scroll calculations.
+     */
+    height?: number | string;
 }
 export interface GanttTaskBarActions {
     allowMoveTaskBar?: (action: TaskBarMoveAction, task: RenderTask) => boolean;

package/package.json

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