@beppla/tapas-ui 1.0.70 → 1.0.71

package/module/Gantt/Accessories.js

@@ -1,42 +1,22 @@
-"use strict";
+import React from "react";
+import { View, Text, Pressable } from "react-native";
+import { DateUnit } from "./types";
+import { useContext } from "react";
+import { GanttContext } from "./Gantt";
+import { Avatar } from "@rneui/themed";
+import { calculateItemWidth, calculateTimeOffsetForTimeLine, calculateTimeOffsetInCell, defaultColumnHeaderHeight, defaultColumnWidth, defaultRowHeight, generateColumnTitle } from "./helper";
 
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-var __importDefault = this && this.__importDefault || function (mod) {
-  return mod && mod.__esModule ? mod : {
-    "default": mod
-  };
-};
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TimeLineText = exports.Timeline = exports.GanttCellRender = exports.ColumnHeaderCellRnder = exports.ColumnHeaderCon = exports.GanttItemWrapper = exports.useGanttContext = void 0;
-var react_1 = __importDefault(require("react"));
-var react_native_1 = require("react-native");
-var types_1 = require("./types");
-var react_2 = require("react");
-var Gantt_1 = require("./Gantt");
-var themed_1 = require("@rneui/themed");
-var helper_1 = require("./helper");
 /**
  * 甘特Context
  */
-var useGanttContext = function () {
-  var context = (0, react_2.useContext)(Gantt_1.GanttContext);
+export const useGanttContext = () => {
+  const context = useContext(GanttContext);
   if (!context) {
     throw new Error("useGanttContext must be used within a GanttProvider");
   }
   return context;
 };
-exports.useGanttContext = useGanttContext;
+
 /**
  * 甘特Grid中的单元格容器模板
  * @param data - 附带循环模板数据
@@ -44,17 +24,19 @@ exports.useGanttContext = useGanttContext;
  * @param rowIndex - 行索引
  * @param style - 模板样式（含模板在grid中对左，对上坐标）
  */
-var GanttItemWrapper = function (_a) {
-  var _b;
-  var data = _a.data,
-    columnIndex = _a.columnIndex,
-    rowIndex = _a.rowIndex,
-    style = _a.style;
-  var ItemRenderer = data.ItemRenderer,
-    cardRender = data.cardRender,
-    rangeVal = data.rangeVal,
-    attachPressCard = data.attachPressCard;
-  return react_1.default.createElement(ItemRenderer, {
+export const GanttItemWrapper = ({
+  data,
+  columnIndex,
+  rowIndex,
+  style
+}) => {
+  const {
+    ItemRenderer,
+    cardRender,
+    rangeVal,
+    attachPressCard
+  } = data;
+  return /*#__PURE__*/React.createElement(ItemRenderer, {
     columnIndex: columnIndex,
     rowIndex: rowIndex,
     rowHeight: data.rowHeight,
@@ -68,27 +50,27 @@ var GanttItemWrapper = function (_a) {
     startDate: data.startDate,
     endDate: data.endDate,
     unit: data.unit,
-    style: __assign(__assign({}, style), {
+    style: {
+      ...style,
       overflow: "hidden",
-      top: style.top + (data.headersRender ? (_b = data.columnHeaderHeight) !== null && _b !== void 0 ? _b : helper_1.defaultColumnHeaderHeight : 0)
-    })
+      top: style.top + (data.headersRender ? data.columnHeaderHeight ?? defaultColumnHeaderHeight : 0)
+    }
   });
 };
-exports.GanttItemWrapper = GanttItemWrapper;
+
 /**
  * 列头模板容器
  * @param children - 子元素
  * @param style - 模板样式（含模板在grid中对左，对上坐标）
  */
-var ColumnHeaderCon = function (_a) {
-  var style = _a.style,
-    children = _a.children;
-  return react_1.default.createElement("div", {
-    className: "sticky",
-    style: style
-  }, children);
-};
-exports.ColumnHeaderCon = ColumnHeaderCon;
+export const ColumnHeaderCon = ({
+  style,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  className: "sticky",
+  style: style
+}, children);
+
 /**
  * 列头单元格模板
  * @param theme - 皮肤主题
@@ -96,91 +78,168 @@ exports.ColumnHeaderCon = ColumnHeaderCon;
  * @param rowIndex - 行索引
  * @param style - 模板样式（含模板在grid中对左，对上坐标）
  */
-var ColumnHeaderCellRnder = function (_a) {
-  var _b, _c;
-  var columnIndex = _a.columnIndex,
-    curColumnIndex = _a.curColumnIndex,
-    curColumnText = _a.curColumnText,
-    _d = _a.currentTime,
-    currentTime = _d === void 0 ? new Date() : _d,
-    _e = _a.columnWidth,
-    columnWidth = _e === void 0 ? 165 : _e,
-    startDate = _a.startDate,
-    _f = _a.unit,
-    unit = _f === void 0 ? types_1.DateUnit.HELF : _f,
-    style = _a.style,
-    theme = _a.theme;
-  return react_1.default.createElement("div", {
-    className: "column-headers",
-    style: __assign(__assign({}, style), {
-      overflow: "visible"
-    })
-  }, react_1.default.createElement("span", {
-    style: {
-      position: "absolute",
-      left: columnIndex === 0 ? 0 : -20,
-      width: 40,
-      textAlign: "center",
-      fontSize: (_b = theme === null || theme === void 0 ? void 0 : theme.fonts.sizeS) !== null && _b !== void 0 ? _b : 12,
-      lineHeight: "24px",
-      fontWeight: 400,
-      color: (_c = theme === null || theme === void 0 ? void 0 : theme.colorTextPlaceholder) !== null && _c !== void 0 ? _c : "rgba(0,0,0,.26)"
-    }
-  }, columnIndex !== undefined && startDate ? (0, helper_1.generateColumnTitle)(unit, columnIndex, startDate) : "N/A"), curColumnIndex === columnIndex && react_1.default.createElement(exports.TimeLineText, {
-    theme: theme,
-    text: curColumnText !== null && curColumnText !== void 0 ? curColumnText : "N/A",
-    date: currentTime,
-    unit: unit,
-    columnWidth: columnWidth
-  }));
-};
-exports.ColumnHeaderCellRnder = ColumnHeaderCellRnder;
+export const ColumnHeaderCellRnder = ({
+  columnIndex,
+  curColumnIndex,
+  curColumnText,
+  currentTime = new Date(),
+  columnWidth = 165,
+  startDate,
+  unit = DateUnit.HELF,
+  style,
+  theme
+}) => /*#__PURE__*/React.createElement("div", {
+  className: "column-headers",
+  style: {
+    ...style,
+    overflow: "visible"
+  }
+}, /*#__PURE__*/React.createElement("span", {
+  style: {
+    position: "absolute",
+    left: columnIndex === 0 ? 0 : -20,
+    width: 40,
+    textAlign: "center",
+    fontSize: theme?.fonts.sizeS ?? 12,
+    lineHeight: "24px",
+    fontWeight: 400,
+    color: theme?.colorTextPlaceholder ?? "rgba(0,0,0,.26)"
+  }
+}, columnIndex !== undefined && startDate ? generateColumnTitle(unit, columnIndex, startDate) : "N/A"), curColumnIndex === columnIndex && /*#__PURE__*/React.createElement(TimeLineText, {
+  theme: theme,
+  text: curColumnText ?? "N/A",
+  date: currentTime,
+  unit: unit,
+  columnWidth: columnWidth
+}));
+
 /**
  * 甘特Grid单元格模板(无内容只是背景占位)
  * @param style - 模板样式（含模板在grid中对左，对上坐标）
  */
-var GanttCellRender = function (_a) {
-  var _b, _c;
-  var style = _a.style,
-    curColumnIndex = _a.curColumnIndex,
-    _d = _a.columnIndex,
-    columnIndex = _d === void 0 ? -1 : _d,
-    _e = _a.rowIndex,
-    rowIndex = _e === void 0 ? -1 : _e,
-    _f = _a.columnWidth,
-    columnWidth = _f === void 0 ? helper_1.defaultColumnWidth : _f,
-    _g = _a.rowHeight,
-    rowHeight = _g === void 0 ? helper_1.defaultRowHeight : _g,
-    theme = _a.theme,
-    rangeVal = _a.rangeVal,
-    attachPressCard = _a.attachPressCard,
-    _h = _a.unit,
-    unit = _h === void 0 ? types_1.DateUnit.HELF : _h,
-    ItemRenderer = _a.ItemRenderer;
-  var renderItem = false;
-  var itemInfo;
-  var itemLeft = 0;
-  var itemWidth = 0;
+export const GanttCellRender = ({
+  style,
+  curColumnIndex,
+  columnIndex = -1,
+  rowIndex = -1,
+  columnWidth = defaultColumnWidth,
+  rowHeight = defaultRowHeight,
+  theme,
+  rangeVal,
+  attachPressCard,
+  unit = DateUnit.HELF,
+  ItemRenderer
+}) => {
+  let renderItem = false;
+  let itemInfo;
+  let itemLeft = 0;
+  let itemWidth = 0;
   if (ItemRenderer) {
-    var gridDataMap = (0, exports.useGanttContext)().gridDataMap;
+    const {
+      gridDataMap
+    } = useGanttContext();
     if (rowIndex >= 0 && columnIndex >= 0) {
-      itemInfo = (_b = gridDataMap.get(rowIndex)) === null || _b === void 0 ? void 0 : _b.get(columnIndex);
+      itemInfo = gridDataMap.get(rowIndex)?.get(columnIndex);
       if (itemInfo) {
         renderItem = true;
-        itemLeft = (0, helper_1.calculateTimeOffsetInCell)(unit, columnWidth, itemInfo.startTime);
-        itemWidth = (0, helper_1.calculateItemWidth)(unit, columnWidth, itemInfo.startTime, itemInfo.endTime);
+        itemLeft = calculateTimeOffsetInCell(unit, columnWidth, itemInfo.startTime);
+        itemWidth = calculateItemWidth(unit, columnWidth, itemInfo.startTime, itemInfo.endTime);
       }
     }
   }
-  var goRenderCard = ItemRenderer && renderItem && itemInfo && (rangeVal && (!rangeVal[0] || itemInfo.startTime >= rangeVal[0]) && (!rangeVal[1] || itemInfo.endTime <= rangeVal[1]) || !rangeVal);
-  return react_1.default.createElement("div", {
-    key: "Gantt-cell-".concat(rowIndex, "-").concat(columnIndex),
-    style: __assign(__assign({}, style), {
+  const goRenderCard = ItemRenderer && renderItem && itemInfo && (rangeVal && (!rangeVal[0] || itemInfo.startTime >= rangeVal[0]) && (!rangeVal[1] || itemInfo.endTime <= rangeVal[1]) || !rangeVal);
+  return /*#__PURE__*/React.createElement("div", {
+    key: `Gantt-cell-${rowIndex}-${columnIndex}`,
+    style: {
+      ...style,
       display: "flex",
       whiteSpace: "nowrap",
       borderLeft: "1px solid rgba(0, 0, 0, 0.12)",
       overflow: "visible",
-      backgroundColor: (columnIndex !== null && columnIndex !== void 0 ? columnIndex : 0) < (curColumnIndex !== null && curColumnIndex !== void 0 ? curColumnIndex : 0) ? (_c = theme === null || theme === void 0 ? void 0 : theme.grey5) !== null && _c !== void 0 ? _c : "rgba(0, 0, 0, 0.04)" : "initial"
+      backgroundColor: (columnIndex ?? 0) < (curColumnIndex ?? 0) ? theme?.grey5 ?? "rgba(0, 0, 0, 0.04)" : "initial"
+    }
+  }, goRenderCard && itemInfo && /*#__PURE__*/React.createElement(Pressable, {
+    style: {
+      position: "absolute",
+      display: "flex",
+      flexDirection: "column",
+      left: itemLeft,
+      width: itemWidth || 0,
+      height: rowHeight - 8,
+      overflow: "hidden",
+      zIndex: 2
+    },
+    key: `Gantt-cell-inner-${rowIndex}-${columnIndex}`,
+    onPress: () => attachPressCard?.({
+      columnIndex,
+      rowIndex,
+      dataIndex: itemInfo.taskIndex
+    })
+  }, /*#__PURE__*/React.createElement(ItemRenderer, {
+    columnIndex: columnIndex,
+    rowIndex: rowIndex,
+    dataIndex: itemInfo.taskIndex
+  })));
+};
+
+/**
+ * 甘特Grid根据最小时间单位显示的当前时间线
+ * @param text - 时间线具体值
+ * @param style - 样式
+ * @param theme - 皮肤主题
+ */
+export const Timeline = /*#__PURE__*/React.forwardRef(({
+  style
+}, ref) => {
+  return /*#__PURE__*/React.createElement(View, {
+    style: style,
+    ref: ref
+  });
+});
+
+/**
+ * 甘特Grid根据最小时间单位显示的当前时间线 显示的文本组件 （含在列头）
+ * @param text - 时间线具体值
+ * @param unit - 当前时间最小单位
+ * @param date - 当前时间
+ * @param columnWidth - 列宽
+ * @param theme - 皮肤主题
+ */
+export const TimeLineText = ({
+  theme,
+  text,
+  unit,
+  date,
+  columnWidth
+}) => /*#__PURE__*/React.createElement(View, {
+  style: {
+    position: "absolute",
+    display: "flex",
+    flexDirection: "column",
+    width: 40,
+    height: 24,
+    bottom: -2.25,
+    left: calculateTimeOffsetForTimeLine(unit, columnWidth, date) - 20
+  }
+}, /*#__PURE__*/React.createElement(Text, {
+  style: {
+    color: theme?.colorTextAccent ?? "#F55523",
+    fontSize: 12,
+    width: 40,
+    height: 18,
+    lineHeight: 18,
+    fontWeight: "bold",
+    textAlign: "center"
+  }
+}, text), /*#__PURE__*/React.createElement(Avatar, {
+  size: 7,
+  rounded: true,
+  containerStyle: {
+    alignSelf: "center",
+    backgroundColor: theme?.colorTextAccent ?? "#F55523"
+  }
+}));
+//# sourceMappingURL=Accessories.js.mapurColumnIndex !== null && curColumnIndex !== void 0 ? curColumnIndex : 0) ? (_c = theme === null || theme === void 0 ? void 0 : theme.grey5) !== null && _c !== void 0 ? _c : "rgba(0, 0, 0, 0.04)" : "initial"
     })
   }, goRenderCard && itemInfo && react_1.default.createElement(react_native_1.Pressable, {
     style: {

package/module/Gantt/Gantt.js

@@ -1,159 +1,146 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { createContext, useRef, useMemo, useCallback, useEffect, useState } from "react";
-import { withTheme } from "@rneui/themed";
-import VariableSizeGrid from "../Grid/VariableSizeGrid";
-import { DateUnit } from "./types";
-import { calculateCurrentColumnIndex, calculateRoundedColumnCount, calculateTotalRows, defaultColumnHeaderHeight, defaultColumnWidth, defaultRowHeight, getDefualtDateTimeRange, scrollToCurrentTime } from "./helper";
-import { ColumnHeaderCon, GanttCellRender, GanttItemWrapper } from "./Accessories";
-import InnerElementType from "./GanttInnerElementType";
-const GanttContext = /*#__PURE__*/createContext(undefined);
-GanttContext.displayName = "GanttContext";
-export { GanttContext };
-const Gantt = ({
-  children,
-  data,
-  style,
-  columnWidth: columnWidthSet,
-  columnHeaderHeight = defaultColumnHeaderHeight,
-  columnHeaderBackgroundColor,
-  columnHeaderBorder,
-  rowHeight: rowHeightSet,
-  range,
-  attachPressCard,
-  attachSwitchDay,
-  unit,
-  ...rest
-}) => {
-  const [scrollLeft, setScrollLeft] = useState(0);
-  const gridRef = useRef(null);
-  const headerRef = useRef(null);
-  const timeLineRef = useRef(null);
-  const rowHeight = rowHeightSet ? rowHeightSet + 8 : defaultRowHeight;
-  const columnWidth = columnWidthSet ?? defaultColumnWidth;
-  const rangeVal = range?.map(str => new Date(str)) ?? getDefualtDateTimeRange();
-  const {
-    roundedColumnCount: columnCount,
-    startDate,
-    endDate
-  } = calculateRoundedColumnCount(rangeVal, unit ?? DateUnit.HELF);
-  const {
-    totalRows: rowCount,
-    gridData
-  } = calculateTotalRows(unit ?? DateUnit.HELF, data, Math.ceil(rest.height / rowHeight), rangeVal);
-  const now = data?.[0]?.now ? new Date(data?.[0]?.now) : new Date();
-  const [curDate, setCurDate] = useState();
-  const [rangeStart, rangeEnd] = rangeVal;
-  const curColumnIndex = calculateCurrentColumnIndex(unit ?? DateUnit.HELF, rangeVal, now >= rangeStart && now <= rangeEnd ? now : new Date(`${rangeStart.getFullYear()}-${`${rangeStart.getMonth() + 1}`.padStart(2, "0")}-${`${rangeStart.getDate()}`.padStart(2, "0")}T${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`));
-  const contextValue = useMemo(() => ({
-    ItemRenderer: children,
-    headerRef,
-    gridRef,
-    timeLineRef,
-    columnHeaderHeight,
-    columnHeaderBackgroundColor,
-    headersRender: ColumnHeaderCon,
-    columnHeaderBorder,
-    columnWidth,
-    width: rest.width || 0,
-    height: rest.height,
-    startDate,
-    endDate,
-    rangeVal,
-    gridDataMap: gridData,
-    columnCount,
-    rowHeight,
-    rowCount,
-    now: data?.[0]?.now ? new Date(data?.[0]?.now) : new Date(),
-    theme: rest.theme
-  }), [children, ColumnHeaderCon, columnHeaderBorder, columnWidth, rest.width, rowHeight, rest.theme]);
-  useEffect(() => {
-    if (curDate) {
-      attachSwitchDay?.(curDate);
-    }
-  }, [curDate]);
-
-  // 同步header与主体grid的scroll状态
-  const handleScroll = useCallback(event => {
-    if (scrollLeft !== event.scrollLeft) {
-      headerRef.current?.scrollTo(event);
-    }
-    setScrollLeft(event.scrollLeft);
-
-    // 计算当前显示屏据中位置列索引
-    const middlePosition = scrollLeft + rest.width / 2;
-    const columnWidth = columnWidthSet ?? defaultColumnWidth;
-    const columnIndex = Math.floor(middlePosition / columnWidth);
-    // 根据列索引计算列对应时间
-    const date = new Date(startDate.getTime() + columnIndex * (unit ?? DateUnit.HELF));
-    const dateVal = new Date(`${date.getFullYear()}-${`${date.getMonth() + 1}`.padStart(2, "0")}-${`${date.getDate()}`.padStart(2, "0")}`);
-    // 如果产生天，月，年变化触发日期切换
-    if (curDate && (curDate.getFullYear() !== dateVal.getFullYear() || curDate.getMonth() !== dateVal.getMonth() || curDate.getDate() !== dateVal.getDate())) {
-      setCurDate(dateVal);
-    }
-  }, [scrollLeft, unit]);
+"use strict";
 
-  // 自动滚动到当前时间点（根据最小时间单位不同位置不同）
-  useEffect(() => {
-    const now = data?.[0]?.now ? new Date(data?.[0]?.now) : new Date();
-    const [rangeStart, rangeEnd] = rangeVal;
-    const date = now >= rangeStart && now <= rangeEnd ? now : new Date(`${rangeStart.getFullYear()}-${`${rangeStart.getMonth() + 1}`.padStart(2, "0")}-${`${rangeStart.getDate()}`.padStart(2, "0")}T${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`);
-    if (!curDate) {
-      setCurDate(new Date(`${date.getFullYear()}-${`${date.getMonth() + 1}`.padStart(2, "0")}-${`${date.getDate()}`.padStart(2, "0")}`));
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
-    scrollToCurrentTime(unit, gridRef, columnWidth, rest.width, rangeVal, date);
-  }, [unit, gridRef, columnWidth, rest.width, range, data]);
-  return /*#__PURE__*/React.createElement(GanttContext.Provider, {
-    value: {
-      ...contextValue,
-      rangeVal,
-      unit
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
+  });
+} : function (o, v) {
+  o["default"] = v;
+});
+var __importStar = this && this.__importStar || function () {
+  var ownKeys = function (o) {
+    ownKeys = Object.getOwnPropertyNames || function (o) {
+      var ar = [];
+      for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+      return ar;
+    };
+    return ownKeys(o);
+  };
+  return function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+    __setModuleDefault(result, mod);
+    return result;
+  };
+}();
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GanttContext = void 0;
+var react_1 = __importStar(require("react"));
+var themed_1 = require("@rneui/themed");
+var VariableSizeGrid_1 = __importDefault(require("../Grid/VariableSizeGrid"));
+var types_1 = require("./types");
+var helper_1 = require("./helper");
+var Accessories_1 = require("./Accessories");
+var GanttInnerElementType_1 = __importDefault(require("./GanttInnerElementType"));
+var GanttContext = (0, react_1.createContext)(undefined);
+exports.GanttContext = GanttContext;
+GanttContext.displayName = "GanttContext";
+var Gantt = function (_a) {
+  var _b, _c, _d, _e, _f;
+  var children = _a.children,
+    data = _a.data,
+    style = _a.style,
+    columnWidthSet = _a.columnWidth,
+    _g = _a.columnHeaderHeight,
+    columnHeaderHeight = _g === void 0 ? helper_1.defaultColumnHeaderHeight : _g,
+    columnHeaderBackgroundColor = _a.columnHeaderBackgroundColor,
+    columnHeaderBorder = _a.columnHeaderBorder,
+    rowHeightSet = _a.rowHeight,
+    range = _a.range,
+    attachPressCard = _a.attachPressCard,
+    attachSwitchDay = _a.attachSwitchDay,
+    unit = _a.unit,
+    rest = __rest(_a, ["children", "data", "style", "columnWidth", "columnHeaderHeight", "columnHeaderBackgroundColor", "columnHeaderBorder", "rowHeight", "range", "attachPressCard", "attachSwitchDay", "unit"]);
+  var _h = (0, react_1.useState)(0),
+    scrollLeft = _h[0],
+    setScrollLeft = _h[1];
+  var gridRef = (0, react_1.useRef)(null);
+  var headerRef = (0, react_1.useRef)(null);
+  var timeLineRef = (0, react_1.useRef)(null);
+  var rowHeight = rowHeightSet ? rowHeightSet + 8 : helper_1.defaultRowHeight;
+  var columnWidth = columnWidthSet !== null && columnWidthSet !== void 0 ? columnWidthSet : helper_1.defaultColumnWidth;
+  var rangeVal = (_b = range === null || range === void 0 ? void 0 : range.map(function (str) {
+    return new Date(str);
+  })) !== null && _b !== void 0 ? _b : (0, helper_1.getDefualtDateTimeRange)();
+  var _j = (0, helper_1.calculateRoundedColumnCount)(rangeVal, unit !== null && unit !== void 0 ? unit : types_1.DateUnit.HELF),
+    columnCount = _j.roundedColumnCount,
+    startDate = _j.startDate,
+    endDate = _j.endDate;
+  var _k = (0, helper_1.calculateTotalRows)(unit !== null && unit !== void 0 ? unit : types_1.DateUnit.HELF, data, Math.ceil(rest.height / rowHeight), rangeVal),
+    rowCount = _k.totalRows,
+    gridData = _k.gridData;
+  var now = ((_c = data === null || data === void 0 ? void 0 : data[0]) === null || _c === void 0 ? void 0 : _c.now) ? new Date((_d = data === null || data === void 0 ? void 0 : data[0]) === null || _d === void 0 ? void 0 : _d.now) : new Date();
+  var _l = (0, react_1.useState)(),
+    curDate = _l[0],
+    setCurDate = _l[1];
+  var rangeStart = rangeVal[0],
+    rangeEnd = rangeVal[1];
+  var curColumnIndex = (0, helper_1.calculateCurrentColumnIndex)(unit !== null && unit !== void 0 ? unit : types_1.DateUnit.HELF, rangeVal, now >= rangeStart && now <= rangeEnd ? now : new Date("".concat(rangeStart.getFullYear(), "-").concat("".concat(rangeStart.getMonth() + 1).padStart(2, "0"), "-").concat("".concat(rangeStart.getDate()).padStart(2, "0"), "T").concat(now.getHours(), ":").concat(now.getMinutes(), ":").concat(now.getSeconds())));
+  var contextValue = (0, react_1.useMemo)(function () {
+    var _a, _b;
+    return {
+      ItemRenderer: children,
+      headerRef: headerRef,
+      gridRef: gridRef,
+      timeLineRef: timeLineRef,
+      columnHeaderHeight: columnHeaderHeight,
+      columnHeaderBackgroundColor: columnHeaderBackgroundColor,
+      headersRender: Accessories_1.ColumnHeaderCon,
+      columnHeaderBorder: columnHeaderBorder,
+      columnWidth: columnWidth,
       width: rest.width || 0,
       height: rest.height,
-      display: "flex",
-      overflow: "hidden",
-      position: "relative",
-      backgroundColor: rest.theme.background ?? "#F9F2E8"
-    }
-  }, /*#__PURE__*/React.createElement(VariableSizeGrid, _extends({}, rest, {
-    ref: gridRef,
-    onScroll: handleScroll,
-    width: rest.width || 0 // Ensure a valid number for width
-    ,
-    height: Math.min(rowCount * rowHeight + columnHeaderHeight, rest.height),
-    rowHeight: () => rowHeight,
-    columnCount: columnCount,
-    rowCount: rowCount,
-    columnWidth: () => defaultColumnWidth,
-    style: {
-      ...style,
-      backgroundColor: rest.theme.background ?? "#F9F2E8",
-      scrollbarWidth: "none",
-      msOverflowStyle: "none"
-    },
-    itemData: {
-      ItemRenderer: GanttCellRender,
-      headersRender: ColumnHeaderCon,
-      attachPressCard,
-      cardRender: children,
-      columnHeaderHeight,
-      curColumnIndex,
-      unit,
-      rangeVal,
-      rowHeight
-    }
-  }), GanttItemWrapper)));
-};
-const TapasGantt = ({
-  children,
-  ...rest
-}) => /*#__PURE__*/React.createElement(Gantt, _extends({}, rest, {
-  innerElementType: InnerElementType
-}), children);
-export default withTheme(TapasGantt);
-//# sourceMappingURL=Gantt.js.map void 0 : data[0]) === null || _b === void 0 ? void 0 : _b.now) : new Date(),
+      startDate: startDate,
+      endDate: endDate,
+      rangeVal: rangeVal,
+      gridDataMap: gridData,
+      columnCount: columnCount,
+      rowHeight: rowHeight,
+      rowCount: rowCount,
+      now: ((_a = data === null || data === void 0 ? void 0 : data[0]) === null || _a === void 0 ? void 0 : _a.now) ? new Date((_b = data === null || data === void 0 ? void 0 : data[0]) === null || _b === void 0 ? void 0 : _b.now) : new Date(),
       theme: rest.theme
     };
   }, [children, Accessories_1.ColumnHeaderCon, columnHeaderBorder, columnWidth, rest.width, rowHeight, rest.theme]);