@cleverbamboo/react-virtual-masonry 1.0.0

package/dist/index.js

@@ -0,0 +1,680 @@
+'use strict';
+
+var React = require('react');
+
+// RAF 节流 Hook - 使用 requestAnimationFrame 优化滚动性能
+function useRafThrottle$1(value) {
+    const [throttledValue, setThrottledValue] = React.useState(value);
+    const rafRef = React.useRef(null);
+    const valueRef = React.useRef(value);
+    React.useEffect(() => {
+        valueRef.current = value;
+        if (rafRef.current !== null) {
+            return;
+        }
+        rafRef.current = requestAnimationFrame(() => {
+            setThrottledValue(valueRef.current);
+            rafRef.current = null;
+        });
+        return () => {
+            if (rafRef.current !== null) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+        };
+    }, [value]);
+    return throttledValue;
+}
+// ==================== 布局算法 Hook ====================
+function useMasonryLayout(items, containerWidth, minColumnWidth = 200, maxColumnWidth, gap = 16) {
+    const columnCount = React.useMemo(() => {
+        let cols = Math.max(1, Math.floor(containerWidth / minColumnWidth));
+        if (maxColumnWidth) {
+            const calculatedWidth = (containerWidth - gap * (cols - 1)) / cols;
+            while (calculatedWidth > maxColumnWidth && cols < 20) {
+                cols++;
+                const newWidth = (containerWidth - gap * (cols - 1)) / cols;
+                if (newWidth <= maxColumnWidth)
+                    break;
+            }
+        }
+        return cols;
+    }, [containerWidth, minColumnWidth, maxColumnWidth, gap]);
+    const layout = React.useMemo(() => {
+        if (!containerWidth)
+            return [];
+        const columnHeights = Array(columnCount).fill(0);
+        let columnWidth = (containerWidth - gap * (columnCount - 1)) / columnCount;
+        if (maxColumnWidth && columnWidth > maxColumnWidth) {
+            columnWidth = maxColumnWidth;
+        }
+        return items.map((item) => {
+            const minCol = columnHeights.indexOf(Math.min(...columnHeights));
+            const x = (columnWidth + gap) * minCol;
+            const y = columnHeights[minCol];
+            const aspectRatio = item.height / item.width;
+            const scaledHeight = columnWidth * aspectRatio;
+            columnHeights[minCol] += scaledHeight + gap;
+            return Object.assign(Object.assign({}, item), { x,
+                y, width: columnWidth, height: scaledHeight });
+        });
+    }, [items, columnCount, containerWidth, maxColumnWidth, gap]);
+    const totalHeight = React.useMemo(() => {
+        if (layout.length === 0)
+            return 0;
+        const columnHeights = Array(columnCount).fill(0);
+        layout.forEach((item) => {
+            const colIndex = Math.round(item.x /
+                ((containerWidth - gap * (columnCount - 1)) / columnCount + gap));
+            columnHeights[colIndex] = Math.max(columnHeights[colIndex], item.y + item.height);
+        });
+        return Math.max(...columnHeights);
+    }, [layout, columnCount, containerWidth, gap]);
+    return { layout, totalHeight, columnCount };
+}
+// ==================== 主组件 ====================
+function VirtualMasonryCore({ items, renderItem, onLoadMore, minColumnWidth = 200, maxColumnWidth, gap = 16, buffer = 300, hasMore = true, loading = false, loadMoreThreshold = 500, }) {
+    const [containerWidth, setContainerWidth] = React.useState(0);
+    const [scrollTop, setScrollTop] = React.useState(0);
+    const containerRef = React.useRef(null);
+    const loadMoreTriggerRef = React.useRef(null);
+    const throttledScrollTop = useRafThrottle$1(scrollTop);
+    React.useLayoutEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const resizeObserver = new ResizeObserver(() => {
+            setContainerWidth(container.clientWidth);
+        });
+        resizeObserver.observe(container);
+        setContainerWidth(container.clientWidth);
+        return () => resizeObserver.disconnect();
+    }, []);
+    const { layout, totalHeight } = useMasonryLayout(items, containerWidth, minColumnWidth, maxColumnWidth, gap);
+    const handleScroll = React.useCallback(() => {
+        if (!containerRef.current)
+            return;
+        // 使用 getBoundingClientRect 获取准确的容器位置
+        const rect = containerRef.current.getBoundingClientRect();
+        // rect.top 为负数表示容器顶部已滚出视口，取其绝对值即为已滚动距离
+        const scrollTop = Math.max(0, -rect.top);
+        setScrollTop(scrollTop);
+    }, []);
+    React.useEffect(() => {
+        window.addEventListener("scroll", handleScroll, { passive: true });
+        return () => window.removeEventListener("scroll", handleScroll);
+    }, [handleScroll]);
+    React.useEffect(() => {
+        if (!onLoadMore || !hasMore || loading)
+            return;
+        const trigger = loadMoreTriggerRef.current;
+        if (!trigger)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                onLoadMore();
+            }
+        }, { rootMargin: `${loadMoreThreshold}px` });
+        observer.observe(trigger);
+        return () => observer.disconnect();
+    }, [onLoadMore, hasMore, loading, loadMoreThreshold]);
+    const visibleItems = React.useMemo(() => {
+        return layout.filter((item) => {
+            const viewTop = throttledScrollTop - buffer;
+            const viewBottom = throttledScrollTop + window.innerHeight + buffer;
+            return item.y + item.height >= viewTop && item.y <= viewBottom;
+        });
+    }, [layout, throttledScrollTop, buffer]);
+    return (React.createElement("div", { ref: containerRef, style: {
+            position: "relative",
+            width: "100%",
+            minHeight: totalHeight,
+        } },
+        visibleItems.map((item, index) => renderItem(item, index)),
+        onLoadMore && (React.createElement("div", { ref: loadMoreTriggerRef, style: {
+                position: "absolute",
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height: 1,
+                pointerEvents: "none",
+            } }))));
+}
+function VirtualMasonry({ mapSize, renderItem, loadData, pageSize = 50, minColumnWidth = 200, maxColumnWidth, gap = 16, buffer = 1500, loadMoreThreshold = 800, }) {
+    const [items, setItems] = React.useState([]);
+    const [loading, setLoading] = React.useState(true); // 初始设为 true，立即显示 Loader
+    const [hasMore, setHasMore] = React.useState(true);
+    const [page, setPage] = React.useState(1);
+    // 防止重复初始加载
+    const initialLoadRef = React.useRef(false);
+    const defaultMapSize = (d) => {
+        var _a, _b, _c, _d;
+        return ({
+            width: (_b = (_a = d.width) !== null && _a !== void 0 ? _a : d.w) !== null && _b !== void 0 ? _b : d.imgW,
+            height: (_d = (_c = d.height) !== null && _c !== void 0 ? _c : d.h) !== null && _d !== void 0 ? _d : d.imgH,
+        });
+    };
+    // 使用 ref 存储最新的函数引用，避免依赖变化
+    const loadDataRef = React.useRef(loadData);
+    const mapSizeRef = React.useRef(mapSize);
+    React.useEffect(() => {
+        loadDataRef.current = loadData;
+        mapSizeRef.current = mapSize;
+    }, [loadData, mapSize]);
+    const handleLoadMore = React.useCallback((force = false) => {
+        // force 参数用于初始加载时跳过 loading 检查
+        if (!force && loading)
+            return;
+        setLoading(true);
+        if (loadDataRef.current) {
+            loadDataRef
+                .current(page, pageSize)
+                .then(({ data, hasMore: more }) => {
+                var _a;
+                const effectiveMapSize = (_a = mapSizeRef.current) !== null && _a !== void 0 ? _a : defaultMapSize;
+                setItems((prev) => [
+                    ...prev,
+                    ...data.map((d) => {
+                        const { width, height } = effectiveMapSize(d);
+                        return Object.assign(Object.assign({}, d), { width,
+                            height, widthRatio: width / height });
+                    }),
+                ]);
+                setHasMore(more);
+                setPage((prev) => prev + 1);
+            })
+                .catch((error) => {
+                console.error("Failed to load data:", error);
+            })
+                .finally(() => {
+                setLoading(false);
+            });
+        }
+    }, [loading, page, pageSize]);
+    // 初始加载 - 使用 ref 防止重复调用
+    React.useEffect(() => {
+        if (!initialLoadRef.current && items.length === 0) {
+            initialLoadRef.current = true;
+            handleLoadMore(true); // 传入 force = true，跳过 loading 检查
+        }
+    }, [handleLoadMore, items.length]);
+    return (React.createElement(VirtualMasonryCore, { items: items, renderItem: renderItem, onLoadMore: handleLoadMore, minColumnWidth: minColumnWidth, maxColumnWidth: maxColumnWidth, gap: gap, buffer: buffer, hasMore: hasMore, loading: loading, loadMoreThreshold: loadMoreThreshold }));
+}
+
+const GAP = 8;
+// RAF 节流 Hook
+function useRafThrottle(value) {
+    const [throttledValue, setThrottledValue] = React.useState(value);
+    const rafRef = React.useRef();
+    React.useEffect(() => {
+        if (rafRef.current) {
+            cancelAnimationFrame(rafRef.current);
+        }
+        rafRef.current = requestAnimationFrame(() => {
+            setThrottledValue(value);
+        });
+        return () => {
+            if (rafRef.current) {
+                cancelAnimationFrame(rafRef.current);
+            }
+        };
+    }, [value]);
+    return throttledValue;
+}
+// ==================== 布局算法 Hook ====================
+function useFullWidthFillMasonry(items, containerWidth, targetRowHeight = 245, gap = GAP, sizeRange = [230, 260], maxItemWidth = 975, maxStretchRatio = 1.5) {
+    const layout = React.useMemo(() => {
+        if (!containerWidth || items.length === 0)
+            return [];
+        const positioned = [];
+        const [minHeight, maxHeight] = sizeRange;
+        let y = 0;
+        let i = 0;
+        while (i < items.length) {
+            let currentRow = [];
+            let effectiveTargetRowHeight = targetRowHeight;
+            if (i < items.length) {
+                currentRow.push(items[i]);
+                i++;
+            }
+            const isLastItem = i >= items.length;
+            if (!isLastItem && currentRow.length === 1) {
+                const firstItem = currentRow[0];
+                const secondItem = items[i];
+                let firstWidth = firstItem.widthRatio * targetRowHeight;
+                let secondWidth = secondItem.widthRatio * targetRowHeight;
+                let totalWidth = firstWidth + secondWidth + gap;
+                if (totalWidth > containerWidth) {
+                    effectiveTargetRowHeight =
+                        (containerWidth - gap) /
+                            (firstItem.widthRatio + secondItem.widthRatio);
+                    effectiveTargetRowHeight = Math.min(effectiveTargetRowHeight, targetRowHeight);
+                }
+            }
+            while (i < items.length) {
+                const item = items[i];
+                const idealWidth = item.widthRatio * effectiveTargetRowHeight;
+                if (currentRow.length === 1) {
+                    currentRow.push(item);
+                    i++;
+                }
+                else {
+                    const currentRowWidth = currentRow.reduce((sum, rowItem) => {
+                        return sum + rowItem.widthRatio * effectiveTargetRowHeight;
+                    }, 0);
+                    const totalWidthWithNew = currentRowWidth + idealWidth;
+                    const totalGaps = currentRow.length * gap;
+                    const requiredWidth = totalWidthWithNew + totalGaps;
+                    const currentTotalWidth = currentRowWidth + (currentRow.length - 1) * gap;
+                    if (requiredWidth <= containerWidth) {
+                        currentRow.push(item);
+                        i++;
+                    }
+                    else {
+                        const scaleWithNew = containerWidth / (totalWidthWithNew + totalGaps);
+                        const scaleCurrent = containerWidth / currentTotalWidth;
+                        if (Math.abs(scaleWithNew - 1) < Math.abs(scaleCurrent - 1) &&
+                            scaleWithNew <= maxStretchRatio) {
+                            currentRow.push(item);
+                            i++;
+                        }
+                        break;
+                    }
+                }
+            }
+            const isLastRow = i >= items.length;
+            const totalGaps = (currentRow.length - 1) * gap;
+            const availableWidth = containerWidth - totalGaps;
+            const idealTotalWidthForScale = currentRow.reduce((sum, item) => {
+                return sum + item.widthRatio * effectiveTargetRowHeight;
+            }, 0);
+            let scale = availableWidth / idealTotalWidthForScale;
+            let adjustedRowHeight = effectiveTargetRowHeight * scale;
+            if (isLastRow) {
+                adjustedRowHeight = Math.min(Math.max(adjustedRowHeight, minHeight), targetRowHeight);
+            }
+            else {
+                if (scale > maxStretchRatio) {
+                    if (currentRow.length > 2) {
+                        i--;
+                        currentRow.pop();
+                        const newTotalGaps = (currentRow.length - 1) * gap;
+                        const newAvailableWidth = containerWidth - newTotalGaps;
+                        const newIdealWidth = currentRow.reduce((sum, item) => {
+                            return sum + item.widthRatio * effectiveTargetRowHeight;
+                        }, 0);
+                        scale = newAvailableWidth / newIdealWidth;
+                        adjustedRowHeight = effectiveTargetRowHeight * scale;
+                    }
+                }
+                adjustedRowHeight = Math.min(Math.max(adjustedRowHeight, minHeight), maxHeight);
+            }
+            let x = 0;
+            const idealWidths = currentRow.map((item) => item.widthRatio * adjustedRowHeight);
+            const idealTotalWidth = idealWidths.reduce((sum, w) => sum + w, 0);
+            if (isLastRow) {
+                const totalGapsWidth = (currentRow.length - 1) * gap;
+                const totalRequiredWidth = idealTotalWidth + totalGapsWidth;
+                if (totalRequiredWidth > containerWidth) {
+                    const scale = (containerWidth - totalGapsWidth) / idealTotalWidth;
+                    let remainingWidth = containerWidth;
+                    currentRow.forEach((item, index) => {
+                        const isLast = index === currentRow.length - 1;
+                        let finalWidth;
+                        if (isLast) {
+                            finalWidth = remainingWidth;
+                        }
+                        else {
+                            finalWidth = Math.round(idealWidths[index] * scale);
+                            finalWidth = Math.min(finalWidth, maxItemWidth);
+                        }
+                        positioned.push(Object.assign(Object.assign({}, item), { x,
+                            y, width: finalWidth, height: Math.round(adjustedRowHeight) }));
+                        x += finalWidth + gap;
+                        remainingWidth -= finalWidth + gap;
+                    });
+                }
+                else {
+                    currentRow.forEach((item, index) => {
+                        const idealWidth = idealWidths[index];
+                        const finalWidth = Math.min(Math.round(idealWidth), maxItemWidth);
+                        positioned.push(Object.assign(Object.assign({}, item), { x,
+                            y, width: finalWidth, height: Math.round(adjustedRowHeight) }));
+                        x += finalWidth + gap;
+                    });
+                }
+            }
+            else {
+                let remainingWidth = containerWidth;
+                let accumulatedIdealWidth = 0;
+                currentRow.forEach((item, index) => {
+                    const isLast = index === currentRow.length - 1;
+                    let finalWidth;
+                    if (isLast) {
+                        finalWidth = remainingWidth;
+                    }
+                    else {
+                        const currentIdealWidth = idealWidths[index];
+                        accumulatedIdealWidth += currentIdealWidth;
+                        const targetX = (accumulatedIdealWidth / idealTotalWidth) * containerWidth -
+                            index * gap;
+                        finalWidth = Math.round(targetX - x);
+                        finalWidth = Math.min(finalWidth, maxItemWidth);
+                    }
+                    positioned.push(Object.assign(Object.assign({}, item), { x,
+                        y, width: finalWidth, height: Math.round(adjustedRowHeight) }));
+                    x += finalWidth + gap;
+                    remainingWidth -= finalWidth + gap;
+                });
+            }
+            y += Math.round(adjustedRowHeight) + gap;
+        }
+        return positioned;
+    }, [
+        items,
+        containerWidth,
+        targetRowHeight,
+        gap,
+        sizeRange,
+        maxItemWidth,
+        maxStretchRatio,
+    ]);
+    const totalHeight = React.useMemo(() => {
+        if (layout.length === 0)
+            return 0;
+        return layout.reduce((max, item) => Math.max(max, item.y + item.height), 0);
+    }, [layout]);
+    return { layout, totalHeight };
+}
+// ==================== 主组件 ====================
+function FullWidthEqualHeightMasonryCore({ items, renderItem, onLoadMore, targetRowHeight = 245, gap = GAP, buffer = 1000, hasMore = true, loading = false, sizeRange = [230, 260], maxItemWidth = 975, maxStretchRatio = 1.5, loadMoreThreshold = 800, }) {
+    const [containerWidth, setContainerWidth] = React.useState(0);
+    const [scrollTop, setScrollTop] = React.useState(0);
+    const containerRef = React.useRef(null);
+    const loadMoreTriggerRef = React.useRef(null);
+    const [containerOffsetTop, setContainerOffsetTop] = React.useState(0);
+    const throttledScrollTop = useRafThrottle(scrollTop);
+    React.useLayoutEffect(() => {
+        if (!containerRef.current)
+            return;
+        setContainerOffsetTop(containerRef.current.offsetTop);
+        const ro = new ResizeObserver(() => {
+            if (containerRef.current) {
+                setContainerWidth(containerRef.current.clientWidth);
+            }
+        });
+        ro.observe(containerRef.current);
+        setContainerWidth(containerRef.current.clientWidth);
+        return () => ro.disconnect();
+    }, []);
+    const { layout, totalHeight } = useFullWidthFillMasonry(items, containerWidth, targetRowHeight, gap, sizeRange, maxItemWidth, maxStretchRatio);
+    const handleScroll = React.useCallback(() => {
+        const scrollY = window.scrollY || window.pageYOffset;
+        setScrollTop(Math.max(0, scrollY - containerOffsetTop));
+    }, [containerOffsetTop]);
+    React.useEffect(() => {
+        window.addEventListener("scroll", handleScroll, { passive: true });
+        return () => window.removeEventListener("scroll", handleScroll);
+    }, [handleScroll]);
+    React.useEffect(() => {
+        if (!onLoadMore || !hasMore || loading)
+            return;
+        const trigger = loadMoreTriggerRef.current;
+        if (!trigger)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                onLoadMore();
+            }
+        }, { rootMargin: `${loadMoreThreshold}px` });
+        observer.observe(trigger);
+        return () => observer.disconnect();
+    }, [onLoadMore, hasMore, loading, loadMoreThreshold]);
+    const visibleItems = React.useMemo(() => {
+        return layout
+            .map((item, originalIndex) => (Object.assign(Object.assign({}, item), { originalIndex })))
+            .filter((item) => {
+            const viewTop = throttledScrollTop - buffer;
+            const viewBottom = throttledScrollTop + window.innerHeight + buffer;
+            return item.y + item.height >= viewTop && item.y <= viewBottom;
+        });
+    }, [layout, throttledScrollTop, buffer]);
+    return (React.createElement("div", { ref: containerRef, style: {
+            position: "relative",
+            width: "100%",
+            minHeight: totalHeight,
+        } },
+        visibleItems.map((item) => (React.createElement(React.Fragment, { key: item.originalIndex }, renderItem(item, item.originalIndex)))),
+        onLoadMore && (React.createElement("div", { ref: loadMoreTriggerRef, style: {
+                position: "absolute",
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height: 1,
+                pointerEvents: "none",
+            } }))));
+}
+function FullWidthEqualHeightMasonry({ mapSize, renderItem, enableAnimation: _enableAnimation = true, loadData, pageSize = 50, targetRowHeight = 245, sizeRange = [230, 260], maxItemWidth = 975, maxStretchRatio = 1.5, gap = GAP, buffer = 1500, loadMoreThreshold = 500, }) {
+    const [items, setItems] = React.useState([]);
+    const [loading, setLoading] = React.useState(true); // 初始设为 true，立即显示 Loader
+    const [hasMore, setHasMore] = React.useState(true);
+    const [page, setPage] = React.useState(1);
+    // 防止重复初始加载
+    const initialLoadRef = React.useRef(false);
+    const defaultMapSize = (d) => {
+        var _a, _b, _c, _d;
+        return ({
+            width: (_b = (_a = d.width) !== null && _a !== void 0 ? _a : d.w) !== null && _b !== void 0 ? _b : d.imgW,
+            height: (_d = (_c = d.height) !== null && _c !== void 0 ? _c : d.h) !== null && _d !== void 0 ? _d : d.imgH,
+        });
+    };
+    // 使用 ref 存储最新的函数引用，避免依赖变化
+    const loadDataRef = React.useRef(loadData);
+    const mapSizeRef = React.useRef(mapSize);
+    React.useEffect(() => {
+        loadDataRef.current = loadData;
+        mapSizeRef.current = mapSize;
+    }, [loadData, mapSize]);
+    const handleLoadMore = React.useCallback((force = false) => {
+        // force 参数用于初始加载时跳过 loading 检查
+        if (!force && loading)
+            return;
+        setLoading(true);
+        if (loadDataRef.current) {
+            loadDataRef
+                .current(page, pageSize)
+                .then(({ data, hasMore: more }) => {
+                var _a;
+                const effectiveMapSize = (_a = mapSizeRef.current) !== null && _a !== void 0 ? _a : defaultMapSize;
+                setItems((prev) => [
+                    ...prev,
+                    ...data.map((d) => {
+                        const { width, height } = effectiveMapSize(d);
+                        return Object.assign(Object.assign({}, d), { width,
+                            height, widthRatio: width / height });
+                    }),
+                ]);
+                setHasMore(more);
+                setPage((prev) => prev + 1);
+            })
+                .catch((error) => {
+                console.error("Failed to load data:", error);
+            })
+                .finally(() => {
+                setLoading(false);
+            });
+        }
+    }, [loading, page, pageSize]);
+    // 初始加载 - 使用 ref 防止重复调用
+    React.useEffect(() => {
+        if (!initialLoadRef.current && items.length === 0) {
+            initialLoadRef.current = true;
+            handleLoadMore(true); // 传入 force = true，跳过 loading 检查
+        }
+    }, [handleLoadMore, items.length]);
+    return (React.createElement(FullWidthEqualHeightMasonryCore, { items: items, renderItem: renderItem, onLoadMore: handleLoadMore, targetRowHeight: targetRowHeight, sizeRange: sizeRange, maxItemWidth: maxItemWidth, maxStretchRatio: maxStretchRatio, gap: gap, buffer: buffer, hasMore: hasMore, loading: loading, loadMoreThreshold: loadMoreThreshold }));
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+// ==================== 类型定义 ====================
+/**
+ * 视图类型枚举
+ * 1 - 瀑布流(不等宽不等高)
+ * 2 - 等高不等宽
+ */
+exports.ViewType = void 0;
+(function (ViewType) {
+    ViewType[ViewType["WATERFALL"] = 1] = "WATERFALL";
+    ViewType[ViewType["EQUAL_HEIGHT"] = 2] = "EQUAL_HEIGHT";
+})(exports.ViewType || (exports.ViewType = {}));
+// ==================== 主组件 ====================
+/**
+ * 动态瀑布流视图组件
+ *
+ * 支持两种视图模式:
+ * 1. 瀑布流(不等宽不等高) - Pinterest 风格
+ * 2. 等高不等宽 - Google Photos 风格
+ */
+function DynamicMasonryView({ isMasonry: controlledIsMasonry, defaultIsMasonry = true, enableAnimation = true, waterfallConfig = {}, equalHeightConfig = {}, loadData, pageSize = 50, renderItem, mapSize, renderInitialLoader, onLayoutTypeLoaded, onError, }) {
+    // ==================== 状态管理 ====================
+    const [isMasonry, setIsMasonry] = React.useState(controlledIsMasonry !== null && controlledIsMasonry !== void 0 ? controlledIsMasonry : null);
+    const [layoutTypeLoading, setLayoutTypeLoading] = React.useState(controlledIsMasonry === undefined);
+    const [firstPageData, setFirstPageData] = React.useState(null);
+    const loadDataRef = React.useRef(loadData);
+    const onLayoutTypeLoadedRef = React.useRef(onLayoutTypeLoaded);
+    const onErrorRef = React.useRef(onError);
+    React.useEffect(() => {
+        loadDataRef.current = loadData;
+        onLayoutTypeLoadedRef.current = onLayoutTypeLoaded;
+        onErrorRef.current = onError;
+    }, [loadData, onLayoutTypeLoaded, onError]);
+    // ==================== 包装的数据加载函数 ====================
+    const wrappedLoadData = React.useCallback((page, size) => __awaiter(this, void 0, void 0, function* () {
+        if (!loadDataRef.current) {
+            return { data: [], hasMore: false };
+        }
+        if (page === 1 && firstPageData) {
+            const cached = firstPageData;
+            setFirstPageData(null);
+            return cached;
+        }
+        const result = yield loadDataRef.current(page, size);
+        return {
+            data: result.data,
+            hasMore: result.hasMore,
+        };
+    }), [firstPageData]);
+    // ==================== 初始化布局类型 ====================
+    React.useEffect(() => {
+        var _a;
+        if (controlledIsMasonry !== undefined) {
+            setIsMasonry(controlledIsMasonry);
+            setLayoutTypeLoading(false);
+            (_a = onLayoutTypeLoadedRef.current) === null || _a === void 0 ? void 0 : _a.call(onLayoutTypeLoadedRef, controlledIsMasonry);
+        }
+    }, [controlledIsMasonry]);
+    const initializedRef = React.useRef(false);
+    React.useEffect(() => {
+        if (controlledIsMasonry !== undefined) {
+            return;
+        }
+        if (initializedRef.current) {
+            return;
+        }
+        const initializeLayoutType = () => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            try {
+                setLayoutTypeLoading(true);
+                initializedRef.current = true;
+                if (loadDataRef.current) {
+                    const result = yield loadDataRef.current(1, pageSize);
+                    setFirstPageData({
+                        data: result.data,
+                        hasMore: result.hasMore,
+                    });
+                    if (result.isMasonry !== undefined) {
+                        setIsMasonry(result.isMasonry);
+                        (_a = onLayoutTypeLoadedRef.current) === null || _a === void 0 ? void 0 : _a.call(onLayoutTypeLoadedRef, result.isMasonry);
+                    }
+                    else {
+                        setIsMasonry(defaultIsMasonry);
+                        (_b = onLayoutTypeLoadedRef.current) === null || _b === void 0 ? void 0 : _b.call(onLayoutTypeLoadedRef, defaultIsMasonry);
+                    }
+                }
+                else {
+                    setIsMasonry(defaultIsMasonry);
+                    (_c = onLayoutTypeLoadedRef.current) === null || _c === void 0 ? void 0 : _c.call(onLayoutTypeLoadedRef, defaultIsMasonry);
+                }
+            }
+            catch (error) {
+                console.error("Failed to load layout type:", error);
+                (_d = onErrorRef.current) === null || _d === void 0 ? void 0 : _d.call(onErrorRef, error);
+                setIsMasonry(defaultIsMasonry);
+            }
+            finally {
+                setLayoutTypeLoading(false);
+            }
+        });
+        initializeLayoutType();
+        // 只在 controlledIsMasonry, pageSize 变化时重新初始化
+        // 移除 defaultIsMasonry 依赖，避免接口返回后更新 layoutType 导致重复初始化
+        // loadData 等函数通过 ref 访问，不需要作为依赖项
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [controlledIsMasonry, pageSize]);
+    // ==================== 渲染逻辑 ====================
+    if (layoutTypeLoading || isMasonry === null) {
+        // 使用自定义初始加载状态，或使用默认占位符
+        if (renderInitialLoader) {
+            return React.createElement(React.Fragment, null, renderInitialLoader());
+        }
+        // 默认占位符
+        return (React.createElement("div", { style: {
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+            } }));
+    }
+    if (isMasonry) {
+        return (React.createElement(VirtualMasonry, { renderItem: (item, index) => renderItem(item, index, true), enableAnimation: enableAnimation, loadData: wrappedLoadData, pageSize: pageSize, minColumnWidth: waterfallConfig.minColumnWidth, maxColumnWidth: waterfallConfig.maxColumnWidth, gap: waterfallConfig.gap, buffer: waterfallConfig.buffer, mapSize: mapSize }));
+    }
+    return (React.createElement(FullWidthEqualHeightMasonry, { renderItem: (item, index) => renderItem(item, index, false), enableAnimation: enableAnimation, loadData: wrappedLoadData, pageSize: pageSize, targetRowHeight: equalHeightConfig.targetRowHeight, sizeRange: equalHeightConfig.sizeRange, maxItemWidth: equalHeightConfig.maxItemWidth, maxStretchRatio: equalHeightConfig.maxStretchRatio, gap: equalHeightConfig.gap, buffer: equalHeightConfig.buffer, mapSize: mapSize }));
+}
+
+exports.DynamicMasonryView = DynamicMasonryView;
+exports.FullWidthEqualHeightMasonry = FullWidthEqualHeightMasonry;
+exports.FullWidthEqualHeightMasonryCore = FullWidthEqualHeightMasonryCore;
+exports.VirtualMasonry = VirtualMasonry;
+exports.VirtualMasonryCore = VirtualMasonryCore;
+//# sourceMappingURL=index.js.map