@z-cloud/virtual-react/dist/esm/components/grid.js

一个基于React + TS开发的虚拟列表，支持瀑布流、grid的组件。

import { jsx } from "react/jsx-runtime";
import { useVirualizer, useIsomorphicLayoutEffect } from "../hooks/use-virtualizer.js";
import { useRef, Fragment } from "react";
function GridVirtualList({
  children,
  className,
  itemClassName,
  style,
  itemStyle,
  grid,
  gridSize,
  size,
  onReady,
  ...props
}) {
  const containerRef = useRef(null);
  const rowVirtualizer = useVirualizer(
    {
      ...props,
      size: (gridSize == null ? void 0 : gridSize[1]) ?? size,
      // grid 模式当前虚拟器只能竖向滚动
      horizontal: false
    },
    containerRef
  );
  const colVirtualizer = useVirualizer(
    { ...props, size: (gridSize == null ? void 0 : gridSize[0]) ?? size, horizontal: true },
    containerRef
  );
  const rowTotalSize = rowVirtualizer.getTotalSize();
  const colTotalSize = colVirtualizer.getTotalSize();
  useIsomorphicLayoutEffect(() => {
    const scrollElement = props.followPageScroll ? window : containerRef.current;
    rowVirtualizer.init(scrollElement);
    colVirtualizer.init(scrollElement);
    if (rowVirtualizer && colVirtualizer) {
      onReady == null ? void 0 : onReady(rowVirtualizer, colVirtualizer);
    }
    return () => {
      rowVirtualizer.clean();
      colVirtualizer.clean();
    };
  }, [rowVirtualizer, colVirtualizer]);
  return /* @__PURE__ */ jsx("div", { className, style: { overflow: "auto", ...style }, ref: containerRef, children: /* @__PURE__ */ jsx(
    "div",
    {
      style: {
        height: rowTotalSize,
        width: colTotalSize,
        display: "grid",
        gridTemplateAreas: `"item"`
      },
      children: rowVirtualizer.getVirtualItems().map((rowItem) => /* @__PURE__ */ jsx(Fragment, { children: colVirtualizer.getVirtualItems().map((colItem) => /* @__PURE__ */ jsx(
        "div",
        {
          className: itemClassName,
          style: {
            ...itemStyle,
            gridArea: "item",
            height: rowItem.size,
            width: colItem.size,
            transform: `translate(${colItem.start}px,${rowItem.start}px)`
          },
          children: children(rowItem, colItem)
        },
        colItem.index
      )) }, rowItem.key))
    }
  ) });
}
export {
  GridVirtualList
};