@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
31 lines (30 loc) • 1.67 kB
JavaScript
;
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"));
function WindowInfiniteScrollComponent() {
const [data, setData] = (0, react_1.useState)(Array.from({ length: 30 }, (_, i) => i));
const next = () => {
setTimeout(() => {
const currentLength = data.length;
const newData = [...data, ...Array.from({ length: 5 }, (_, i) => i).map((i) => i + currentLength)];
setData(newData);
}, 500);
};
const previous = () => {
setTimeout(() => {
const currentLength = data[0];
const newData = [
...Array.from({ length: 5 }, (_, i) => i)
.map((i) => i * -1 + currentLength - 1)
.reverse(),
...data
];
setData(newData);
}, 500);
};
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ hasMoreNext: true, next: next, hasMorePrevious: true, previous: previous, loaderNext: (0, jsx_runtime_1.jsx)("h1", { children: "Loading next..." }), loaderPrevious: (0, jsx_runtime_1.jsx)("h1", { children: "Loading prev..." }), dataLength: data.length, scrollThreshold: 1 }, { children: data.map((e) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: { height: 200, margin: 4, border: '1px solid hotpink' } }, { children: ["#", e, " row"] }), e))) })) }));
}
exports.default = WindowInfiniteScrollComponent;