@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
35 lines (34 loc) • 1.77 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_1 = require("react");
const index_1 = tslib_1.__importDefault(require("../index"));
const style = {
height: 30,
border: '1px solid green',
margin: 6,
padding: 8
};
function ScrollableTargetFixedInfScroll() {
const [items, setItems] = (0, react_1.useState)(Array.from({ length: 20 }));
const fetchMoreData = () => {
// a fake async api call like which sends
// 20 more records in 1.5 secs
setTimeout(() => {
setItems(items.concat(Array.from({ length: 20 })));
}, 1500);
};
return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "demo: Infinite Scroll with scrollable target FIXED" }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "scrollableDiv", style: {
position: 'fixed',
bottom: 0,
left: 0,
right: 0,
top: 170,
zIndex: 1000,
maxWidth: '100% !important',
height: '50vh',
overflowY: 'scroll'
} }, { children: (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: (0, jsx_runtime_1.jsx)("h4", { children: "Loading..." }), scrollableTarget: "scrollableDiv" }, { children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) })) }))] }));
}
exports.default = ScrollableTargetFixedInfScroll;