@beppla/tapas-ui 1.4.31 → 1.4.33

package/components/Gantt/Gantt.tsx

@@ -0,0 +1,246 @@
+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 [scrollLeft, setScrollLeft] = useState(0);
+  const gridRef = useRef<any>(null);
+  const headerRef = useRef<any>(null);
+  const timeLineRef = useRef<any>(null);
+  const rowHeight: number = rowHeightSet ? rowHeightSet + 8 : defaultRowHeight;
+  const columnWidth: number = columnWidthSet ?? defaultColumnWidth;
+
+  const rangeVal =
+    range?.map((str: string) => 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<Date>();
+  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: any) => {
+      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]
+  );
+
+  // 自动滚动到当前时间点（根据最小时间单位不同位置不同）
+  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")}`
+        )
+      );
+    }
+    scrollToCurrentTime(unit, gridRef, columnWidth, rest.width, rangeVal, date);
+  }, [unit, gridRef, columnWidth, rest.width, range, data]);
+  return (
+    <GanttContext.Provider value={{ ...contextValue, rangeVal, unit }}>
+      <div
+        style={{
+          width: rest.width || 0,
+          height: rest.height,
+          display: "flex",
+          overflow: "hidden",
+          position: "relative",
+          backgroundColor: rest.theme.background ?? "#F9F2E8",
+        }}
+      >
+        <VariableSizeGrid
+          {...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}
+        </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;