@virtual-grid/react - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

dist/index.d.ts

@@ -16,3 +16,3 @@ import * as _tanstack_react_virtual from '@tanstack/react-virtual';
 type VirtualizerOptions = Parameters<typeof useVirtualizer>[0];
-type UseGridProps<IdT extends Core.GridItemId, DataT extends Core.GridItemData> = (Core.SizeGridProps<IdT, DataT> | Core.ColumnsGridProps<IdT, DataT>) & {
+type UseGridProps<IdT extends Core.GridItemId, DataT extends Core.GridItemData> = (Core.BaseGridProps<IdT, DataT> | Core.AutoColumnsGridProps<IdT, DataT> | Core.HorizontalGridProps<IdT, DataT>) & {
     /**
@@ -35,10 +35,14 @@ * Reference to scrollable element.
     /**
-     * Set the height of the load more area.
+     * Set the size of the load more area.
      */
-    loadMoreHeight?: number;
+    loadMoreSize?: number;
+    /**
+     * The number of items to render beyond the visible area.
+     */
+    overscan?: number;
 };
-declare const useGrid: <IdT extends Core.GridItemId, DataT extends unknown>({ scrollRef, ...props }: UseGridProps<IdT, DataT>) => {
+declare const useGrid: <IdT extends Core.GridItemId, DataT extends unknown>({ scrollRef, overscan, ...props }: UseGridProps<IdT, DataT>) => {
     scrollRef: RefObject<Element>;
     onLoadMore: (() => void) | undefined;
-    loadMoreHeight: number | undefined;
+    loadMoreSize: number | undefined;
     virtualizer: {
@@ -61,4 +65,6 @@ rowVirtualizer: _tanstack_react_virtual.PartialKeys<_tanstack_react_virtual.VirtualizerOptions<Element, Element>, "observeElementRect" | "observeElementOffset" | "scrollToFn">;
     columnCount: number;
+    totalColumnCount: number;
     count: number;
     invert: boolean | undefined;
+    horizontal: boolean | undefined;
     itemSize: {
@@ -65,0 +71,0 @@ width: number | undefined;

dist/index.js

@@ -92,10 +92,10 @@ "use client";
     var _a2;
-    if (!grid2.onLoadMore || !grid2.rowCount || !grid2.totalRowCount)
+    if (grid2.horizontal || !grid2.onLoadMore || !grid2.rowCount || !grid2.totalRowCount)
       return;
     if (grid2.totalRowCount === grid2.rowCount)
-      return grid2.loadMoreHeight;
+      return grid2.loadMoreSize;
     const lastRowTop = grid2.getItemRect(grid2.rowCount * grid2.columnCount).top;
     if (!lastRowTop)
       return;
-    let loadMoreHeight = (_a2 = grid2.loadMoreHeight) != null ? _a2 : 0;
+    let loadMoreHeight = (_a2 = grid2.loadMoreSize) != null ? _a2 : 0;
     if (!loadMoreHeight && rowVirtualizer.scrollElement) {
@@ -114,2 +114,15 @@ const offset2 = Math.max(0, rowVirtualizer.options.scrollMargin - rowVirtualizer.scrollOffset);
   ]);
+  const loadMoreTriggerWidth = React.useMemo(() => {
+    var _a2, _b2, _c;
+    if (!grid2.horizontal || !grid2.onLoadMore || !grid2.columnCount || !grid2.totalColumnCount)
+      return;
+    if (grid2.totalColumnCount === grid2.columnCount)
+      return grid2.loadMoreSize;
+    const lastColumnLeft = grid2.getItemRect(grid2.rowCount * grid2.columnCount).left;
+    if (!lastColumnLeft)
+      return;
+    const loadMoreWidth = (_c = (_b2 = grid2.loadMoreSize) != null ? _b2 : (_a2 = columnVirtualizer.scrollElement) == null ? void 0 : _a2.clientWidth) != null ? _c : 0;
+    const triggerWidth = width - lastColumnLeft + loadMoreWidth;
+    return Math.min(width, triggerWidth);
+  }, [columnVirtualizer.scrollElement, grid2, width]);
   React.useEffect(() => {
@@ -158,6 +171,6 @@ rowVirtualizer.measure();
               position: "absolute",
-              height: loadMoreTriggerHeight,
-              width: "100%",
-              top: grid2.invert ? 0 : void 0,
-              bottom: !grid2.invert ? 0 : void 0,
+              height: !grid2.horizontal ? loadMoreTriggerHeight : "100%",
+              width: grid2.horizontal ? loadMoreTriggerWidth : "100%",
+              bottom: !grid2.horizontal ? 0 : void 0,
+              right: grid2.horizontal ? 0 : void 0,
               display: !grid2.onLoadMore ? "none" : void 0
@@ -169,3 +182,3 @@ }
           var _a2, _b2;
-          let index = virtualRow.index * grid2.columnCount + virtualColumn.index;
+          let index = grid2.horizontal ? virtualColumn.index * grid2.rowCount + virtualRow.index : virtualRow.index * grid2.columnCount + virtualColumn.index;
           if (grid2.invert)
@@ -178,2 +191,3 @@ index = grid2.count - 1 - index;
             {
+              "data-index": index,
               style: {
@@ -215,7 +229,11 @@ position: "absolute",
   var _b = _a, {
-    scrollRef
+    scrollRef,
+    overscan
   } = _b, props = __objRest(_b, [
-    "scrollRef"
+    "scrollRef",
+    "overscan"
   ]);
+  var _a2, _b2;
   const [width, setWidth] = (0, import_react.useState)(0);
+  const staticWidth = (0, import_react.useRef)(null);
   const grid2 = Core.grid(__spreadValues({ width }, props));
@@ -227,24 +245,38 @@ const rowVirtualizer = __spreadProps(__spreadValues({}, props.rowVirtualizer), {
     paddingStart: grid2.padding.top,
-    paddingEnd: grid2.padding.bottom
+    paddingEnd: grid2.padding.bottom,
+    overscan: overscan != null ? overscan : (_a2 = props.rowVirtualizer) == null ? void 0 : _a2.overscan
   });
   const columnVirtualizer = __spreadProps(__spreadValues({}, props.columnVirtualizer), {
     horizontal: true,
-    count: grid2.columnCount,
+    count: grid2.totalColumnCount,
     getScrollElement: () => scrollRef.current,
     estimateSize: grid2.getItemWidth,
     paddingStart: grid2.padding.left,
-    paddingEnd: grid2.padding.right
+    paddingEnd: grid2.padding.right,
+    overscan: overscan != null ? overscan : (_b2 = props.columnVirtualizer) == null ? void 0 : _b2.overscan
   });
+  const isStatic = (0, import_react.useCallback)(() => {
+    return props.width !== void 0 || props.horizontal || props.columns === 0 || (props.columns === "auto" ? !props.size || typeof props.size === "object" && !props.size.width : (props.columns === void 0 || props.columns) && (typeof props.size === "object" && props.size.width || typeof props.size === "number"));
+  }, [props.columns, props.horizontal, props.size, props.width]);
   (0, import_use_resize_observer.default)({
     ref: scrollRef,
     onResize: ({ width: width2 }) => {
-      if (width2 === void 0 || props.width !== void 0 || props.size && props.columns)
+      if (width2 === void 0 || isStatic()) {
+        if (width2 !== void 0)
+          staticWidth.current = width2;
         return;
+      }
       setWidth(width2);
     }
   });
+  (0, import_react.useEffect)(() => {
+    if (staticWidth.current === null || width === staticWidth.current || isStatic())
+      return;
+    setWidth(staticWidth.current);
+    staticWidth.current = null;
+  }, [isStatic, width]);
   return __spreadProps(__spreadValues({}, grid2), {
     scrollRef,
     onLoadMore: props.onLoadMore,
-    loadMoreHeight: props.loadMoreHeight,
+    loadMoreSize: props.loadMoreSize,
     virtualizer: {
@@ -251,0 +283,0 @@ rowVirtualizer,

package.json

 {
   "name": "@virtual-grid/react",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "license": "MIT",
@@ -19,3 +19,3 @@ "exports": {
     "@tanstack/react-virtual": "3.0.0-beta.66",
-    "@virtual-grid/core": "^1.0.1",
+    "@virtual-grid/core": "^1.1.0",
     "react-intersection-observer": "^9.5.2",
@@ -22,0 +22,0 @@ "use-resize-observer": "^9.1.0"

No alert changes

Improved metrics

Total package byte prevSize

61861

21.16%

Lines of code

625

13.02%

Dependency changes

• Updated

  @virtual-grid/core@^1.1.0