@z-cloud/virtual-react/dist/cjs/components/normal.cjs

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

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const useVirtualizer = require("../hooks/use-virtualizer.cjs");
const react = require("react");
function NormalVirtualList({
  children,
  className,
  itemClassName,
  style,
  itemStyle,
  dynamicSize = false,
  onReady,
  ...props
}) {
  const containerRef = react.useRef(null);
  const virtualizer = useVirtualizer.useVirualizer(props, containerRef);
  const { lanes = 1, horizontal } = props;
  const totalSize = virtualizer.getTotalSize();
  let gridTemplateAreas = Array.from(
    { length: lanes },
    (_, index) => horizontal ? `"lane${index}"` : `lane${index}`
  ).join(" ");
  if (!horizontal) {
    gridTemplateAreas = `"${gridTemplateAreas}"`;
  }
  useVirtualizer.useIsomorphicLayoutEffect(() => {
    virtualizer.init(props.followPageScroll ? window : containerRef.current);
    onReady == null ? void 0 : onReady(virtualizer);
    return () => virtualizer.clean();
  }, [virtualizer]);
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { overflow: "auto", ...style }, ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      style: {
        display: "grid",
        gridTemplateAreas,
        gridTemplateColumns: `repeat(${horizontal ? 1 : lanes}, 1fr)`,
        gridTemplateRows: `repeat(${horizontal ? lanes : 1}, 1fr)`,
        alignItems: dynamicSize && !horizontal ? "start" : "stretch",
        justifyItems: dynamicSize && horizontal ? "start" : "stretch",
        columnGap: horizontal ? void 0 : props.gap,
        rowGap: horizontal ? props.gap : void 0,
        height: props.horizontal ? "100%" : totalSize,
        width: props.horizontal ? totalSize : "100%"
      },
      children: virtualizer.getVirtualItems().map((virtualItem) => /* @__PURE__ */ jsxRuntime.jsx(
        "div",
        {
          className: itemClassName,
          ref: dynamicSize ? virtualizer.elementMounted : void 0,
          "data-index": virtualItem.index,
          style: {
            ...itemStyle,
            gridArea: `lane${virtualItem.lane}`,
            height: horizontal || dynamicSize ? void 0 : virtualItem.size,
            width: !horizontal || dynamicSize ? void 0 : virtualItem.size,
            transform: props.horizontal ? `translateX(${virtualItem.start}px)` : `translateY(${virtualItem.start - (props.followPageScroll ? virtualizer.options.scrollMargin ?? 0 : 0)}px)`
          },
          children: children(virtualItem)
        },
        virtualItem.index
      ))
    }
  ) });
}
exports.NormalVirtualList = NormalVirtualList;