@beppla/tapas-ui 1.5.10 → 1.5.11

package/components/Gantt/helper.ts

@@ -0,0 +1,386 @@
+import { DateUnit, GridData, GridDataMap, Task } from "./types";
+
+
+export const defaultColumnWidth: number = 165;
+export const defaultRowHeight: number = 88;
+export const defaultColumnHeaderHeight: number = 24;
+
+/**
+ * Returns the default date-time range, which is the current date from 00:00:00 to 23:59:59.
+ * @returns An array of two Date objects representing the start and end of the default date-time range.
+ */
+export function getDefualtDateTimeRange(): Date[] {
+    const curDate = new Date();
+    return [
+        new Date(`${curDate.getFullYear()}-${`${curDate.getMonth() + 1}`.padStart(2, '0')}-${`${curDate.getDate()}`.padStart(2, '0')}T00:00:00`),
+        new Date(`${curDate.getFullYear()}-${`${curDate.getMonth() + 1}`.padStart(2, '0')}-${`${curDate.getDate()}`.padStart(2, '0')}T23:59:59`)
+    ];
+
+}
+
+/**
+ * Calculates the rounded column count based on the given times and unit time.
+ * @param times - An array of start and end times.
+ * @param unitTime - The unit time in milliseconds.
+ * @returns The rounded column count.
+ */
+export function calculateRoundedColumnCount(times: string[], unitTime: number): { roundedColumnCount: number, startDate: Date, endDate: Date } {
+    const [defaultStart, defaultEnd] = getDefualtDateTimeRange();
+    const startDate = times[0] ? new Date(times[0]) : defaultStart;
+    const endDate = times[1] ? new Date(times[1]) : defaultEnd;
+    if (!startDate || !endDate || startDate.getTime() > endDate?.getTime()) {
+        throw new Error('Start time cannot be greater than end time');
+    }
+
+    const totalTime = endDate.getTime() - startDate.getTime();
+    const roundedColumnCount = Math.ceil(totalTime / unitTime);
+    return { roundedColumnCount, startDate, endDate };
+}
+
+/**
+ * Calculates the grid data based on the given times, unit time, and tasks.
+ * @param times - An array of start and end times.
+ * @param unitTime - The unit time in milliseconds.
+ * @param tasks - An array of tasks.
+ * @returns An array of grid data.
+ */
+export function calculateGridData(unitTime: number, tasks: Task[], range: Date[] = getDefualtDateTimeRange()): GridDataMap {
+    // Sort tasks by start time
+    tasks?.sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
+
+    let currentRow = 0;
+    let currentColumn = 0;
+
+    const taskCount = tasks?.length || 0;
+    const gridDataMap: GridDataMap = new Map();
+    for (let i = 0; i < taskCount; i++) {
+        const task = tasks[i];
+        if (!task) break;
+        const taskStartTime = new Date(task.startTime);
+        const taskEndTime = new Date(task.endTime);
+        // Check if task overlaps with previous tasks in the same row
+        let overlap = false;
+        const rowGridData = gridDataMap.get(currentRow);
+        if (rowGridData) {
+          const entries = Array.from(rowGridData.values());
+          for (let j = 0; j < entries.length; j++) {
+            const entry = entries[j];
+            if (entry && taskStartTime < entry.endTime && taskEndTime > entry.startTime) {
+                overlap = true;
+                break;
+            }
+          }
+        }
+
+        currentColumn = calculateStartingColumnIndex(taskStartTime, unitTime, range);
+
+        if (overlap) {
+            // Move to the next row
+            currentRow++;
+        }
+
+        // Calculate the number of columns the task occupies
+        const taskColumnCount = Math.ceil((taskEndTime.getTime() - taskStartTime.getTime()) / unitTime);
+
+        // Add the task to the grid data
+        const gridDataItem: GridData = {
+            startTime: taskStartTime,
+            endTime: taskEndTime,
+            row: currentRow,
+            column: currentColumn,
+            columnCount: taskColumnCount,
+            taskIndex: i,
+        };
+
+        // Add the grid data item to the row grid data map
+        if (gridDataMap.has(currentRow)) {
+            gridDataMap.get(currentRow)?.set(currentColumn, gridDataItem);
+        } else {
+            gridDataMap.set(currentRow, new Map([[currentColumn, gridDataItem]]));
+        }
+
+        // Move to the next column
+        currentColumn += taskColumnCount;
+
+        // Move to the next row if the task exceeds the rounded column count (300000)运行上限
+        if (currentColumn >= 300000) {
+            currentRow++;
+            currentColumn = 0;
+        }
+
+        // Break the loop if the maximum data size is reached
+        if (gridDataMap.size > tasks.length) {
+            break;
+        }
+    }
+    return gridDataMap;
+}
+
+/**
+ * Calculates the starting column index based on the given task start time and unit time.
+ * @param startTime - The start time of the task.
+ * @param unitTime - The unit time in milliseconds.
+ * @returns The starting column index.
+ */
+export function calculateStartingColumnIndex(startTime: Date, unitTime: number, range: Date[] = getDefualtDateTimeRange()): number {
+    const columnIndex = Math.floor((startTime.getTime() - (range[0]?.getTime() ?? 0)) / unitTime);
+    return Math.max(0, columnIndex);
+}
+
+/**
+ * Calculates the item width based on the unit time, minimum unit time, and task duration.
+ * @param unitTime - The unit time in milliseconds.
+ * @param minUnitTime - The minimum unit time in milliseconds.
+ * @param taskStartTime - The start time of the task.
+ * @param taskEndTime - The end time of the task.
+ * @returns The item width.
+ */
+export function calculateItemWidth(unitTime: number, columnWidth: number, taskStartTime: Date, taskEndTime: Date): number {
+    const taskDuration = taskEndTime.getTime() - taskStartTime.getTime();
+    return (columnWidth / unitTime) * taskDuration;
+}
+
+/**
+ * Calculates the total rows based on the given times, unit time, tasks, and minimum value.
+ * @param times - An array of start and end times.
+ * @param unitTime - The unit time in milliseconds.
+ * @param tasks - An array of tasks.
+ * @param min - The minimum value for total rows.
+ * @returns An object containing the total rows and grid data.
+ */
+export function calculateTotalRows(unitTime: number, tasks: Task[], min: number, range: Date[]): { totalRows: number, gridData: GridDataMap } {
+    const gridData = calculateGridData(unitTime, tasks, range);
+    return { totalRows: Math.max(min, gridData.size), gridData };
+}
+
+/**
+ * Scrolls to the current time in the grid.
+ * @param unit - The unit of time.
+ * @param gridRef - A mutable ref object for the grid.
+ * @param columnWidth - The width of a column.
+ * @param width - The width of the grid.
+ * @param range - An array of start and end dates.
+ */
+
+export function scrollToCurrentTime(
+    unit: number,
+    gridRef: React.MutableRefObject<any>,
+    columnWidth: number,
+    width: number,
+    range: Date[],
+    now?: Date,
+): () => void {
+    const currentColumnIndex = calculateCurrentColumnIndex(
+        unit ?? DateUnit.HELF,
+        range,
+        now,
+    );
+    const scrollLeft =
+        (currentColumnIndex - Math.floor(width / (2 * columnWidth))) * columnWidth;
+
+    const timer = setTimeout(() => {
+        gridRef?.current?.scrollTo({ scrollLeft });
+    }, 0);
+
+    // Return cleanup function to prevent memory leak
+    return () => clearTimeout(timer);
+};
+
+/**
+ * Calculates the current column index based on the unit of time and range.
+ * @param unit - The unit of time.
+ * @param range - An array of start and end dates.
+ * @returns The current column index.
+ */
+export function calculateCurrentColumnIndex(unit: number, range: Date[], now?: Date): number {
+    const currentTime = now ?? new Date(); // Get the current time
+    // Calculate the current column index based on the current time and column width
+    let currentColumnIndex = 0;
+    const startRange = range[0];
+    if (!startRange) {
+        return 0;
+    }
+    if (unit === DateUnit.HELF) {
+        const timeDiff = currentTime.getTime() - startRange.getTime();
+        currentColumnIndex = Math.floor(timeDiff / (30 * 60 * 1000));
+    } else if (unit === DateUnit.HOUR) {
+        const timeDiff = currentTime.getTime() - startRange.getTime();
+        currentColumnIndex = Math.floor(timeDiff / (60 * 60 * 1000));
+    } else if (unit === DateUnit.DAY) {
+        const timeDiff = currentTime.getTime() - startRange.getTime();
+        currentColumnIndex = Math.floor(timeDiff / (24 * 60 * 60 * 1000));
+    } else if (unit === DateUnit.WEEK) {
+        const timeDiff = currentTime.getTime() - startRange.getTime();
+        currentColumnIndex = Math.floor(timeDiff / (7 * 24 * 60 * 60 * 1000));
+    }
+
+    return currentColumnIndex;
+};
+
+/**
+ * Calculates the left offset of the current time in the grid.
+ * @param unit - The unit of time.
+ * @param columnWidth - The width of a column.
+ * @param range - An array of start and end dates.
+ * @param currentTime - current date;
+ * @returns The left offset of the current time.
+ */
+export function calculateCurrentTimeOffset(unit: number, columnWidth: number, range: Date[], currentTime: Date): { currentTimeOffset: number, curTimeText: string } {
+    const currentColumnIndex = calculateCurrentColumnIndex(unit, range);
+
+    let currentTimeOffset = currentColumnIndex * columnWidth;
+    let curTimeText = '';
+
+    switch (unit) {
+        case DateUnit.HELF:
+            currentTimeOffset += (currentTime.getMinutes() % 30) * 60 * 1000 * (columnWidth / unit);
+            curTimeText = `${currentTime.getHours()}:${currentTime.getMinutes()}`;
+            break;
+        case DateUnit.HOUR:
+            currentTimeOffset += currentTime.getMinutes() * 60 * 1000 * (columnWidth / unit);
+            curTimeText = `${currentTime.getHours()}:${currentTime.getMinutes()}`;
+            break;
+        case DateUnit.DAY:
+            currentTimeOffset += currentTime.getHours() * 60 * 60 * 1000 * (columnWidth / unit);
+            curTimeText = `${currentTime.getHours()}:${currentTime.getMinutes()}`;
+            break;
+        case DateUnit.WEEK:
+            const dayOfWeek = currentTime.getDay();
+            currentTimeOffset += (dayOfWeek === 0 ? 7 : dayOfWeek) * 24 * 60 * 60 * 1000 * (columnWidth / unit);
+            curTimeText = `${dayOfWeek}`;
+            break;
+        case DateUnit.MONTH:
+            const totalDaysInMonth = new Date(currentTime.getFullYear(), currentTime.getMonth() + 1, 0).getDate();
+            currentTimeOffset += currentTime.getDate() * (columnWidth / totalDaysInMonth);
+            curTimeText = `${currentTime.getDate()}`.padStart(2, '0');
+            break;
+        case DateUnit.YEAR:
+            currentTimeOffset += (currentTime.getMonth() + 1) * (columnWidth / 12);
+            curTimeText = `${currentTime.getMonth() + 1}`.padStart(2, '0');
+            break;
+        default:
+    }
+
+    return { currentTimeOffset, curTimeText };
+}
+
+
+/**
+ * Calculates the left offset of the current time line
+ * @param unit - The unit of time.
+ * @param columnWidth - The width of a column.
+ * @param range - An array of start and end dates.
+ * @returns The left offset of the current time.
+ */
+export function calculateTimeOffsetForTimeLine(unit: number, columnWidth: number, currentTime: Date): number {
+    let currentTimeOffset = 0;
+
+    switch (unit) {
+        case DateUnit.HELF:
+            currentTimeOffset += (currentTime.getMinutes() % 30) * 60 * 1000 * (columnWidth / unit);
+            break;
+        case DateUnit.HOUR:
+            currentTimeOffset += currentTime.getMinutes() * 60 * 1000 * (columnWidth / unit);
+            break;
+        case DateUnit.DAY:
+            currentTimeOffset += currentTime.getHours() * 60 * 60 * 1000 * (columnWidth / unit);
+            break;
+        case DateUnit.WEEK:
+            const dayOfWeek = currentTime.getDay();
+            currentTimeOffset += (dayOfWeek === 0 ? 7 : dayOfWeek) * 24 * 60 * 60 * 1000 * (columnWidth / unit);
+            break;
+        case DateUnit.MONTH:
+            const totalDaysInMonth = new Date(currentTime.getFullYear(), currentTime.getMonth() + 1, 0).getDate();
+            currentTimeOffset += currentTime.getDate() * (columnWidth / totalDaysInMonth);
+            break;
+        case DateUnit.YEAR:
+            currentTimeOffset += (currentTime.getMonth() + 1) * (columnWidth / 12);
+            break;
+        default:
+    }
+    return currentTimeOffset;
+}
+
+/**
+ * Calculates the left offset of the current time in the cell.
+ * @param unit - The unit of time.
+ * @param columnWidth - The width of a column.
+ * @param range - An array of start and end dates.
+ * @returns The left offset of the current time.
+ */
+export function calculateTimeOffsetInCell(unit: number, columnWidth: number, currentTime: Date): number {
+    let currentTimeOffset = 0;
+
+    switch (unit) {
+        case DateUnit.HELF:
+            currentTimeOffset += (currentTime.getMinutes() % 30) * 60 * 1000 * (columnWidth / unit);
+            break;
+        case DateUnit.HOUR:
+            currentTimeOffset += currentTime.getMinutes() * 60 * 1000 * (columnWidth / unit);
+            break;
+        case DateUnit.DAY:
+            currentTimeOffset += currentTime.getHours() * 60 * 60 * 1000 * (columnWidth / unit);
+            break;
+        case DateUnit.WEEK:
+            const dayOfWeek = currentTime.getDay();
+            currentTimeOffset += (dayOfWeek === 0 ? 7 : dayOfWeek) * 24 * 60 * 60 * 1000 * (columnWidth / unit);
+            break;
+        case DateUnit.MONTH:
+            const totalDaysInMonth = new Date(currentTime.getFullYear(), currentTime.getMonth() + 1, 0).getDate();
+            currentTimeOffset += currentTime.getDate() * (columnWidth / totalDaysInMonth);
+            break;
+        case DateUnit.YEAR:
+            currentTimeOffset += (currentTime.getMonth() + 1) * (columnWidth / 12);
+            break;
+        default:
+    }
+
+    // Calculate the offset from the 0 coordinate to the left
+    // const zeroOffset = columnWidth / 2;
+    // currentTimeOffset -= zeroOffset;
+
+    return currentTimeOffset;
+}
+/**
+ * Generates the title for each column based on the unit of time, column index, start time, and end time.
+ * @param unit - The unit of time.
+ * @param columnIndex - The index of the column.
+ * @param startTime - The start time.
+ * @param endTime - The end time.
+ * @returns The title for the column.
+ */
+export function generateColumnTitle(unit: number, columnIndex: number, startTime: Date): string {
+    let columnTitle = '';
+
+    switch (unit) {
+        case DateUnit.HELF:
+            const halfHourTime = new Date(startTime.getTime() + columnIndex * 30 * 60 * 1000);
+            if (halfHourTime.getMinutes() !== 30) { // special display behaiour for 30 minutes
+                columnTitle = `${halfHourTime.getHours()}:${halfHourTime.getMinutes().toString().padStart(2, '0')}`;
+            }
+            break;
+        case DateUnit.HOUR:
+            const hourTime = new Date(startTime.getTime() + columnIndex * 60 * 60 * 1000);
+            columnTitle = `${hourTime.getHours()}:00`;
+            break;
+        case DateUnit.DAY:
+            const dayTime = new Date(startTime.getTime() + columnIndex * 24 * 60 * 60 * 1000);
+            columnTitle = `${dayTime.getDate()}`;
+            break;
+        case DateUnit.WEEK:
+            const weekTime = new Date(startTime.getTime() + columnIndex * 7 * 24 * 60 * 60 * 1000);
+            columnTitle = `${weekTime.getDate()}`;
+            break;
+        case DateUnit.MONTH:
+            const monthTime = new Date(startTime.getFullYear(), startTime.getMonth() + columnIndex, 1);
+            columnTitle = `${monthTime.getMonth() + 1}/${monthTime.getFullYear()}`;
+            break;
+        case DateUnit.YEAR:
+            const yearTime = new Date(startTime.getFullYear() + columnIndex, 0, 1);
+            columnTitle = `${yearTime.getFullYear()}`;
+            break;
+        default:
+    }
+
+    return columnTitle;
+}

package/components/Gantt/types.ts

@@ -0,0 +1,108 @@
+import React, { CSSProperties } from "react";
+import { Props, RenderComponent } from "../Grid/Grid.base";
+
+export interface ChildrenProps {
+  columnIndex?: number;
+  rowIndex?: number;
+  curColumnIndex?: number;
+  curColumnText?: string;
+  startDate?: Date;
+  endDate?: Date;
+  unit?: DateUnit;
+  style?: CSSProperties;
+  theme?: any;
+  dataIndex: number;
+  rangeVal?: Date[];
+  currentTime?: Date;
+  rowHeight?: number;
+  columnWidth?: number;
+  ItemRenderer?: React.FC<any>;
+  attachPressCard?: (info: PressCardProps) => void;
+}
+
+export interface PressCardProps {
+  columnIndex?: number;
+  rowIndex?: number;
+  dataIndex: number;
+}
+export interface GanttProps
+  extends Omit<
+    Props<Element>,
+    "itemData" | "direction" | "useIsScrolling" | "children" | "rowCount" | "columnCount" | "rowHeight" | "columnWidth"
+  > {
+  columnHeaderHeight?: number;
+  columnHeaderBackgroundColor?: string;
+  columnHeaderBorder?: {
+    top?: boolean;
+    left?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+  };
+  columnWidth?: number;
+  range?: string[];
+  unit?: DateUnit;
+  children: RenderComponent<any>;
+  data: any[];
+  theme?: any;
+  rowHeight?: number;
+  attachSwitchDay?: (date?: Date) => void;
+  attachPressCard?: (info: PressCardProps) => void;
+}
+
+
+export enum DateUnit {
+  YEAR = 365 * 24 * 60 * 60 * 1000,
+  MONTH = 31 * 24 * 60 * 60 * 1000, // 需要扩展支持 对于不同月不同天总数问题
+  WEEK = 7 * 24 * 60 * 60 * 1000,
+  DAY = 24 * 60 * 60 * 1000,
+  HOUR = 60 * 60 * 1000,
+  HELF = 30 * 60 * 1000,
+}
+
+export interface GanttContextType {
+  columnCount: number;
+  rowCount: number;
+  columnWidth: number;
+  rowHeight: number;
+  width: number;
+  height: number;
+  theme: any;
+  gridRef?: React.MutableRefObject<any>;
+  ItemRenderer?: React.FC<any>;
+  cardRender?: React.FC<any>;
+  columnHeaderBorder?: {
+    top?: boolean;
+    left?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+  };
+  now: Date;
+  columnHeaderBackgroundColor?: string;
+  columnHeaderHeight?: number;
+  headerRef?: React.MutableRefObject<any>;
+  rangeVal: Date[];
+  unit: DateUnit;
+  startDate: Date;
+  endDate: Date;
+  gridDataMap: GridDataMap;
+}
+
+export type ScrollDirection = "forward" | "backward";
+
+
+export interface Task {
+  startTime: string;
+  endTime: string;
+  // now: string;
+}
+export interface GridData {
+  startTime: Date;
+  endTime: Date;
+  row: number;
+  column: number;
+  columnCount: number;
+  taskIndex: number;
+  // task: Task;
+}
+
+export type GridDataMap = Map<number, Map<number, GridData>>;