Skip to content

Commit 5f79327

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #1697 from lowcoder-org/feature/support-react-19
Upgrade node packages + Optimisations to improve memory consumption
2 parents c5fa46d + 0bdc38c commit 5f79327

File tree

128 files changed

+9644
-9218
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

128 files changed

+9644
-9218
lines changed

‎client/packages/lowcoder-comps/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
"@fullcalendar/resource-timeline": "^6.1.11",
1818
"@fullcalendar/timegrid": "^6.1.6",
1919
"@fullcalendar/timeline": "^6.1.6",
20-
"@types/react": "^18.2.45",
21-
"@types/react-dom": "^18.2.18",
20+
"@types/react": "^19.1.2",
21+
"@types/react-dom": "^19.1.2",
2222
"agora-rtc-sdk-ng": "^4.20.2",
2323
"agora-rtm-sdk": "^1.5.1",
2424
"big.js": "^6.2.1",
@@ -28,8 +28,8 @@
2828
"lowcoder-cli": "workspace:^",
2929
"lowcoder-sdk": "workspace:^",
3030
"mermaid": "^10.6.1",
31-
"react": "^18.2.0",
32-
"react-dom": "^18.2.0",
31+
"react": "^19.1.0",
32+
"react-dom": "^19.1.0",
3333
"typescript": "4.8.4"
3434
},
3535
"lowcoder": {

‎client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoMeetingStreamComp.tsx

Lines changed: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import { trans } from "../../i18n/comps";
2222
import { client } from "./meetingControllerComp";
2323
import type { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
2424
import { useEffect, useRef, useState } from "react";
25-
import ReactResizeDetector from "react-resize-detector";
25+
import { useResizeDetector } from "react-resize-detector";
2626

2727
const VideoContainer = styled.video`
2828
height: 100%;
@@ -132,62 +132,63 @@ let VideoCompBuilder = (function () {
132132
}, [props.userId.value]);
133133
// console.log("userId", userId);
134134

135+
useResizeDetector({
136+
targetRef: conRef,
137+
});
135138

136139
return (
137140
<EditorContext.Consumer>
138141
{(editorState: any) => (
139-
<ReactResizeDetector>
142+
<div
143+
ref={conRef}
144+
style={{
145+
display: "flex",
146+
alignItems: "center",
147+
height: "100%",
148+
overflow: "hidden",
149+
borderRadius: props.style.radius,
150+
aspectRatio: props.videoAspectRatio,
151+
backgroundColor: props.style.background,
152+
padding: props.style.padding,
153+
margin: props.style.margin,
154+
}}
155+
>
156+
{userId ? (
157+
<VideoContainer
158+
onClick={() => props.onEvent("videoClicked")}
159+
ref={videoRef}
160+
style={{
161+
display: `${showVideo ? "flex" : "none"}`,
162+
aspectRatio: props.videoAspectRatio,
163+
borderRadius: props.style.radius,
164+
width: "auto",
165+
}}
166+
id={userId}
167+
></VideoContainer>
168+
) : (
169+
<></>
170+
)}
140171
<div
141-
ref={conRef}
142172
style={{
143-
display: "flex",
173+
flexDirection: "column",
144174
alignItems: "center",
145-
height: "100%",
146-
overflow: "hidden",
147-
borderRadius: props.style.radius,
148-
aspectRatio: props.videoAspectRatio,
149-
backgroundColor: props.style.background,
150-
padding: props.style.padding,
151-
margin: props.style.margin,
175+
display: `${!showVideo || userId ? "flex" : "none"}`,
176+
margin: "0 auto",
177+
padding: props.profilePadding,
152178
}}
153179
>
154-
{userId ? (
155-
<VideoContainer
156-
onClick={() => props.onEvent("videoClicked")}
157-
ref={videoRef}
158-
style={{
159-
display: `${showVideo ? "flex" : "none"}`,
160-
aspectRatio: props.videoAspectRatio,
161-
borderRadius: props.style.radius,
162-
width: "auto",
163-
}}
164-
id={userId}
165-
></VideoContainer>
166-
) : (
167-
<></>
168-
)}
169-
<div
180+
<img
181+
alt=""
170182
style={{
171-
flexDirection: "column",
172-
alignItems: "center",
173-
display: `${!showVideo || userId ? "flex" : "none"}`,
174-
margin: "0 auto",
175-
padding: props.profilePadding,
183+
borderRadius: props.profileBorderRadius,
184+
width: "100%",
185+
overflow: "hidden",
176186
}}
177-
>
178-
<img
179-
alt=""
180-
style={{
181-
borderRadius: props.profileBorderRadius,
182-
width: "100%",
183-
overflow: "hidden",
184-
}}
185-
src={props.profileImageUrl.value}
186-
/>
187-
<p style={{ margin: "0" }}>{userName ?? ""}</p>
188-
</div>
187+
src={props.profileImageUrl.value}
188+
/>
189+
<p style={{ margin: "0" }}>{userName ?? ""}</p>
189190
</div>
190-
</ReactResizeDetector>
191+
</div>
191192
)}
192193
</EditorContext.Consumer>
193194
);

‎client/packages/lowcoder-comps/src/comps/agoraMeetingComp/videoSharingStreamComp.tsx

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { useEffect, useRef, useState } from "react";
1919
import { client } from "./meetingControllerComp";
2020
import type { IAgoraRTCRemoteUser } from "agora-rtc-sdk-ng";
2121
import { trans } from "../../i18n/comps";
22-
import ReactResizeDetector from "react-resize-detector";
22+
import { useResizeDetector } from "react-resize-detector";
2323
import { ButtonStyleControl } from "./videobuttonCompConstants";
2424

2525
const VideoContainer = styled.video`
@@ -123,61 +123,63 @@ let SharingCompBuilder = (function () {
123123
}
124124
}, [props.userId.value]);
125125

126+
useResizeDetector({
127+
targetRef: conRef,
128+
});
129+
126130
return (
127131
<EditorContext.Consumer>
128132
{(editorState: any) => (
129-
<ReactResizeDetector>
133+
<div
134+
ref={conRef}
135+
style={{
136+
display: "flex",
137+
alignItems: "center",
138+
height: "100%",
139+
overflow: "hidden",
140+
borderRadius: props?.style?.radius,
141+
aspectRatio: props?.videoAspectRatio,
142+
backgroundColor: props.style?.background,
143+
padding: props.style?.padding,
144+
margin: props.style?.margin,
145+
}}
146+
>
147+
{userId ? (
148+
<VideoContainer
149+
onClick={() => props.onEvent("videoClicked")}
150+
ref={videoRef}
151+
style={{
152+
display: `${showVideoSharing ? "flex" : "none"}`,
153+
aspectRatio: props.videoAspectRatio,
154+
borderRadius: props.style.radius,
155+
width: "auto",
156+
}}
157+
id="share-screen"
158+
></VideoContainer>
159+
) : (
160+
<></>
161+
)}
130162
<div
131-
ref={conRef}
132163
style={{
133-
display: "flex",
164+
flexDirection: "column",
134165
alignItems: "center",
135-
height: "100%",
136-
overflow: "hidden",
137-
borderRadius: props?.style?.radius,
138-
aspectRatio: props?.videoAspectRatio,
139-
backgroundColor: props.style?.background,
140-
padding: props.style?.padding,
141-
margin: props.style?.margin,
166+
display: `${!showVideoSharing || userId ? "flex" : "none"}`,
167+
margin: "0 auto",
168+
padding: props.profilePadding,
142169
}}
143170
>
144-
{userId ? (
145-
<VideoContainer
146-
onClick={() => props.onEvent("videoClicked")}
147-
ref={videoRef}
148-
style={{
149-
display: `${showVideoSharing ? "flex" : "none"}`,
150-
aspectRatio: props.videoAspectRatio,
151-
borderRadius: props.style.radius,
152-
width: "auto",
153-
}}
154-
id="share-screen"
155-
></VideoContainer>
156-
) : (
157-
<></>
158-
)}
159-
<div
171+
<img
172+
alt=""
160173
style={{
161-
flexDirection: "column",
162-
alignItems: "center",
163-
display: `${!showVideoSharing || userId ? "flex" : "none"}`,
164-
margin: "0 auto",
165-
padding: props.profilePadding,
174+
borderRadius: props.profileBorderRadius,
175+
width: "100%",
176+
overflow: "hidden",
166177
}}
167-
>
168-
<img
169-
alt=""
170-
style={{
171-
borderRadius: props.profileBorderRadius,
172-
width: "100%",
173-
overflow: "hidden",
174-
}}
175-
src={props.profileImageUrl?.value}
176-
/>
177-
<p style={{ margin: "0" }}>{userName ?? ""}</p>
178-
</div>
178+
src={props.profileImageUrl?.value}
179+
/>
180+
<p style={{ margin: "0" }}>{userName ?? ""}</p>
179181
</div>
180-
</ReactResizeDetector>
182+
</div>
181183
)}
182184
</EditorContext.Consumer>
183185
);

‎client/packages/lowcoder-comps/src/comps/barChartComp/barChartComp.tsx

Lines changed: 29 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { barChartChildrenMap, ChartSize, getDataKeys } from "./barChartConstants
1010
import { barChartPropertyView } from "./barChartPropertyView";
1111
import _ from "lodash";
1212
import { useContext, useEffect, useMemo, useRef, useState } from "react";
13-
import ReactResizeDetector from "react-resize-detector";
13+
import { useResizeDetector } from "react-resize-detector";
1414
import ReactECharts from "../basicChartComp/reactEcharts";
1515
import {
1616
childrenToProps,
@@ -56,7 +56,8 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
5656
const mode = comp.children.mode.getView();
5757
const onUIEvent = comp.children.onUIEvent.getView();
5858
const onEvent = comp.children.onEvent.getView();
59-
const echartsCompRef = useRef<ReactECharts | null>();
59+
const echartsCompRef = useRef<ReactECharts | null>(null);
60+
const containerRef = useRef<HTMLDivElement>(null);
6061
const [chartSize, setChartSize] = useState<ChartSize>();
6162
const firstResize = useRef(true);
6263
const theme = useContext(ThemeContext);
@@ -156,30 +157,34 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
156157
if(comp.children.mapInstance.value) return;
157158
}, [option])
158159

160+
useResizeDetector({
161+
targetRef: containerRef,
162+
onResize: ({width, height}) => {
163+
console.log('barChart - resize');
164+
if (width && height) {
165+
setChartSize({ w: width, h: height });
166+
}
167+
if (!firstResize.current) {
168+
// ignore the first resize, which will impact the loading animation
169+
echartsCompRef.current?.getEchartsInstance().resize();
170+
} else {
171+
firstResize.current = false;
172+
}
173+
}
174+
})
175+
159176
return (
160-
<ReactResizeDetector
161-
onResize={(w, h) => {
162-
if (w && h) {
163-
setChartSize({ w: w, h: h });
164-
}
165-
if (!firstResize.current) {
166-
// ignore the first resize, which will impact the loading animation
167-
echartsCompRef.current?.getEchartsInstance().resize();
168-
} else {
169-
firstResize.current = false;
170-
}
171-
}}
172-
>
177+
<div ref={containerRef} style={{height: '100%'}}>
173178
<ReactECharts
174-
ref={(e) => (echartsCompRef.current = e)}
175-
style={{ height: "100%" }}
176-
notMerge
177-
lazyUpdate
178-
opts={{ locale: getEchartsLocale() }}
179-
option={option}
180-
mode={mode}
181-
/>
182-
</ReactResizeDetector>
179+
ref={(e) => (echartsCompRef.current = e)}
180+
style={{ height: "100%" }}
181+
notMerge
182+
lazyUpdate
183+
opts={{ locale: getEchartsLocale() }}
184+
option={option}
185+
mode={mode}
186+
/>
187+
</div>
183188
);
184189
});
185190

0 commit comments

Comments
 (0)