@react-stately/layout 3.13.10-nightly.4674 → 3.13.10-nightly.4683

package/src/ListLayout.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Collection, DropTarget, DropTargetDelegate, Key, KeyboardDelegate, Node} from '@react-types/shared';
+import {Collection, DropTarget, DropTargetDelegate, Key, Node} from '@react-types/shared';
 import {getChildNodes} from '@react-stately/collections';
 import {InvalidationContext, Layout, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer';
 
@@ -22,11 +22,10 @@ export type ListLayoutOptions<T> = {
   estimatedHeadingHeight?: number,
   padding?: number,
   indentationForItem?: (collection: Collection<Node<T>>, key: Key) => number,
-  collator?: Intl.Collator,
   loaderHeight?: number,
   placeholderHeight?: number,
-  allowDisabledKeyFocus?: boolean,
-  forceSectionHeaders?: boolean
+  forceSectionHeaders?: boolean,
+  enableEmptyState?: boolean
 };
 
 // A wrapper around LayoutInfo that supports hierarchy
@@ -39,23 +38,23 @@ export interface LayoutNode {
   index?: number
 }
 
-interface ListLayoutProps {
+export interface ListLayoutProps {
   isLoading?: boolean
 }
 
 const DEFAULT_HEIGHT = 48;
 
 /**
- * The ListLayout class is an implementation of a collection view {@link Layout}
+ * The ListLayout class is an implementation of a virtualizer {@link Layout}
  * it is used for creating lists and lists with indented sub-lists.
  *
  * 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 collection view
+ * The {@link ListKeyboardDelegate} extends the existing virtualizer
  * delegate with an additional method to do this (it uses the same delegate object as
- * the collection view itself).
+ * the virtualizer itself).
  */
-export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements KeyboardDelegate, DropTargetDelegate {
+export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements DropTargetDelegate {
   protected rowHeight: number;
   protected estimatedRowHeight: number;
   protected headingHeight: number;
@@ -66,19 +65,19 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
   protected layoutInfos: Map<Key, LayoutInfo>;
   protected layoutNodes: Map<Key, LayoutNode>;
   protected contentSize: Size;
-  collection: Collection<Node<T>>;
-  disabledKeys: Set<Key> = new Set();
-  allowDisabledKeyFocus: boolean = false;
-  isLoading: boolean;
+  protected collection: Collection<Node<T>>;
+  protected isLoading: boolean;
   protected lastWidth: number;
   protected lastCollection: Collection<Node<T>>;
   protected rootNodes: LayoutNode[];
-  protected collator: Intl.Collator;
   protected invalidateEverything: boolean;
   protected loaderHeight: number;
   protected placeholderHeight: number;
-  protected lastValidRect: Rect;
+  protected enableEmptyState: boolean;
+  /** The rectangle containing currently valid layout infos. */
   protected validRect: Rect;
+  /** The rectangle of requested layout infos so far. */
+  protected requestedRect: Rect;
 
   /**
    * Creates a new ListLayout with options. See the list of properties below for a description
@@ -93,17 +92,16 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
     this.forceSectionHeaders = options.forceSectionHeaders;
     this.padding = options.padding || 0;
     this.indentationForItem = options.indentationForItem;
-    this.collator = options.collator;
     this.loaderHeight = options.loaderHeight;
     this.placeholderHeight = options.placeholderHeight;
+    this.enableEmptyState = options.enableEmptyState || false;
     this.layoutInfos = new Map();
     this.layoutNodes = new Map();
     this.rootNodes = [];
     this.lastWidth = 0;
     this.lastCollection = null;
-    this.allowDisabledKeyFocus = options.allowDisabledKeyFocus;
-    this.lastValidRect = new Rect();
     this.validRect = new Rect();
+    this.requestedRect = new Rect();
     this.contentSize = new Size();
   }
 
@@ -146,14 +144,13 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
     return res;
   }
 
-  layoutIfNeeded(rect: Rect) {
+  protected layoutIfNeeded(rect: Rect) {
     if (!this.lastCollection) {
       return;
     }
 
-    if (!this.validRect.containsRect(rect)) {
-      this.lastValidRect = this.validRect;
-      this.validRect = this.validRect.union(rect);
+    if (!this.requestedRect.containsRect(rect)) {
+      this.requestedRect = this.requestedRect.union(rect);
       this.rootNodes = this.buildCollection();
     } else {
       // Ensure all of the persisted keys are available.
@@ -165,22 +162,21 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
     }
   }
 
-  ensureLayoutInfo(key: Key) {
+  private ensureLayoutInfo(key: Key) {
     // If the layout info wasn't found, it might be outside the bounds of the area that we've
     // computed layout for so far. This can happen when accessing a random key, e.g pressing Home/End.
     // Compute the full layout and try again.
-    if (!this.layoutInfos.has(key) && this.validRect.area < this.contentSize.area && this.lastCollection) {
-      this.lastValidRect = this.validRect;
-      this.validRect = new Rect(0, 0, Infinity, Infinity);
+    if (!this.layoutInfos.has(key) && this.requestedRect.area < this.contentSize.area && this.lastCollection) {
+      this.requestedRect = new Rect(0, 0, Infinity, Infinity);
       this.rootNodes = this.buildCollection();
-      this.validRect = new Rect(0, 0, this.contentSize.width, this.contentSize.height);
+      this.requestedRect = new Rect(0, 0, this.contentSize.width, this.contentSize.height);
       return true;
     }
 
     return false;
   }
 
-  isVisible(node: LayoutNode, rect: Rect) {
+  private isVisible(node: LayoutNode, rect: Rect) {
     return node.layoutInfo.rect.intersects(rect) || node.layoutInfo.isSticky || this.virtualizer.isPersistedKey(node.layoutInfo.key);
   }
 
@@ -198,8 +194,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
     // Otherwise we can reuse cached layout infos outside the current visible rect.
     this.invalidateEverything = this.shouldInvalidateEverything(invalidationContext);
     if (this.invalidateEverything) {
-      this.lastValidRect = this.validRect;
-      this.validRect = this.virtualizer.visibleRect.copy();
+      this.requestedRect = this.virtualizer.visibleRect.copy();
     }
 
     this.rootNodes = this.buildCollection();
@@ -221,9 +216,10 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
     this.lastWidth = this.virtualizer.visibleRect.width;
     this.lastCollection = this.collection;
     this.invalidateEverything = false;
+    this.validRect = this.requestedRect.copy();
   }
 
-  buildCollection(): LayoutNode[] {
+  protected buildCollection(): LayoutNode[] {
     let y = this.padding;
     let skipped = 0;
     let nodes = [];
@@ -231,17 +227,17 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
       let rowHeight = (this.rowHeight ?? this.estimatedRowHeight);
 
       // Skip rows before the valid rectangle unless they are already cached.
-      if (node.type === 'item' && y + rowHeight < this.validRect.y && !this.isValid(node, y)) {
+      if (node.type === 'item' && y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
         y += rowHeight;
         skipped++;
         continue;
       }
 
-      let layoutNode = this.buildChild(node, 0, y);
+      let layoutNode = this.buildChild(node, 0, y, null);
       y = layoutNode.layoutInfo.rect.maxY;
       nodes.push(layoutNode);
 
-      if (node.type === 'item' && y > this.validRect.maxY) {
+      if (node.type === 'item' && y > this.requestedRect.maxY) {
         y += (this.collection.size - (nodes.length + skipped)) * rowHeight;
         break;
       }
@@ -256,7 +252,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
       y = loader.rect.maxY;
     }
 
-    if (nodes.length === 0) {
+    if (nodes.length === 0 && this.enableEmptyState) {
       let rect = new Rect(0, y, this.virtualizer.visibleRect.width,
         this.placeholderHeight ?? this.virtualizer.visibleRect.height);
       let placeholder = new LayoutInfo('placeholder', 'placeholder', rect);
@@ -269,19 +265,19 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
     return nodes;
   }
 
-  isValid(node: Node<T>, y: number) {
+  protected isValid(node: Node<T>, y: number) {
     let cached = this.layoutNodes.get(node.key);
     return (
       !this.invalidateEverything &&
       cached &&
       cached.node === node &&
       y === (cached.header || cached.layoutInfo).rect.y &&
-      cached.layoutInfo.rect.intersects(this.lastValidRect) &&
-      cached.validRect.containsRect(cached.layoutInfo.rect.intersection(this.validRect))
+      cached.layoutInfo.rect.intersects(this.validRect) &&
+      cached.validRect.containsRect(cached.layoutInfo.rect.intersection(this.requestedRect))
     );
   }
 
-  buildChild(node: Node<T>, x: number, y: number): LayoutNode {
+  protected buildChild(node: Node<T>, x: number, y: number, parentKey: Key | null): LayoutNode {
     if (this.isValid(node, y)) {
       return this.layoutNodes.get(node.key);
     }
@@ -289,7 +285,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
     let layoutNode = this.buildNode(node, x, y);
     layoutNode.node = node;
 
-    layoutNode.layoutInfo.parentKey = node.parentKey ?? null;
+    layoutNode.layoutInfo.parentKey = parentKey ?? null;
     this.layoutInfos.set(layoutNode.layoutInfo.key, layoutNode.layoutInfo);
     if (layoutNode.header) {
       this.layoutInfos.set(layoutNode.header.key, layoutNode.header);
@@ -299,22 +295,22 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
     return layoutNode;
   }
 
-  buildNode(node: Node<T>, x: number, y: number): LayoutNode {
+  protected buildNode(node: Node<T>, x: number, y: number): LayoutNode {
     switch (node.type) {
       case 'section':
         return this.buildSection(node, x, y);
       case 'item':
         return this.buildItem(node, x, y);
       case 'header':
-        return this.buildHeader(node, x, y);
+        return this.buildSectionHeader(node, x, y);
     }
   }
 
-  buildSection(node: Node<T>, x: number, y: number): LayoutNode {
+  private buildSection(node: Node<T>, x: number, y: number): LayoutNode {
     let width = this.virtualizer.visibleRect.width;
     let header = null;
     if (node.rendered || this.forceSectionHeaders) {
-      let headerNode = this.buildHeader(node, x, y);
+      let headerNode = this.buildSectionHeader(node, x, y);
       header = headerNode.layoutInfo;
       header.key += ':header';
       header.parentKey = node.key;
@@ -331,17 +327,17 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
       let rowHeight = (this.rowHeight ?? this.estimatedRowHeight);
 
       // Skip rows before the valid rectangle unless they are already cached.
-      if (y + rowHeight < this.validRect.y && !this.isValid(node, y)) {
+      if (y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
         y += rowHeight;
         skipped++;
         continue;
       }
 
-      let layoutNode = this.buildChild(child, x, y);
+      let layoutNode = this.buildChild(child, x, y, layoutInfo.key);
       y = layoutNode.layoutInfo.rect.maxY;
       children.push(layoutNode);
 
-      if (y > this.validRect.maxY) {
+      if (y > this.requestedRect.maxY) {
         // Estimate the remaining height for rows that we don't need to layout right now.
         y += ([...getChildNodes(node, this.collection)].length - (children.length + skipped)) * rowHeight;
         break;
@@ -354,11 +350,11 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
       header,
       layoutInfo,
       children,
-      validRect: layoutInfo.rect.intersection(this.validRect)
+      validRect: layoutInfo.rect.intersection(this.requestedRect)
     };
   }
 
-  buildHeader(node: Node<T>, x: number, y: number): LayoutNode {
+  private buildSectionHeader(node: Node<T>, x: number, y: number): LayoutNode {
     let width = this.virtualizer.visibleRect.width;
     let rectHeight = this.headingHeight;
     let isEstimated = false;
@@ -366,7 +362,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
     // If no explicit height is available, use an estimated height.
     if (rectHeight == null) {
       // If a previous version of this layout info exists, reuse its height.
-      // Mark as estimated if the size of the overall collection view changed,
+      // Mark as estimated if the size of the overall virtualizer changed,
       // or the content of the item changed.
       let previousLayoutNode = this.layoutNodes.get(node.key);
       let previousLayoutInfo = previousLayoutNode?.header || previousLayoutNode?.layoutInfo;
@@ -391,11 +387,11 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
     return {
       layoutInfo: header,
       children: [],
-      validRect: header.rect.intersection(this.validRect)
+      validRect: header.rect.intersection(this.requestedRect)
     };
   }
 
-  buildItem(node: Node<T>, x: number, y: number): LayoutNode {
+  private buildItem(node: Node<T>, x: number, y: number): LayoutNode {
     let width = this.virtualizer.visibleRect.width;
     let rectHeight = this.rowHeight;
     let isEstimated = false;
@@ -403,7 +399,7 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
     // If no explicit height is available, use an estimated height.
     if (rectHeight == null) {
       // If a previous version of this layout info exists, reuse its height.
-      // Mark as estimated if the size of the overall collection view changed,
+      // Mark as estimated if the size of the overall virtualizer changed,
       // or the content of the item changed.
       let previousLayoutNode = this.layoutNodes.get(node.key);
       if (previousLayoutNode) {
@@ -448,6 +444,13 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
       newLayoutInfo.rect.height = size.height;
       this.layoutInfos.set(key, newLayoutInfo);
 
+      // Items after this layoutInfo will need to be repositioned to account for the new height.
+      // Adjust the validRect so that only items above remain valid.
+      this.validRect.height = Math.min(this.validRect.height, layoutInfo.rect.y - this.validRect.y);
+
+      // The requestedRect also needs to be adjusted to account for the height difference.
+      this.requestedRect.height += newLayoutInfo.rect.height - layoutInfo.rect.height;
+
       // Invalidate layout for this layout node and all parents
       this.updateLayoutNode(key, layoutInfo, newLayoutInfo);
 
@@ -463,11 +466,11 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
     return false;
   }
 
-  updateLayoutNode(key: Key, oldLayoutInfo: LayoutInfo, newLayoutInfo: LayoutInfo) {
+  private updateLayoutNode(key: Key, oldLayoutInfo: LayoutInfo, newLayoutInfo: LayoutInfo) {
     let n = this.layoutNodes.get(key);
     if (n) {
-      // Invalidate by reseting validRect.
-      n.validRect = new Rect();
+      // Invalidate by intersecting the validRect of this node with the overall validRect.
+      n.validRect = n.validRect.intersection(this.validRect);
 
       // Replace layout info in LayoutNode
       if (n.header === oldLayoutInfo) {
@@ -482,116 +485,6 @@ export class ListLayout<T> extends Layout<Node<T>, ListLayoutProps> implements K
     return this.contentSize;
   }
 
-  getKeyAbove(key: Key): Key | null {
-    let collection = this.collection;
-
-    key = collection.getKeyBefore(key);
-    while (key != null) {
-      let item = collection.getItem(key);
-      if (item.type === 'item' && (this.allowDisabledKeyFocus || !this.disabledKeys.has(item.key))) {
-        return key;
-      }
-
-      key = collection.getKeyBefore(key);
-    }
-  }
-
-  getKeyBelow(key: Key): Key | null {
-    let collection = this.collection;
-
-    key = collection.getKeyAfter(key);
-    while (key != null) {
-      let item = collection.getItem(key);
-      if (item.type === 'item' && (this.allowDisabledKeyFocus || !this.disabledKeys.has(item.key))) {
-        return key;
-      }
-
-      key = collection.getKeyAfter(key);
-    }
-  }
-
-  getKeyPageAbove(key: Key): Key | null {
-    let layoutInfo = this.getLayoutInfo(key);
-
-    if (layoutInfo) {
-      let pageY = Math.max(0, layoutInfo.rect.y + layoutInfo.rect.height - this.virtualizer.visibleRect.height);
-      while (layoutInfo && layoutInfo.rect.y > pageY) {
-        let keyAbove = this.getKeyAbove(layoutInfo.key);
-        layoutInfo = this.getLayoutInfo(keyAbove);
-      }
-
-      if (layoutInfo) {
-        return layoutInfo.key;
-      }
-    }
-
-    return this.getFirstKey();
-  }
-
-  getKeyPageBelow(key: Key): Key | null {
-    let layoutInfo = this.getLayoutInfo(key != null ? key : this.getFirstKey());
-
-    if (layoutInfo) {
-      let pageY = Math.min(this.virtualizer.contentSize.height, layoutInfo.rect.y - layoutInfo.rect.height + this.virtualizer.visibleRect.height);
-      while (layoutInfo && layoutInfo.rect.y < pageY) {
-        let keyBelow = this.getKeyBelow(layoutInfo.key);
-        layoutInfo = this.getLayoutInfo(keyBelow);
-      }
-
-      if (layoutInfo) {
-        return layoutInfo.key;
-      }
-    }
-
-    return this.getLastKey();
-  }
-
-  getFirstKey(): Key | null {
-    let collection = this.collection;
-    let key = collection.getFirstKey();
-    while (key != null) {
-      let item = collection.getItem(key);
-      if (item.type === 'item' && (this.allowDisabledKeyFocus || !this.disabledKeys.has(item.key))) {
-        return key;
-      }
-
-      key = collection.getKeyAfter(key);
-    }
-  }
-
-  getLastKey(): Key | null {
-    let collection = this.collection;
-    let key = collection.getLastKey();
-    while (key != null) {
-      let item = collection.getItem(key);
-      if (item.type === 'item' && (this.allowDisabledKeyFocus || !this.disabledKeys.has(item.key))) {
-        return key;
-      }
-
-      key = collection.getKeyBefore(key);
-    }
-  }
-
-  getKeyForSearch(search: string, fromKey?: Key): Key | null {
-    if (!this.collator) {
-      return null;
-    }
-
-    let collection = this.collection;
-    let key = fromKey || this.getFirstKey();
-    while (key != null) {
-      let item = collection.getItem(key);
-      let substring = item.textValue.slice(0, search.length);
-      if (item.textValue && this.collator.compare(substring, search) === 0) {
-        return key;
-      }
-
-      key = this.getKeyBelow(key);
-    }
-
-    return null;
-  }
-
   getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
     x += this.virtualizer.visibleRect.x;
     y += this.virtualizer.visibleRect.y;