@pixui-dev/pixui-react-virtualwaterfall - npm Package Compare versions

Comparing version 1.0.9 to 1.0.10

package.json

 {
   "name": "@pixui-dev/pixui-react-virtualwaterfall",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "pixui 高性能React虚拟瀑布流组件",
@@ -5,0 +5,0 @@ "publishConfig": {

README.md

@@ -1009,2 +1009,6 @@ # VirtualWaterfallList 虚拟瀑布流组件
 
+### 1.0.10
+1. renderLoadMoreArea 兼容 Unity/Unreal 情况下，滚动不包含当前区域的问题。
+2. 修复连续删除最后一个节点，导致的排版异常。
+
 ### 1.0.9
@@ -1011,0 +1015,0 @@ 1. 暴露 containerRef, contentRef，提供 getLayoutInfoByIndex 获取指定 index 的 排版信息。

src/VirtualWaterfall.d.ts

@@ -289,2 +289,8 @@ import { h, Component, JSX } from 'preact';
     contentRef: import("preact").RefObject<HTMLDivElement>;
+    /**
+     * 加载更多DOM引用
+     * @private
+     * @type {Ref<HTMLDivElement>}
+     */
+    private loadMoreRef;
     /** =================== 数据相关 =================== */
@@ -291,0 +297,0 @@ /**

src/VirtualWaterfall.js

@@ -123,2 +123,8 @@ var __extends = (this && this.__extends) || (function () {
         _this.contentRef = createRef();
+        /**
+         * 加载更多DOM引用
+         * @private
+         * @type {Ref<HTMLDivElement>}
+         */
+        _this.loadMoreRef = createRef();
         /** =================== 数据相关 =================== */
@@ -583,3 +589,3 @@ /**
         var needLayoutIndex = index;
-        var needLayoutCount = this.renderData.length - needLayoutIndex;
+        var needLayoutCount = this.renderData.length - needLayoutIndex + 1;
         // console.log('removeItemByIndex', needLayoutIndex, needLayoutCount);
@@ -633,3 +639,3 @@ // 重新计算布局
         var needLayoutIndex = index;
-        var needLayoutCount = this.renderData.length - needLayoutIndex;
+        var needLayoutCount = this.renderData.length - needLayoutIndex + 1;
         // 重新计算布局
@@ -1104,13 +1110,22 @@ this.layoutItems(needLayoutIndex, needLayoutCount);
     VirtualWaterfall.prototype.render = function () {
+        var _a;
         var containerHeight = this.props.containerHeight;
         var containerWidth = this.state.containerWidth;
+        // console.log('render', this.waterfallItems.length);
+        // 计算加载更多高度，主要用于兼容 Unity 和 UE 的滚动高度运算时候，的额外区域的运算错误。
+        var loadMoreHeight = 0;
+        if (this.loadMoreRef) {
+            var loadMoreRect = (_a = this.loadMoreRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            if (loadMoreRect && loadMoreRect.height) {
+                loadMoreHeight = loadMoreRect.height;
+            }
+        }
         // 计算总内容高度
-        var totalContentHeight = this.totalHeight;
-        // console.log('render', this.waterfallItems.length);
+        var totalContentHeight = this.totalHeight + loadMoreHeight;
         var scrollProps = this.handleScrollProps();
-        return (h("div", { ref: this.containerRef, id: this.props.rootId || 'VirtualWaterfallRoot', className: this.props.rootClassName || 'VirtualWaterfallRoot', style: __assign({ height: "".concat(containerHeight, "px"), overflow: 'scroll', position: 'relative' }, this.props.rootStyle), "movement-type": scrollProps.movementType, "scroll-sensitivity": scrollProps.scrollSensitivity, "inertia-version": scrollProps.inertiaVersion, "deceleration-rate": scrollProps.decelerationRate, "static-velocity-drag": scrollProps.staticVelocityDrag, "friction-coefficient": scrollProps.frictionCoefficient, onScroll: this.handleScroll },
+        return (h("div", { ref: this.containerRef, id: this.props.rootId || 'VirtualWaterfallRoot', className: this.props.rootClassName || 'VirtualWaterfallRoot', style: __assign({ height: "".concat(containerHeight, "px"), overflow: 'scroll', position: 'relative', flexDirection: 'column' }, this.props.rootStyle), "movement-type": scrollProps.movementType, "scroll-sensitivity": scrollProps.scrollSensitivity, "inertia-version": scrollProps.inertiaVersion, "deceleration-rate": scrollProps.decelerationRate, "static-velocity-drag": scrollProps.staticVelocityDrag, "friction-coefficient": scrollProps.frictionCoefficient, onScroll: this.handleScroll },
             h("div", { ref: this.contentRef, id: 'VirtualWaterfallContent', className: 'VirtualWaterfallContent', style: __assign({ display: 'flex', flexShrink: 0, position: 'relative', width: "".concat(containerWidth, "px"), height: "".concat(totalContentHeight, "px") }, this.props.contentStyle) },
                 this.props.renderPullDownArea && (h("div", { style: { position: 'absolute', bottom: '100%', left: '0', width: '100%', } }, this.props.renderPullDownArea())),
                 this.waterfallItems.map(function (item) { return item.vNode; }),
-                this.props.renderLoadMoreArea && this.waterfallItems.length > 0 && (h("div", { style: { position: 'absolute', top: '100%', left: '0', width: '100%', } }, this.props.renderLoadMoreArea())))));
+                this.props.renderLoadMoreArea && this.waterfallItems.length > 0 && (h("div", { id: "loadMoreWrap", ref: this.loadMoreRef, style: { position: 'absolute', left: 0, top: "".concat(this.totalHeight, "px"), width: "".concat(containerWidth, "px") } }, this.props.renderLoadMoreArea())))));
     };
@@ -1117,0 +1132,0 @@ VirtualWaterfall.defaultProps = {

No alert changes

Improved metrics

Total package byte prevSize

112353

0.96%

Lines of code

1818

1.22%

Number of lines in readme file

1031

0.39%

No dependency changes