"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 InfiniteScrollWithHeight() {
    const [hasMore, setHasMore] = (0, react_1.useState)(true);
    const [items, setItems] = (0, react_1.useState)(Array.from({ length: 20 }));
    const fetchMoreData = () => {
        if (items.length >= 500) {
            setHasMore(false);
            return;
        }
        // a fake async api call like which sends
        // 20 more records in .5 secs
        setTimeout(() => {
            setItems(items.concat(Array.from({ length: 20 })));
        }, 500);
    };
    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", { children: "demo: Infinite Scroll with fixed height" }), (0, jsx_runtime_1.jsx)("hr", {}), (0, jsx_runtime_1.jsx)(index_1.default, Object.assign({ dataLength: items.length, next: fetchMoreData, hasMoreNext: hasMore, loaderNext: (0, jsx_runtime_1.jsx)("h4", { children: "Loading..." }), height: 400, endMessage: (0, jsx_runtime_1.jsx)("p", Object.assign({ style: { textAlign: 'center' } }, { children: (0, jsx_runtime_1.jsx)("b", { children: "Yay! You have seen it all" }) })) }, { children: items.map((_, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) }))] }));
}
exports.default = InfiniteScrollWithHeight;
