@selfcommunity/react-ui/lib/esm/shared/InfiniteScroll/stories/PullDownToRefreshInfScroll.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import InfiniteScroll from '../index';
const style = {
    height: 30,
    border: '1px solid green',
    margin: 6,
    padding: 8
};
export default function PullDownToRefreshInfScroll() {
    const [items, setItems] = 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 (_jsxs("div", { children: [_jsx("h1", { children: "demo: Pull down to refresh" }), _jsx("hr", {}), _jsx(InfiniteScroll, Object.assign({ dataLength: items.length, hasMoreNext: true, next: fetchMoreData, loaderNext: _jsx("h4", { children: "Loading..." }), pullDownToRefresh: true, pullDownToRefreshContent: _jsx("h3", Object.assign({ style: { textAlign: 'center' } }, { children: "\u2193 Pull down to refresh" })), releaseToRefreshContent: _jsx("h3", Object.assign({ style: { textAlign: 'center' } }, { children: "\u2191 Release to refresh" })), refreshFunction: fetchMoreData }, { children: items.map((_, index) => (_jsxs("div", Object.assign({ style: style }, { children: ["div - #", index] }), index))) }))] }));
}