@nocobase/plugin-gantt 2.1.0-beta.37 → 2.1.0-beta.38

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

@@ -0,0 +1,35 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import React from 'react';
+import { EventOption } from '../../types/public-types';
+import { BarTask } from '../../types/bar-task';
+import { GanttEvent } from '../../types/gantt-task-actions';
+export type TaskGanttContentProps = {
+    tasks: BarTask[];
+    dates: Date[];
+    ganttEvent: GanttEvent;
+    selectedTask: BarTask | undefined;
+    rowHeight: number;
+    columnWidth: number;
+    timeStep: number;
+    svg?: React.RefObject<SVGSVGElement>;
+    svgWidth: number;
+    taskHeight: number;
+    arrowColor: string;
+    arrowIndent: number;
+    fontSize: string;
+    fontFamily: string;
+    rtl: boolean;
+    setGanttEvent: (value: GanttEvent) => void;
+    setFailedTask: (value: BarTask | null) => void;
+    setSelectedTask: (taskId: string) => void;
+    loading?: boolean;
+    enableDragToReschedule?: boolean;
+} & EventOption;
+export declare const TaskGanttContent: React.FC<TaskGanttContentProps>;

package/dist/shared/components/gantt/task-gantt-content.js

@@ -0,0 +1,337 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var task_gantt_content_exports = {};
+__export(task_gantt_content_exports, {
+  TaskGanttContent: () => TaskGanttContent
+});
+module.exports = __toCommonJS(task_gantt_content_exports);
+var import_react = __toESM(require("react"));
+var import_arrow = require("../other/arrow");
+var import_bar_helper = require("../../helpers/bar-helper");
+var import_other_helper = require("../../helpers/other-helper");
+var import_task_item = require("../task-item/task-item");
+const TaskGanttContent = ({
+  tasks,
+  dates,
+  ganttEvent,
+  selectedTask,
+  rowHeight,
+  columnWidth,
+  timeStep,
+  svg,
+  taskHeight,
+  arrowColor,
+  arrowIndent,
+  fontFamily,
+  fontSize,
+  rtl,
+  setGanttEvent,
+  setFailedTask,
+  setSelectedTask,
+  onDateChange,
+  onProgressChange,
+  onDoubleClick,
+  onClick,
+  onDelete,
+  enableDragToReschedule = true
+}) => {
+  const [xStep, setXStep] = (0, import_react.useState)(0);
+  const [initEventX1Delta, setInitEventX1Delta] = (0, import_react.useState)(0);
+  const lastActionRef = (0, import_react.useRef)(null);
+  const lastStartRef = (0, import_react.useRef)(null);
+  const ganttEventRef = (0, import_react.useRef)(ganttEvent);
+  const xStepRef = (0, import_react.useRef)(xStep);
+  const initEventX1DeltaRef = (0, import_react.useRef)(initEventX1Delta);
+  const rtlRef = (0, import_react.useRef)(rtl);
+  const mouseLeaveTimeoutRef = (0, import_react.useRef)(null);
+  ganttEventRef.current = ganttEvent;
+  xStepRef.current = xStep;
+  initEventX1DeltaRef.current = initEventX1Delta;
+  rtlRef.current = rtl;
+  const taskById = (0, import_react.useMemo)(() => new Map(tasks.map((task) => [String(task.id), task])), [tasks]);
+  const hasChangedTask = !!ganttEvent.changedTask;
+  (0, import_react.useEffect)(() => {
+    return () => {
+      if (mouseLeaveTimeoutRef.current) {
+        clearTimeout(mouseLeaveTimeoutRef.current);
+      }
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    var _a, _b, _c, _d;
+    const dateDelta = ((_a = dates[1]) == null ? void 0 : _a.getTime()) - ((_b = dates[0]) == null ? void 0 : _b.getTime()) - ((_c = dates[1]) == null ? void 0 : _c.getTimezoneOffset()) * 60 * 1e3 + ((_d = dates[0]) == null ? void 0 : _d.getTimezoneOffset()) * 60 * 1e3;
+    const newXStep = timeStep * columnWidth / dateDelta;
+    setXStep(newXStep);
+  }, [columnWidth, dates, timeStep]);
+  const getSvgCursorX = (0, import_react.useCallback)(
+    (event, svgElement = svg == null ? void 0 : svg.current) => {
+      const screenCTM = svgElement == null ? void 0 : svgElement.getScreenCTM();
+      if (!svgElement || !screenCTM) {
+        return null;
+      }
+      const point = svgElement.createSVGPoint();
+      point.x = event.clientX;
+      return point.matrixTransform(screenCTM.inverse()).x;
+    },
+    [svg]
+  );
+  (0, import_react.useEffect)(() => {
+    const svgElement = svg == null ? void 0 : svg.current;
+    const handleMouseMove = async (event) => {
+      const currentEvent = ganttEventRef.current;
+      if (!currentEvent.changedTask || !svgElement) return;
+      event.preventDefault();
+      const cursorX = getSvgCursorX(event, svgElement);
+      if (cursorX === null) {
+        return;
+      }
+      const { isChanged, changedTask } = (0, import_bar_helper.handleTaskBySVGMouseEvent)(
+        cursorX,
+        currentEvent.action,
+        currentEvent.changedTask,
+        xStepRef.current,
+        timeStep,
+        initEventX1DeltaRef.current,
+        rtlRef.current
+      );
+      if (isChanged) {
+        setGanttEvent({
+          ...currentEvent,
+          changedTask
+        });
+      }
+    };
+    const handleMouseUp = async (event) => {
+      const { action, originalSelectedTask, changedTask } = ganttEventRef.current;
+      if (!changedTask || !svgElement || !originalSelectedTask) {
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+        setGanttEvent({ action: "" });
+        return;
+      }
+      event.preventDefault();
+      const cursorX = getSvgCursorX(event, svgElement);
+      if (cursorX === null) {
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+        setGanttEvent({ action: "" });
+        return;
+      }
+      const { changedTask: newChangedTask } = (0, import_bar_helper.handleTaskBySVGMouseEvent)(
+        cursorX,
+        action,
+        changedTask,
+        xStepRef.current,
+        timeStep,
+        initEventX1DeltaRef.current,
+        rtlRef.current
+      );
+      const isNotLikeOriginal = originalSelectedTask.start !== newChangedTask.start || originalSelectedTask.end !== newChangedTask.end || originalSelectedTask.progress !== newChangedTask.progress;
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      setGanttEvent({ action: "" });
+      let operationSuccess = true;
+      if ((action === "move" || action === "end" || action === "start") && onDateChange && isNotLikeOriginal) {
+        try {
+          const result = await onDateChange(newChangedTask, newChangedTask.barChildren);
+          if (result !== void 0) {
+            operationSuccess = result;
+          }
+        } catch (error) {
+          operationSuccess = false;
+        }
+      } else if (onProgressChange && isNotLikeOriginal) {
+        try {
+          const result = await onProgressChange(newChangedTask, newChangedTask.barChildren);
+          if (result !== void 0) {
+            operationSuccess = result;
+          }
+        } catch (error) {
+          operationSuccess = false;
+        }
+      }
+      if (!operationSuccess) {
+        setFailedTask(originalSelectedTask);
+      }
+    };
+    if ((ganttEvent.action === "move" || ganttEvent.action === "end" || ganttEvent.action === "start" || ganttEvent.action === "progress") && hasChangedTask && svgElement) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [
+    ganttEvent.action,
+    hasChangedTask,
+    onProgressChange,
+    timeStep,
+    onDateChange,
+    svg,
+    getSvgCursorX,
+    setFailedTask,
+    setGanttEvent
+  ]);
+  const handleBarEventStart = async (action, task, event) => {
+    if (!event) {
+      if (action === "select") {
+        setSelectedTask(task.id);
+      }
+    } else if ((0, import_other_helper.isKeyboardEvent)(event)) {
+      if (action === "delete") {
+        if (onDelete) {
+          try {
+            const result = await onDelete(task);
+            if (result !== void 0 && result) {
+              setGanttEvent({ action, changedTask: task });
+            }
+          } catch (error) {
+            console.error("Error on Delete. " + error);
+          }
+        }
+      }
+    } else if (action === "mouseenter") {
+      if (mouseLeaveTimeoutRef.current) {
+        clearTimeout(mouseLeaveTimeoutRef.current);
+        mouseLeaveTimeoutRef.current = null;
+      }
+      const currentEvent = ganttEventRef.current;
+      if (!currentEvent.action || currentEvent.action === "mouseenter") {
+        setGanttEvent({
+          action,
+          changedTask: task,
+          originalSelectedTask: task
+        });
+      }
+    } else if (action === "mouseleave") {
+      const leavingTaskId = task.id;
+      if (ganttEventRef.current.action === "mouseenter") {
+        if (mouseLeaveTimeoutRef.current) {
+          clearTimeout(mouseLeaveTimeoutRef.current);
+        }
+        mouseLeaveTimeoutRef.current = setTimeout(() => {
+          var _a;
+          const currentEvent = ganttEventRef.current;
+          if (currentEvent.action === "mouseenter" && ((_a = currentEvent.changedTask) == null ? void 0 : _a.id) === leavingTaskId) {
+            setGanttEvent({ action: "" });
+          }
+          mouseLeaveTimeoutRef.current = null;
+        }, 300);
+      }
+    } else if (action === "dblclick") {
+      !!onDoubleClick && onDoubleClick(task);
+    } else if (action === "click") {
+      const targetElement = event.target;
+      if (targetElement.tagName === "rect") {
+        setGanttEvent({ action: "" });
+        !!onClick && onClick(task);
+      }
+    } else if (action === "move") {
+      const cursorX = getSvgCursorX(event);
+      if (cursorX === null) return;
+      setInitEventX1Delta(cursorX - task.x1);
+      setGanttEvent({
+        action,
+        changedTask: task,
+        originalSelectedTask: task
+      });
+    } else {
+      setGanttEvent({
+        action,
+        changedTask: task,
+        originalSelectedTask: task
+      });
+    }
+  };
+  const handleBarEvent = (action, task, event) => {
+    if (["click"].includes(action)) {
+      if (!["start", "end", "progress"].includes(lastActionRef.current) && (!lastStartRef.current || lastStartRef.current === task.start)) {
+        handleBarEventStart(action, task, event);
+      }
+      lastActionRef.current = null;
+      lastStartRef.current = null;
+    } else if (["move", "select"].includes(action)) {
+      lastStartRef.current = task.start;
+      handleBarEventStart(action, task, event);
+    } else {
+      lastStartRef.current = task.start;
+      lastActionRef.current = action;
+      handleBarEventStart(action, task, event);
+    }
+  };
+  return /* @__PURE__ */ import_react.default.createElement("g", { className: "content" }, /* @__PURE__ */ import_react.default.createElement("g", { className: "arrows", fill: arrowColor, stroke: arrowColor }, tasks.map((task) => {
+    return task.barChildren.map((child) => {
+      const taskTo = taskById.get(String(child.id));
+      if (!taskTo) {
+        return null;
+      }
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_arrow.Arrow,
+        {
+          key: `Arrow from ${task.id} to ${child.id}`,
+          taskFrom: task,
+          taskTo,
+          rowHeight,
+          taskHeight,
+          arrowIndent,
+          rtl
+        }
+      );
+    });
+  })), /* @__PURE__ */ import_react.default.createElement("g", { className: "bar", fontFamily, fontSize }, tasks.map((task) => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_task_item.TaskItem,
+      {
+        task,
+        arrowIndent,
+        taskHeight,
+        isProgressChangeable: !!onProgressChange && !task.isDisabled,
+        isDateChangeable: enableDragToReschedule && !!onDateChange && !task.isDisabled,
+        isDelete: !task.isDisabled,
+        onEventStart: handleBarEvent,
+        key: task.id,
+        isSelected: !!selectedTask && task.id === selectedTask.id,
+        rtl
+      }
+    );
+  })));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TaskGanttContent
+});

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

@@ -0,0 +1,24 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import React from 'react';
+import { CalendarProps } from '../calendar/calendar';
+import { GridProps } from '../grid/grid';
+import { TaskGanttContentProps } from './task-gantt-content';
+export type TaskGanttProps = {
+    gridProps: GridProps;
+    calendarProps: CalendarProps;
+    barProps: TaskGanttContentProps;
+    ganttHeight?: number;
+    ganttFullHeight?: number;
+    scrollY: number;
+    ref: any;
+    onHorizontalScroll?: (scrollLeft: number) => void;
+    showLeftBorder?: boolean;
+};
+export declare const TaskGantt: React.FC<TaskGanttProps>;

package/dist/shared/components/gantt/task-gantt.js

@@ -0,0 +1,128 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var task_gantt_exports = {};
+__export(task_gantt_exports, {
+  TaskGantt: () => TaskGantt
+});
+module.exports = __toCommonJS(task_gantt_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_calendar = require("../calendar/calendar");
+var import_grid = require("../grid/grid");
+var import_task_gantt_content = require("./task-gantt-content");
+var import_style = __toESM(require("./style"));
+const TaskGantt = (0, import_react.forwardRef)(
+  ({
+    gridProps,
+    calendarProps,
+    barProps,
+    ganttHeight,
+    ganttFullHeight,
+    scrollY,
+    onHorizontalScroll,
+    showLeftBorder = true
+  }, ref) => {
+    const ganttSVGRef = (0, import_react.useRef)(null);
+    const horizontalContainerRef = (0, import_react.useRef)(null);
+    const newBarProps = { ...barProps, svg: ganttSVGRef };
+    const { styles } = (0, import_style.default)();
+    (0, import_react.useEffect)(() => {
+      if (horizontalContainerRef.current) {
+        horizontalContainerRef.current.scrollTop = scrollY;
+      }
+    }, [scrollY]);
+    (0, import_react.useEffect)(() => {
+      const container = ref.current;
+      if (!container || !onHorizontalScroll) {
+        return;
+      }
+      const handleScroll = () => {
+        onHorizontalScroll(container.scrollLeft);
+      };
+      container.addEventListener("scroll", handleScroll);
+      return () => {
+        container.removeEventListener("scroll", handleScroll);
+      };
+    }, [onHorizontalScroll, ref]);
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: styles.ganttverticalcontainer,
+        ref,
+        dir: "ltr",
+        style: { borderLeft: showLeftBorder ? void 0 : "none" }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: gridProps.svgWidth,
+          height: calendarProps.headerHeight,
+          fontFamily: barProps.fontFamily,
+          className: "ganttHeader"
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_calendar.Calendar, { ...calendarProps })
+      ),
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { spinning: barProps == null ? void 0 : barProps.loading }, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          ref: horizontalContainerRef,
+          className: styles.horizontalcontainer,
+          style: ganttHeight ? { maxHeight: ganttHeight, width: gridProps.svgWidth } : { width: gridProps.svgWidth }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: gridProps.svgWidth,
+            height: ganttFullHeight ?? barProps.rowHeight * barProps.tasks.length,
+            fontFamily: barProps.fontFamily,
+            ref: ganttSVGRef,
+            className: "ganttBody"
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_grid.Grid, { ...gridProps }),
+          /* @__PURE__ */ import_react.default.createElement(import_task_gantt_content.TaskGanttContent, { ...newBarProps })
+        )
+      ))
+    );
+  }
+);
+TaskGantt.displayName = "TaskGantt";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TaskGantt
+});

package/dist/shared/components/grid/grid-body.d.ts

@@ -0,0 +1,21 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import React from 'react';
+import { Task } from '../../types/public-types';
+export type GridBodyProps = {
+    tasks: Task[];
+    dates: Date[];
+    svgWidth: number;
+    rowHeight: number;
+    columnWidth: number;
+    todayColor: string;
+    rtl: boolean;
+    selectedRowKeys: React.Key[];
+};
+export declare const GridBody: React.FC<GridBodyProps>;

package/dist/shared/components/grid/grid-body.js

@@ -0,0 +1,114 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var grid_body_exports = {};
+__export(grid_body_exports, {
+  GridBody: () => GridBody
+});
+module.exports = __toCommonJS(grid_body_exports);
+var import_css = require("@emotion/css");
+var import_react = __toESM(require("react"));
+var import_date_helper = require("../../helpers/date-helper");
+var import_style = __toESM(require("./style"));
+const GridBody = ({
+  tasks,
+  dates,
+  rowHeight,
+  svgWidth,
+  columnWidth,
+  todayColor,
+  rtl,
+  selectedRowKeys
+}) => {
+  const { styles } = (0, import_style.default)();
+  const data = tasks;
+  let y = 0;
+  const fullHeight = data.length * rowHeight;
+  const gridRows = [];
+  const rowLines = [
+    /* @__PURE__ */ import_react.default.createElement("line", { key: "RowLineFirst", x: "0", y1: 0, x2: svgWidth, y2: 0, className: (0, import_css.cx)("gridRowLine") })
+  ];
+  for (const task of data) {
+    gridRows.push(
+      /* @__PURE__ */ import_react.default.createElement(
+        "rect",
+        {
+          key: "Row" + task.id,
+          x: "0",
+          y,
+          width: svgWidth,
+          height: rowHeight,
+          className: (selectedRowKeys == null ? void 0 : selectedRowKeys.includes(String(task.id))) ? styles.gridHeightRow : styles.gridRow
+        }
+      )
+    );
+    rowLines.push(
+      /* @__PURE__ */ import_react.default.createElement(
+        "line",
+        {
+          key: "RowLine" + task.id,
+          x: "0",
+          y1: y + rowHeight,
+          x2: svgWidth,
+          y2: y + rowHeight,
+          className: (0, import_css.cx)("gridRowLine")
+        }
+      )
+    );
+    y += rowHeight;
+  }
+  const now = /* @__PURE__ */ new Date();
+  let tickX = 0;
+  const ticks = [];
+  let today = /* @__PURE__ */ import_react.default.createElement("rect", null);
+  for (let i = 0; i < dates.length; i++) {
+    const date = dates[i];
+    ticks.push(/* @__PURE__ */ import_react.default.createElement("line", { key: date.getTime(), x1: tickX, y1: 0, x2: tickX, y2: fullHeight, className: (0, import_css.cx)("gridTick") }));
+    if (i + 1 !== dates.length && date.getTime() < now.getTime() && dates[i + 1].getTime() >= now.getTime() || // if current date is last
+    i !== 0 && i + 1 === dates.length && date.getTime() < now.getTime() && (0, import_date_helper.addToDate)(date, date.getTime() - dates[i - 1].getTime(), "millisecond").getTime() >= now.getTime()) {
+      today = /* @__PURE__ */ import_react.default.createElement("rect", { x: tickX, y: 0, width: columnWidth, height: fullHeight, fill: todayColor });
+    }
+    if (rtl && i + 1 !== dates.length && date.getTime() >= now.getTime() && dates[i + 1].getTime() < now.getTime()) {
+      today = /* @__PURE__ */ import_react.default.createElement("rect", { x: tickX + columnWidth, y: 0, width: columnWidth, height: fullHeight, fill: todayColor });
+    }
+    tickX += columnWidth;
+  }
+  return /* @__PURE__ */ import_react.default.createElement("g", { className: (0, import_css.cx)(`gridBody`, styles.nbGridbody) }, /* @__PURE__ */ import_react.default.createElement("g", { className: "rows" }, gridRows), /* @__PURE__ */ import_react.default.createElement("g", { className: "rowLines" }, rowLines), /* @__PURE__ */ import_react.default.createElement("g", { className: "ticks" }, ticks), /* @__PURE__ */ import_react.default.createElement("g", { className: "today" }, today));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GridBody
+});

package/dist/shared/components/grid/grid.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import React from 'react';
+import { GridBodyProps } from './grid-body';
+export type GridProps = GridBodyProps;
+export declare const Grid: React.FC<GridProps>;