Skip to content

Commit 2d87d6b

Browse files
kamal-qureshikamal-qureshi
committed
Merge branch 'dev' into tooltip_for_buttons
2 parents 4ab8986 + 5f79327 commit 2d87d6b

File tree

200 files changed

+22107
-9568
lines changed

Some content is hidden

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

200 files changed

+22107
-9568
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: 34 additions & 29 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

@@ -304,17 +309,17 @@ let BarChartComp = withExposingConfigs(BarChartTmpComp, [
304309

305310

306311
export const BarChartCompWithDefault = withDefault(BarChartComp, {
307-
xAxisKey: "date",
312+
xAxisKey: "month",
308313
series: [
309314
{
310315
dataIndex: genRandomKey(),
311-
seriesName: trans("chart.spending"),
312-
columnName: "spending",
316+
seriesName: "Sales",
317+
columnName: "sales",
313318
},
314319
{
315320
dataIndex: genRandomKey(),
316-
seriesName: trans("chart.budget"),
317-
columnName: "budget",
321+
seriesName: "Target",
322+
columnName: "target",
318323
},
319324
],
320325
});

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy