Skip to content

Commit a0471c3

Browse files
raheeliftikhar5raheeliftikhar5
committed
upgrade styled-components to latest version + fixed targetRef warning from react-resizable-detector
1 parent eee9768 commit a0471c3

File tree

7 files changed

+145
-121
lines changed

7 files changed

+145
-121
lines changed

‎client/packages/lowcoder/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
"resize-observer-polyfill": "^1.5.1",
9393
"simplebar-react": "^3.2.4",
9494
"sql-formatter": "^8.2.0",
95-
"styled-components": "^6.1.6",
95+
"styled-components": "^6.1.8",
9696
"stylis": "^4.1.1",
9797
"tern": "^0.24.3",
9898
"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: 44 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -228,54 +228,59 @@ let ButtonTmpComp = (function () {
228228
return (
229229
<EditorContext.Consumer>
230230
{(editorState) => (
231-
<ReactResizeDetector onResize={onResize}>
232-
<Container ref={conRef} $style={props.style}>
233-
<div
234-
ref={imgRef}
235-
style={
236-
props.autoHeight
237-
? { width: "100%", height: "100%" }
238-
: undefined
239-
}
240-
>
241-
<Button100
242-
ref={props.viewRef}
243-
$buttonStyle={props.style}
244-
loading={props.loading}
231+
<ReactResizeDetector
232+
onResize={onResize}
233+
render={() => (
234+
<Container ref={conRef} $style={props.style}>
235+
<div
236+
ref={imgRef}
245237
style={
246238
props.autoHeight
247-
? {
248-
width: "100%",
239+
? { width: "100%", height: "100%" }
240+
: undefined
241+
}
242+
>
243+
<Button100
244+
ref={props.viewRef}
245+
$buttonStyle={props.style}
246+
loading={props.loading}
247+
style={
248+
props.autoHeight
249+
? {
250+
width: "100%",
249251
height: "100%",
250252
aspectRatio: props.aspectRatio,
251253
borderRadius: props.style.radius,
252254
}
253-
: {
255+
: {
254256
aspectRatio: props.aspectRatio,
255257
borderRadius: props.style.radius,
256258
}
257-
}
258-
disabled={
259-
props.disabled ||
260-
(!isDefault(props.type) &&
261-
getForm(editorState, props.form)?.disableSubmit())
262-
}
263-
onClick={() =>
264-
isDefault(props.type)
265-
? props.onEvent("click")
266-
: submitForm(editorState, props.form)
267-
}
268-
>
269-
{props.prefixIcon && (
270-
<IconWrapper
271-
$style={{ ...props.style, size: props.iconSize }}
272-
>
273-
{props.prefixIcon}
274-
</IconWrapper>
275-
)}
276-
</Button100>
277-
</div>
278-
</Container>
259+
}
260+
disabled={
261+
props.disabled ||
262+
(!isDefault(props.type) &&
263+
getForm(editorState, props.form)?.disableSubmit())
264+
}
265+
onClick={() =>
266+
isDefault(props.type)
267+
? props.onEvent("click")
268+
: submitForm(editorState, props.form)
269+
}
270+
>
271+
{props.prefixIcon && (
272+
<IconWrapper
273+
$style={{ ...props.style, size: props.iconSize }}
274+
>
275+
{props.prefixIcon}
276+
</IconWrapper>
277+
)}
278+
279+
</Button100>
280+
</div>
281+
</Container>
282+
)}
283+
>
279284
</ReactResizeDetector>
280285
)}
281286
</EditorContext.Consumer>

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

Lines changed: 42 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -101,45 +101,49 @@ const TreeCompView = (props: RecordConstructorToView<typeof childrenMap>) => {
101101
labelStyle,
102102
inputFieldStyle:props.inputFieldStyle,
103103
children: (
104-
<ReactResizeDetector onResize={(w, h) => setHeight(h)}>
105-
<Container {...props.inputFieldStyle}>
106-
<Tree
107-
key={selectType}
108-
disabled={props.disabled}
109-
height={height}
110-
rootStyle={{ background: "transparent", color: props.inputFieldStyle.text }}
111-
fieldNames={{ title: "label", key: "value" }}
112-
treeData={treeData}
113-
selectable={selectable}
114-
multiple={selectType === "multi"}
115-
selectedKeys={selectable ? value.value : []}
116-
checkable={checkable}
117-
checkedKeys={
118-
checkable
119-
? checkStrictly
120-
? { checked: value.value, halfChecked: [] }
121-
: value.value
122-
: undefined
123-
}
124-
checkStrictly={checkStrictly}
125-
showLine={props.showLine ? { showLeafIcon: props.showLeafIcon } : false}
126-
expandedKeys={expanded.value}
127-
autoExpandParent={props.autoExpandParent}
128-
onSelect={(keys) => {
129-
value.onChange(keys as (string | number)[]);
130-
props.onEvent("change");
131-
}}
132-
onCheck={(keys) => {
133-
value.onChange(Array.isArray(keys) ? keys as (string | number)[] : keys.checked as (string | number)[]);
134-
props.onEvent("change");
135-
}}
136-
onExpand={(keys) => {
137-
expanded.onChange(keys as (string | number)[]);
138-
}}
139-
onFocus={() => props.onEvent("focus")}
140-
onBlur={() => props.onEvent("blur")}
141-
/>
104+
<ReactResizeDetector
105+
onResize={(w, h) => setHeight(h)}
106+
render={() => (
107+
<Container {...props.inputFieldStyle}>
108+
<Tree
109+
key={selectType}
110+
disabled={props.disabled}
111+
height={height}
112+
rootStyle={{ background: "transparent", color: props.inputFieldStyle.text }}
113+
fieldNames={{ title: "label", key: "value" }}
114+
treeData={treeData}
115+
selectable={selectable}
116+
multiple={selectType === "multi"}
117+
selectedKeys={selectable ? value.value : []}
118+
checkable={checkable}
119+
checkedKeys={
120+
checkable
121+
? checkStrictly
122+
? { checked: value.value, halfChecked: [] }
123+
: value.value
124+
: undefined
125+
}
126+
checkStrictly={checkStrictly}
127+
showLine={props.showLine ? { showLeafIcon: props.showLeafIcon } : false}
128+
expandedKeys={expanded.value}
129+
autoExpandParent={props.autoExpandParent}
130+
onSelect={(keys) => {
131+
value.onChange(keys as (string | number)[]);
132+
props.onEvent("change");
133+
}}
134+
onCheck={(keys) => {
135+
value.onChange(Array.isArray(keys) ? keys as (string | number)[] : keys.checked as (string | number)[]);
136+
props.onEvent("change");
137+
}}
138+
onExpand={(keys) => {
139+
expanded.onChange(keys as (string | number)[]);
140+
}}
141+
onFocus={() => props.onEvent("focus")}
142+
onBlur={() => props.onEvent("blur")}
143+
/>
142144
</Container>
145+
)}
146+
>
143147
</ReactResizeDetector>
144148
),
145149
});

‎client/yarn.lock‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13722,7 +13722,7 @@ __metadata:
1372213722
rollup-plugin-visualizer: ^5.9.2
1372313723
simplebar-react: ^3.2.4
1372413724
sql-formatter: ^8.2.0
13725-
styled-components: ^6.1.6
13725+
styled-components: ^6.1.8
1372613726
stylis: ^4.1.1
1372713727
tern: ^0.24.3
1372813728
typescript: ^4.8.4
@@ -19066,7 +19066,7 @@ __metadata:
1906619066
languageName: node
1906719067
linkType: hard
1906819068

19069-
"styled-components@npm:^6.1.6":
19069+
"styled-components@npm:^6.1.8":
1907019070
version: 6.1.8
1907119071
resolution: "styled-components@npm:6.1.8"
1907219072
dependencies:

0 commit comments

Comments
 (0)