@lofter-common-shared/react-components 0.1.4 → 0.2.0

package/dist/create-render-to-body/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/create-render-to-body/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAIN,MAAM,OAAO,CAAC;AAOf,UAAU,eAAe,CAAC,CAAC;IACzB,CACE,KAAK,EAAE,CAAC,EACR,OAAO,EAAE;QACP,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,GACA,KAAK,CAAC,YAAY,CAAC;CACvB;AA4CD,wBAAgB,kBAAkB,CAAC,CAAC,EAClC,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,IAGjC,iBAAiB,CAAC,EAClB,SAAQ;IACN,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;;4BAyBM,CAAC;EA4BhB;AAED,wBAAgB,4BAA4B,CAAC,CAAC,EAC5C,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;;mBAKtB,WAAW,GAAG,IAAI;+BAEN,IAAI,GAAG,UAAU;8BAjEpB,WAAW;+BACX,IAAI;;;;UAgEwC;;;;;;;;;;;;;;;;;;;;;;;;;;mBAFrD,WAAW,GAAG,IAAI;+BAEN,IAAI,GAAG,UAAU;8BAjEpB,WAAW;+BACX,IAAI;;;;UAgEwC;;;;;;;;;;;;;;;;;;;;;;;;;;EA8CnE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/create-render-to-body/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,UAAU,eAAe,CAAC,CAAC;IACzB,CACE,KAAK,EAAE,CAAC,EACR,OAAO,EAAE;QACP,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,GACA,KAAK,CAAC,YAAY,CAAC;CACvB;AAwBD,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,IAErE,iBAAiB,CAAC,EAClB,SAAQ;IACN,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB;;4BAyByB,CAAC;EA0BnC;AAED,wBAAgB,4BAA4B,CAAC,CAAC,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;;mBAIpE,WAAW,GAAG,IAAI;+BAEN,IAAI,GAAG,UAAU;8BA7DpB,WAAW;+BACX,IAAI;;;;UA4DwC;;;;;;;;;;;;;;;;;;;;;;;;;;mBAFrD,WAAW,GAAG,IAAI;+BAEN,IAAI,GAAG,UAAU;8BA7DpB,WAAW;+BACX,IAAI;;;;UA4DwC;;;;;;;;;;;;;;;;;;;;;;;;;;EAwCnE"}

package/dist/create-render-to-body/index.js

@@ -58,9 +58,9 @@ var ParentView = (0, react_1.forwardRef)(function (_a, ref) {
     (0, react_1.useImperativeHandle)(ref, function () { return ({
         updateProps: function (newProps) {
             setComponentProps(newProps);
-        }
+        },
     }); });
-    return (react_1.default.createElement(react_1.default.Fragment, null, componentRender(componentProps, componentRenderOptions)));
+    return react_1.default.createElement(react_1.default.Fragment, null, componentRender(componentProps, componentRenderOptions));
 });
 function createRenderToBody(componentRender) {
     return function (initializeProps, params) {
@@ -73,6 +73,7 @@ function createRenderToBody(componentRender) {
         else {
             var parentContainer = document.body;
             container = document.createElement('div');
+            container.classList.add('lofter-root-container');
             parentContainer.appendChild(container);
         }
         var destroy = function () {
@@ -94,12 +95,14 @@ function createRenderToBody(componentRender) {
                 parentViewRef.updateProps(newProps);
             }
         };
-        (0, react_dom_1.render)((react_1.default.createElement(ParentView, { ref: function (ref) { parentViewRef = ref; }, componentRender: componentRender, initializeProps: initializeProps, componentRenderOptions: {
-                destroy: destroy
-            } })), container);
+        (0, react_dom_1.render)(react_1.default.createElement(ParentView, { ref: function (ref) {
+                parentViewRef = ref;
+            }, componentRender: componentRender, initializeProps: initializeProps, componentRenderOptions: {
+                destroy: destroy,
+            } }), container);
         return {
             destroy: destroy,
-            updateProps: updateProps
+            updateProps: updateProps,
         };
     };
 }
@@ -116,7 +119,7 @@ function createRenderToClassComponent(componentRender) {
         ToFunctionComponent.prototype.componentDidMount = function () {
             if (this.container) {
                 this.appendComponentResult = appendComponent(this.props, {
-                    parentContainer: this.container
+                    parentContainer: this.container,
                 });
             }
         };
@@ -137,7 +140,7 @@ function createRenderToClassComponent(componentRender) {
                     height: '100%',
                     display: 'flex',
                     flexDirection: 'column',
-                    flex: '1 1 auto'
+                    flex: '1 1 auto',
                 }, ref: function (container) {
                     _this.container = container;
                 } }));

package/dist/create-render-to-body/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/create-render-to-body/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/create-render-to-body/index.tsx"],"names":[],"mappings":"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"}

package/dist/waterfall/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface WaterfallProps<T = any> {
+    /** 瀑布流数据列表 */
+    items: T[];
+    /** 自定义渲染每个item的函数 */
+    renderItem: (item: T, index: number) => React.ReactNode;
+    breakpointCols?: number;
+    /** 列间距 */
+    columnGap?: string;
+    /** 自定义容器className */
+    className?: string;
+    /** 自定义列className */
+    columnClassName?: string;
+    /** 获取item的唯一key，用于优化渲染性能 */
+    getItemKey?: (item: T, index: number) => string | number;
+    /** 是否启用虚拟滚动 */
+    enableVirtualScroll?: boolean;
+    /** 虚拟滚动缓冲区高度（屏幕高度的倍数，上下各一个缓冲区） */
+    overscanCount?: number;
+}
+export declare const Waterfall: ({ items, renderItem, breakpointCols, columnGap, className, columnClassName, enableVirtualScroll, overscanCount, }: WaterfallProps) => JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/waterfall/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/waterfall/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAM9E,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,GAAG;IACrC,cAAc;IACd,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,qBAAqB;IACrB,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACxD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU;IACV,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACzD,eAAe;IACf,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAuDD,eAAO,MAAM,SAAS,GAAI,mHASvB,cAAc,gBAwThB,CAAC"}

package/dist/waterfall/index.js

@@ -0,0 +1,318 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Waterfall = void 0;
+var react_1 = __importStar(require("react"));
+var merge_classnames_1 = require("@lofter-common-shared/utils/merge-classnames");
+var index_style_1 = __importDefault(require("./index.style"));
+// 瀑布流项组件 - 使用 memo 避免不必要的重新渲染
+var WaterfallItem = (0, react_1.memo)(function (_a) {
+    var item = _a.item, index = _a.index, renderItem = _a.renderItem, _b = _a.isNew, isNew = _b === void 0 ? false : _b, onMount = _a.onMount, _c = _a.isVisible, isVisible = _c === void 0 ? true : _c, height = _a.height;
+    var itemRef = (0, react_1.useCallback)(function (el) {
+        if (el && onMount) {
+            onMount(index, el);
+        }
+    }, [index, onMount]);
+    // 如果不可见且有已知高度，渲染占位符
+    if (!isVisible && height) {
+        return (react_1.default.createElement("div", { className: index_style_1.default.waterfallItemPlaceholder, style: {
+                height: "".concat(height, "px"),
+            } }));
+    }
+    return (react_1.default.createElement("div", { ref: itemRef, className: (0, merge_classnames_1.mergeClassNames)(index_style_1.default.waterfallItem, isNew && index_style_1.default.waterfallItemNew) }, renderItem(item, index)));
+}, function (prevProps, nextProps) {
+    // 只有在 item 引用改变或 isNew 状态改变或可见性改变时才重新渲染
+    return (prevProps.item === nextProps.item
+        && prevProps.index === nextProps.index
+        && prevProps.isNew === nextProps.isNew
+        && prevProps.isVisible === nextProps.isVisible
+        && prevProps.height === nextProps.height);
+});
+var Waterfall = function (_a) {
+    var items = _a.items, renderItem = _a.renderItem, _b = _a.breakpointCols, breakpointCols = _b === void 0 ? 2 : _b, _c = _a.columnGap, columnGap = _c === void 0 ? '0rem' : _c, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.columnClassName, columnClassName = _e === void 0 ? '' : _e, _f = _a.enableVirtualScroll, enableVirtualScroll = _f === void 0 ? false : _f, _g = _a.overscanCount, overscanCount = _g === void 0 ? 1 : _g;
+    var _h = (0, react_1.useState)(new Array(breakpointCols).fill(null).map(function () { return []; })), columnItems = _h[0], setColumnItems = _h[1];
+    var columnsHeightRef = (0, react_1.useRef)(new Array(breakpointCols).fill(0));
+    var prevItemsLengthRef = (0, react_1.useRef)(0);
+    var prevBreakpointColsRef = (0, react_1.useRef)(breakpointCols);
+    var newItemsSetRef = (0, react_1.useRef)(new Set());
+    var itemHeightsRef = (0, react_1.useRef)(new Map());
+    var itemPositionsRef = (0, react_1.useRef)(new Map());
+    var resizeObserverRef = (0, react_1.useRef)(null);
+    var prevItemsRef = (0, react_1.useRef)(items);
+    var containerRef = (0, react_1.useRef)(null);
+    var _j = (0, react_1.useState)(new Set()), visibleItems = _j[0], setVisibleItems = _j[1];
+    var scrollListenerRef = (0, react_1.useRef)(null);
+    // 重置列数变化
+    (0, react_1.useEffect)(function () {
+        if (prevBreakpointColsRef.current !== breakpointCols) {
+            columnsHeightRef.current = new Array(breakpointCols).fill(0);
+            setColumnItems(new Array(breakpointCols).fill(null).map(function () { return []; }));
+            prevItemsLengthRef.current = 0;
+            prevBreakpointColsRef.current = breakpointCols;
+            newItemsSetRef.current.clear();
+            itemHeightsRef.current.clear();
+        }
+    }, [breakpointCols]);
+    // 计算可见的item
+    var updateVisibleItems = (0, react_1.useCallback)(function () {
+        if (!enableVirtualScroll || !containerRef.current) {
+            // 如果未启用虚拟滚动，所有item都可见
+            setVisibleItems(new Set(items.map(function (_, idx) { return idx; })));
+            return;
+        }
+        var container = containerRef.current;
+        var containerRect = container.getBoundingClientRect();
+        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        var containerTop = containerRect.top + scrollTop;
+        // 计算可视区域（带缓冲区）
+        var viewportHeight = window.innerHeight;
+        var bufferHeight = viewportHeight * overscanCount;
+        var visibleTop = scrollTop - bufferHeight;
+        var visibleBottom = scrollTop + viewportHeight + bufferHeight;
+        var visible = new Set();
+        // 遍历所有item，判断是否在可视区域内
+        itemPositionsRef.current.forEach(function (position, itemIndex) {
+            var itemTop = containerTop + position.top;
+            var itemBottom = itemTop + position.height;
+            // item的任意部分在可视区域内就渲染
+            if (itemBottom >= visibleTop && itemTop <= visibleBottom) {
+                visible.add(itemIndex);
+            }
+        });
+        setVisibleItems(visible);
+    }, [enableVirtualScroll, items, overscanCount]);
+    // 处理新元素挂载，使用 ResizeObserver 监听实际高度
+    var handleItemMount = (0, react_1.useCallback)(function (index, element) {
+        if (!resizeObserverRef.current) {
+            resizeObserverRef.current = new ResizeObserver(function (entries) {
+                var shouldUpdateVisible = false;
+                var _loop_1 = function (entry) {
+                    var target = entry.target;
+                    var itemIndex = parseInt(target.getAttribute('data-index') || '0', 10);
+                    var height = entry.contentRect.height;
+                    if (height === 0)
+                        return "continue"; // 跳过高度为0的情况
+                    var prevHeight = itemHeightsRef.current.get(itemIndex);
+                    // 记录实际高度，用于后续新增item时更准确地估算
+                    if (!prevHeight || Math.abs(prevHeight - height) > 5) {
+                        itemHeightsRef.current.set(itemIndex, height);
+                        // 更新对应列的实际高度
+                        setColumnItems(function (prev) {
+                            // 找到该item所在的列
+                            var targetColIndex = -1;
+                            for (var colIndex = 0; colIndex < prev.length; colIndex++) {
+                                if (prev[colIndex].includes(itemIndex)) {
+                                    targetColIndex = colIndex;
+                                    break;
+                                }
+                            }
+                            if (targetColIndex !== -1) {
+                                // 重新计算该列的总高度
+                                var colHeight = 0;
+                                for (var _i = 0, _a = prev[targetColIndex]; _i < _a.length; _i++) {
+                                    var idx = _a[_i];
+                                    var itemHeight = itemHeightsRef.current.get(idx) || 0;
+                                    colHeight += itemHeight;
+                                }
+                                columnsHeightRef.current[targetColIndex] = colHeight;
+                                // 更新item位置信息
+                                var currentTop = 0;
+                                for (var _b = 0, _c = prev[targetColIndex]; _b < _c.length; _b++) {
+                                    var idx = _c[_b];
+                                    var itemHeight = itemHeightsRef.current.get(idx) || 0;
+                                    itemPositionsRef.current.set(idx, {
+                                        top: currentTop,
+                                        height: itemHeight,
+                                        columnIndex: targetColIndex,
+                                    });
+                                    currentTop += itemHeight;
+                                }
+                                shouldUpdateVisible = true;
+                            }
+                            return prev;
+                        });
+                    }
+                };
+                for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+                    var entry = entries_1[_i];
+                    _loop_1(entry);
+                }
+                // 如果有位置更新，重新计算可见项
+                if (shouldUpdateVisible && enableVirtualScroll) {
+                    updateVisibleItems();
+                }
+            });
+        }
+        element.setAttribute('data-index', index.toString());
+        resizeObserverRef.current.observe(element);
+    }, [enableVirtualScroll, updateVisibleItems]);
+    // 处理新增元素或数据完全替换
+    (0, react_1.useEffect)(function () {
+        var prevLength = prevItemsLengthRef.current;
+        var prevItems = prevItemsRef.current;
+        // 检测数据是否完全变化（tab切换等场景）
+        // 如果长度减少，或者第一个元素变了，说明是数据替换而非追加
+        var isDataReplaced = items.length < prevLength || (items.length > 0 && prevItems.length > 0 && items[0] !== prevItems[0]);
+        // 如果是数据替换，重置所有状态
+        if (isDataReplaced) {
+            columnsHeightRef.current = new Array(breakpointCols).fill(0);
+            itemHeightsRef.current.clear();
+            newItemsSetRef.current.clear();
+            prevItemsLengthRef.current = 0;
+            prevItemsRef.current = items;
+            // 重新分配所有元素 - 轮询分配到各列
+            setColumnItems(function () {
+                var updated = Array.from({ length: breakpointCols }, function () { return []; });
+                for (var i = 0; i < items.length; i++) {
+                    var colIndex = i % breakpointCols;
+                    updated[colIndex].push(i);
+                }
+                columnsHeightRef.current = new Array(breakpointCols).fill(0);
+                prevItemsLengthRef.current = items.length;
+                return updated;
+            });
+            return;
+        }
+        // 如果是追加数据（增量列表）
+        if (items.length <= prevLength)
+            return;
+        prevItemsRef.current = items;
+        // 标记新元素用于动画
+        var newItemsSet = new Set();
+        for (var i = prevLength; i < items.length; i++) {
+            newItemsSet.add(i);
+        }
+        newItemsSetRef.current = newItemsSet;
+        // 增量添加：只处理新增的item，加入到最短的列
+        setColumnItems(function (prev) {
+            var updated = prev.map(function (col) { return __spreadArray([], col, true); });
+            var columnHeights = __spreadArray([], columnsHeightRef.current, true);
+            for (var i = prevLength; i < items.length; i++) {
+                // 找到当前最短的列
+                var minHeight = Math.min.apply(Math, columnHeights);
+                var columnIndex = columnHeights.indexOf(minHeight);
+                // 分配到最短的列
+                updated[columnIndex].push(i);
+                // 使用已知高度或估算高度（取最近几个item的平均高度）
+                var estimatedHeight = 300; // 默认估算高度
+                if (itemHeightsRef.current.size > 0) {
+                    // 取最近10个item的平均高度作为估算
+                    var recentHeights = Array.from(itemHeightsRef.current.values()).slice(-10);
+                    var avgHeight = recentHeights.reduce(function (sum, h) { return sum + h; }, 0) / recentHeights.length;
+                    estimatedHeight = avgHeight;
+                }
+                var height = itemHeightsRef.current.get(i) || estimatedHeight;
+                columnHeights[columnIndex] += height;
+            }
+            columnsHeightRef.current = columnHeights;
+            return updated;
+        });
+        prevItemsLengthRef.current = items.length;
+        // 清除新元素标记（动画播放后）
+        var timer = setTimeout(function () {
+            newItemsSetRef.current.clear();
+        }, 400);
+        return function () { return clearTimeout(timer); };
+    }, [items, breakpointCols]);
+    // 设置滚动监听
+    (0, react_1.useEffect)(function () {
+        if (!enableVirtualScroll) {
+            // 如果未启用虚拟滚动，所有item都可见
+            setVisibleItems(new Set(items.map(function (_, idx) { return idx; })));
+            return;
+        }
+        // 初始计算可见项
+        updateVisibleItems();
+        // 使用节流优化滚动性能
+        var rafId = null;
+        var isScheduled = false;
+        var handleScroll = function () {
+            if (!isScheduled) {
+                isScheduled = true;
+                rafId = requestAnimationFrame(function () {
+                    updateVisibleItems();
+                    isScheduled = false;
+                });
+            }
+        };
+        // 监听滚动事件
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        window.addEventListener('resize', handleScroll, { passive: true });
+        scrollListenerRef.current = handleScroll;
+        return function () {
+            window.removeEventListener('scroll', handleScroll);
+            window.removeEventListener('resize', handleScroll);
+            if (rafId !== null) {
+                cancelAnimationFrame(rafId);
+            }
+            scrollListenerRef.current = null;
+        };
+    }, [enableVirtualScroll, items, updateVisibleItems]);
+    // 清理 ResizeObserver
+    (0, react_1.useEffect)(function () {
+        return function () {
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+                resizeObserverRef.current = null;
+            }
+        };
+    }, []);
+    return (react_1.default.createElement("div", { ref: containerRef, className: (0, merge_classnames_1.mergeClassNames)(index_style_1.default.waterfallContainer, className), style: {
+            '--column-gap': columnGap,
+        } },
+        react_1.default.createElement("div", { className: index_style_1.default.waterfallMasonry }, columnItems.map(function (columnItemIndices, columnIndex) { return (react_1.default.createElement("div", { key: columnIndex, className: (0, merge_classnames_1.mergeClassNames)(index_style_1.default.waterfallMasonryColumn, columnClassName) }, columnItemIndices.map(function (itemIndex) {
+            var item = items[itemIndex];
+            if (!item)
+                return null; // 防止访问不存在的item
+            var isNew = newItemsSetRef.current.has(itemIndex);
+            var isVisible = !enableVirtualScroll || visibleItems.has(itemIndex);
+            var height = itemHeightsRef.current.get(itemIndex);
+            return (react_1.default.createElement(WaterfallItem, { key: itemIndex, item: item, index: itemIndex, renderItem: renderItem, isNew: isNew, onMount: handleItemMount, isVisible: isVisible, height: height }));
+        }))); }))));
+};
+exports.Waterfall = Waterfall;
+//# sourceMappingURL=index.js.map

package/dist/waterfall/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/waterfall/index.tsx"],"names":[],"mappings":"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"}

package/dist/waterfall/index.style.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    waterfallContainer: string;
+    waterfallMasonry: string;
+    waterfallMasonryColumn: string;
+    waterfallItem: string;
+    waterfallItemNew: string;
+    waterfallItemPlaceholder: string;
+};
+export default _default;
+export declare const waterfallItemNewKeyFrames: string;
+//# sourceMappingURL=index.style.d.ts.map

package/dist/waterfall/index.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.style.d.ts","sourceRoot":"","sources":["../../src/waterfall/index.style.ts"],"names":[],"mappings":";;;;;;;;AAOA,wBAgCuB;AAEvB,eAAO,MAAM,yBAAyB,QAOpC,CAAC"}

package/dist/waterfall/index.style.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.waterfallItemNewKeyFrames = void 0;
+var css_in_js_1 = require("@lofter-common-shared/css-in-js");
+var theme = new css_in_js_1.Theme({
+    name: 'waterfall',
+    namespace: 'lofter-waterfall',
+});
+exports.default = (0, css_in_js_1.createThemStyle)(theme)(function () { return ({
+    waterfallContainer: {
+        width: '100%',
+        position: 'relative',
+        contain: 'content',
+    },
+    waterfallMasonry: {
+        display: 'flex',
+        width: '100%',
+    },
+    waterfallMasonryColumn: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundClip: 'padding-box',
+        paddingRight: 'var(--column-gap, 0rem)',
+        '&:last-child': {
+            paddingRight: 0,
+        },
+    },
+    waterfallItem: {
+        width: '100%',
+        breakInside: 'avoid',
+        pageBreakInside: 'avoid',
+        position: 'relative',
+    },
+    waterfallItemNew: {
+        animation: "".concat(exports.waterfallItemNewKeyFrames, " 0.3s ease-in-out"),
+    },
+    waterfallItemPlaceholder: {
+        width: '100%',
+    },
+}); }).createClassNames();
+exports.waterfallItemNewKeyFrames = (0, css_in_js_1.createKeyFrames)({
+    from: {
+        opacity: 0,
+    },
+    to: {
+        opacity: 1,
+    },
+});
+//# sourceMappingURL=index.style.js.map

package/dist/waterfall/index.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.style.js","sourceRoot":"","sources":["../../src/waterfall/index.style.ts"],"names":[],"mappings":";;;AAAA,6DAA0F;AAE1F,IAAM,KAAK,GAAG,IAAI,iBAAK,CAAC;IACtB,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,kBAAkB;CAC9B,CAAC,CAAC;AAEH,kBAAe,IAAA,2BAAe,EAAC,KAAK,CAAC,CAAC,cAAM,OAAA,CAAC;IAC3C,kBAAkB,EAAE;QAClB,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE,UAAU;QACpB,OAAO,EAAE,SAAS;KACnB;IACD,gBAAgB,EAAE;QAChB,OAAO,EAAE,MAAM;QACf,KAAK,EAAE,MAAM;KACd;IACD,sBAAsB,EAAE;QACtB,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,cAAc,EAAE,aAAa;QAC7B,YAAY,EAAE,yBAAyB;QACvC,cAAc,EAAE;YACd,YAAY,EAAE,CAAC;SAChB;KACF;IACD,aAAa,EAAE;QACb,KAAK,EAAE,MAAM;QACb,WAAW,EAAE,OAAO;QACpB,eAAe,EAAE,OAAO;QACxB,QAAQ,EAAE,UAAU;KACrB;IACD,gBAAgB,EAAE;QAChB,SAAS,EAAE,UAAG,iCAAyB,sBAAmB;KAC3D;IACD,wBAAwB,EAAE;QACxB,KAAK,EAAE,MAAM;KACd;CACF,CAAC,EAhC0C,CAgC1C,CAAC,CAAC,gBAAgB,EAAE,CAAC;AAEV,QAAA,yBAAyB,GAAG,IAAA,2BAAe,EAAC;IACvD,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;KACX;IACD,EAAE,EAAE;QACF,OAAO,EAAE,CAAC;KACX;CACF,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lofter-common-shared/react-components",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "",
   "files": [
     "dist",
@@ -9,7 +9,8 @@
   "main": "./dist/index",
   "exports": {
     "./create-render-to-body": "./dist/create-render-to-body/index.js",
-    "./loading": "./dist/loading/index.js"
+    "./loading": "./dist/loading/index.js",
+    "./waterfall": "./dist/waterfall/index.js"
   },
   "publishConfig": {
     "access": "public",

package/src/index.ts

@@ -1,2 +0,0 @@
-export * as Loading from './loading';
-export * as CreateRenderToBody from './create-render-to-body';