gantt-task-react-powern 0.6.30 → 0.6.31

package/dist/helpers/date-helper.d.ts

@@ -5,6 +5,22 @@ declare type DateHelperScales = "year" | "quarter" | "month" | "day" | "hour" |
 export declare const getCachedDateTimeFormat: (locString: string | string[], opts?: DateTimeFormatOptions) => DateTimeFormat;
 export declare const addToDate: (date: Date, quantity: number, scale: DateHelperScales) => Date;
 export declare const startOfDate: (date: Date, scale: DateHelperScales) => Date;
+/**
+ * Default number of columns the chart aims to render across the chart pane
+ * for each view mode. The Gantt component sizes columns so that this many
+ * fit at the current pane width when the view mode is selected.
+ *
+ * Modes not listed (Hour / QuarterDay / HalfDay / Year) fall through to the
+ * legacy `columnWidth` default.
+ */
+export declare const VIEW_MODE_DEFAULT_VISIBLE_COUNT: Partial<Record<ViewMode, number>>;
+/**
+ * Maximum number of columns the chart will show at once, even when the user
+ * widens the chart pane with the resize bar. The Gantt component clamps
+ * column width upward so visible count never exceeds this — overflow becomes
+ * horizontal scroll.
+ */
+export declare const VIEW_MODE_MAX_VISIBLE_COUNT: Partial<Record<ViewMode, number>>;
 export declare const ganttDateRange: (tasks: Task[], viewMode: ViewMode, preStepsCount: number, quarterStart?: number) => Date[];
 export declare const seedDates: (startDate: Date, endDate: Date, viewMode: ViewMode) => Date[];
 export declare const getLocaleMonth: (date: Date, locale: string) => string;

package/dist/index.js

@@ -75,6 +75,7 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   ViewMode["Year"] = "Year";
 })(exports.ViewMode || (exports.ViewMode = {}));
 
+var _VIEW_MODE_DEFAULT_VI, _VIEW_MODE_MAX_VISIBL;
 var intlDTCache = {};
 var getCachedDateTimeFormat = function getCachedDateTimeFormat(locString, opts) {
   if (opts === void 0) {
@@ -116,6 +117,8 @@ var getFiscalQuarterStartDate = function getFiscalQuarterStartDate(date, quarter
   return new Date(year, qStartMonth, 1);
 };
 
+var VIEW_MODE_DEFAULT_VISIBLE_COUNT = (_VIEW_MODE_DEFAULT_VI = {}, _VIEW_MODE_DEFAULT_VI[exports.ViewMode.Day] = 14, _VIEW_MODE_DEFAULT_VI[exports.ViewMode.Week] = 6, _VIEW_MODE_DEFAULT_VI[exports.ViewMode.Month] = 6, _VIEW_MODE_DEFAULT_VI[exports.ViewMode.Quarter] = 4, _VIEW_MODE_DEFAULT_VI);
+var VIEW_MODE_MAX_VISIBLE_COUNT = (_VIEW_MODE_MAX_VISIBL = {}, _VIEW_MODE_MAX_VISIBL[exports.ViewMode.Day] = 30, _VIEW_MODE_MAX_VISIBL[exports.ViewMode.Week] = 13, _VIEW_MODE_MAX_VISIBL[exports.ViewMode.Month] = 12, _VIEW_MODE_MAX_VISIBL[exports.ViewMode.Quarter] = 8, _VIEW_MODE_MAX_VISIBL);
 var ganttDateRange = function ganttDateRange(tasks, viewMode, preStepsCount, quarterStart) {
   var _tasks$, _tasks$2, _tasks$3, _tasks$4;
 
@@ -3805,6 +3808,8 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
 };
 
 var Gantt = function Gantt(_ref) {
+  var _ref3;
+
   var tasks = _ref.tasks,
       _ref$leafTasks = _ref.leafTasks,
       leafTasks = _ref$leafTasks === void 0 ? [] : _ref$leafTasks,
@@ -3816,8 +3821,7 @@ var Gantt = function Gantt(_ref) {
       endDate = _ref$endDate === void 0 ? new Date() : _ref$endDate,
       _ref$headerHeight = _ref.headerHeight,
       headerHeight = _ref$headerHeight === void 0 ? 50 : _ref$headerHeight,
-      _ref$columnWidth = _ref.columnWidth,
-      columnWidth = _ref$columnWidth === void 0 ? 60 : _ref$columnWidth,
+      columnWidthProp = _ref.columnWidth,
       _ref$listCellWidth = _ref.listCellWidth,
       listCellWidth = _ref$listCellWidth === void 0 ? "155px" : _ref$listCellWidth,
       _ref$rowHeight = _ref.rowHeight,
@@ -3898,6 +3902,7 @@ var Gantt = function Gantt(_ref) {
   var wrapperRef = React.useRef(null);
   var taskListRef = React.useRef(null);
   var isDraggingTable = React.useRef(false);
+  var userResizedRef = React.useRef(false);
   var dragStartX = React.useRef(0);
   var dragStartWidth = React.useRef(0);
   var dragMaxWidth = React.useRef(Infinity);
@@ -3954,6 +3959,7 @@ var Gantt = function Gantt(_ref) {
     var _taskListRef$current$, _taskListRef$current, _ref2, _tableHorizontalConta, _tableHorizontalConta2, _tableInnerScrollRef$, _wrapperRef$current$o, _wrapperRef$current;
 
     isDraggingTable.current = true;
+    userResizedRef.current = true;
     dragStartX.current = e.clientX;
     dragStartWidth.current = tableContainerWidth != null ? tableContainerWidth : (_taskListRef$current$ = (_taskListRef$current = taskListRef.current) === null || _taskListRef$current === void 0 ? void 0 : _taskListRef$current.offsetWidth) != null ? _taskListRef$current$ : 0;
     dragMaxWidth.current = (_ref2 = (_tableHorizontalConta = (_tableHorizontalConta2 = tableHorizontalContainerRef.current) === null || _tableHorizontalConta2 === void 0 ? void 0 : _tableHorizontalConta2.scrollWidth) != null ? _tableHorizontalConta : (_tableInnerScrollRef$ = tableInnerScrollRef.current) === null || _tableInnerScrollRef$ === void 0 ? void 0 : _tableInnerScrollRef$.scrollWidth) != null ? _ref2 : Math.max(100, ((_wrapperRef$current$o = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.offsetWidth) != null ? _wrapperRef$current$o : Infinity) - 200);
@@ -4020,38 +4026,70 @@ var Gantt = function Gantt(_ref) {
       failedTask = _useState11[0],
       setFailedTask = _useState11[1];
 
+  var _useState12 = React.useState(null),
+      computedColumnWidth = _useState12[0],
+      setComputedColumnWidth = _useState12[1];
+
+  var computedForViewModeRef = React.useRef(null);
+  React.useEffect(function () {
+    if (columnWidthProp != null) return;
+    if (svgContainerWidth <= 0) return;
+    var alreadySnappedForView = computedForViewModeRef.current === viewMode && computedColumnWidth != null;
+    if (userResizedRef.current && alreadySnappedForView) return;
+    var target = VIEW_MODE_DEFAULT_VISIBLE_COUNT[viewMode];
+    if (!target) return;
+    var next = Math.max(20, Math.floor(svgContainerWidth / target));
+
+    if (next !== computedColumnWidth) {
+      setComputedColumnWidth(next);
+    }
+
+    computedForViewModeRef.current = viewMode;
+  }, [viewMode, svgContainerWidth, columnWidthProp, computedColumnWidth]);
+  var columnWidth = (_ref3 = columnWidthProp != null ? columnWidthProp : computedColumnWidth) != null ? _ref3 : 60;
   var effectiveColumnWidth = React.useMemo(function () {
     if (svgContainerWidth <= 0 || dateSetup.dates.length <= 0) return columnWidth;
+
+    if (columnWidthProp == null) {
+      var maxVisible = VIEW_MODE_MAX_VISIBLE_COUNT[viewMode];
+
+      if (maxVisible) {
+        return Math.max(columnWidth, Math.ceil(svgContainerWidth / maxVisible));
+      }
+
+      return columnWidth;
+    }
+
     return Math.max(columnWidth, Math.ceil(svgContainerWidth / dateSetup.dates.length));
-  }, [columnWidth, svgContainerWidth, dateSetup.dates.length]);
+  }, [columnWidth, columnWidthProp, viewMode, svgContainerWidth, dateSetup.dates.length]);
   var svgWidth = effectiveColumnWidth < 55 ? (dateSetup.dates.length + 0.5) * effectiveColumnWidth : dateSetup.dates.length * effectiveColumnWidth;
   var ganttFullHeight = React.useMemo(function () {
     return barTasks.length * rowHeight;
   }, [barTasks.length, rowHeight]);
 
-  var _useState12 = React.useState(0),
-      scrollY = _useState12[0],
-      setScrollY = _useState12[1];
-
-  var _useState13 = React.useState(-1),
-      scrollX = _useState13[0],
-      setScrollX = _useState13[1];
+  var _useState13 = React.useState(0),
+      scrollY = _useState13[0],
+      setScrollY = _useState13[1];
 
-  var _useState14 = React.useState(false),
-      ignoreScrollEvent = _useState14[0],
-      setIgnoreScrollEvent = _useState14[1];
+  var _useState14 = React.useState(-1),
+      scrollX = _useState14[0],
+      setScrollX = _useState14[1];
 
-  var _useState15 = React.useState(0),
-      lastTouchX = _useState15[0],
-      setLastTouchX = _useState15[1];
+  var _useState15 = React.useState(false),
+      ignoreScrollEvent = _useState15[0],
+      setIgnoreScrollEvent = _useState15[1];
 
   var _useState16 = React.useState(0),
-      lastTouchY = _useState16[0],
-      setLastTouchY = _useState16[1];
+      lastTouchX = _useState16[0],
+      setLastTouchX = _useState16[1];
+
+  var _useState17 = React.useState(0),
+      lastTouchY = _useState17[0],
+      setLastTouchY = _useState17[1];
 
-  var _useState17 = React.useState(false),
-      isProcessing = _useState17[0],
-      setIsProcessing = _useState17[1];
+  var _useState18 = React.useState(false),
+      isProcessing = _useState18[0],
+      setIsProcessing = _useState18[1];
 
   var buffer = rowHeight * 10;
   var visibleStartY = scrollY - buffer;