@z-cloud/virtual-react
Version:
一个基于React + TS开发的虚拟列表，支持瀑布流、grid的组件。
74 lines (73 loc) • 2.39 kB
JavaScript
;
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 GridVirtualList({
children,
className,
itemClassName,
style,
itemStyle,
grid,
gridSize,
size,
onReady,
...props
}) {
const containerRef = react.useRef(null);
const rowVirtualizer = useVirtualizer.useVirualizer(
{
...props,
size: (gridSize == null ? void 0 : gridSize[1]) ?? size,
// grid 模式当前虚拟器只能竖向滚动
horizontal: false
},
containerRef
);
const colVirtualizer = useVirtualizer.useVirualizer(
{ ...props, size: (gridSize == null ? void 0 : gridSize[0]) ?? size, horizontal: true },
containerRef
);
const rowTotalSize = rowVirtualizer.getTotalSize();
const colTotalSize = colVirtualizer.getTotalSize();
useVirtualizer.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__ */ jsxRuntime.jsx("div", { className, style: { overflow: "auto", ...style }, ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(
"div",
{
style: {
height: rowTotalSize,
width: colTotalSize,
display: "grid",
gridTemplateAreas: `"item"`
},
children: rowVirtualizer.getVirtualItems().map((rowItem) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: colVirtualizer.getVirtualItems().map((colItem) => /* @__PURE__ */ jsxRuntime.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))
}
) });
}
exports.GridVirtualList = GridVirtualList;