@react-stately/layout 4.3.1 → 4.5.0

package/src/TableLayout.ts

@@ -68,9 +68,12 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     // If columnWidths were provided via layoutOptions, update those.
     // Otherwise, calculate column widths ourselves.
     if (invalidationContext.layoutOptions?.columnWidths) {
-      if (invalidationContext.layoutOptions.columnWidths !== this.columnWidths) {
-        this.columnWidths = invalidationContext.layoutOptions.columnWidths;
-        invalidationContext.sizeChanged = true;
+      for (const [key, val] of invalidationContext.layoutOptions.columnWidths) {
+        if (this.columnWidths.get(key) !== val) {
+          this.columnWidths = invalidationContext.layoutOptions.columnWidths;
+          invalidationContext.sizeChanged = true;
+          break;
+        }
       }
     } else if (invalidationContext.sizeChanged || this.columnsChanged(newCollection, this.lastCollection)) {
       let columnLayout = new TableColumnLayout({});
@@ -274,9 +277,6 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
       if (y > this.requestedRect.maxY) {
         let rowsAfterRect = collection.size - (children.length + skipped);
         let lastNode = getLastItem(childNodes);
-        if (lastNode?.type === 'loader') {
-          rowsAfterRect--;
-        }
 
         // Estimate the remaining height for rows that we don't need to layout right now.
         y += rowsAfterRect * rowHeight;
@@ -296,7 +296,7 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     }
 
     // Make sure that the table body gets a height if empty or performing initial load
-    let isEmptyOrLoading = collection?.size === 0 || (collection.size === 1 && collection.getItem(collection.getFirstKey()!)!.type === 'loader');
+    let isEmptyOrLoading = collection?.size === 0;
     if (isEmptyOrLoading) {
       y = this.virtualizer!.visibleRect.maxY;
     } else {

package/src/WaterfallLayout.ts

@@ -29,6 +29,11 @@ export interface WaterfallLayoutOptions {
    * @default 18 x 18
    */
   minSpace?: Size,
+  /**
+   * The maximum allowed horizontal space between items.
+   * @default Infinity
+   */
+  maxHorizontalSpace?: number,
   /**
    * The maximum number of columns.
    * @default Infinity
@@ -55,6 +60,7 @@ const DEFAULT_OPTIONS = {
   minItemSize: new Size(200, 200),
   maxItemSize: new Size(Infinity, Infinity),
   minSpace: new Size(18, 18),
+  maxSpace: Infinity,
   maxColumns: Infinity,
   dropIndicatorThickness: 2
 };
@@ -64,13 +70,15 @@ export class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions
   private layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();
   protected numColumns = 0;
   protected dropIndicatorThickness = 2;
+  private margin: number = 0;
 
   shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean {
     return newOptions.maxColumns !== oldOptions.maxColumns
       || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness
       || (!(newOptions.minItemSize || DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || DEFAULT_OPTIONS.minItemSize))
       || (!(newOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize))
-      || (!(newOptions.minSpace || DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || DEFAULT_OPTIONS.minSpace));
+      || (!(newOptions.minSpace || DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || DEFAULT_OPTIONS.minSpace))
+      || (newOptions.maxHorizontalSpace !== oldOptions.maxHorizontalSpace);
   }
 
   update(invalidationContext: InvalidationContext<O>): void {
@@ -78,6 +86,7 @@ export class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions
       minItemSize = DEFAULT_OPTIONS.minItemSize,
       maxItemSize = DEFAULT_OPTIONS.maxItemSize,
       minSpace = DEFAULT_OPTIONS.minSpace,
+      maxHorizontalSpace = DEFAULT_OPTIONS.maxSpace,
       maxColumns = DEFAULT_OPTIONS.maxColumns,
       dropIndicatorThickness = DEFAULT_OPTIONS.dropIndicatorThickness
     } = invalidationContext.layoutOptions || {};
@@ -107,8 +116,9 @@ export class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions
     let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);
     itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));
 
-    // Compute the horizontal spacing and content height
-    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
+    // Compute the horizontal spacing, content height and horizontal margin
+    let horizontalSpacing = Math.min(Math.max(maxHorizontalSpace, minSpace.width), Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1)));
+    this.margin = Math.floor((visibleWidth - numColumns * itemWidth - horizontalSpacing * (numColumns + 1)) / 2);
 
     // Setup an array of column heights
     let columnHeights = Array(numColumns).fill(minSpace.height);
@@ -126,7 +136,7 @@ export class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions
       // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.
       let prevColumn = numColumns === this.numColumns && oldLayoutInfo && oldLayoutInfo.rect.y < this.virtualizer!.visibleRect.maxY ? oldLayoutInfo.column : undefined;
       let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);
-      let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);
+      let x = horizontalSpacing + column * (itemWidth + horizontalSpacing) + this.margin;
       let y = columnHeights[column];
 
       let rect = new Rect(x, y, itemWidth, height);
@@ -169,8 +179,9 @@ export class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions
       newLayoutInfos.set(lastNode.key, layoutInfo);
     }
 
-    // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render
-    let isEmptyOrLoading = collection?.size === 0 || (collection.size === 1 && collection.getItem(collection.getFirstKey()!)!.type === 'loader');
+    // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render,
+    // except if we are performing skeleton loading
+    let isEmptyOrLoading = collection?.size === 0 && collection.getItem(collection.getFirstKey()!)?.type !== 'skeleton';
     let maxHeight = isEmptyOrLoading ? 0 : Math.max(...columnHeights);
     this.contentSize = new Size(this.virtualizer!.visibleRect.width, maxHeight);
     this.layoutInfos = newLayoutInfos;