@beppla/tapas-ui 1.5.9 → 1.5.11

package/components/Gantt/Gantt.tsx

@@ -0,0 +1,301 @@
+import React, {
+  createContext,
+  useRef,
+  useMemo,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
+import { withTheme } from "@rneui/themed";
+import VariableSizeGrid from "../Grid/VariableSizeGrid";
+import { DateUnit, GanttContextType, GanttProps } 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 = createContext<GanttContextType | undefined>(undefined);
+GanttContext.displayName = "GanttContext";
+
+export { GanttContext };
+
+const Gantt = ({
+  children,
+  data,
+  style,
+  columnWidth: columnWidthSet,
+  columnHeaderHeight = defaultColumnHeaderHeight,
+  columnHeaderBackgroundColor,
+  columnHeaderBorder,
+  rowHeight: rowHeightSet,
+  range,
+  attachPressCard,
+  attachSwitchDay,
+  unit,
+  ...rest
+}: any) => {
+  const scrollLeftRef = useRef(0);
+  const gridRef = useRef<any>(null);
+  const headerRef = useRef<any>(null);
+  const timeLineRef = useRef<any>(null);
+  const scrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const rafRef = useRef<number | null>(null);
+  const rowHeight: number = rowHeightSet ? rowHeightSet + 8 : defaultRowHeight;
+  const columnWidth: number = columnWidthSet ?? defaultColumnWidth;
+
+  const rangeVal = useMemo(
+    () => range?.map((str: string) => new Date(str)) ?? getDefualtDateTimeRange(),
+    [range]
+  );
+
+  const {
+    roundedColumnCount: columnCount,
+    startDate,
+    endDate,
+  } = useMemo(
+    () => calculateRoundedColumnCount(rangeVal, unit ?? DateUnit.HELF),
+    [rangeVal, unit]
+  );
+
+  const { totalRows: rowCount, gridData } = useMemo(
+    () => calculateTotalRows(
+      unit ?? DateUnit.HELF,
+      data,
+      Math.ceil(rest.height / rowHeight),
+      rangeVal
+    ),
+    [unit, data, rest.height, rowHeight, rangeVal]
+  );
+
+  const now = useMemo(
+    () => data?.[0]?.now ? new Date(data?.[0]?.now) : new Date(),
+    [data]
+  );
+  const [curDate, setCurDate] = useState<Date>();
+  const [rangeStart, rangeEnd] = rangeVal;
+  const curColumnIndex = useMemo(
+    () => 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()}`
+          )
+    ),
+    [unit, rangeVal, now, rangeStart, rangeEnd]
+  );
+
+  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,
+      theme: rest.theme,
+    }),
+    [
+      children,
+      columnHeaderHeight,
+      columnHeaderBackgroundColor,
+      columnHeaderBorder,
+      columnWidth,
+      rest.width,
+      rest.height,
+      startDate,
+      endDate,
+      rangeVal,
+      gridData,
+      columnCount,
+      rowHeight,
+      rowCount,
+      now,
+      rest.theme,
+    ]
+  );
+
+  useEffect(() => {
+    if (curDate) {
+      attachSwitchDay?.(curDate);
+    }
+  }, [curDate]);
+
+  // 同步header与主体grid的scroll状态（RAF节流）
+  const handleScroll = useCallback(
+    (event: any) => {
+      const newScrollLeft = event.scrollLeft;
+
+      // 同步 header 滚动（立即执行，保证视觉同步）
+      if (scrollLeftRef.current !== newScrollLeft) {
+        headerRef.current?.scrollTo(event);
+      }
+      scrollLeftRef.current = newScrollLeft;
+
+      // 日期切换计算用 RAF 节流
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+      rafRef.current = requestAnimationFrame(() => {
+        const middlePosition = newScrollLeft + rest.width / 2;
+        const colW = columnWidthSet ?? defaultColumnWidth;
+        const columnIndex = Math.floor(middlePosition / colW);
+        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")}`
+        );
+        setCurDate((prev) => {
+          if (
+            prev &&
+            (prev.getFullYear() !== dateVal.getFullYear() ||
+              prev.getMonth() !== dateVal.getMonth() ||
+              prev.getDate() !== dateVal.getDate())
+          ) {
+            return dateVal;
+          }
+          return prev;
+        });
+        rafRef.current = null;
+      });
+    },
+    [rest.width, columnWidthSet, startDate, unit]
+  );
+
+  // 清理 RAF
+  useEffect(() => {
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      if (scrollTimerRef.current) clearTimeout(scrollTimerRef.current);
+    };
+  }, []);
+
+  // 自动滚动到当前时间点（根据最小时间单位不同位置不同）
+  useEffect(() => {
+    const curNow = data?.[0]?.now ? new Date(data?.[0]?.now) : new Date();
+    const [rs, re] = rangeVal;
+    const date =
+      curNow >= rs && curNow <= re
+        ? curNow
+        : new Date(
+            `${rs.getFullYear()}-${`${
+              rs.getMonth() + 1
+            }`.padStart(2, "0")}-${`${rs.getDate()}`.padStart(
+              2,
+              "0"
+            )}T${curNow.getHours()}:${curNow.getMinutes()}:${curNow.getSeconds()}`
+          );
+    if (!curDate) {
+      setCurDate(
+        new Date(
+          `${date.getFullYear()}-${`${date.getMonth() + 1}`.padStart(
+            2,
+            "0"
+          )}-${`${date.getDate()}`.padStart(2, "0")}`
+        )
+      );
+    }
+    const cleanup = scrollToCurrentTime(unit, gridRef, columnWidth, rest.width, rangeVal, date);
+    return cleanup;
+  }, [unit, gridRef, columnWidth, rest.width, range, data]);
+
+  // 缓存静态样式，避免每次渲染重建
+  const containerStyle = useMemo(() => ({
+    width: rest.width || 0,
+    height: rest.height,
+    display: "flex" as const,
+    overflow: "hidden" as const,
+    position: "relative" as const,
+    backgroundColor: rest.theme.background ?? "#F9F2E8",
+  }), [rest.width, rest.height, rest.theme.background]);
+
+  const gridStyle = useMemo(() => ({
+    ...style,
+    backgroundColor: rest.theme.background ?? "#F9F2E8",
+    scrollbarWidth: "none" as const,
+    msOverflowStyle: "none" as const,
+  }), [style, rest.theme.background]);
+
+  const rowHeightFn = useCallback(() => rowHeight, [rowHeight]);
+  const columnWidthFn = useCallback(() => defaultColumnWidth, []);
+
+  const itemData = useMemo(() => ({
+    ItemRenderer: GanttCellRender,
+    headersRender: ColumnHeaderCon,
+    attachPressCard,
+    cardRender: children,
+    columnHeaderHeight,
+    curColumnIndex,
+    unit,
+    rangeVal,
+    rowHeight,
+  }), [attachPressCard, children, columnHeaderHeight, curColumnIndex, unit, rangeVal, rowHeight]);
+
+  return (
+    <GanttContext.Provider value={{ ...contextValue, rangeVal, unit }}>
+      <div style={containerStyle}>
+        <VariableSizeGrid
+          {...rest}
+          ref={gridRef}
+          onScroll={handleScroll}
+          width={rest.width || 0}
+          height={Math.min(
+            rowCount * rowHeight + columnHeaderHeight,
+            rest.height
+          )}
+          rowHeight={rowHeightFn}
+          columnCount={columnCount}
+          rowCount={rowCount}
+          columnWidth={columnWidthFn}
+          style={gridStyle}
+          itemData={itemData}
+        >
+          {GanttItemWrapper}
+        </VariableSizeGrid>
+      </div>
+    </GanttContext.Provider>
+  );
+};
+
+const TapasGantt: React.FC<GanttProps> = ({ children, ...rest }) => (
+  <Gantt {...rest} innerElementType={InnerElementType}>
+    {children}
+  </Gantt>
+);
+
+export default withTheme(TapasGantt);

package/components/Gantt/GanttInnerElementType.tsx

@@ -0,0 +1,131 @@
+import React, { forwardRef } from "react";
+import { DateUnit } from "./types";
+import {
+  calculateCurrentColumnIndex,
+  calculateCurrentTimeOffset,
+  defaultColumnHeaderHeight,
+} from "./helper";
+import {
+  ColumnHeaderCellRnder,
+  ColumnHeaderCon,
+  GanttItemWrapper,
+  Timeline,
+  useGanttContext,
+} from "./Accessories";
+import VariableSizeGrid from "../Grid/VariableSizeGrid";
+
+const InnerElementType = forwardRef(
+  ({ children, style, ...rest }: any, ref) => {
+    const {
+      columnCount,
+      columnWidth,
+      columnHeaderBackgroundColor,
+      columnHeaderHeight = defaultColumnHeaderHeight,
+      columnHeaderBorder,
+      width,
+      theme,
+      rowCount,
+      rowHeight,
+      rangeVal,
+      now,
+      unit = DateUnit.HELF,
+      headerRef,
+    } = useGanttContext();
+
+    const curColumnIndex = calculateCurrentColumnIndex(unit, rangeVal);
+    const currentTime = new Date();
+    const { currentTimeOffset, curTimeText } = calculateCurrentTimeOffset(
+      unit,
+      columnWidth,
+      rangeVal,
+      currentTime
+    );
+
+    return (
+      <>
+        {rangeVal && rangeVal[0] && rangeVal[1] && now >= rangeVal?.[0] && now <= rangeVal?.[1] && <Timeline
+          theme={theme}
+          text={curTimeText}
+          style={{
+            position: "absolute",
+            left: currentTimeOffset,
+            width: 1,
+            height: rowCount * rowHeight,
+            top: defaultColumnHeaderHeight,
+            backgroundColor: theme.colorTextAccent ?? "#F55523",
+          }}
+        />}
+        <div
+          style={{
+            position: "sticky",
+            left: 0,
+            top: 0,
+            marginBottom: -1 * (columnHeaderHeight ?? defaultColumnHeaderHeight),
+            height: columnHeaderHeight ?? defaultColumnHeaderHeight,
+            width: width||0,
+            zIndex: 4,
+            backgroundColor: columnHeaderBackgroundColor ?? "none",
+            borderTopLeftRadius: theme?.radius?.mini ?? 4,
+            borderTopRightRadius: theme?.radius?.mini ?? 4,
+            borderTop: columnHeaderBorder?.top
+              ? "1px solid rgba(0, 0, 0, 0.12)"
+              : "none",
+            borderLeft: columnHeaderBorder?.left
+              ? "1px solid rgba(0, 0, 0, 0.12)"
+              : "none",
+            borderRight: columnHeaderBorder?.right
+              ? "1px solid rgba(0, 0, 0, 0.12)"
+              : "none",
+            borderBottom: columnHeaderBorder?.bottom
+              ? "1px solid rgba(0, 0, 0, 0.12)"
+              : "none",
+          }}
+        ></div>
+
+        <ColumnHeaderCon
+          style={{
+            backgroundColor: "#F9F2E8",
+            zIndex: 3,
+            top: 0,
+            left: 0,
+            width: width || 0,
+            height: columnHeaderHeight ?? defaultColumnHeaderHeight,
+            position: "sticky",
+            display: "flex",
+            flexDirection: "row",
+          }}
+        >
+          <VariableSizeGrid
+            ref={headerRef}
+            columnCount={columnCount}
+            columnWidth={() => columnWidth}
+            height={columnHeaderHeight ?? defaultColumnHeaderHeight}
+            rowCount={1}
+            rowHeight={() => columnHeaderHeight ?? defaultColumnHeaderHeight}
+            width={width}
+            itemData={{
+              ItemRenderer: ColumnHeaderCellRnder,
+              columnHeaderHeight,
+              theme,
+              startDate: rangeVal[0],
+              columnCount,
+              columnWidth,
+              curColumnIndex,
+              currentTime,
+              unit,
+              curColumnText: curTimeText,
+            }}
+            style={{ overflow: "hidden" }}
+          >
+            {GanttItemWrapper}
+          </VariableSizeGrid>
+        </ColumnHeaderCon>
+        <div ref={ref} {...rest} style={style}>
+          {children}
+        </div>
+      </>
+    );
+  }
+);
+
+export default InnerElementType;