Skip to content

Commit 80a2d08

Browse files
raheeliftikhar5raheeliftikhar5
committed
upgrade react-resize-detector, replace ReactResizeDetector comp with useResizeDetector hook
1 parent 806428b commit 80a2d08

File tree

11 files changed

+368
-320
lines changed

11 files changed

+368
-320
lines changed

‎client/packages/lowcoder/src/comps/comps/carouselComp.tsx

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
1010
import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConstants";
1111
import { PositionControl } from "comps/controls/dropdownControl";
1212
import { useEffect, useRef, useState } from "react";
13-
import ReactResizeDetector from "react-resize-detector";
13+
import { useResizeDetector } from "react-resize-detector";
1414
import { ArrayStringControl } from "comps/controls/codeControl";
1515
import { styleControl } from "comps/controls/styleControl";
1616
import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";
@@ -56,26 +56,30 @@ let CarouselBasicComp = (function () {
5656
setHeight(containerRef.current.clientHeight);
5757
}
5858
};
59+
60+
useResizeDetector({
61+
targetRef: containerRef,
62+
onResize,
63+
});
64+
5965
return (
6066
<Container
6167
ref={containerRef}
6268
$bg={props.style.background}
6369
$animationStyle={props.animationStyle}
6470
>
65-
<ReactResizeDetector onResize={onResize}>
66-
<Carousel
67-
dots={props.showDots}
68-
dotPosition={props.dotPosition}
69-
autoplay={props.autoPlay}
70-
afterChange={() => props.onEvent("change")}
71-
>
72-
{props.data.map((url, index) => (
73-
<div key={index}>
74-
<CarouselItem $src={url} style={{ height }} />
75-
</div>
76-
))}
77-
</Carousel>
78-
</ReactResizeDetector>
71+
<Carousel
72+
dots={props.showDots}
73+
dotPosition={props.dotPosition}
74+
autoplay={props.autoPlay}
75+
afterChange={() => props.onEvent("change")}
76+
>
77+
{props.data.map((url, index) => (
78+
<div key={index}>
79+
<CarouselItem $src={url} style={{ height }} />
80+
</div>
81+
))}
82+
</Carousel>
7983
</Container>
8084
);
8185
})

‎client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx

Lines changed: 45 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import ReactResizeDetector from "react-resize-detector";
1+
import { useResizeDetector } from "react-resize-detector";
22
import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
33
import { Section, sectionNames } from "lowcoder-design";
44
import { TriContainer } from "../triContainerComp/triContainer";
@@ -216,51 +216,54 @@ export const ContainerBaseComp = (function () {
216216
setWidth(container?.clientWidth ?? 0);
217217
setHeight(container?.clientHeight ?? 0);
218218
};
219+
220+
useResizeDetector({
221+
targetRef: conRef,
222+
onResize,
223+
});
224+
219225
return (
220-
<ReactResizeDetector onResize={onResize}>
221-
<Wrapper
222-
ref={conRef}
223-
$style={props.style}
224-
$animationStyle={props.animationStyle}
225-
$headerStyle={props.headerStyle}
226-
$bodyStyle={props.bodyStyle}
227-
$showMate={props.showMeta || props.cardType == 'custom'}
228-
$cardType={props.cardType}
229-
onMouseEnter={() => props.onEvent('focus')}
230-
onMouseLeave={() => props.onEvent('blur')}
231-
onClick={() => props.onEvent('click')}
232-
>
233-
{<Card
234-
style={{ width: width, height: '100%' }}
235-
size={props.size}
236-
hoverable={props.hoverable}
237-
// 标题设置
238-
title={props.showTitle && props.title}
239-
extra={props.showTitle && <a href="#" onClick={() => props.onEvent('clickExtra')}>{props.extraTitle}</a>}
226+
<Wrapper
227+
ref={conRef}
228+
$style={props.style}
229+
$animationStyle={props.animationStyle}
230+
$headerStyle={props.headerStyle}
231+
$bodyStyle={props.bodyStyle}
232+
$showMate={props.showMeta || props.cardType == 'custom'}
233+
$cardType={props.cardType}
234+
onMouseEnter={() => props.onEvent('focus')}
235+
onMouseLeave={() => props.onEvent('blur')}
236+
onClick={() => props.onEvent('click')}
237+
>
238+
<Card
239+
style={{ width: width, height: '100%' }}
240+
size={props.size}
241+
hoverable={props.hoverable}
242+
// 标题设置
243+
title={props.showTitle && props.title}
244+
extra={props.showTitle && <a href="#" onClick={() => props.onEvent('clickExtra')}>{props.extraTitle}</a>}
240245

241-
// 内容
242-
cover={props.cardType == 'common' && props.CoverImg && <img src={props.imgSrc} height={props.imgHeight} />}
243-
actions={props.cardType == 'common' && props.showActionIcon ?
244-
props.actionOptions.filter(item => !item.hidden).map(item => {
245-
return (
246-
<IconWrapper
247-
onClick={() => item.onEvent('click')}
248-
disabled={item.disabled}
249-
$style={props.style}
250-
>
251-
{item.icon}
252-
</IconWrapper>)
253-
}
254-
) : []
246+
// 内容
247+
cover={props.cardType == 'common' && props.CoverImg && <img src={props.imgSrc} height={props.imgHeight} />}
248+
actions={props.cardType == 'common' && props.showActionIcon ?
249+
props.actionOptions.filter(item => !item.hidden).map(item => {
250+
return (
251+
<IconWrapper
252+
onClick={() => item.onEvent('click')}
253+
disabled={item.disabled}
254+
$style={props.style}
255+
>
256+
{item.icon}
257+
</IconWrapper>)
255258
}
256-
>
257-
{props.cardType == 'common' && props.showMeta && <Meta title={props.metaTitle} description={props.metaDesc} />}
258-
{props.cardType == 'custom' && <ContainWrapper>
259-
<TriContainer {...props} /></ContainWrapper>}
260-
</Card>
259+
) : []
261260
}
262-
</Wrapper>
263-
</ReactResizeDetector>
261+
>
262+
{props.cardType == 'common' && props.showMeta && <Meta title={props.metaTitle} description={props.metaDesc} />}
263+
{props.cardType == 'custom' && <ContainWrapper>
264+
<TriContainer {...props} /></ContainWrapper>}
265+
</Card>
266+
</Wrapper>
264267
);
265268
})
266269
.setPropertyViewFn((children) => {

‎client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ import React, {
5454
useRef,
5555
useState,
5656
} from "react";
57-
import { useResizeDetector } from "react-resize-detector";
57+
import { ResizePayload, useResizeDetector } from "react-resize-detector";
5858
import styled from "styled-components";
5959
import { checkIsMobile } from "util/commonUtils";
6060
import { ExternalEditorContext } from "util/context/ExternalEditorContext";
@@ -398,7 +398,7 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
398398

399399
const dispatchPositionParamsTimerRef = useRef(0);
400400
const onResize = useCallback(
401-
(width?: number, height?: number) => {
401+
({width, height}: ResizePayload) => {
402402
if(!width || !height) return;
403403

404404
if (width !== positionParams.containerWidth) {
@@ -497,7 +497,7 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
497497

498498
return (
499499
<ReactGridLayout
500-
innerRef={ref}
500+
innerRef={ref as RefObject<HTMLDivElement>}
501501
className={props.className}
502502
style={props.style}
503503
scrollContainerRef={props.scrollContainerRef}

‎client/packages/lowcoder/src/comps/comps/iconComp.tsx

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps
2222
import { trans } from "i18n";
2323
import { NumberControl } from "comps/controls/codeControl";
2424
import { IconControl } from "comps/controls/iconControl";
25-
import ReactResizeDetector from "react-resize-detector";
25+
import { useResizeDetector } from "react-resize-detector";
2626
import { AutoHeightControl } from "../controls/autoHeightControl";
2727
import {
2828
clickEvent,
@@ -96,30 +96,29 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
9696
setHeight(container?.clientHeight ?? 0);
9797
};
9898

99+
useResizeDetector({
100+
targetRef: conRef,
101+
onResize,
102+
});
103+
99104
return (
100-
<ReactResizeDetector
101-
onResize={onResize}
102-
render={() => (
103-
<Container
104-
ref={conRef}
105-
$style={props.style}
106-
$animationStyle={props.animationStyle}
107-
style={{
108-
fontSize: props.autoHeight
109-
? `${height < width ? height : width}px`
110-
: props.iconSize,
111-
background: props.style.background,
112-
}}
113-
onClick={() => props.onEvent("click")}
114-
>
115-
{ props.sourceMode === 'standard'
116-
? props.icon
117-
: <img src={props.iconScoutAsset.value} />
118-
}
119-
</Container>
120-
)}
105+
<Container
106+
ref={conRef}
107+
$style={props.style}
108+
$animationStyle={props.animationStyle}
109+
style={{
110+
fontSize: props.autoHeight
111+
? `${height < width ? height : width}px`
112+
: props.iconSize,
113+
background: props.style.background,
114+
}}
115+
onClick={() => props.onEvent("click")}
121116
>
122-
</ReactResizeDetector>
117+
{ props.sourceMode === 'standard'
118+
? (props.icon || '')
119+
: <img src={props.iconScoutAsset.value} />
120+
}
121+
</Container>
123122
);
124123
};
125124

‎client/packages/lowcoder/src/comps/comps/imageComp.tsx

Lines changed: 37 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
import { RecordConstructorToView } from "lowcoder-core";
1515
import { ReactElement, useEffect, useRef, useState } from "react";
1616
import _ from "lodash";
17-
import ReactResizeDetector from "react-resize-detector";
17+
import { useResizeDetector } from "react-resize-detector";
1818
import { styleControl } from "comps/controls/styleControl";
1919
import {
2020
AnimationStyle,
@@ -177,45 +177,44 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
177177
}
178178
};
179179

180+
useResizeDetector({
181+
targetRef: conRef,
182+
onResize,
183+
});
184+
180185
return (
181-
<ReactResizeDetector
182-
onResize={onResize}
183-
render={() => (
184-
<Container
185-
ref={conRef}
186-
$style={props.style}
187-
$animationStyle={props.animationStyle}
188-
$clipPath={props.clipPath}
189-
$overflow={props.enableOverflow ? props.overflow : "hidden"}
190-
$positionX={props.positionX}
191-
$positionY={props.positionY}
192-
$enableOverflow={props.enableOverflow}
193-
$aspectRatio={props.aspectRatio || "16 / 9"}
194-
$placement={props.placement}
195-
>
196-
<div
197-
ref={imgRef}
198-
style={
199-
props.autoHeight ? { width: "100%", height: "100%" } : undefined
200-
}
201-
>
202-
<AntImage
203-
src={
204-
props.sourceMode === 'asset-library'
205-
? props.iconScoutAsset?.value
206-
: props.src.value
207-
}
208-
referrerPolicy="same-origin"
209-
draggable={false}
210-
preview={props.supportPreview ? {src: props.previewSrc || props.src.value } : false}
211-
fallback={DEFAULT_IMG_URL}
212-
onClick={() => props.onEvent("click")}
213-
/>
214-
</div>
215-
</Container>
216-
)}
186+
<Container
187+
ref={conRef}
188+
$style={props.style}
189+
$animationStyle={props.animationStyle}
190+
$clipPath={props.clipPath}
191+
$overflow={props.enableOverflow ? props.overflow : "hidden"}
192+
$positionX={props.positionX}
193+
$positionY={props.positionY}
194+
$enableOverflow={props.enableOverflow}
195+
$aspectRatio={props.aspectRatio || "16 / 9"}
196+
$placement={props.placement}
217197
>
218-
</ReactResizeDetector>
198+
<div
199+
ref={imgRef}
200+
style={
201+
props.autoHeight ? { width: "100%", height: "100%" } : undefined
202+
}
203+
>
204+
<AntImage
205+
src={
206+
props.sourceMode === 'asset-library'
207+
? props.iconScoutAsset?.value
208+
: props.src.value
209+
}
210+
referrerPolicy="same-origin"
211+
draggable={false}
212+
preview={props.supportPreview ? {src: props.previewSrc || props.src.value } : false}
213+
fallback={DEFAULT_IMG_URL}
214+
onClick={() => props.onEvent("click")}
215+
/>
216+
</div>
217+
</Container>
219218
);
220219
};
221220

0 commit comments

Comments
 (0)