react-masonry-component2/es/masonry-scroll/masonry-scroll.js

react 的瀑布流组件库，支持 columns 布局、弹性布局、绝对定位布局三种方法实现

import { __assign, __spreadArray } from '../node_modules/tslib/tslib.es6.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { useInView } from 'react-intersection-observer';
import Masonry from '../masonry/masonry.js';
import { MasonryItem } from '../masonry/masonry-item/index.js';

var defaultPageSize = 20;
var MasonryScroll = function (props) {
    var fetchApi = props.fetchApi, _a = props.preload, preload = _a === void 0 ? true : _a, _b = props.observerMargin, observerMargin = _b === void 0 ? 600 : _b, mansonryProps = props.mansonryProps, _c = props.pageSize, pageSize = _c === void 0 ? defaultPageSize : _c, className = props.className, _d = props.style, style = _d === void 0 ? {} : _d, _e = props.loadingComponent, loadingComponent = _e === void 0 ? jsx("p", { children: "\u52A0\u8F7D\u4E2D..." }) : _e, _f = props.ItemComponent, ItemComponent = _f === void 0 ? function (props) {
        var index = props.index, i = props.i;
        return (jsxs("div", { children: [jsx("p", { children: index + 1 }), jsx("img", { src: i.img, style: { maxWidth: "100%" } })] }));
    } : _f;
    var _g = useInView({
        /* Optional options */
        threshold: 0,
        rootMargin: preload ? "0px 0px ".concat(observerMargin, "px 0px") : "",
    }), ref = _g.ref, inView = _g.inView;
    var _h = useState([]), list = _h[0], setList = _h[1];
    var _j = useState(1), page = _j[0], setPage = _j[1];
    var _k = useState(false), loading = _k[0], setLoading = _k[1];
    var fetch = function () {
        setLoading(true);
        setPage(page + 1);
        fetchApi({ page: page, pageSize: pageSize })
            .then(function (e) {
            console.log(11, page, e, list);
            setList(__spreadArray(__spreadArray([], list, true), e, true));
        })
            .finally(function () {
            setLoading(false);
        });
    };
    useEffect(function () {
        inView && fetch();
    }, [inView]);
    return (jsxs("div", __assign({ className: className, style: style }, { children: [jsx(Masonry, __assign({}, mansonryProps, { direction: "row", useAbsolute: false, sortWithHeight: true }, { children: list.map(function (i, index) {
                    return (jsx(MasonryItem, __assign({ height: i.height }, { children: jsx(ItemComponent, { index: index, i: i }) }), index));
                }) })), jsx("div", { ref: ref }), loading && loadingComponent] })));
};

export { MasonryScroll as default };