Skip to content

Commit 0df30da

Browse files
raheeliftikhar5raheeliftikhar5
committed
upgrade react-resize-detector version
1 parent e9ebbcf commit 0df30da

File tree

14 files changed

+141
-69
lines changed

14 files changed

+141
-69
lines changed

‎client/packages/lowcoder/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
"react-quill": "^2.0.0",
7979
"react-redux": "^7.2.6",
8080
"react-resizable": "^3.0.4",
81-
"react-resize-detector": "^7.0.0",
81+
"react-resize-detector": "^11.0.1",
8282
"react-router": "^5.2.1",
8383
"react-router-dom": "^5.3.0",
8484
"react-signature-canvas": "^1.0.6",

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

Lines changed: 6 additions & 3 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 ReactResizeDetector, { 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,13 +56,16 @@ let CarouselBasicComp = (function () {
5656
setHeight(containerRef.current.clientHeight);
5757
}
5858
};
59+
useResizeDetector({
60+
onResize,
61+
});
5962
return (
6063
<Container
6164
ref={containerRef}
6265
$bg={props.style.background}
6366
$animationStyle={props.animationStyle}
6467
>
65-
<ReactResizeDetector onResize={onResize}>
68+
{/* <ReactResizeDetector onResize={onResize}> */}
6669
<Carousel
6770
dots={props.showDots}
6871
dotPosition={props.dotPosition}
@@ -75,7 +78,7 @@ let CarouselBasicComp = (function () {
7578
</div>
7679
))}
7780
</Carousel>
78-
</ReactResizeDetector>
81+
{/* </ReactResizeDetector> */}
7982
</Container>
8083
);
8184
})

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import ReactResizeDetector from "react-resize-detector";
1+
import ReactResizeDetector, { 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";
@@ -215,8 +215,13 @@ export const ContainerBaseComp = (function () {
215215
setWidth(container?.clientWidth ?? 0);
216216
setHeight(container?.clientHeight ?? 0);
217217
};
218+
219+
useResizeDetector({
220+
onResize,
221+
});
222+
218223
return (
219-
<ReactResizeDetector onResize={onResize}>
224+
// <ReactResizeDetector onResize={onResize}>
220225
<Wrapper
221226
ref={conRef}
222227
$style={props.style}
@@ -259,7 +264,7 @@ export const ContainerBaseComp = (function () {
259264
</Card>
260265
}
261266
</Wrapper>
262-
</ReactResizeDetector>
267+
// </ReactResizeDetector>
263268
);
264269
})
265270
.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
@@ -53,7 +53,7 @@ import React, {
5353
useRef,
5454
useState,
5555
} from "react";
56-
import { useResizeDetector } from "react-resize-detector";
56+
import { ResizePayload, useResizeDetector } from "react-resize-detector";
5757
import styled from "styled-components";
5858
import { checkIsMobile } from "util/commonUtils";
5959
import { ExternalEditorContext } from "util/context/ExternalEditorContext";
@@ -392,7 +392,7 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
392392

393393
const dispatchPositionParamsTimerRef = useRef(0);
394394
const onResize = useCallback(
395-
(width?: number, height?: number) => {
395+
({width, height} : ResizePayload) => {
396396
if(!width || !height) return;
397397

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

492492
return (
493493
<ReactGridLayout
494-
innerRef={ref}
494+
innerRef={ref as RefObject<HTMLDivElement>}
495495
className={props.className}
496496
style={props.style}
497497
scrollContainerRef={props.scrollContainerRef}

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
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 ReactResizeDetector, { useResizeDetector } from "react-resize-detector";
2626
import { AutoHeightControl } from "../controls/autoHeightControl";
2727
import {
2828
clickEvent,
@@ -87,10 +87,14 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
8787
setHeight(container?.clientHeight ?? 0);
8888
};
8989

90+
useResizeDetector({
91+
onResize,
92+
});
93+
9094
return (
91-
<ReactResizeDetector
92-
onResize={onResize}
93-
render={() => (
95+
// <ReactResizeDetector
96+
// onResize={onResize}
97+
// render={() => (
9498
<Container
9599
ref={conRef}
96100
$style={props.style}
@@ -105,9 +109,9 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
105109
>
106110
{props.icon}
107111
</Container>
108-
)}
109-
>
110-
</ReactResizeDetector>
112+
// )}
113+
// >
114+
// </ReactResizeDetector>
111115
);
112116
};
113117

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

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
import { RecordConstructorToView } from "lowcoder-core";
1515
import { useEffect, useRef, useState } from "react";
1616
import _ from "lodash";
17-
import ReactResizeDetector from "react-resize-detector";
17+
import ReactResizeDetector, { useResizeDetector } from "react-resize-detector";
1818
import { styleControl } from "comps/controls/styleControl";
1919
import {
2020
AnimationStyle,
@@ -136,10 +136,15 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
136136
setStyle("auto", "100%");
137137
}
138138
};
139+
140+
useResizeDetector({
141+
onResize,
142+
});
143+
139144
return (
140-
<ReactResizeDetector
141-
onResize={onResize}
142-
render={() => (
145+
// <ReactResizeDetector
146+
// onResize={onResize}
147+
// render={() => (
143148
<Container ref={conRef} $style={props.style} $animationStyle={props.animationStyle}>
144149
<div
145150
ref={imgRef}
@@ -157,9 +162,9 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
157162
/>
158163
</div>
159164
</Container>
160-
)}
161-
>
162-
</ReactResizeDetector>
165+
// )}
166+
// >
167+
// </ReactResizeDetector>
163168
);
164169
};
165170

‎client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import _ from "lodash";
55
import { ConstructorToView, deferAction } from "lowcoder-core";
66
import { HintPlaceHolder, ScrollBar, pageItemRender } from "lowcoder-design";
77
import { RefObject, useContext, createContext, useMemo, useRef, useEffect } from "react";
8-
import ReactResizeDetector from "react-resize-detector";
8+
import ReactResizeDetector, { ResizePayload, useResizeDetector } from "react-resize-detector";
99
import styled from "styled-components";
1010
import { checkIsMobile } from "util/commonUtils";
1111
import { useDelayState } from "util/hooks";
@@ -283,28 +283,37 @@ export function ListView(props: Props) {
283283

284284
const childrenProps = childrenToProps(comp.children);
285285

286+
const onResize= ({width, height}: ResizePayload) => {
287+
if (height) setListHeight(height);
288+
};
289+
290+
useResizeDetector({
291+
onResize,
292+
observerOptions: { box: "border-box" },
293+
});
294+
286295
// log.debug("renders: ", renders);
287296
return (
288297
<BackgroundColorContext.Provider value={style.background}>
289298
<ListViewWrapper $style={style} $paddingWidth={paddingWidth} $animationStyle={animationStyle}>
290299
<BodyWrapper ref={ref} $autoHeight={autoHeight}>
291300
<ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
292-
<ReactResizeDetector
301+
{/* <ReactResizeDetector
293302
onResize={(width?: number, height?: number) => {
294303
if (height) setListHeight(height);
295304
}}
296305
observerOptions={{ box: "border-box" }}
297-
render={() => (
306+
render={() => ( */}
298307
<ListOrientationWrapper
299308
$isHorizontal={horizontal}
300309
$isGrid={noOfColumns > 1}
301310
$autoHeight={autoHeight}
302311
>
303312
{renders}
304313
</ListOrientationWrapper>
305-
)}
314+
{/* )}
306315
>
307-
</ReactResizeDetector>
316+
</ReactResizeDetector> */}
308317
</ScrollBar>
309318
</BodyWrapper>
310319
<FooterWrapper>

‎client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ import {
3636
widthCalculator,
3737
} from "comps/controls/styleControlConstants";
3838
import { useEffect, useRef, useState } from "react";
39-
import ReactResizeDetector from "react-resize-detector";
39+
import ReactResizeDetector, { useResizeDetector } from "react-resize-detector";
4040

4141
import { useContext } from "react";
4242

@@ -227,12 +227,16 @@ let ButtonTmpComp = (function () {
227227
setStyle(container?.clientHeight + "px", container?.clientWidth + "px");
228228
};
229229

230+
useResizeDetector({
231+
onResize,
232+
});
233+
230234
return (
231235
<EditorContext.Consumer>
232236
{(editorState) => (
233-
<ReactResizeDetector
234-
onResize={onResize}
235-
render={() => (
237+
// <ReactResizeDetector
238+
// onResize={onResize}
239+
// render={() => (
236240
<Container ref={conRef} $style={props.style}>
237241
<div
238242
ref={imgRef}
@@ -281,9 +285,9 @@ let ButtonTmpComp = (function () {
281285
</Button100>
282286
</div>
283287
</Container>
284-
)}
285-
>
286-
</ReactResizeDetector>
288+
// )}
289+
// >
290+
// </ReactResizeDetector>
287291
)}
288292
</EditorContext.Consumer>
289293
);

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

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { trans } from "i18n";
2020
import { changeValueAction, multiChangeAction } from "lowcoder-core";
2121
import { Section, sectionNames, UndoIcon } from "lowcoder-design";
2222
import React, { Suspense, useEffect, useState } from "react";
23-
import ReactResizeDetector from "react-resize-detector";
23+
import ReactResizeDetector, { ResizePayload, useResizeDetector } from "react-resize-detector";
2424
import type SignatureCanvasType from "react-signature-canvas";
2525
import styled from "styled-components";
2626
import { UICompBuilder } from "../generators";
@@ -127,17 +127,27 @@ let SignatureTmpComp = (function () {
127127
);
128128
}
129129
};
130+
131+
const onResize = ({width, height}: ResizePayload) => {
132+
width && height && setCanvasSize([width, height]);
133+
updateValue(true);
134+
};
135+
136+
useResizeDetector({
137+
onResize,
138+
});
139+
130140
return props.label({
131141
style: props.style,
132142
labelStyle: props.labelStyle,
133143
inputFieldStyle:props.inputFieldStyle,
134144
children: (
135-
<ReactResizeDetector
136-
onResize={(width, height) => {
137-
width && height && setCanvasSize([width, height]);
138-
updateValue(true);
139-
}}
140-
>
145+
// <ReactResizeDetector
146+
// onResize={(width, height) => {
147+
// width && height && setCanvasSize([width, height]);
148+
// updateValue(true);
149+
// }}
150+
// >
141151
<Wrapper
142152
onMouseDown={(e) => {
143153
e.preventDefault();
@@ -196,7 +206,7 @@ let SignatureTmpComp = (function () {
196206
)}
197207
{!(isBegin || props.value) && <div className="empty">{props.tips}</div>}
198208
</Wrapper>
199-
</ReactResizeDetector>
209+
// </ReactResizeDetector>
200210
),
201211
});
202212
})

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { trans } from "i18n";
1111
import { NumberControl, StringControl } from "comps/controls/codeControl";
1212
import { default as Transfer } from "antd/es/transfer";
1313
import type { TransferKey } from "antd/es/transfer/interface";
14-
import ReactResizeDetector from "react-resize-detector";
14+
import ReactResizeDetector, { useResizeDetector } from "react-resize-detector";
1515
import { changeEvent, eventHandlerControl, searchEvent, selectedChangeEvent } from "../controls/eventHandlerControl";
1616
import styled, { css } from "styled-components";
1717
import { useContext, useEffect, useRef, useState } from "react";
@@ -108,8 +108,12 @@ const TransferView = (props: RecordConstructorToView<typeof childrenMap> & {
108108
setHeight(container?.clientHeight ?? 0);
109109
};
110110

111+
useResizeDetector({
112+
onResize,
113+
});
114+
111115
return (
112-
<ReactResizeDetector onResize={onResize}>
116+
// <ReactResizeDetector onResize={onResize}>
113117
<Container
114118
ref={conRef}
115119
$style={props.style}
@@ -134,7 +138,7 @@ const TransferView = (props: RecordConstructorToView<typeof childrenMap> & {
134138
} : false}
135139
/>
136140
</Container>
137-
</ReactResizeDetector>
141+
// </ReactResizeDetector>
138142
);
139143
};
140144

0 commit comments

Comments
 (0)