Merge pull request #67 from easyops-cn/steve/fix-resize-entry

fix(): fix resize entry in old Firefox

Author: weareoutman

bricks/form/src/textarea/index.spec.tsx

@@ -185,11 +185,13 @@ describe("eo-textarea", () => {
     );
 
     expect(requestAnimationFrame).toBeCalledTimes(1);
+    const target = element.shadowRoot?.querySelector("eo-form-item");
 
     act(() => {
       observerCallback?.(
         [
           {
+            target,
             contentBoxSize: [{ inlineSize: 300, blockSize: 100 }],
           } as any,
         ],
@@ -202,6 +204,7 @@ describe("eo-textarea", () => {
       observerCallback?.(
         [
           {
+            target,
             contentBoxSize: [{ inlineSize: 300, blockSize: 120 }],
           } as any,
         ],
@@ -210,10 +213,25 @@ describe("eo-textarea", () => {
     });
     expect(requestAnimationFrame).toBeCalledTimes(1);
 
+    // Target not matched.
     act(() => {
       observerCallback?.(
         [
           {
+            target: null,
+            contentBoxSize: [{ inlineSize: 320, blockSize: 120 }],
+          } as any,
+        ],
+        null!
+      );
+    });
+    expect(requestAnimationFrame).toBeCalledTimes(1);
+
+    act(() => {
+      observerCallback?.(
+        [
+          {
+            target,
             contentBoxSize: [{ inlineSize: 320, blockSize: 120 }],
           } as any,
         ],

bricks/form/src/textarea/index.tsx

@@ -282,15 +282,25 @@ export const TextareaComponent = forwardRef<
     }
     let previousInlineSize: number | undefined;
     const observer = new ResizeObserver((entries) => {
-      const currentInlineSize = entries[0]?.contentBoxSize[0]?.inlineSize;
-      if (
-        currentInlineSize !== undefined &&
-        currentInlineSize !== previousInlineSize
-      ) {
-        const isInitial = !previousInlineSize;
-        previousInlineSize = currentInlineSize;
-        if (!isInitial) {
-          requestAnimationFrame(setAutoSize);
+      for (const entry of entries) {
+        if (entry.target === container) {
+          // istanbul ignore next: compatibility
+          const currentInlineSize = entry.contentBoxSize
+            ? entry.contentBoxSize[0]
+              ? entry.contentBoxSize[0].inlineSize
+              : (entry.contentBoxSize as unknown as ResizeObserverSize)
+                  .inlineSize
+            : entry.contentRect.width;
+          if (
+            currentInlineSize !== undefined &&
+            currentInlineSize !== previousInlineSize
+          ) {
+            const isInitial = !previousInlineSize;
+            previousInlineSize = currentInlineSize;
+            if (!isInitial) {
+              requestAnimationFrame(setAutoSize);
+            }
+          }
         }
       }
     });

bricks/mini-chart/src/mini-line-chart/index.tsx

@@ -178,16 +178,22 @@ export function MiniLineChartComponent({
       for (const entry of entries) {
         if (entry.target === root) {
           if (autoWidth) {
-            // istanbul ignore next
+            // istanbul ignore next: compatibility
             const newWidth = entry.contentBoxSize
-              ? entry.contentBoxSize[0].inlineSize
+              ? entry.contentBoxSize[0]
+                ? entry.contentBoxSize[0].inlineSize
+                : (entry.contentBoxSize as unknown as ResizeObserverSize)
+                    .inlineSize
               : entry.contentRect.width;
             setWidth(newWidth);
           }
           if (autoHeight) {
-            // istanbul ignore next
+            // istanbul ignore next: compatibility
             const newHeight = entry.contentBoxSize
-              ? entry.contentBoxSize[0].blockSize
+              ? entry.contentBoxSize[0]
+                ? entry.contentBoxSize[0].blockSize
+                : (entry.contentBoxSize as unknown as ResizeObserverSize)
+                    .blockSize
               : entry.contentRect.height;
             setHeight(newHeight);
           }

bricks/vs/src/code-editor/index.tsx

@@ -538,11 +538,19 @@ export function CodeEditorComponent({
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
         if (entry.target === containerRef.current) {
+          // istanbul ignore next: compatibility
           const newWidth = entry.contentBoxSize
-            ? entry.contentBoxSize[0].inlineSize
+            ? entry.contentBoxSize[0]
+              ? entry.contentBoxSize[0].inlineSize
+              : (entry.contentBoxSize as unknown as ResizeObserverSize)
+                  .inlineSize
             : entry.contentRect.width;
+          // istanbul ignore next: compatibility
           const newHeight = entry.contentBoxSize
-            ? entry.contentBoxSize[0].blockSize
+            ? entry.contentBoxSize[0]
+              ? entry.contentBoxSize[0].blockSize
+              : (entry.contentBoxSize as unknown as ResizeObserverSize)
+                  .blockSize
             : entry.contentRect.height;
           if (newWidth !== size.current.width || expanded) {
             size.current.width = newWidth;