@beppla/tapas-ui 1.4.15 → 1.4.17

package/components/Gantt/Gantt.tsx

@@ -1,246 +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 [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

@@ -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;