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

Commit1af35d0

Browse files
optimise modal comp
1 parent03e9839 commit1af35d0

File tree

2 files changed

+109
-44
lines changed

2 files changed

+109
-44
lines changed

‎client/packages/lowcoder/src/comps/hooks/hookComp.tsx‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import _ from "lodash";
2727
importdayjsfrom"dayjs";
2828
import{ConstructorToComp}from"lowcoder-core";
2929
import{ScrollBar,Section,sectionNames}from"lowcoder-design";
30-
importReact,{useContext,useEffect,useMemo}from"react";
30+
importReact,{useContext,useEffect,useMemo,useCallback}from"react";
3131
import{useInterval,useTitle,useWindowSize}from"react-use";
3232
import{useCurrentUser}from"util/currentUser";
3333
import{LocalStorageComp}from"./localStorageComp";
@@ -53,9 +53,16 @@ const CurrentUserHookComp = hookToStateComp(() => {
5353

5454
functionuseCurrentTime(){
5555
const[time,setTime]=React.useState(0);
56-
useInterval(()=>{
57-
setTime(newDate().getTime());
58-
},1000);
56+
57+
// Add cleanup for the interval
58+
useEffect(()=>{
59+
constinterval=setInterval(()=>{
60+
setTime(newDate().getTime());
61+
},1000);
62+
63+
return()=>clearInterval(interval);
64+
},[]);
65+
5966
returnuseMemo(
6067
()=>({
6168
time:time,
@@ -126,6 +133,23 @@ function SelectHookView(props: {
126133
consteditorState=useContext(EditorContext);
127134
constselectedComp=editorState.selectedComp();
128135

136+
// Memoize the comp tree calculation
137+
constcompTree=useMemo(()=>{
138+
if(!props.comp||!(props.compasany).getCompTree)returnnull;
139+
return(props.compasany).getCompTree();
140+
},[props.comp]);
141+
142+
// Memoize the child components calculation
143+
constallChildComp=useMemo(()=>{
144+
if(!compTree)return{};
145+
returngetAllCompItems(compTree);
146+
},[compTree]);
147+
148+
// Memoize the click handler
149+
consthandleClick=useCallback(()=>{
150+
editorState.setSelectedCompNames(newSet([props.compName]));
151+
},[editorState,props.compName]);
152+
129153
// Select the modal and its subcomponents on the left to display the modal
130154
useEffect(()=>{
131155
if(
@@ -151,7 +175,6 @@ function SelectHookView(props: {
151175
);
152176
}else{
153177
// all child components of modal
154-
constallChildComp=getAllCompItems((props.compasany).getCompTree());
155178
constselectChildComp=Object.values(allChildComp).find(
156179
(child)=>child===selectedComp
157180
);
@@ -166,14 +189,10 @@ function SelectHookView(props: {
166189
);
167190
}
168191
}
169-
},[selectedComp,editorState.selectSource]);
192+
},[selectedComp,editorState.selectSource,allChildComp]);
170193

171194
return(
172-
<div
173-
onClick={()=>
174-
editorState.setSelectedCompNames(newSet([props.compName]))
175-
}
176-
>
195+
<divonClick={handleClick}>
177196
{props.children}
178197
</div>
179198
);

‎client/packages/lowcoder/src/comps/hooks/modalComp.tsx‎

Lines changed: 79 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { Layers } from "constants/Layers";
1414
import{HintPlaceHolder,Modal,Section,sectionNames}from"lowcoder-design";
1515
import{trans}from"i18n";
1616
import{changeChildAction}from"lowcoder-core";
17-
import{CSSProperties,useCallback}from"react";
17+
import{CSSProperties,useCallback,useMemo,useRef}from"react";
1818
import{ResizeHandle}from"react-resizable";
1919
importstyled,{css}from"styled-components";
2020
import{useUserViewMode}from"util/hooks";
@@ -116,19 +116,36 @@ let TmpModalComp = (function () {
116116
(props,dispatch)=>{
117117
constuserViewMode=useUserViewMode();
118118
constappID=useApplicationId();
119-
constbodyStyle:CSSProperties={padding:0};
120-
constwidth=transToPxSize(props.width||DEFAULT_WIDTH);
121-
letheight=undefined;
122-
letresizeHandles:ResizeHandle[]=["w","e"];
123-
if(!props.autoHeight){
124-
height=transToPxSize(props.height||DEFAULT_HEIGHT);
125-
resizeHandles.push("s");
126-
bodyStyle.overflow="hidden auto";
127-
}
128-
if(userViewMode){
129-
resizeHandles=[];
130-
}
131-
const{ items, ...otherContainerProps}=props.container;
119+
constcontainerRef=useRef<HTMLElement|null>(null);
120+
121+
// Memoize body style
122+
constbodyStyle=useMemo<CSSProperties>(()=>({
123+
padding:0,
124+
overflow:props.autoHeight ?undefined :"hidden auto"
125+
}),[props.autoHeight]);
126+
127+
// Memoize width and height
128+
constwidth=useMemo(()=>
129+
transToPxSize(props.width||DEFAULT_WIDTH),
130+
[props.width]
131+
);
132+
133+
constheight=useMemo(()=>
134+
!props.autoHeight ?transToPxSize(props.height||DEFAULT_HEIGHT) :undefined,
135+
[props.autoHeight,props.height]
136+
);
137+
138+
// Memoize resize handles
139+
constresizeHandles=useMemo<ResizeHandle[]>(()=>{
140+
if(userViewMode)return[];
141+
consthandles:ResizeHandle[]=["w","e"];
142+
if(!props.autoHeight){
143+
handles.push("s");
144+
}
145+
returnhandles;
146+
},[userViewMode,props.autoHeight]);
147+
148+
// Memoize resize handler
132149
constonResizeStop=useCallback(
133150
(
134151
e:React.SyntheticEvent,
@@ -144,13 +161,48 @@ let TmpModalComp = (function () {
144161
},
145162
[dispatch]
146163
);
147-
letpaddingValues=[10,10];
148-
if(props.style.padding!=undefined){
164+
165+
// Memoize padding values
166+
constpaddingValues=useMemo(()=>{
167+
if(!props.style.padding)return[10,10];
149168
constextractedValues=extractMarginValues(props.style);
150-
if(extractedValues!==null){
151-
paddingValues=extractedValues;
152-
}
153-
}
169+
returnextractedValues||[10,10];
170+
},[props.style.padding]);
171+
172+
// Memoize container getter
173+
constgetContainer=useCallback(()=>{
174+
if(!containerRef.current){
175+
containerRef.current=document.querySelector(`#${CanvasContainerID}`)||document.body;
176+
}
177+
returncontainerRef.current;
178+
},[]);
179+
180+
// Memoize event handlers
181+
consthandleCancel=useCallback((e:React.MouseEvent)=>{
182+
if(props.toggleClose){
183+
props.visible.onChange(false);
184+
}
185+
},[props.toggleClose,props.visible]);
186+
187+
consthandleAfterClose=useCallback(()=>{
188+
if(props.toggleClose){
189+
props.onEvent("close");
190+
}
191+
},[props.toggleClose,props.onEvent]);
192+
193+
consthandleAfterOpenChange=useCallback((open:boolean)=>{
194+
if(open){
195+
props.onEvent("open");
196+
}
197+
},[props.onEvent]);
198+
199+
// Memoize modal render function
200+
constmodalRender=useCallback((node:React.ReactNode)=>(
201+
<ModalStyled$style={props.style}$modalScrollbar={props.modalScrollbar}>
202+
{node}
203+
</ModalStyled>
204+
),[props.style,props.modalScrollbar]);
205+
154206
return(
155207
<BackgroundColorContext.Providervalue={props.style.background}>
156208
<ModalWrapper>
@@ -162,30 +214,24 @@ let TmpModalComp = (function () {
162214
open={props.visible.value}
163215
maskClosable={props.maskClosable}
164216
focusTriggerAfterClose={false}
165-
getContainer={()=>document.querySelector(`#${CanvasContainerID}`)||document.body}
217+
getContainer={getContainer}
166218
footer={null}
167219
styles={{body:bodyStyle}}
168220
title={props.title}
169221
$titleAlign={props.titleAlign}
170222
width={width}
171-
onCancel={(e)=>{
172-
props.toggleClose&&props.visible.onChange(false);
173-
}}
174-
afterClose={()=>{
175-
props.toggleClose&&props.onEvent("close");
176-
}}
177-
afterOpenChange={(open:boolean)=>{
178-
if(open)props.onEvent("open");
179-
}}
223+
onCancel={handleCancel}
224+
afterClose={handleAfterClose}
225+
afterOpenChange={handleAfterOpenChange}
180226
zIndex={Layers.modal}
181-
modalRender={(node)=><ModalStyled$style={props.style}$modalScrollbar={props.modalScrollbar}>{node}</ModalStyled>}
227+
modalRender={modalRender}
182228
mask={props.showMask}
183229
className={clsx(`app-${appID}`,props.className)}
184230
data-testid={props.dataTestIdasstring}
185231
>
186232
<InnerGrid
187-
{...otherContainerProps}
188-
items={gridItemCompToGridItems(items)}
233+
{...props.container}
234+
items={gridItemCompToGridItems(props.container.items)}
189235
horizontalGridCells={props.horizontalGridCells}
190236
autoHeight={props.autoHeight}
191237
minHeight={paddingValues ?DEFAULT_HEIGHT-paddingValues[0]*2+"px" :""}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp