Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0df30da

Browse files
upgrade react-resize-detector version
1 parente9ebbcf commit0df30da

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-
importReactResizeDetectorfrom"react-resize-detector";
13+
importReactResizeDetector,{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-
<ReactResizeDetectoronResize={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-
importReactResizeDetectorfrom"react-resize-detector";
1+
importReactResizeDetector,{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-
<ReactResizeDetectoronResize={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
importstyledfrom"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
constdispatchPositionParamsTimerRef=useRef(0);
394394
constonResize=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={refasRefObject<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-
importReactResizeDetectorfrom"react-resize-detector";
25+
importReactResizeDetector,{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-
importReactResizeDetectorfrom"react-resize-detector";
17+
importReactResizeDetector,{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
<Containerref={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-
importReactResizeDetectorfrom"react-resize-detector";
8+
importReactResizeDetector,{ResizePayload,useResizeDetector}from"react-resize-detector";
99
importstyledfrom"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
constchildrenProps=childrenToProps(comp.children);
285285

286+
constonResize=({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.Providervalue={style.background}>
289298
<ListViewWrapper$style={style}$paddingWidth={paddingWidth}$animationStyle={animationStyle}>
290299
<BodyWrapperref={ref}$autoHeight={autoHeight}>
291300
<ScrollBarstyle={{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-
importReactResizeDetectorfrom"react-resize-detector";
39+
importReactResizeDetector,{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
<Containerref={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
importReact,{Suspense,useEffect,useState}from"react";
23-
importReactResizeDetectorfrom"react-resize-detector";
23+
importReactResizeDetector,{ResizePayload,useResizeDetector}from"react-resize-detector";
2424
importtypeSignatureCanvasTypefrom"react-signature-canvas";
2525
importstyledfrom"styled-components";
2626
import{UICompBuilder}from"../generators";
@@ -127,17 +127,27 @@ let SignatureTmpComp = (function () {
127127
);
128128
}
129129
};
130+
131+
constonResize=({width, height}:ResizePayload)=>{
132+
width&&height&&setCanvasSize([width,height]);
133+
updateValue(true);
134+
};
135+
136+
useResizeDetector({
137+
onResize,
138+
});
139+
130140
returnprops.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)&&<divclassName="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{defaultasTransfer}from"antd/es/transfer";
1313
importtype{TransferKey}from"antd/es/transfer/interface";
14-
importReactResizeDetectorfrom"react-resize-detector";
14+
importReactResizeDetector,{useResizeDetector}from"react-resize-detector";
1515
import{changeEvent,eventHandlerControl,searchEvent,selectedChangeEvent}from"../controls/eventHandlerControl";
1616
importstyled,{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-
<ReactResizeDetectoronResize={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)
[8]ページ先頭
©2009-2025 Movatter.jp