@beppla/tapas-ui 1.4.35 → 1.5.0

package/components/Grid/StaticFixedSizeGrid.tsx

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