fix: fix placholder key (#514)

naver · Sep 2, 2022 · af62a98 · af62a98
1 parent 78043ad
commit af62a98
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 7 deletions.
diff --git a/packages/infinitegrid/src/GroupManager.ts b/packages/infinitegrid/src/GroupManager.ts
@@ -477,7 +477,7 @@ export class GroupManager extends Grid<GroupManagerOptions> {
   public insertPlaceholders(
     direction: "start" | "end",
     items: number | InfiniteGridItemStatus[],
-    groupKey: string | number = makeKey(this.groupKeys),
+    groupKey: string | number = makeKey(this.groupKeys, "virtual_"),
   ) {
 
     let infos: InfiniteGridItemInfo[] = [];
@@ -634,7 +634,7 @@ export class GroupManager extends Grid<GroupManagerOptions> {
       let key = info.key!;
 
       if (info.key == null) {
-        key = makeKey(nextItemKeys);
+        key = makeKey(nextItemKeys, info.type === ITEM_TYPE.VIRTUAL ? "virtual_" : "");
       }
       let item = nextItemKeys[key];
 

diff --git a/packages/infinitegrid/src/Infinite.ts b/packages/infinitegrid/src/Infinite.ts
@@ -185,7 +185,7 @@ export class Infinite extends Component<InfiniteEvents> {
 
         if (nextVisibleItems[endVirtualItemIndex]) {
           this.trigger("requestPrepend", {
-            key: nextVisibleItems[realItemIndex].key,
+            key: realItemIndex > -1 ? nextVisibleItems[realItemIndex].key : undefined,
             nextKey: nextVisibleItems[endVirtualItemIndex].key,
             nextKeys: nextVisibleItems.slice(0, endVirtualItemIndex + 1).map((item) => item.key),
             isVirtual: true,
@@ -197,7 +197,7 @@ export class Infinite extends Component<InfiniteEvents> {
 
         if (nextVisibleItems[startVirtualItemIndex]) {
           this.trigger("requestAppend", {
-            key: nextVisibleItems[realItemIndex].key,
+            key: realItemIndex > -1 ? nextVisibleItems[realItemIndex].key : undefined,
             nextKey: nextVisibleItems[startVirtualItemIndex].key,
             nextKeys: nextVisibleItems.slice(startVirtualItemIndex).map((item) => item.key),
             isVirtual: true,

diff --git a/packages/infinitegrid/src/utils.ts b/packages/infinitegrid/src/utils.ts
@@ -314,11 +314,14 @@ export function InfiniteGridGetterSetter(component: {
   }
 }
 
-export function makeKey(registeredKeys: Record<string, any>) {
+export function makeKey(
+  registeredKeys: Record<string, any>,
+  prefix = "",
+) {
   let index = 0;
   // eslint-disable-next-line no-constant-condition
   while (true) {
-    const key = `infinitegrid_${index++}`;
+    const key = `infinitegrid_${prefix}${index++}`;
 
     if (!(key in registeredKeys)) {
       return key;
@@ -382,6 +385,20 @@ export function toArray<T>(nodes: { length: number, [key: number]: T }): T[] {
 }
 
 
+export function find<T>(arr: T[], callback: (value: T, index: number) => boolean): T | null {
+  const length = arr.length;
+
+  for (let i = 0; i < length; ++i) {
+    const value = arr[i];
+
+    if (callback(value, i)) {
+      return value;
+    }
+  }
+
+  return null;
+}
+
 export function findIndex<T>(arr: T[], callback: (value: T, index: number) => boolean) {
   const length = arr.length;
   for (let i = 0; i < length; ++i) {
@@ -453,7 +470,7 @@ export function filterVirtuals<T extends InfiniteGridItem | InfiniteGridGroup>(
   includePlaceholders?: boolean
 ): T[] {
   if (includePlaceholders) {
-    return items;
+    return [...items];
   } else {
     return items.filter((item) => item.type !== ITEM_TYPE.VIRTUAL);
   }

diff --git a/packages/infinitegrid/test/unit/InfiniteGrid.spec.ts b/packages/infinitegrid/test/unit/InfiniteGrid.spec.ts
@@ -1290,6 +1290,40 @@ describe("test InfiniteGrid", () => {
         expect(ig!.getVisibleItems(true).length).to.be.equals(9);
         expect(ig!.getVisibleItems().length).to.be.equals(6);
       });
+      it(`should check if the placeholder is replaced when appending after adding the placeholder with no keys`, async () => {
+        // Given
+        // set place holder
+        ig!.setPlaceholder({
+          html: `<div class="placeholder"></div>`,
+        });
+        ig!.renderItems();
+
+        // When
+        // append placeholders
+        ig!.appendPlaceholders(3, 1);
+        await waitEvent(ig!, "renderComplete");
+        // placeholders
+        const length1 = ig!.getRenderingItems().length;
+
+        ig!.append([0, 1, 2].map((child) => {
+          return `<div style="height: 100px">${child}</div>`;
+        }), 1);
+
+        // items with placeholders
+        const length2 = ig!.getRenderingItems().length;
+
+        await waitEvent(ig!, "renderComplete");
+
+        // When the items are rendered, the placeholder is removed.
+        const length3 = ig!.getRenderingItems().length;
+        await waitEvent(ig!, "renderComplete");
+
+        // then
+        expect(length1).to.be.equals(3);
+        expect(length2).to.be.equals(6);
+        expect(length3).to.be.equals(3);
+        expect(ig!.getItems(true).map((item) => item.cssContentPos)).to.be.deep.equals([0, 100, 200]);
+      });
       it(`should check if the placeholder is replaced when appending after adding the placeholder`, async () => {
         // Given
         ig!.append([0, 1, 2].map((child) => {