@beppla/tapas-ui 1.5.11 → 1.5.13

package/components/Gantt/Gantt.tsx

@@ -1,301 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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;