fix: fix sync element (#551)

* fix: fix sync element * chore: bump @egjs/grid
naver · Aug 4, 2023 · f663673 · f663673
1 parent e63f1e8
commit f663673
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 12 deletions.
diff --git a/packages/infinitegrid/package.json b/packages/infinitegrid/package.json
@@ -122,7 +122,7 @@
 		"@cfcs/core": "^0.0.5",
 		"@egjs/children-differ": "^1.0.1",
 		"@egjs/component": "^3.0.0",
-		"@egjs/grid": "^1.14.1",
+		"@egjs/grid": "^1.14.2",
 		"@egjs/list-differ": "^1.0.0"
 	}
 }
diff --git a/packages/infinitegrid/src/GroupManager.ts b/packages/infinitegrid/src/GroupManager.ts
@@ -644,6 +644,9 @@ export class GroupManager extends Grid<GroupManagerOptions> {
         if (info.groupKey != null) {
           prevItem.groupKey = info.groupKey!;
         }
+        if (info.element) {
+          prevItem.element = info.element;
+        }
         nextItemKeys[key] = prevItem;
       }
     });
@@ -664,6 +667,9 @@ export class GroupManager extends Grid<GroupManagerOptions> {
           if (info.data) {
             item.data = info.data;
           }
+          if (info.element) {
+            item.element = info.element;
+          }
         } else {
           item = new InfiniteGridItem(horizontal, {
             ...info,

diff --git a/packages/infinitegrid/src/InfiniteGrid.ts b/packages/infinitegrid/src/InfiniteGrid.ts
@@ -693,12 +693,20 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
     this.setCursors(e.nextStartCursor, e.nextEndCursor);
   }
   private _onRendererUpdated = (e: OnRendererUpdated<GridRendererItem>): void => {
+    const renderedItems = e.items;
+
+    renderedItems.forEach((item) => {
+      // set grid element
+      const gridItem = item.orgItem;
+
+      gridItem.element = item.element as HTMLElement;
+    });
+
     if (!e.isChanged) {
       this._checkEndLoading();
       this._scroll();
       return;
     }
-    const renderedItems = e.items;
 
     const {
       added,
@@ -715,12 +723,6 @@ class InfiniteGrid<Options extends InfiniteGridOptions = InfiniteGridOptions> ex
       }
     });
 
-    renderedItems.forEach((item) => {
-      // set grid element
-      const gridItem = item.orgItem;
-
-      gridItem.element = item.element as HTMLElement;
-    });
 
     const horizontal = this.options.horizontal;
     const addedItems = added.map((index) => {

diff --git a/packages/infinitegrid/test/unit/cfcs.spec.ts b/packages/infinitegrid/test/unit/cfcs.spec.ts
@@ -133,6 +133,55 @@ describe("test cfcs", () => {
       expect(item.element).to.be.equals(item2.element);
     });
   });
+  it("should check if the element is updated even if the key is the same", async () => {
+    // Given
+    const firstItems = [0, 1, 2, 3, 4, 5].map((i) => {
+      return {
+        key: i,
+        element: document.createElement("div"),
+      };
+    });
+    container!.innerHTML = `
+    <div class="wrapper" style="width: 100%; height: 500px;"></div>
+    `;
+    const wrapper = container!.querySelector<HTMLElement>(".wrapper")!;
+    ig = new InfiniteGrid<InfiniteGridOptions>(wrapper, {
+      gridConstructor: SampleGrid,
+      container: true,
+    });
+
+    // first render
+    ig.syncItems(firstItems);
+
+    await waitEvent(ig!, "renderComplete");
+
+    // When
+    // second render with same key
+    const nextItems = [0, 1, 2, 3, 4, 5].map((i) => {
+      return {
+        key: i,
+        element: document.createElement("li"),
+      };
+    });
+    ig.getContainerElement().innerHTML = "";
+
+    nextItems.forEach((item) => {
+      ig!.getContainerElement().appendChild(item.element);
+    });
+    ig.syncItems(nextItems);
+    ig.renderItems();
+
+    await waitEvent(ig!, "renderComplete");
+
+    const renderingItems2 = ig.getRenderingItems();
+
+    // Then
+    nextItems.forEach((item, i) => {
+      const item2 = renderingItems2[i];
+
+      expect(item.element).to.be.equals(item2.element);
+    });
+  });
   it("should check if rendering items exists with placeholders", async () => {
     // Given
     container!.innerHTML = `

diff --git a/yarn.lock b/yarn.lock
@@ -2495,10 +2495,10 @@
     "@egjs/imready" "^1.3.1"
     "@egjs/list-differ" "^1.0.1"
 
-"@egjs/grid@^1.14.1":
-  version "1.14.1"
-  resolved "https://registry.npmjs.org/@egjs/grid/-/grid-1.14.1.tgz#83ca3f16b86b6f89ec33dd424d8341831e210792"
-  integrity sha512-xICx7COEqVdcfsEYnh22otobqOBqb/69NooDF6W4Tg35SS3Tans9yrgv0a4J6/dEykVcH6kdDEy53gPxl9wIUQ==
+"@egjs/grid@^1.14.2":
+  version "1.14.2"
+  resolved "https://registry.npmjs.org/@egjs/grid/-/grid-1.14.2.tgz#b92c91298a808c7549219904ed2396361c4cc1b8"
+  integrity sha512-MOIL6zdFmEFYVmlsrPr8eNPybDZqRKzJo1sceFiamAvxWJ+5yG17tVRP9zMSeXogjsShWhNUKqoPOUC4rClFAQ==
   dependencies:
     "@egjs/children-differ" "^1.0.1"
     "@egjs/component" "^3.0.0"