@react-stately/layout - npm Package Compare versions

Comparing version 3.1.0 to 3.1.1

dist/main.js

@@ -47,3 +47,3 @@ var {
     this.collator = void 0;
-    this.cache = new WeakMap();
+    this.invalidateEverything = void 0;
     this.rowHeight = options.rowHeight;
@@ -97,6 +97,3 @@ this.estimatedRowHeight = options.estimatedRowHeight;
     // In this case, we need to recalculate the entire layout.
-    if (invalidationContext.sizeChanged) {
-      this.cache = new WeakMap();
-    }
-
+    this.invalidateEverything = invalidationContext.sizeChanged;
     this.collection = this.virtualizer.collection;
@@ -133,5 +130,5 @@ this.rootNodes = this.buildCollection();
   buildChild(node, x, y) {
-    let cached = this.cache.get(node);
+    let cached = this.layoutNodes.get(node.key);
 
-    if (cached && y === (cached.header || cached.layoutInfo).rect.y) {
+    if (!this.invalidateEverything && cached && cached.node === node && y === (cached.header || cached.layoutInfo).rect.y) {
       return cached;
@@ -141,2 +138,3 @@ }
     let layoutNode = this.buildNode(node, x, y);
+    layoutNode.node = node;
     layoutNode.layoutInfo.parentKey = node.parentKey || null;
@@ -150,5 +148,3 @@ this.layoutInfos.set(layoutNode.layoutInfo.key, layoutNode.layoutInfo);
 
-    let prev = this.layoutNodes.get(node.key);
-
-    if (prev) {
+    if (cached) {
       let childKeys = new Set();
@@ -162,4 +158,4 @@
 
-      if (prev.children) {
-        for (let child of prev.children) {
+      if (cached.children) {
+        for (let child of cached.children) {
           if (!childKeys.has(child.layoutInfo.key)) {
@@ -173,3 +169,2 @@ this.removeLayoutNode(child);
     this.layoutNodes.set(node.key, layoutNode);
-    this.cache.set(node, layoutNode);
     return layoutNode;
@@ -298,9 +293,12 @@ }
     if (layoutInfo.rect.height !== size.height) {
-      layoutInfo.rect.height = size.height; // Invalidate layout for this layout node and all parents
+      // Copy layout info rather than mutating so that later caches are invalidated.
+      let newLayoutInfo = layoutInfo.copy();
+      newLayoutInfo.rect.height = size.height;
+      this.layoutInfos.set(key, newLayoutInfo); // Invalidate layout for this layout node and all parents
 
-      this.cache.delete(this.collection.getItem(key));
+      this.updateLayoutNode(key, layoutInfo, newLayoutInfo);
       let node = this.collection.getItem(layoutInfo.parentKey);
 
       while (node) {
-        this.cache.delete(this.collection.getItem(node.key));
+        this.updateLayoutNode(node.key, layoutInfo, newLayoutInfo);
         node = this.collection.getItem(node.parentKey);
@@ -315,2 +313,17 @@ }
 
+  updateLayoutNode(key, oldLayoutInfo, newLayoutInfo) {
+    let n = this.layoutNodes.get(key);
+
+    if (n) {
+      // Invalidate by clearing node.
+      n.node = null; // Replace layout info in LayoutNode
+
+      if (n.header === oldLayoutInfo) {
+        n.header = newLayoutInfo;
+      } else if (n.layoutInfo === oldLayoutInfo) {
+        n.layoutInfo = newLayoutInfo;
+      }
+    }
+  }
+
   getContentSize() {
@@ -484,3 +497,4 @@ return this.contentSize;
     if (!this.lastCollection || this.collection.columns.length !== this.lastCollection.columns.length || this.collection.columns.some((c, i) => c.key !== this.lastCollection.columns[i].key)) {
-      this.cache = new WeakMap();
+      // Invalidate everything in this layout pass. Will be reset in ListLayout on the next pass.
+      this.invalidateEverything = true;
     }
@@ -487,0 +501,0 @@

dist/module.js

@@ -41,3 +41,3 @@ import { Layout, LayoutInfo, Rect, Size } from "@react-stately/virtualizer";
     this.collator = void 0;
-    this.cache = new WeakMap();
+    this.invalidateEverything = void 0;
     this.rowHeight = options.rowHeight;
@@ -91,6 +91,3 @@ this.estimatedRowHeight = options.estimatedRowHeight;
     // In this case, we need to recalculate the entire layout.
-    if (invalidationContext.sizeChanged) {
-      this.cache = new WeakMap();
-    }
-
+    this.invalidateEverything = invalidationContext.sizeChanged;
     this.collection = this.virtualizer.collection;
@@ -127,5 +124,5 @@ this.rootNodes = this.buildCollection();
   buildChild(node, x, y) {
-    let cached = this.cache.get(node);
+    let cached = this.layoutNodes.get(node.key);
 
-    if (cached && y === (cached.header || cached.layoutInfo).rect.y) {
+    if (!this.invalidateEverything && cached && cached.node === node && y === (cached.header || cached.layoutInfo).rect.y) {
       return cached;
@@ -135,2 +132,3 @@ }
     let layoutNode = this.buildNode(node, x, y);
+    layoutNode.node = node;
     layoutNode.layoutInfo.parentKey = node.parentKey || null;
@@ -144,5 +142,3 @@ this.layoutInfos.set(layoutNode.layoutInfo.key, layoutNode.layoutInfo);
 
-    let prev = this.layoutNodes.get(node.key);
-
-    if (prev) {
+    if (cached) {
       let childKeys = new Set();
@@ -156,4 +152,4 @@
 
-      if (prev.children) {
-        for (let child of prev.children) {
+      if (cached.children) {
+        for (let child of cached.children) {
           if (!childKeys.has(child.layoutInfo.key)) {
@@ -167,3 +163,2 @@ this.removeLayoutNode(child);
     this.layoutNodes.set(node.key, layoutNode);
-    this.cache.set(node, layoutNode);
     return layoutNode;
@@ -292,9 +287,12 @@ }
     if (layoutInfo.rect.height !== size.height) {
-      layoutInfo.rect.height = size.height; // Invalidate layout for this layout node and all parents
+      // Copy layout info rather than mutating so that later caches are invalidated.
+      let newLayoutInfo = layoutInfo.copy();
+      newLayoutInfo.rect.height = size.height;
+      this.layoutInfos.set(key, newLayoutInfo); // Invalidate layout for this layout node and all parents
 
-      this.cache.delete(this.collection.getItem(key));
+      this.updateLayoutNode(key, layoutInfo, newLayoutInfo);
       let node = this.collection.getItem(layoutInfo.parentKey);
 
       while (node) {
-        this.cache.delete(this.collection.getItem(node.key));
+        this.updateLayoutNode(node.key, layoutInfo, newLayoutInfo);
         node = this.collection.getItem(node.parentKey);
@@ -309,2 +307,17 @@ }
 
+  updateLayoutNode(key, oldLayoutInfo, newLayoutInfo) {
+    let n = this.layoutNodes.get(key);
+
+    if (n) {
+      // Invalidate by clearing node.
+      n.node = null; // Replace layout info in LayoutNode
+
+      if (n.header === oldLayoutInfo) {
+        n.header = newLayoutInfo;
+      } else if (n.layoutInfo === oldLayoutInfo) {
+        n.layoutInfo = newLayoutInfo;
+      }
+    }
+  }
+
   getContentSize() {
@@ -475,3 +488,4 @@ return this.contentSize;
     if (!this.lastCollection || this.collection.columns.length !== this.lastCollection.columns.length || this.collection.columns.some((c, i) => c.key !== this.lastCollection.columns[i].key)) {
-      this.cache = new WeakMap();
+      // Invalidate everything in this layout pass. Will be reset in ListLayout on the next pass.
+      this.invalidateEverything = true;
     }
@@ -478,0 +492,0 @@

dist/types.d.ts

@@ -16,2 +16,3 @@ import { Collection, KeyboardDelegate, Node } from "@react-types/shared";
 export interface LayoutNode {
+    node?: Node<unknown>;
     layoutInfo: LayoutInfo;
@@ -48,3 +49,3 @@ header?: LayoutInfo;
     protected collator: Intl.Collator;
-    protected cache: WeakMap<Node<T>, LayoutNode>;
+    protected invalidateEverything: boolean;
     /**
@@ -66,2 +67,3 @@ * Creates a new ListLayout with options. See the list of properties below for a description
     updateItemSize(key: Key, size: Size): boolean;
+    updateLayoutNode(key: Key, oldLayoutInfo: LayoutInfo, newLayoutInfo: LayoutInfo): void;
     getContentSize(): Size;
@@ -68,0 +70,0 @@ getKeyAbove(key: Key): string | number;

package.json

 {
   "name": "@react-stately/layout",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Spectrum UI components in React",
@@ -21,5 +21,5 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-stately/collections": "^3.1.0",
+    "@react-stately/collections": "^3.2.0",
     "@react-stately/virtualizer": "^3.1.0",
-    "@react-types/shared": "^3.1.0",
+    "@react-types/shared": "^3.2.0",
     "@react-types/table": "3.0.0-rc.4"
@@ -33,3 +33,3 @@ },
   },
-  "gitHead": "211099972fe75ee581892efd01a7f89dfb9cdf69"
+  "gitHead": "661f0f2e3b8648a75aae83043267954700059fe0"
 }

src/ListLayout.ts

@@ -31,2 +31,3 @@ /*
 export interface LayoutNode {
+  node?: Node<unknown>,
   layoutInfo: LayoutInfo,
@@ -66,3 +67,3 @@ header?: LayoutInfo,
   protected collator: Intl.Collator;
-  protected cache: WeakMap<Node<T>, LayoutNode> = new WeakMap();
+  protected invalidateEverything: boolean;
 
@@ -122,5 +123,3 @@ /**
     // In this case, we need to recalculate the entire layout.
-    if (invalidationContext.sizeChanged) {
-      this.cache = new WeakMap();
-    }
+    this.invalidateEverything = invalidationContext.sizeChanged;
 
@@ -156,4 +155,4 @@ this.collection = this.virtualizer.collection;
   buildChild(node: Node<T>, x: number, y: number): LayoutNode {
-    let cached = this.cache.get(node);
-    if (cached && y === (cached.header || cached.layoutInfo).rect.y) {
+    let cached = this.layoutNodes.get(node.key);
+    if (!this.invalidateEverything && cached && cached.node === node && y === (cached.header || cached.layoutInfo).rect.y) {
       return cached;
@@ -163,2 +162,3 @@ }
     let layoutNode = this.buildNode(node, x, y);
+    layoutNode.node = node;
 
@@ -172,4 +172,3 @@ layoutNode.layoutInfo.parentKey = node.parentKey || null;
     // Remove deleted child layout nodes from key mapping.
-    let prev = this.layoutNodes.get(node.key);
-    if (prev) {
+    if (cached) {
       let childKeys = new Set();
@@ -182,4 +181,4 @@ if (layoutNode.children) {
 
-      if (prev.children) {
-        for (let child of prev.children) {
+      if (cached.children) {
+        for (let child of cached.children) {
           if (!childKeys.has(child.layoutInfo.key)) {
@@ -193,3 +192,2 @@ this.removeLayoutNode(child);
     this.layoutNodes.set(node.key, layoutNode);
-    this.cache.set(node, layoutNode);
     return layoutNode;
@@ -318,10 +316,13 @@ }
     if (layoutInfo.rect.height !== size.height) {
-      layoutInfo.rect.height = size.height;
+      // Copy layout info rather than mutating so that later caches are invalidated.
+      let newLayoutInfo = layoutInfo.copy();
+      newLayoutInfo.rect.height = size.height;
+      this.layoutInfos.set(key, newLayoutInfo);
 
       // Invalidate layout for this layout node and all parents
-      this.cache.delete(this.collection.getItem(key));
+      this.updateLayoutNode(key, layoutInfo, newLayoutInfo);
 
       let node = this.collection.getItem(layoutInfo.parentKey);
       while (node) {
-        this.cache.delete(this.collection.getItem(node.key));
+        this.updateLayoutNode(node.key, layoutInfo, newLayoutInfo);
         node = this.collection.getItem(node.parentKey);
@@ -336,2 +337,17 @@ }
 
+  updateLayoutNode(key: Key, oldLayoutInfo: LayoutInfo, newLayoutInfo: LayoutInfo) {
+    let n = this.layoutNodes.get(key);
+    if (n) {
+      // Invalidate by clearing node.
+      n.node = null;
+
+      // Replace layout info in LayoutNode
+      if (n.header === oldLayoutInfo) {
+        n.header = newLayoutInfo;
+      } else if (n.layoutInfo === oldLayoutInfo) {
+        n.layoutInfo = newLayoutInfo;
+      }
+    }
+  }
+
   getContentSize() {
@@ -338,0 +354,0 @@ return this.contentSize;

src/TableLayout.ts

@@ -31,3 +31,4 @@ /*
     ) {
-      this.cache = new WeakMap();
+      // Invalidate everything in this layout pass. Will be reset in ListLayout on the next pass.
+      this.invalidateEverything = true;
     }
@@ -34,0 +35,0 @@

No alert changes

Improved metrics

Total package byte prevSize

221704

increased by2.15%

Lines of code

2314

increased by1.89%

Dependency changes

• Updated@react-stately/collections@^3.2.0

• Updated@react-types/shared@^3.2.0