fix: should update elements' position's height after resized in a short duration (#106)

Co-authored-by: weilingfeng <weilingfeng@tezgin.com>

Author: Dimitri-WEI-Lingfeng

src/use-resize-observer.test.ts

@@ -0,0 +1,87 @@
+import "resize-observer-polyfill";
+import { elementsCache } from "./elements-cache";
+import { createPositioner } from "./use-positioner";
+import { createResizeObserver } from "./use-resize-observer";
+
+// mock requestAnimationFrame
+// https://stackoverflow.com/questions/61593774/how-do-i-test-code-that-uses-requestanimationframe-in-jest
+beforeEach(() => {
+  jest.useFakeTimers();
+
+  let count = 0;
+  jest
+    .spyOn(window, "requestAnimationFrame")
+    .mockImplementation(
+      (cb: any) => setTimeout(() => cb(100 * ++count), 100) as any as number
+    );
+});
+
+afterEach(() => {
+  window.requestAnimationFrame.mockRestore();
+  jest.clearAllTimers();
+});
+
+jest.mock("resize-observer-polyfill", () => {
+  class ResizeObserver {
+    els = [];
+    callback: any;
+    constructor(callback) {
+      this.callback = callback;
+    }
+    observe(el) {
+      this.els.push(el);
+    }
+    unobserve() {
+      // do nothing
+    }
+    disconnect() {}
+
+    resize(index: number, height: number) {
+      this.els[index].offsetHeight = height;
+      this.callback(
+        this.els.map((el) => ({
+          target: el,
+        }))
+      );
+    }
+  }
+  window.ResizeObserver = ResizeObserver;
+  return {
+    __esModule: true,
+    default: ResizeObserver,
+  };
+});
+
+describe("createResizeObserver", () => {
+  it("should update elements' position's height after resized in a short duration", async () => {
+    const els = [
+      { offsetHeight: 100 },
+      { offsetHeight: 100 },
+      { offsetHeight: 100 },
+      { offsetHeight: 100 },
+      { offsetHeight: 100 },
+    ];
+
+    const positioner = createPositioner(5, 100);
+
+    els.forEach((el, i) => {
+      elementsCache.set(el, i);
+      positioner.set(i, el.offsetHeight);
+    });
+
+    const observer = createResizeObserver(positioner, () => {});
+    els.forEach((el) => {
+      observer.observe(el);
+    });
+
+    for (let i = 0; i < 5; i++) {
+      observer.resize(i, 200);
+    }
+
+    await jest.runAllTimers();
+
+    for (let i = 0; i < 5; i++) {
+      expect(positioner.get(i).height).toBe(200);
+    }
+  });
+});

src/use-resize-observer.ts

@@ -21,6 +21,10 @@ export function useResizeObserver(positioner: Positioner) {
   return resizeObserver;
 }
 
+const _handlerForType = rafSchd((target: HTMLElement) => {});
+
+type IHandler = typeof _handlerForType;
+
 /**
  * Creates a resize observer that fires an `updater` callback whenever the height of
  * one or many cells change. The `useResizeObserver()` hook is using this under the hood.
@@ -33,33 +37,48 @@ export const createResizeObserver = trieMemoize(
   // TODO: figure out a way to test this
   /* istanbul ignore next */
   (positioner: Positioner, updater: (updates: number[]) => void) => {
-    const handleEntries = rafSchd(((entries) => {
-      const updates: number[] = [];
-      let i = 0;
-
-      for (; i < entries.length; i++) {
-        const entry = entries[i];
-        const height = (entry.target as HTMLElement).offsetHeight;
-
-        if (height > 0) {
-          const index = elementsCache.get(entry.target);
-
-          if (index !== void 0) {
-            const position = positioner.get(index);
-
-            if (position !== void 0 && height !== position.height)
-              updates.push(index, height);
-          }
-        }
-      }
+    const updates: number[] = [];
 
+    const update = rafSchd(() => {
       if (updates.length > 0) {
         // Updates the size/positions of the cell with the resize
         // observer updates
         positioner.update(updates);
         updater(updates);
       }
-    }) as ResizeObserverCallback);
+      updates.length = 0;
+    });
+
+    const commonHandler = (target: HTMLElement) => {
+      const height = target.offsetHeight;
+      if (height > 0) {
+        const index = elementsCache.get(target);
+        if (index !== void 0) {
+          const position = positioner.get(index);
+          if (position !== void 0 && height !== position.height)
+            updates.push(index, height);
+        }
+      }
+      update();
+    };
+
+    const handlers = new Map<number, IHandler>();
+    const handleEntries: ResizeObserverCallback = (entries) => {
+      let i = 0;
+
+      for (; i < entries.length; i++) {
+        const entry = entries[i];
+        const index = elementsCache.get(entry.target);
+
+        if (index === void 0) continue;
+        let handler = handlers.get(index);
+        if (!handler) {
+          handler = rafSchd(commonHandler);
+          handlers.set(index, handler);
+        }
+        handler(entry.target as HTMLElement);
+      }
+    };
 
     const ro = new ResizeObserver(handleEntries);
     // Overrides the original disconnect to include cancelling handling the entries.
@@ -68,7 +87,9 @@ export const createResizeObserver = trieMemoize(
     const disconnect = ro.disconnect.bind(ro);
     ro.disconnect = () => {
       disconnect();
-      handleEntries.cancel();
+      handlers.forEach((handler) => {
+        handler.cancel();
+      });
     };
 
     return ro;