@virtual-grid/react - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/index.d.ts

@@ -39,2 +39,3 @@ import * as _tanstack_react_virtual from '@tanstack/react-virtual';
 declare const useGrid: <IdT extends Core.GridItemId, DataT extends unknown>({ scrollRef, ...props }: UseGridProps<IdT, DataT>) => {
+    scrollRef: RefObject<Element>;
     onLoadMore: (() => void) | undefined;
@@ -69,7 +70,21 @@ loadMoreHeight: number | undefined;
     };
+    getItem: (index: number) => Core.GridItem<number | IdT, DataT | undefined> | undefined;
     getItemHeight: (index: number) => number;
     getItemWidth: (index: number) => number;
-    getItem: (index: number) => Core.GridItem<number | IdT, DataT | undefined> | undefined;
+    getItemPosition: (index: number) => {
+        row: number;
+        column: number;
+    };
+    getItemRect: (index: number) => {
+        height: number;
+        width: number;
+        top: number;
+        bottom: number;
+        left: number;
+        right: number;
+        x: number;
+        y: number;
+    };
 };
 
 export { Grid, GridProps, UseGridProps, useGrid };

dist/index.js

@@ -72,3 +72,2 @@ "use client";
 var React = __toESM(require("react"));
-var import_use_mutation_observer = __toESM(require("@rooks/use-mutation-observer"));
 var import_react_virtual = require("@tanstack/react-virtual");
@@ -80,6 +79,6 @@ var import_react_intersection_observer = require("react-intersection-observer");
   const ref = React.useRef(null);
-  const [listOffset, setListOffset] = React.useState(0);
+  const [offset, setOffset] = React.useState(0);
   const { ref: loadMoreRef, inView } = (0, import_react_intersection_observer.useInView)();
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)(__spreadProps(__spreadValues({}, grid2.virtualizer.rowVirtualizer), {
-    scrollMargin: listOffset
+    scrollMargin: offset
   }));
@@ -94,11 +93,24 @@ const columnVirtualizer = (0, import_react_virtual.useVirtualizer)(grid2.virtualizer.columnVirtualizer);
   const loadMoreTriggerHeight = React.useMemo(() => {
-    if (!virtualRows.length || !grid2.onLoadMore)
+    var _a2;
+    if (!grid2.onLoadMore || !grid2.rowCount || !grid2.totalRowCount)
       return;
     if (grid2.totalRowCount === grid2.rowCount)
       return grid2.loadMoreHeight;
-    const [offset] = rowVirtualizer.getOffsetForIndex(grid2.rowCount - 1, "center");
-    if (!offset)
+    const lastRowTop = grid2.getItemRect(grid2.rowCount * grid2.columnCount).top;
+    if (!lastRowTop)
       return;
-    return height - offset;
-  }, [grid2, height, rowVirtualizer, virtualRows.length]);
+    let loadMoreHeight = (_a2 = grid2.loadMoreHeight) != null ? _a2 : 0;
+    if (!loadMoreHeight && rowVirtualizer.scrollElement) {
+      const offset2 = Math.max(0, rowVirtualizer.options.scrollMargin - rowVirtualizer.scrollOffset);
+      loadMoreHeight = Math.max(0, rowVirtualizer.scrollElement.clientHeight - offset2);
+    }
+    const triggerHeight = height - lastRowTop + loadMoreHeight;
+    return Math.min(height, triggerHeight);
+  }, [
+    grid2,
+    rowVirtualizer.scrollElement,
+    rowVirtualizer.options.scrollMargin,
+    rowVirtualizer.scrollOffset,
+    height
+  ]);
   React.useEffect(() => {
@@ -114,9 +126,18 @@ rowVirtualizer.measure();
   }, [grid2, inView]);
-  (0, import_use_mutation_observer.default)(ref, () => {
-    var _a2, _b2;
-    return setListOffset((_b2 = (_a2 = ref.current) == null ? void 0 : _a2.offsetTop) != null ? _b2 : 0);
-  });
+  React.useEffect(() => {
+    const element = grid2.scrollRef.current;
+    if (!element)
+      return;
+    const observer = new MutationObserver(() => {
+      var _a2, _b2;
+      return setOffset((_b2 = (_a2 = ref.current) == null ? void 0 : _a2.offsetTop) != null ? _b2 : 0);
+    });
+    observer.observe(element, {
+      childList: true
+    });
+    return () => observer.disconnect();
+  }, [grid2.scrollRef]);
   React.useLayoutEffect(() => {
     var _a2, _b2;
-    return setListOffset((_b2 = (_a2 = ref.current) == null ? void 0 : _a2.offsetTop) != null ? _b2 : 0);
+    return setOffset((_b2 = (_a2 = ref.current) == null ? void 0 : _a2.offsetTop) != null ? _b2 : 0);
   }, []);
@@ -223,2 +244,3 @@ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   return __spreadProps(__spreadValues({}, grid2), {
+    scrollRef,
     onLoadMore: props.onLoadMore,
@@ -225,0 +247,0 @@ loadMoreHeight: props.loadMoreHeight,

package.json

 {
   "name": "@virtual-grid/react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "license": "MIT",
@@ -18,8 +18,6 @@ "exports": {
   "dependencies": {
-    "@rooks/use-mutation-observer": "^4.11.2",
     "@tanstack/react-virtual": "3.0.0-beta.66",
-    "@virtual-grid/core": "^1.0.0",
+    "@virtual-grid/core": "^1.0.1",
     "react-intersection-observer": "^9.5.2",
-    "use-resize-observer": "^9.1.0",
-    "valtio": "^1.11.3"
+    "use-resize-observer": "^9.1.0"
   },
@@ -26,0 +24,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

51056

9.4%

Dependency count

5

-28.57%

Lines of code

553

11.94%

Dependency changes

• - Removed

  @rooks/use-mutation-observer@^4.11.2

• - Removed

  valtio@^1.11.3

• - Removed

  @rooks/use-mutation-observer@4.11.2
  (transitive)

• - Removed

  derive-valtio@0.1.0
  (transitive)

• - Removed

  proxy-compare@2.6.0
  (transitive)

• - Removed

  use-sync-external-store@1.2.0
  (transitive)

• - Removed

  valtio@1.13.2
  (transitive)

• Updated

  @virtual-grid/core@^1.0.1