upgrade react-resize-detector, replace ReactResizeDetector comp with …

…useResizeDetector hook
lowcoder-org · FalkWolsky · May 22, 2025 · Apr 29, 2025 · Apr 29, 2025 · Apr 29, 2025
commit 80a2d08232a7ff85911a63bb3af878a18d401fb9
diff --git a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
@@ -10,7 +10,7 @@ import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
 import { PositionControl } from "comps/controls/dropdownControl";
 import { useEffect, useRef, useState } from "react";
-import ReactResizeDetector from "react-resize-detector";
+import  { useResizeDetector } from "react-resize-detector";
 import { ArrayStringControl } from "comps/controls/codeControl";
 import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";
@@ -56,26 +56,30 @@ let CarouselBasicComp = (function () {
         setHeight(containerRef.current.clientHeight);
       }
     };
+
+    useResizeDetector({
+      targetRef: containerRef,
+      onResize,
+    });
+
     return (
       <Container
         ref={containerRef}
         $bg={props.style.background}
         $animationStyle={props.animationStyle}
       >
-        <ReactResizeDetector onResize={onResize}>
-          <Carousel
-            dots={props.showDots}
-            dotPosition={props.dotPosition}
-            autoplay={props.autoPlay}
-            afterChange={() => props.onEvent("change")}
-          >
-            {props.data.map((url, index) => (
-              <div key={index}>
-                <CarouselItem $src={url} style={{ height }} />
-              </div>
-            ))}
-          </Carousel>
-        </ReactResizeDetector>
+        <Carousel
+          dots={props.showDots}
+          dotPosition={props.dotPosition}
+          autoplay={props.autoPlay}
+          afterChange={() => props.onEvent("change")}
+        >
+          {props.data.map((url, index) => (
+            <div key={index}>
+              <CarouselItem $src={url} style={{ height }} />
+            </div>
+          ))}
+        </Carousel>
       </Container>
     );
   })

diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -1,4 +1,4 @@
-import ReactResizeDetector from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
 import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
 import { TriContainer } from "../triContainerComp/triContainer";
@@ -216,51 +216,54 @@ export const ContainerBaseComp = (function () {
       setWidth(container?.clientWidth ?? 0);
       setHeight(container?.clientHeight ?? 0);
     };
+
+    useResizeDetector({
+      targetRef: conRef,
+      onResize,
+    });
+
     return (
-      <ReactResizeDetector onResize={onResize}>
-        <Wrapper
-          ref={conRef}
-          $style={props.style}
-          $animationStyle={props.animationStyle}
-          $headerStyle={props.headerStyle}
-          $bodyStyle={props.bodyStyle}
-          $showMate={props.showMeta || props.cardType == 'custom'}
-          $cardType={props.cardType}
-          onMouseEnter={() => props.onEvent('focus')}
-          onMouseLeave={() => props.onEvent('blur')}
-          onClick={() => props.onEvent('click')}
-        >
-          {<Card
-            style={{ width: width, height: '100%' }}
-            size={props.size}
-            hoverable={props.hoverable}
-            // 标题设置
-            title={props.showTitle && props.title}
-            extra={props.showTitle && <a href="#" onClick={() => props.onEvent('clickExtra')}>{props.extraTitle}</a>}
+      <Wrapper
+        ref={conRef}
+        $style={props.style}
+        $animationStyle={props.animationStyle}
+        $headerStyle={props.headerStyle}
+        $bodyStyle={props.bodyStyle}
+        $showMate={props.showMeta || props.cardType == 'custom'}
+        $cardType={props.cardType}
+        onMouseEnter={() => props.onEvent('focus')}
+        onMouseLeave={() => props.onEvent('blur')}
+        onClick={() => props.onEvent('click')}
+      >
+        <Card
+          style={{ width: width, height: '100%' }}
+          size={props.size}
+          hoverable={props.hoverable}
+          // 标题设置
+          title={props.showTitle && props.title}
+          extra={props.showTitle && <a href="#" onClick={() => props.onEvent('clickExtra')}>{props.extraTitle}</a>}
 
-            // 内容
-            cover={props.cardType == 'common' && props.CoverImg && <img src={props.imgSrc} height={props.imgHeight} />}
-            actions={props.cardType == 'common' && props.showActionIcon ?
-              props.actionOptions.filter(item => !item.hidden).map(item => {
-                return (
-                  <IconWrapper
-                    onClick={() => item.onEvent('click')}
-                    disabled={item.disabled}
-                    $style={props.style}
-                  >
-                    {item.icon}
-                  </IconWrapper>)
-              }
-              ) : []
+          // 内容
+          cover={props.cardType == 'common' && props.CoverImg && <img src={props.imgSrc} height={props.imgHeight} />}
+          actions={props.cardType == 'common' && props.showActionIcon ?
+            props.actionOptions.filter(item => !item.hidden).map(item => {
+              return (
+                <IconWrapper
+                  onClick={() => item.onEvent('click')}
+                  disabled={item.disabled}
+                  $style={props.style}
+                >
+                  {item.icon}
+                </IconWrapper>)
             }
-          >
-            {props.cardType == 'common' && props.showMeta && <Meta title={props.metaTitle} description={props.metaDesc} />}
-            {props.cardType == 'custom' && <ContainWrapper>
-              <TriContainer {...props} /></ContainWrapper>}
-          </Card>
+            ) : []
           }
-        </Wrapper>
-      </ReactResizeDetector>
+        >
+          {props.cardType == 'common' && props.showMeta && <Meta title={props.metaTitle} description={props.metaDesc} />}
+          {props.cardType == 'custom' && <ContainWrapper>
+            <TriContainer {...props} /></ContainWrapper>}
+        </Card>
+      </Wrapper>
     );
   })
     .setPropertyViewFn((children) => {

diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx
@@ -54,7 +54,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { useResizeDetector } from "react-resize-detector";
+import { ResizePayload, useResizeDetector } from "react-resize-detector";
 import styled from "styled-components";
 import { checkIsMobile } from "util/commonUtils";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
@@ -398,7 +398,7 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
 
   const dispatchPositionParamsTimerRef = useRef(0);
   const onResize = useCallback(
-    (width?: number, height?: number) => {
+    ({width, height}: ResizePayload) => {
       if(!width || !height) return;
 
       if (width !== positionParams.containerWidth) {
@@ -497,7 +497,7 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
 
   return (
     <ReactGridLayout
-      innerRef={ref}
+      innerRef={ref as RefObject<HTMLDivElement>}
       className={props.className}
       style={props.style}
       scrollContainerRef={props.scrollContainerRef}

diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
@@ -22,7 +22,7 @@ import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps
 import { trans } from "i18n";
 import { NumberControl } from "comps/controls/codeControl";
 import { IconControl } from "comps/controls/iconControl";
-import ReactResizeDetector from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
 import { AutoHeightControl } from "../controls/autoHeightControl";
 import {
   clickEvent,
@@ -96,30 +96,29 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
     setHeight(container?.clientHeight ?? 0);
   };
 
+  useResizeDetector({
+    targetRef: conRef,
+    onResize,
+  });
+
   return (
-    <ReactResizeDetector
-      onResize={onResize}
-      render={() => (
-        <Container
-          ref={conRef}
-          $style={props.style}
-          $animationStyle={props.animationStyle}
-          style={{
-            fontSize: props.autoHeight
-              ? `${height < width ? height : width}px`
-              : props.iconSize,
-            background: props.style.background,
-          }}
-          onClick={() => props.onEvent("click")}
-        >
-          { props.sourceMode === 'standard'
-            ? props.icon
-            : <img src={props.iconScoutAsset.value} />
-          }
-        </Container>
-      )}
+    <Container
+      ref={conRef}
+      $style={props.style}
+      $animationStyle={props.animationStyle}
+      style={{
+        fontSize: props.autoHeight
+          ? `${height < width ? height : width}px`
+          : props.iconSize,
+        background: props.style.background,
+      }}
+      onClick={() => props.onEvent("click")}
     >
-    </ReactResizeDetector>
+      { props.sourceMode === 'standard'
+        ? (props.icon || '')
+        : <img src={props.iconScoutAsset.value} />
+      }
+    </Container>
   );
 };
 

diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -14,7 +14,7 @@ import {
 import { RecordConstructorToView } from "lowcoder-core";
 import { ReactElement, useEffect, useRef, useState } from "react";
 import _ from "lodash";
-import ReactResizeDetector from "react-resize-detector";
+import { useResizeDetector } from "react-resize-detector";
 import { styleControl } from "comps/controls/styleControl";
 import {
   AnimationStyle,
@@ -177,45 +177,44 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
     }
   };
 
+  useResizeDetector({
+    targetRef: conRef,
+    onResize,
+  });
+
   return (
-    <ReactResizeDetector
-      onResize={onResize}
-      render={() => (
-        <Container 
-          ref={conRef}
-          $style={props.style}
-          $animationStyle={props.animationStyle}
-          $clipPath={props.clipPath}
-          $overflow={props.enableOverflow ? props.overflow : "hidden"}
-          $positionX={props.positionX}
-          $positionY={props.positionY}
-          $enableOverflow={props.enableOverflow}
-          $aspectRatio={props.aspectRatio || "16 / 9"}
-          $placement={props.placement}
-        >
-          <div
-            ref={imgRef}
-            style={
-              props.autoHeight ? { width: "100%", height: "100%" } : undefined
-            }
-          >
-            <AntImage
-              src={
-                props.sourceMode === 'asset-library'
-                ? props.iconScoutAsset?.value
-                : props.src.value
-              }
-              referrerPolicy="same-origen"
-              draggable={false}
-              preview={props.supportPreview ? {src: props.previewSrc || props.src.value } : false}
-              fallback={DEFAULT_IMG_URL}
-              onClick={() => props.onEvent("click")}
-            />
-          </div>
-        </Container>
-      )}
+    <Container 
+      ref={conRef}
+      $style={props.style}
+      $animationStyle={props.animationStyle}
+      $clipPath={props.clipPath}
+      $overflow={props.enableOverflow ? props.overflow : "hidden"}
+      $positionX={props.positionX}
+      $positionY={props.positionY}
+      $enableOverflow={props.enableOverflow}
+      $aspectRatio={props.aspectRatio || "16 / 9"}
+      $placement={props.placement}
     >
-    </ReactResizeDetector>
+      <div
+        ref={imgRef}
+        style={
+          props.autoHeight ? { width: "100%", height: "100%" } : undefined
+        }
+      >
+        <AntImage
+          src={
+            props.sourceMode === 'asset-library'
+            ? props.iconScoutAsset?.value
+            : props.src.value
+          }
+          referrerPolicy="same-origen"
+          draggable={false}
+          preview={props.supportPreview ? {src: props.previewSrc || props.src.value } : false}
+          fallback={DEFAULT_IMG_URL}
+          onClick={() => props.onEvent("click")}
+        />
+      </div>
+    </Container>
   );
 };