Skip to content

Commit 4f49786

Browse files
raheeliftikhar5raheeliftikhar5
committed
upgrade styled-components to latest version + fixed targetRef warning from react-resizable-detector
1 parent 3fd4d30 commit 4f49786

File tree

8 files changed

+208
-183
lines changed

8 files changed

+208
-183
lines changed

‎client/packages/lowcoder/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
"resize-observer-polyfill": "^1.5.1",
9696
"simplebar-react": "^3.2.4",
9797
"sql-formatter": "^8.2.0",
98-
"styled-components": "^6.1.6",
98+
"styled-components": "^6.1.8",
9999
"stylis": "^4.1.1",
100100
"tern": "^0.24.3",
101101
"typescript-collections": "^1.3.3",

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

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -80,20 +80,24 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
8080
};
8181

8282
return (
83-
<ReactResizeDetector onResize={onResize}>
84-
<Container
85-
ref={conRef}
86-
$style={props.style}
87-
style={{
88-
fontSize: props.autoHeight
89-
? `${height < width ? height : width}px`
90-
: props.iconSize,
91-
background: props.style.background,
92-
}}
93-
onClick={() => props.onEvent("click")}
94-
>
95-
{props.icon}
96-
</Container>
83+
<ReactResizeDetector
84+
onResize={onResize}
85+
render={() => (
86+
<Container
87+
ref={conRef}
88+
$style={props.style}
89+
style={{
90+
fontSize: props.autoHeight
91+
? `${height < width ? height : width}px`
92+
: props.iconSize,
93+
background: props.style.background,
94+
}}
95+
onClick={() => props.onEvent("click")}
96+
>
97+
{props.icon}
98+
</Container>
99+
)}
100+
>
97101
</ReactResizeDetector>
98102
);
99103
};

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

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -132,24 +132,28 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
132132
}
133133
};
134134
return (
135-
<ReactResizeDetector onResize={onResize}>
136-
<Container ref={conRef} $style={props.style}>
137-
<div
138-
ref={imgRef}
139-
style={
140-
props.autoHeight ? { width: "100%", height: "100%" } : undefined
141-
}
142-
>
143-
<AntImage
144-
src={props.src.value}
145-
referrerPolicy="same-origin"
146-
draggable={false}
147-
preview={props.supportPreview}
148-
fallback={DEFAULT_IMG_URL}
149-
onClick={() => props.onEvent("click")}
150-
/>
151-
</div>
152-
</Container>
135+
<ReactResizeDetector
136+
onResize={onResize}
137+
render={() => (
138+
<Container ref={conRef} $style={props.style}>
139+
<div
140+
ref={imgRef}
141+
style={
142+
props.autoHeight ? { width: "100%", height: "100%" } : undefined
143+
}
144+
>
145+
<AntImage
146+
src={props.src.value}
147+
referrerPolicy="same-origin"
148+
draggable={false}
149+
preview={props.supportPreview}
150+
fallback={DEFAULT_IMG_URL}
151+
onClick={() => props.onEvent("click")}
152+
/>
153+
</div>
154+
</Container>
155+
)}
156+
>
153157
</ReactResizeDetector>
154158
);
155159
};

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -278,15 +278,22 @@ export function ListView(props: Props) {
278278

279279
<BodyWrapper ref={ref} $autoHeight={autoHeight}>
280280
<ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
281-
<>{<ReactResizeDetector onResize={(width?: number, height?: number) => { if (height) setListHeight(height); }} observerOptions={{ box: "border-box" }} >
282-
<ListOrientationWrapper
283-
$isHorizontal={horizontal}
284-
$isGrid={noOfColumns > 1}
285-
$autoHeight={autoHeight}
286-
>
287-
{renders}
288-
</ListOrientationWrapper>
289-
</ReactResizeDetector>}</>
281+
<ReactResizeDetector
282+
onResize={(width?: number, height?: number) => {
283+
if (height) setListHeight(height);
284+
}}
285+
observerOptions={{ box: "border-box" }}
286+
render={() => (
287+
<ListOrientationWrapper
288+
$isHorizontal={horizontal}
289+
$isGrid={noOfColumns > 1}
290+
$autoHeight={autoHeight}
291+
>
292+
{renders}
293+
</ListOrientationWrapper>
294+
)}
295+
>
296+
</ReactResizeDetector>
290297
</ScrollBar>
291298
</BodyWrapper>
292299
<FooterWrapper>

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

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -231,55 +231,59 @@ let ButtonTmpComp = (function () {
231231
return (
232232
<EditorContext.Consumer>
233233
{(editorState) => (
234-
<ReactResizeDetector onResize={onResize}>
235-
<Container ref={conRef} $style={props.style}>
236-
<div
237-
ref={imgRef}
238-
style={
239-
props.autoHeight
240-
? { width: "100%", height: "100%" }
241-
: undefined
242-
}
243-
>
244-
<Button100
245-
ref={props.viewRef}
246-
$buttonStyle={props.style}
247-
loading={props.loading}
234+
<ReactResizeDetector
235+
onResize={onResize}
236+
render={() => (
237+
<Container ref={conRef} $style={props.style}>
238+
<div
239+
ref={imgRef}
248240
style={
249241
props.autoHeight
250-
? {
251-
width: "100%",
252-
height: "100%",
253-
aspectRatio: props.aspectRatio,
254-
borderRadius: props.style.radius,
255-
}
256-
: {
257-
aspectRatio: props.aspectRatio,
258-
borderRadius: props.style.radius,
259-
}
260-
}
261-
disabled={
262-
props.disabled ||
263-
(!isDefault(props.type) &&
264-
getForm(editorState, props.form)?.disableSubmit())
265-
}
266-
onClick={() =>
267-
isDefault(props.type)
268-
? props.onEvent("click")
269-
: submitForm(editorState, props.form)
242+
? { width: "100%", height: "100%" }
243+
: undefined
270244
}
271245
>
272-
{props.prefixIcon && (
273-
<IconWrapper
274-
$style={{ ...props.style, size: props.iconSize }}
275-
>
276-
{props.prefixIcon}
277-
</IconWrapper>
278-
)}
279-
280-
</Button100>
281-
</div>
282-
</Container>
246+
<Button100
247+
ref={props.viewRef}
248+
$buttonStyle={props.style}
249+
loading={props.loading}
250+
style={
251+
props.autoHeight
252+
? {
253+
width: "100%",
254+
height: "100%",
255+
aspectRatio: props.aspectRatio,
256+
borderRadius: props.style.radius,
257+
}
258+
: {
259+
aspectRatio: props.aspectRatio,
260+
borderRadius: props.style.radius,
261+
}
262+
}
263+
disabled={
264+
props.disabled ||
265+
(!isDefault(props.type) &&
266+
getForm(editorState, props.form)?.disableSubmit())
267+
}
268+
onClick={() =>
269+
isDefault(props.type)
270+
? props.onEvent("click")
271+
: submitForm(editorState, props.form)
272+
}
273+
>
274+
{props.prefixIcon && (
275+
<IconWrapper
276+
$style={{ ...props.style, size: props.iconSize }}
277+
>
278+
{props.prefixIcon}
279+
</IconWrapper>
280+
)}
281+
282+
</Button100>
283+
</div>
284+
</Container>
285+
)}
286+
>
283287
</ReactResizeDetector>
284288
)}
285289
</EditorContext.Consumer>

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

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -135,65 +135,67 @@ let SignatureTmpComp = (function () {
135135
width && height && setCanvasSize([width, height]);
136136
updateValue(true);
137137
}}
138-
>
139-
<Wrapper
140-
onMouseDown={(e) => {
141-
e.preventDefault();
142-
}}
143-
$style={props.style}
144-
$isEmpty={!props.value && !isBegin}
145-
>
146-
<div className="signature">
147-
<Suspense fallback={<Skeleton />}>
148-
<SignatureCanvas
149-
ref={(ref) => {
150-
canvas = ref;
151-
}}
152-
penColor={props.style.pen}
153-
clearOnResize={false}
154-
canvasProps={{
155-
className: "sigCanvas",
156-
width: canvasSize[0],
157-
height: canvasSize[1],
158-
}}
159-
onEnd={() => {
160-
updateValue();
161-
setIsBegin(false);
162-
props.onEvent("change");
163-
}}
164-
onBegin={() => setIsBegin(true)}
165-
/>
166-
</Suspense>
167-
</div>
168-
{(props.showClear || props.showUndo) && (
169-
<div className="footer">
170-
{props.showUndo && (
171-
<span className="anticon">
172-
<UndoIcon
173-
onClick={() => {
174-
const data = canvas?.toData();
175-
if (data) {
176-
data?.pop();
177-
canvas?.fromData(data);
178-
updateValue();
179-
props.onEvent("change");
180-
}
181-
}}
182-
/>
183-
</span>
184-
)}
185-
{props.showClear && (
186-
<DeleteOutlined
187-
onClick={() => {
188-
updateValue(true);
138+
render={() => (
139+
<Wrapper
140+
onMouseDown={(e) => {
141+
e.preventDefault();
142+
}}
143+
$style={props.style}
144+
$isEmpty={!props.value && !isBegin}
145+
>
146+
<div className="signature">
147+
<Suspense fallback={<Skeleton />}>
148+
<SignatureCanvas
149+
ref={(ref) => {
150+
canvas = ref;
151+
}}
152+
penColor={props.style.pen}
153+
clearOnResize={false}
154+
canvasProps={{
155+
className: "sigCanvas",
156+
width: canvasSize[0],
157+
height: canvasSize[1],
158+
}}
159+
onEnd={() => {
160+
updateValue();
161+
setIsBegin(false);
189162
props.onEvent("change");
190163
}}
164+
onBegin={() => setIsBegin(true)}
191165
/>
192-
)}
166+
</Suspense>
193167
</div>
194-
)}
195-
{!(isBegin || props.value) && <div className="empty">{props.tips}</div>}
196-
</Wrapper>
168+
{(props.showClear || props.showUndo) && (
169+
<div className="footer">
170+
{props.showUndo && (
171+
<span className="anticon">
172+
<UndoIcon
173+
onClick={() => {
174+
const data = canvas?.toData();
175+
if (data) {
176+
data?.pop();
177+
canvas?.fromData(data);
178+
updateValue();
179+
props.onEvent("change");
180+
}
181+
}}
182+
/>
183+
</span>
184+
)}
185+
{props.showClear && (
186+
<DeleteOutlined
187+
onClick={() => {
188+
updateValue(true);
189+
props.onEvent("change");
190+
}}
191+
/>
192+
)}
193+
</div>
194+
)}
195+
{!(isBegin || props.value) && <div className="empty">{props.tips}</div>}
196+
</Wrapper>
197+
)}
198+
>
197199
</ReactResizeDetector>
198200
),
199201
});

0 commit comments

Comments
 (0)