@react-stately/layout 4.1.1 → 4.2.0

package/src/ListLayout.ts

@@ -15,20 +15,41 @@ import {getChildNodes} from '@react-stately/collections';
 import {InvalidationContext, Layout, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer';
 
 export interface ListLayoutOptions {
-  /** The fixed height of a row in px. */
+  /**
+   * The fixed height of a row in px.
+   * @default 48
+   */
   rowHeight?: number,
   /** The estimated height of a row, when row heights are variable. */
   estimatedRowHeight?: number,
-  /** The fixed height of a section header in px. */
+  /**
+   * The fixed height of a section header in px.
+   * @default 48
+   */
   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
+  /** 
+   * 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.
+   * @default 48
    */
   loaderHeight?: number,
-  /** The thickness of the drop indicator. */
-  dropIndicatorThickness?: number
+  /**
+   * The thickness of the drop indicator.
+   * @default 2
+   */
+  dropIndicatorThickness?: number,
+  /**
+   * The gap between items.
+   * @default 0
+   */
+  gap?: number,
+  /**
+   * The padding around the list.
+   * @default 0
+   */
+  padding?: number
 }
 
 // A wrapper around LayoutInfo that supports hierarchy
@@ -43,24 +64,22 @@ export interface LayoutNode {
 const DEFAULT_HEIGHT = 48;
 
 /**
- * The ListLayout class is an implementation of a virtualizer {@link Layout}.
- * To configure a ListLayout, you can use the properties to define the
- * layouts and/or use the method for defining indentation.
- * The {@link ListKeyboardDelegate} extends the existing virtualizer
- * delegate with an additional method to do this (it uses the same delegate object as
- * the virtualizer itself).
+ * ListLayout is a virtualizer Layout implementation
+ * that arranges its items in a vertical stack. It supports both fixed
+ * and variable height items.
  */
-export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTargetDelegate {
+export class ListLayout<T, O extends ListLayoutOptions = ListLayoutOptions> extends Layout<Node<T>, O> implements DropTargetDelegate {
   protected rowHeight: number | null;
   protected estimatedRowHeight: number | null;
   protected headingHeight: number | null;
   protected estimatedHeadingHeight: number | null;
   protected loaderHeight: number | null;
   protected dropIndicatorThickness: number;
+  protected gap: number;
+  protected padding: number;
   protected layoutNodes: Map<Key, LayoutNode>;
   protected contentSize: Size;
   protected lastCollection: Collection<Node<T>> | null;
-  private lastWidth: number;
   protected rootNodes: LayoutNode[];
   private invalidateEverything: boolean;
   /** The rectangle containing currently valid layout infos. */
@@ -80,9 +99,10 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     this.estimatedHeadingHeight = options.estimatedHeadingHeight ?? null;
     this.loaderHeight = options.loaderHeight ?? null;
     this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
+    this.gap = options.gap || 0;
+    this.padding = options.padding || 0;
     this.layoutNodes = new Map();
     this.rootNodes = [];
-    this.lastWidth = 0;
     this.lastCollection = null;
     this.invalidateEverything = false;
     this.validRect = new Rect();
@@ -104,7 +124,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     // Adjust rect to keep number of visible rows consistent.
     // (only if height > 1 for getDropTargetFromPoint)
     if (rect.height > 1) {
-      let rowHeight = this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_HEIGHT;
+      let rowHeight = (this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_HEIGHT) + this.gap;
       rect.y = Math.floor(rect.y / rowHeight) * rowHeight;
       rect.height = Math.ceil(rect.height / rowHeight) * rowHeight;
     }
@@ -167,10 +187,28 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || node.layoutInfo.type === 'header' || this.virtualizer!.isPersistedKey(node.layoutInfo.key);
   }
 
-  protected shouldInvalidateEverything(invalidationContext: InvalidationContext<O>) {
+  protected shouldInvalidateEverything(invalidationContext: InvalidationContext<O>): boolean {
     // Invalidate cache if the size of the collection changed.
     // In this case, we need to recalculate the entire layout.
-    return invalidationContext.sizeChanged || false;
+    // Also invalidate if fixed sizes/gaps change.
+    let options = invalidationContext.layoutOptions;
+    return invalidationContext.sizeChanged
+      || this.rowHeight !== (options?.rowHeight ?? this.rowHeight)
+      || this.headingHeight !== (options?.headingHeight ?? this.headingHeight)
+      || this.loaderHeight !== (options?.loaderHeight ?? this.loaderHeight)
+      || this.gap !== (options?.gap ?? this.gap)
+      || this.padding !== (options?.padding ?? this.padding);
+  }
+
+  shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean {
+    return newOptions.rowHeight !== oldOptions.rowHeight
+      || newOptions.estimatedRowHeight !== oldOptions.estimatedRowHeight
+      || newOptions.headingHeight !== oldOptions.headingHeight
+      || newOptions.estimatedHeadingHeight !== oldOptions.estimatedHeadingHeight
+      || newOptions.loaderHeight !== oldOptions.loaderHeight
+      || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness
+      || newOptions.gap !== oldOptions.gap
+      || newOptions.padding !== oldOptions.padding;
   }
 
   update(invalidationContext: InvalidationContext<O>) {
@@ -184,6 +222,16 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
       this.layoutNodes.clear();
     }
 
+    let options = invalidationContext.layoutOptions;
+    this.rowHeight = options?.rowHeight ?? this.rowHeight;
+    this.estimatedRowHeight = options?.estimatedRowHeight ?? this.estimatedRowHeight;
+    this.headingHeight = options?.headingHeight ?? this.headingHeight;
+    this.estimatedHeadingHeight = options?.estimatedHeadingHeight ?? this.estimatedHeadingHeight;
+    this.loaderHeight = options?.loaderHeight ?? this.loaderHeight;
+    this.dropIndicatorThickness = options?.dropIndicatorThickness ?? this.dropIndicatorThickness;
+    this.gap = options?.gap ?? this.gap;
+    this.padding = options?.padding ?? this.padding;
+
     this.rootNodes = this.buildCollection();
 
     // Remove deleted layout nodes
@@ -198,18 +246,17 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
       }
     }
 
-    this.lastWidth = this.virtualizer!.visibleRect.width;
     this.lastCollection = collection;
     this.invalidateEverything = false;
     this.validRect = this.requestedRect.copy();
   }
 
-  protected buildCollection(y = 0): LayoutNode[] {
+  protected buildCollection(y = this.padding): LayoutNode[] {
     let collection = this.virtualizer!.collection;
     let skipped = 0;
     let nodes: LayoutNode[] = [];
     for (let node of collection) {
-      let rowHeight = this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_HEIGHT;
+      let rowHeight = (this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_HEIGHT) + this.gap;
 
       // Skip rows before the valid rectangle unless they are already cached.
       if (node.type === 'item' && y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
@@ -218,8 +265,8 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
         continue;
       }
 
-      let layoutNode = this.buildChild(node, 0, y, null);
-      y = layoutNode.layoutInfo.rect.maxY;
+      let layoutNode = this.buildChild(node, this.padding, y, null);
+      y = layoutNode.layoutInfo.rect.maxY + this.gap;
       nodes.push(layoutNode);
 
       if (node.type === 'item' && y > this.requestedRect.maxY) {
@@ -228,6 +275,8 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
       }
     }
 
+    y -= this.gap;
+    y += this.padding;
     this.contentSize = new Size(this.virtualizer!.visibleRect.width, y);
     return nodes;
   }
@@ -272,9 +321,9 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
   }
 
   protected buildLoader(node: Node<T>, x: number, y: number): LayoutNode {
-    let rect = new Rect(x, y, 0, 0);
+    let rect = new Rect(x, y, this.padding, 0);
     let layoutInfo = new LayoutInfo('loader', node.key, rect);
-    rect.width = this.virtualizer!.contentSize.width;
+    rect.width = this.virtualizer!.contentSize.width - this.padding - x;
     rect.height = this.loaderHeight || this.rowHeight || this.estimatedRowHeight || DEFAULT_HEIGHT;
 
     return {
@@ -285,15 +334,15 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
 
   protected buildSection(node: Node<T>, x: number, y: number): LayoutNode {
     let collection = this.virtualizer!.collection;
-    let width = this.virtualizer!.visibleRect.width;
-    let rect = new Rect(0, y, width, 0);
+    let width = this.virtualizer!.visibleRect.width - this.padding;
+    let rect = new Rect(x, y, width - x, 0);
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
 
     let startY = y;
     let skipped = 0;
     let children: LayoutNode[] = [];
     for (let child of getChildNodes(node, collection)) {
-      let rowHeight = (this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_HEIGHT);
+      let rowHeight = (this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_HEIGHT) + this.gap;
 
       // Skip rows before the valid rectangle unless they are already cached.
       if (y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
@@ -303,7 +352,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
       }
 
       let layoutNode = this.buildChild(child, x, y, layoutInfo.key);
-      y = layoutNode.layoutInfo.rect.maxY;
+      y = layoutNode.layoutInfo.rect.maxY + this.gap;
       children.push(layoutNode);
 
       if (y > this.requestedRect.maxY) {
@@ -313,6 +362,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
       }
     }
 
+    y -= this.gap;
     rect.height = y - startY;
 
     return {
@@ -324,7 +374,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
   }
 
   protected buildSectionHeader(node: Node<T>, x: number, y: number): LayoutNode {
-    let width = this.virtualizer!.visibleRect.width;
+    let width = this.virtualizer!.visibleRect.width - this.padding;
     let rectHeight = this.headingHeight;
     let isEstimated = false;
 
@@ -339,7 +389,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
         let curNode = this.virtualizer!.collection.getItem(node.key);
         let lastNode = this.lastCollection ? this.lastCollection.getItem(node.key) : null;
         rectHeight = previousLayoutInfo.rect.height;
-        isEstimated = width !== this.lastWidth || curNode !== lastNode || previousLayoutInfo.estimatedSize;
+        isEstimated = width !== previousLayoutInfo.rect.width || curNode !== lastNode || previousLayoutInfo.estimatedSize;
       } else {
         rectHeight = (node.rendered ? this.estimatedHeadingHeight : 0);
         isEstimated = true;
@@ -350,7 +400,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
       rectHeight = DEFAULT_HEIGHT;
     }
 
-    let headerRect = new Rect(0, y, width, rectHeight);
+    let headerRect = new Rect(x, y, width - x, rectHeight);
     let header = new LayoutInfo('header', node.key, headerRect);
     header.estimatedSize = isEstimated;
     return {
@@ -362,7 +412,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
   }
 
   protected buildItem(node: Node<T>, x: number, y: number): LayoutNode {
-    let width = this.virtualizer!.visibleRect.width;
+    let width = this.virtualizer!.visibleRect.width - this.padding - x;
     let rectHeight = this.rowHeight;
     let isEstimated = false;
 
@@ -374,7 +424,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
       let previousLayoutNode = this.layoutNodes.get(node.key);
       if (previousLayoutNode) {
         rectHeight = previousLayoutNode.layoutInfo.rect.height;
-        isEstimated = width !== this.lastWidth || node !== previousLayoutNode.node || previousLayoutNode.layoutInfo.estimatedSize;
+        isEstimated = width !== previousLayoutNode.layoutInfo.rect.width || node !== previousLayoutNode.node || previousLayoutNode.layoutInfo.estimatedSize;
       } else {
         rectHeight = this.estimatedRowHeight;
         isEstimated = true;
@@ -385,7 +435,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
       rectHeight = DEFAULT_HEIGHT;
     }
 
-    let rect = new Rect(x, y, width - x, rectHeight);
+    let rect = new Rect(x, y, width, rectHeight);
     let layoutInfo = new LayoutInfo(node.type, node.key, rect);
     layoutInfo.estimatedSize = isEstimated;
     return {

package/src/TableLayout.ts

@@ -18,12 +18,16 @@ import {LayoutNode, ListLayout, ListLayoutOptions} from './ListLayout';
 import {TableCollection} from '@react-types/table';
 import {TableColumnLayout} from '@react-stately/table';
 
-export interface TableLayoutProps {
+export interface TableLayoutProps extends ListLayoutOptions {
   columnWidths?: Map<Key, number>
 }
 
 const DEFAULT_ROW_HEIGHT = 48;
 
+/**
+ * TableLayout is a virtualizer Layout implementation that arranges
+ * items in rows and columns.
+ */
 export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> extends ListLayout<T, O> {
   protected lastCollection: TableCollection<T> | null = null;
   private columnWidths: Map<Key, number> = new Map();
@@ -31,7 +35,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
   private lastPersistedKeys: Set<Key> | null = null;
   private persistedIndices: Map<Key, number[]> = new Map();
 
-  constructor(options: ListLayoutOptions) {
+  constructor(options?: ListLayoutOptions) {
     super(options);
     this.stickyColumnIndices = [];
   }
@@ -53,6 +57,11 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
       );
   }
 
+  shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean {
+    return newOptions.columnWidths !== oldOptions.columnWidths
+      || super.shouldInvalidateLayoutOptions(newOptions, oldOptions);
+  }
+
   update(invalidationContext: InvalidationContext<O>): void {
     let newCollection = this.virtualizer!.collection as TableCollection<T>;
 
@@ -65,7 +74,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
       }
     } else if (invalidationContext.sizeChanged || this.columnsChanged(newCollection, this.lastCollection)) {
       let columnLayout = new TableColumnLayout({});
-      this.columnWidths = columnLayout.buildColumnWidths(this.virtualizer!.visibleRect.width, newCollection, new Map());
+      this.columnWidths = columnLayout.buildColumnWidths(this.virtualizer!.visibleRect.width - this.padding * 2, newCollection, new Map());
       invalidationContext.sizeChanged = true;
     }
 
@@ -86,11 +95,11 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
 
     let header = this.buildTableHeader();
     this.layoutNodes.set(header.layoutInfo.key, header);
-    let body = this.buildBody(header.layoutInfo.rect.height);
+    let body = this.buildBody(header.layoutInfo.rect.maxY + this.gap);
     this.lastPersistedKeys = null;
 
     body.layoutInfo.rect.width = Math.max(header.layoutInfo.rect.width, body.layoutInfo.rect.width);
-    this.contentSize = new Size(body.layoutInfo.rect.width, body.layoutInfo.rect.maxY);
+    this.contentSize = new Size(body.layoutInfo.rect.width + this.padding * 2, body.layoutInfo.rect.maxY + this.padding);
     return [
       header,
       body
@@ -99,16 +108,16 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
 
   protected buildTableHeader(): LayoutNode {
     let collection = this.virtualizer!.collection as TableCollection<T>;
-    let rect = new Rect(0, 0, 0, 0);
+    let rect = new Rect(this.padding, this.padding, 0, 0);
     let layoutInfo = new LayoutInfo('header', collection.head?.key ?? 'header', rect);
     layoutInfo.isSticky = true;
     layoutInfo.zIndex = 1;
 
-    let y = 0;
+    let y = this.padding;
     let width = 0;
     let children: LayoutNode[] = [];
     for (let headerRow of collection.headerRows) {
-      let layoutNode = this.buildChild(headerRow, 0, y, layoutInfo.key);
+      let layoutNode = this.buildChild(headerRow, this.padding, y, layoutInfo.key);
       layoutNode.layoutInfo.parentKey = layoutInfo.key;
       y = layoutNode.layoutInfo.rect.maxY;
       width = Math.max(width, layoutNode.layoutInfo.rect.width);
@@ -117,7 +126,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     }
 
     rect.width = width;
-    rect.height = y;
+    rect.height = y - this.padding;
 
     return {
       layoutInfo,
@@ -128,7 +137,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
   }
 
   protected buildHeaderRow(headerRow: GridNode<T>, x: number, y: number): LayoutNode {
-    let rect = new Rect(0, y, 0, 0);
+    let rect = new Rect(x, y, 0, 0);
     let row = new LayoutInfo('headerrow', headerRow.key, rect);
 
     let height = 0;
@@ -148,7 +157,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     this.setChildHeights(columns, height);
 
     rect.height = height;
-    rect.width = x;
+    rect.width = x - rect.x;
 
     return {
       layoutInfo: row,
@@ -171,10 +180,10 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
   // used to get the column widths when rendering to the DOM
   private getRenderedColumnWidth(node: GridNode<T>) {
     let collection = this.virtualizer!.collection as TableCollection<T>;
-    let colspan = node.colspan ?? 1;
+    let colSpan = node.colSpan ?? 1;
     let colIndex = node.colIndex ?? node.index;
     let width = 0;
-    for (let i = colIndex; i < colIndex + colspan; i++) {
+    for (let i = colIndex; i < colIndex + colSpan; i++) {
       let column = collection.columns[i];
       if (column?.key != null) {
         width += this.columnWidths.get(column.key) ?? 0;
@@ -234,14 +243,14 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
 
   protected buildBody(y: number): LayoutNode {
     let collection = this.virtualizer!.collection as TableCollection<T>;
-    let rect = new Rect(0, y, 0, 0);
+    let rect = new Rect(this.padding, y, 0, 0);
     let layoutInfo = new LayoutInfo('rowgroup', collection.body.key, rect);
 
     let startY = y;
     let skipped = 0;
     let width = 0;
     let children: LayoutNode[] = [];
-    let rowHeight = this.getEstimatedRowHeight();
+    let rowHeight = this.getEstimatedRowHeight() + this.gap;
     for (let node of getChildNodes(collection.body, collection)) {
       // Skip rows before the valid rectangle unless they are already cached.
       if (y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
@@ -250,10 +259,10 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
         continue;
       }
 
-      let layoutNode = this.buildChild(node, 0, y, layoutInfo.key);
+      let layoutNode = this.buildChild(node, this.padding, y, layoutInfo.key);
       layoutNode.layoutInfo.parentKey = layoutInfo.key;
       layoutNode.index = children.length;
-      y = layoutNode.layoutInfo.rect.maxY;
+      y = layoutNode.layoutInfo.rect.maxY + this.gap;
       width = Math.max(width, layoutNode.layoutInfo.rect.width);
       children.push(layoutNode);
 
@@ -266,6 +275,8 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
 
     if (children.length === 0) {
       y = this.virtualizer!.visibleRect.maxY;
+    } else {
+      y -= this.gap;
     }
 
     rect.width = width;