@beppla/tapas-ui 1.4.14 → 1.4.15

package/components/Grid/StaticFixedSizeGrid.tsx

@@ -0,0 +1,511 @@
+import React, {
+  createContext,
+  forwardRef,
+  useRef,
+  useContext,
+  useMemo,
+  useCallback,
+  CSSProperties,
+  useState,
+} from "react";
+import { withTheme } from "@rneui/themed";
+import { Props } from "./Grid.base";
+import VariableSizeGrid from "./VariableSizeGrid";
+
+interface StickyListContextType {
+  columnCount: number;
+  rowCount: number;
+  columnWidth: (index: number) => number;
+  rowHeight: (index: number) => number;
+  onScroll?: (event: any) => void;
+  width: number;
+  height: number;
+  theme: any;
+  border?: boolean;
+  gridRef?: React.MutableRefObject<any>;
+  stickyColumnIndices?: number[];
+  headersRender?: React.FC<any>;
+  ItemRenderer?: React.FC<any>;
+  headerRef?: React.MutableRefObject<any>;
+  hideBorder?: string[];
+  columnHeaderBackgroundColor?: string;
+  columnHeaderHeight?: number;
+  scrollLeft: number;
+}
+
+// type ScrollDirection = "forward" | "backward";
+
+const StickyListContext = createContext<StickyListContextType | undefined>(
+  undefined
+);
+StickyListContext.displayName = "StickyListContext";
+
+const useStickyListContext = () => {
+  const context = useContext(StickyListContext);
+  if (!context) {
+    throw new Error(
+      "useStickyListContext must be used within a StickyListProvider"
+    );
+  }
+  return context;
+};
+
+const ItemWrapper: React.FC<any> = ({ data, columnIndex, rowIndex, style }) => {
+  const {
+    ItemRenderer,
+    stickyColumnIndices,
+    headersRender,
+    columnHeaderHeight,
+    border,
+    theme,
+    hasActions,
+  } = data;
+
+  if (
+    stickyColumnIndices &&
+    columnIndex !== undefined &&
+    stickyColumnIndices.includes(columnIndex)
+  ) {
+    return null;
+  }
+  
+  // 检测当前列是否有 actions 按钮
+  const shouldShowActions = hasActions && hasActions(columnIndex ?? 0, rowIndex ?? 0);
+  
+  // 确保传递正确的参数给children函数
+  const childrenProps: ChildrenProps = {
+    columnIndex: columnIndex ?? 0,
+    rowIndex: rowIndex ?? 0,
+    style: {
+      ...style,
+      // 根据 hasActions 决定是否允许 overflow: "visible"
+      overflow: shouldShowActions ? "visible" : "hidden",
+      borderBottom: border
+        ? `1px solid ${theme.grey3 ?? "rgba(0, 0, 0, 0.12)"}`
+        : "none",
+      top: style.top + (headersRender ? columnHeaderHeight ?? 40 : 0),
+    },
+  };
+  
+  return ItemRenderer(childrenProps);
+};
+
+const StickyColumnCell: React.FC<any> = ({
+  data,
+  columnIndex,
+  rowIndex,
+  style,
+}) => {
+  const { ItemRenderer, stickyColumnIndices, border, theme, hasActions } = data;
+  
+  // 检测当前列是否有 actions 按钮
+  const currentColumnIndex = stickyColumnIndices[columnIndex] ?? 0;
+  const shouldShowActions = hasActions && hasActions(currentColumnIndex, rowIndex);
+  
+  const childrenProps: ChildrenProps = {
+    columnIndex: currentColumnIndex,
+    rowIndex: rowIndex ?? 0,
+    style: {
+      ...style,
+      overflow: shouldShowActions ? "visible" : "hidden",
+      borderBottom: border
+        ? `1px solid ${theme?.grey3 ?? "rgba(0, 0, 0, 0.12)"}`
+        : "none",
+    },
+  };
+  
+  return ItemRenderer(childrenProps);
+};
+
+const StickyColumn = ({ style, children }: { style: any; children?: any }) => (
+  <div className="column-header-sticky" style={style}>
+    {children}
+  </div>
+);
+
+const ColumnHeaders = ({
+  style,
+  children,
+}: {
+  style: any;
+  children: React.ReactNode;
+}) => (
+  <div className="sticky" style={style}>
+    {children}
+  </div>
+);
+
+const InnerElementType = forwardRef(
+  ({ children, style, hasActions, ...rest }: any, ref) => {
+    // const [left, setLeft] = useState(0);
+    const {
+      headersRender,
+      stickyColumnIndices,
+      columnCount,
+      ItemRenderer,
+      columnWidth,
+      rowHeight,
+      rowCount,
+      columnHeaderBackgroundColor,
+      columnHeaderHeight,
+      width,
+      height,
+      theme,
+      border,
+      headerRef,
+      scrollLeft,
+    } = useStickyListContext();
+
+    // const handleScroll = useCallback(
+    //   (event: {
+    //     horizontalScrollDirection: ScrollDirection;
+    //     scrollLeft: number;
+    //     scrollTop: number;
+    //     scrollUpdateWasRequested: boolean;
+    //     verticalScrollDirection: ScrollDirection;
+    //   }) => setLeft(event.scrollLeft),
+    //   []
+    // );
+
+    const stickyColumnsWidth =
+      stickyColumnIndices?.reduce(
+        (acc: number, currentIndex: number) => acc + columnWidth(currentIndex),
+        0
+      ) ?? 0;
+    const totalWidth: number = useMemo(() => {
+      let sum = 0;
+      for (let i = 0; i < columnCount; i++) {
+        sum += columnWidth(i);
+      }
+      return sum;
+    }, [columnCount, columnWidth, width]);
+
+    // 确保 hasActions 在作用域中
+    const hasActionsFn = hasActions || (() => false);
+
+    return (
+      <>
+        {headersRender && (
+          <ColumnHeaders
+            style={{
+              backgroundColor: theme?.background ?? "#F9F2E8",
+              zIndex: 5,
+              top: 0,
+              left: 0,
+              width: width,
+              height: columnHeaderHeight || 40,
+              position: "sticky",
+              display: "flex",
+              flexDirection: "row",
+              overflow: "hidden",
+            }}
+          >
+            <VariableSizeGrid
+              ref={headerRef}
+              columnCount={columnCount}
+              columnWidth={columnWidth}
+              height={columnHeaderHeight || 40}
+              rowCount={1}
+              rowHeight={() => columnHeaderHeight || 40}
+              width={width - stickyColumnsWidth}
+              // onScroll={handleScroll}
+              itemData={{
+                ItemRenderer: headersRender,
+                stickyColumnIndices,
+                columnHeaderHeight,
+              }}
+              style={{
+                // 保持列头的 overflow: "hidden" 以确保正确的滚动行为
+                overflow: "hidden",
+                // borderTopLeftRadius: theme?.radius?.mini ?? 4,
+                backgroundColor:
+                  columnHeaderBackgroundColor ||
+                  (theme?.colors?.grey4 ?? "rgba(0, 0, 0, 0.08)"),
+              }}
+            >
+              {ItemWrapper}
+            </VariableSizeGrid>
+          </ColumnHeaders>
+        )}
+        <div ref={ref} {...rest} style={{
+          ...style,
+          width: totalWidth,
+          // width: rest.width, // 使用正确的 grid 宽度减去 sticky 列宽度
+          // width: rest.width - stickyColumnsWidth, // 使用正确的 grid 宽度减去 sticky 列宽度
+          // position: "sticky", // 固定容器位置，不随滚动移动
+          // left: 0, // 固定在左侧
+        }}>
+          {scrollLeft > 0 && (
+            <StickyColumn
+              style={{
+                backgroundColor: theme?.background ?? "#F9F2E8",
+                zIndex: 5,
+                top: 0,
+                width: 1, // 左侧阴影条宽度应该是 1
+                height: height,
+                left: 0,
+                marginTop: headersRender ? -1 * (columnHeaderHeight || 40) : 0,
+                position: "sticky",
+                boxShadow: "2px 0px 6px 4px rgba(0, 0, 0, 0.12)",
+              }}
+            />
+          )}
+          {!stickyColumnIndices && scrollLeft !== totalWidth - width && (
+            <StickyColumn
+              style={{
+                backgroundColor: theme?.background ?? "#F9F2E8",
+                zIndex: 5,
+                top: 0,
+                width: 1,
+                height: height,
+                left: width + 2 - (border ? 1 : 0),
+                marginTop:
+                  scrollLeft === 0
+                    ? headersRender
+                      ? -1 * (columnHeaderHeight || 40)
+                      : 0
+                    : -1 * height,
+                position: "sticky",
+                boxShadow: "-2px 0px 6px 4px rgba(0, 0, 0, 0.12)",
+              }}
+            />
+          )}
+          {headersRender && stickyColumnIndices && (
+            <StickyColumn
+              style={{
+                backgroundColor: theme?.background ?? "#F9F2E8",
+                zIndex: 5,
+                top: 0,
+                width: stickyColumnsWidth,
+                height: columnHeaderHeight || 40,
+                left: width - stickyColumnsWidth - (border ? 1 : 0), // 使用总宽度计算位置
+                marginTop:
+                  scrollLeft === 0
+                    ? -1 * (columnHeaderHeight || 40)
+                    : -1 * height,
+                position: "sticky",
+                boxShadow: "-2px -3px 6px rgba(0, 0, 0, 0.12)",
+                borderLeft: border
+                  ? `1px solid ${theme?.grey3 ?? "rgba(0, 0, 0, 0.12)"}`
+                  : "none",
+              }}
+            >
+              <VariableSizeGrid
+                columnCount={stickyColumnIndices.length}
+                columnWidth={(index: number) =>
+                  columnWidth(stickyColumnIndices?.[index] ?? 0)
+                }
+                height={columnHeaderHeight || 40}
+                rowCount={1}
+                rowHeight={() => columnHeaderHeight || 40}
+                width={stickyColumnsWidth}
+                itemData={{ ItemRenderer: headersRender, stickyColumnIndices }}
+                style={{
+                  overflow: "hidden",
+                  backgroundColor:
+                    columnHeaderBackgroundColor ||
+                    (theme?.colors?.grey4 ?? "rgba(0, 0, 0, 0.08)"),
+                }}
+              >
+                {StickyColumnCell}
+              </VariableSizeGrid>
+            </StickyColumn>
+          )}
+          {stickyColumnIndices && (
+            <StickyColumn
+              style={{
+                backgroundColor: theme?.background ?? "#F9F2E8",
+                zIndex: 2,
+                top: headersRender ? columnHeaderHeight || 40 : 0,
+                left: width - stickyColumnsWidth - (border ? 1 : 0), // 使用总宽度计算位置
+                width: stickyColumnsWidth,
+                height: "100%",
+                position: "sticky",
+                boxShadow: "-2px 0 6px rgba(0, 0, 0, 0.12)",
+                borderLeft: border
+                  ? `1px solid ${theme?.grey3 ?? "rgba(0, 0, 0, 0.12)"}`
+                  : "none",
+              }}
+            >
+              <VariableSizeGrid
+                columnCount={stickyColumnIndices.length}
+                columnWidth={(index: number) =>
+                  columnWidth(stickyColumnIndices?.[index] ?? 0)
+                }
+                height={style.height}
+                rowCount={rowCount}
+                rowHeight={rowHeight}
+                width={stickyColumnsWidth}
+                itemData={{ ItemRenderer, stickyColumnIndices, border, hasActions: hasActionsFn }}
+                style={{ 
+                  overflow: hasActions ? "visible": "hidden" 
+                }}
+              >
+                {StickyColumnCell}
+              </VariableSizeGrid>
+            </StickyColumn>
+          )}
+          {children}
+        </div>
+      </>
+    );
+  }
+);
+
+const StickyList = ({
+  children,
+  headersRender,
+  stickyColumnIndices,
+  style,
+  columnHeaderHeight = 40,
+  columnHeaderBackgroundColor,
+  rowHeight,
+  onScroll,
+  hideBorder,
+  hideborderRadius,
+  gridRef,
+  border = false,
+  hasActions, // eslint-disable-line @typescript-eslint/no-unused-vars
+  ...rest
+}: any) => {
+  const headerRef = useRef<any>(null);
+  const [gridScrollLeft, setGridScrollLeft] = useState<number>(0);
+  
+  const handleScroll = useCallback((event: any) => {
+    headerRef.current?.scrollTo({
+      ...event,
+      scrollTop: headerRef.current.scrollTop,
+    });
+    onScroll && onScroll(event);
+    setGridScrollLeft(event.scrollLeft);
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({
+      ItemRenderer: children,
+      headerRef,
+      gridRef,
+      height: rest.height,
+      columnHeaderHeight,
+      columnHeaderBackgroundColor,
+      headersRender,
+      stickyColumnIndices,
+      columnWidth: rest.columnWidth,
+      width: rest.width,
+      columnCount: rest.columnCount,
+      rowHeight,
+      border,
+      scrollLeft: gridScrollLeft,
+      rowCount: rest.rowCount,
+      theme: rest.theme,
+    }),
+    [
+      gridScrollLeft,
+      children,
+      headersRender,
+      stickyColumnIndices,
+      rest.columnWidth,
+      rest.width,
+      rest.columnCount,
+      rest.height,
+      rowHeight,
+      rest.theme,
+    ]
+  );
+  return (
+    <StickyListContext.Provider value={contextValue}>
+      <VariableSizeGrid
+        {...rest}
+        ref={gridRef}
+        onScroll={handleScroll}
+        height={Math.min(
+          rest.rowCount * rowHeight(0) + columnHeaderHeight,
+          rest.height
+        )}
+        rowHeight={rowHeight ?? 56}
+        style={{
+          height: rest.height,
+          backgroundColor: rest.theme.background ?? "#F9F2E8",
+          ...style,
+          width: rest.width, // 使用正确的 grid 宽度，而不是 style 中的宽度
+          border: border
+            ? `1px solid ${rest.theme.grey3 ?? "rgba(0, 0, 0, 0.12)"}`
+            : "none",
+          borderBottomWidth: hideBorder?.includes("bottom") ? 0 : 1,
+          borderTopWidth: hideBorder?.includes("top") ? 0 : 1,
+          borderLeftWidth: hideBorder?.includes("left") ? 0 : 1,
+          borderRightWidth: hideBorder?.includes("rigth") ? 0 : 1,
+          borderTopLeftRadius: hideborderRadius?.includes("topLeft")
+            ? 0
+            : rest.theme.radius.mini ?? 4,
+          borderTopRightRadius: hideborderRadius?.includes("topRight")
+            ? 0
+            : rest.theme.radius.mini ?? 4,
+          scrollbarWidth: "none",
+          msOverflowStyle: "none",
+          // 移除 overflow: "visible"，恢复 Grid 的正常滚动功能
+          // Modal 下拉菜单不需要这个设置
+        }}
+        itemData={{
+          ItemRenderer: children,
+          headersRender,
+          stickyColumnIndices,
+          columnHeaderHeight,
+          border,
+          theme: rest.theme,
+        }}
+      >
+        {ItemWrapper}
+      </VariableSizeGrid>
+    </StickyListContext.Provider>
+  );
+};
+
+export interface ChildrenProps {
+  columnIndex: number;
+  rowIndex: number;
+  style: CSSProperties;
+  [key: string]: any;
+}
+
+export interface StickyFixedSizeGridProps
+  extends Omit<
+    Props<Element>,
+    "itemData" | "direction" | "useIsScrolling" | "children"
+  > {
+  headersRender?: (props: ChildrenProps) => React.JSX.Element;
+  columnHeaderHeight?: number;
+  columnHeaderBackgroundColor?: string;
+  columnHeaderBorder?: {
+    top?: boolean;
+    left?: boolean;
+    right?: boolean;
+    bottom?: boolean;
+  };
+  stickyColumnIndices?: number[];
+  children: (props: ChildrenProps) => React.ReactNode;
+  border?: boolean;
+  onScroll?: (event: any) => void;
+  hideBorder?: string[];
+  hideborderRadius?: string[];
+  hasActions?: (columnIndex: number, rowIndex: number) => boolean;
+  gridRef?: React.MutableRefObject<any>;
+}
+
+const StickyFixedSizeGrid: React.FC<StickyFixedSizeGridProps> = ({
+  headersRender,
+  children,
+  hasActions,
+  ...rest
+}) => (
+  <StickyList
+    {...rest}
+    innerElementType={(props: any) => <InnerElementType {...props} hasActions={hasActions} />}
+    headersRender={headersRender}
+    hasActions={hasActions}
+  >
+    {children}
+  </StickyList>
+);
+
+export default withTheme(StickyFixedSizeGrid);