@react-stately/layout 3.13.10-nightly.4704 → 3.13.10-nightly.4718

package/src/ListLayout.ts

@@ -23,6 +23,10 @@ export interface ListLayoutOptions {
   headingHeight?: number,
   /** The estimated height of a section header, when the height is variable. */
   estimatedHeadingHeight?: number,
+  /** The fixed height of a loader element in px. This loader is specifically for
+   * "load more" elements rendered when loading more rows at the root level or inside nested row/sections.
+   */
+  loaderHeight?: number,
   /** The thickness of the drop indicator. */
   dropIndicatorThickness?: number
 }
@@ -51,6 +55,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
   protected estimatedRowHeight: number;
   protected headingHeight: number;
   protected estimatedHeadingHeight: number;
+  protected loaderHeight: number;
   protected dropIndicatorThickness: number;
   protected layoutNodes: Map<Key, LayoutNode>;
   protected contentSize: Size;
@@ -74,6 +79,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     this.estimatedRowHeight = options.estimatedRowHeight;
     this.headingHeight = options.headingHeight;
     this.estimatedHeadingHeight = options.estimatedHeadingHeight;
+    this.loaderHeight = options.loaderHeight;
     this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
     this.layoutNodes = new Map();
     this.rootNodes = [];
@@ -238,7 +244,6 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     }
 
     let layoutNode = this.buildNode(node, x, y);
-    layoutNode.node = node;
 
     layoutNode.layoutInfo.parentKey = parentKey ?? null;
     this.layoutNodes.set(node.key, layoutNode);
@@ -253,9 +258,23 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
         return this.buildItem(node, x, y);
       case 'header':
         return this.buildSectionHeader(node, x, y);
+      case 'loader':
+        return this.buildLoader(node, x, y);
     }
   }
 
+  protected buildLoader(node: Node<T>, x: number, y: number): LayoutNode {
+    let rect = new Rect(x, y, 0, 0);
+    let layoutInfo = new LayoutInfo('loader', node.key, rect);
+    rect.width = this.virtualizer.contentSize.width;
+    rect.height = this.loaderHeight || this.rowHeight || this.estimatedRowHeight;
+
+    return {
+      layoutInfo,
+      validRect: rect.intersection(this.requestedRect)
+    };
+  }
+
   protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {
     let width = this.virtualizer.visibleRect.width;
     let rect = new Rect(0, y, width, 0);
@@ -290,7 +309,8 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     return {
       layoutInfo,
       children,
-      validRect: layoutInfo.rect.intersection(this.requestedRect)
+      validRect: layoutInfo.rect.intersection(this.requestedRect),
+      node
     };
   }
 
@@ -327,7 +347,8 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     return {
       layoutInfo: header,
       children: [],
-      validRect: header.rect.intersection(this.requestedRect)
+      validRect: header.rect.intersection(this.requestedRect),
+      node
     };
   }
 
@@ -360,7 +381,9 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     layoutInfo.estimatedSize = isEstimated;
     return {
       layoutInfo,
-      validRect: layoutInfo.rect
+      children: [],
+      validRect: layoutInfo.rect,
+      node
     };
   }
 

package/src/TableLayout.ts

@@ -35,7 +35,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
   }
 
   private columnsChanged(newCollection: TableCollection<T>, oldCollection: TableCollection<T> | null) {
-    return !oldCollection || 
+    return !oldCollection ||
       newCollection.columns !== oldCollection.columns &&
       newCollection.columns.length !== oldCollection.columns.length ||
       newCollection.columns.some((c, i) =>
@@ -113,7 +113,8 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     return {
       layoutInfo,
       children,
-      validRect: layoutInfo.rect
+      validRect: layoutInfo.rect,
+      node: this.collection.head
     };
   }
 
@@ -143,7 +144,8 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     return {
       layoutInfo: row,
       children: columns,
-      validRect: rect
+      validRect: rect,
+      node: headerRow
     };
   }
 
@@ -208,7 +210,9 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
 
     return {
       layoutInfo,
-      validRect: layoutInfo.rect
+      children: [],
+      validRect: layoutInfo.rect,
+      node
     };
   }
 
@@ -259,7 +263,8 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     return {
       layoutInfo,
       children,
-      validRect: layoutInfo.rect.intersection(this.requestedRect)
+      validRect: layoutInfo.rect.intersection(this.requestedRect),
+      node: this.collection.body
     };
   }
 
@@ -274,6 +279,8 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
         return this.buildColumn(node, x, y);
       case 'cell':
         return this.buildCell(node, x, y);
+      case 'loader':
+        return this.buildLoader(node, x, y);
       default:
         throw new Error('Unknown node type ' + node.type);
     }
@@ -294,6 +301,8 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
           if (layoutNode) {
             layoutNode.layoutInfo.rect.x = x;
             x += layoutNode.layoutInfo.rect.width;
+          } else {
+            break;
           }
         } else {
           let layoutNode = this.buildChild(child, x, y, layoutInfo.key);
@@ -313,7 +322,8 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     return {
       layoutInfo,
       children,
-      validRect: rect.intersection(this.requestedRect)
+      validRect: rect.intersection(this.requestedRect),
+      node
     };
   }
 
@@ -328,7 +338,9 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
 
     return {
       layoutInfo,
-      validRect: rect
+      children: [],
+      validRect: rect,
+      node
     };
   }