sccoreui
Version:
ui-sccore
61 lines (60 loc) • 2.95 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const react_virtual_1 = require("@tanstack/react-virtual");
function RowVirtualizerDynamic() {
var _a, _b;
const parentRef = React.useRef(null);
const [enabled] = React.useState(true);
const [data, setData] = React.useState(() => new Array(100).fill("Initial row"));
const virtualizer = (0, react_virtual_1.useVirtualizer)({
count: data.length,
getScrollElement: () => parentRef.current,
estimateSize: () => 45,
enabled,
});
// 👇 Scroll handler
const handleScroll = () => {
const el = parentRef.current;
if (!el)
return;
const scrollOffset = el.scrollTop + el.clientHeight;
const threshold = el.scrollHeight - 100;
if (scrollOffset >= threshold) {
// near bottom, simulate fetch
fetchMoreData();
}
};
const fetchMoreData = () => {
setData((prev) => [
...prev,
...new Array(50).fill("New row added"), // simulate fetch
]);
};
// 👇 Attach scroll event
React.useEffect(() => {
const el = parentRef.current;
el && el.addEventListener("scroll", handleScroll);
return () => el.removeEventListener("scroll", handleScroll);
}, []);
const items = virtualizer.getVirtualItems();
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: parentRef, className: "List", style: {
height: 400,
width: 400,
overflowY: "auto",
contain: "strict",
} }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
height: virtualizer.getTotalSize(),
width: "100%",
position: "relative",
} }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
position: "absolute",
top: 0,
left: 0,
width: "100%",
transform: `translateY(${(_b = (_a = items[0]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0}px)`,
} }, { children: items.map((virtualRow) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ "data-index": virtualRow.index, ref: virtualizer.measureElement, className: virtualRow.index % 2 ? "ListItemOdd" : "ListItemEven" }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { padding: "10px 0" } }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: ["Row ", virtualRow.index] }), (0, jsx_runtime_1.jsx)("div", { children: data[virtualRow.index] })] })) }), virtualRow.key))) })) })) })));
}
exports.default = RowVirtualizerDynamic;