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

Commitd6fde12

Browse files
rever left panel optimisations
1 parent1d9645b commitd6fde12

File tree

1 file changed

+69
-102
lines changed

1 file changed

+69
-102
lines changed

‎client/packages/lowcoder/src/pages/editor/LeftContent.tsx

Lines changed: 69 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
UnShow,
1616
TacoButton,
1717
}from"lowcoder-design";
18-
importReact,{ReactNode,useCallback,useContext,useEffect,useMemo,useRef,useState}from"react";
18+
importReact,{ReactNode,useCallback,useContext,useMemo,useState}from"react";
1919
import{hookCompCategory}from"comps/hooks/hookCompTypes";
2020
import_from"lodash";
2121
importstyledfrom"styled-components";
@@ -33,7 +33,6 @@ import { CollapseWrapper, DirectoryTreeStyle, Node } from "./styledComponents";
3333
import{DataNode,EventDataNode}from"antd/es/tree";
3434
import{isAggregationApp}from"util/appUtils";
3535
importModalfrom"antd/es/modal/Modal";
36-
import{useUnmount}from"react-use";
3736

3837
constCollapseTitleWrapper=styled.div`
3938
display: flex;
@@ -69,20 +68,9 @@ function getLen(config: string | boolean | number) {
6968
return0;
7069
}
7170

72-
conststringifyCache=newMap();
73-
7471
functionsafeStringify(obj:any,space=2){
75-
if(obj===null||obj===undefined||typeofobj!=='object'){
76-
returnJSON.stringify(obj);
77-
}
78-
79-
constcacheKey=obj;
80-
if(stringifyCache.has(cacheKey)){
81-
returnstringifyCache.get(cacheKey);
82-
}
83-
8472
constcache=newSet();
85-
constresult=JSON.stringify(obj,(key,value)=>{
73+
returnJSON.stringify(obj,(key,value)=>{
8674
if(typeofvalue==='object'&&value!==null){
8775
if(cache.has(value)){
8876
return'[Circular]';
@@ -91,14 +79,9 @@ function safeStringify(obj: any, space = 2) {
9179
}
9280
returnvalue;
9381
},space);
94-
95-
if(result.length<10000){
96-
stringifyCache.set(cacheKey,result);
97-
}
98-
99-
returnresult;
10082
}
10183

84+
10285
functiontoDataView(value:any,name:string,desc?:ReactNode,modal?:boolean){
10386
conststr=typeofvalue==="function" ?"Function" :safeStringify(value);
10487
constdescRecord:Record<string,ReactNode>={};
@@ -138,6 +121,7 @@ function toDataView(value: any, name: string, desc?: ReactNode, modal?: boolean)
138121
}
139122
}
140123

124+
141125
exportdefaulttoDataView;
142126

143127
functionsliceArr(arr:string[]){
@@ -187,13 +171,11 @@ const CollapseView = React.memo(
187171
onClick?:(compName:string)=>void;
188172
isSelected?:boolean;
189173
isOpen?:boolean;
190-
children?:React.ReactNode;
174+
children?:React.ReactNode;// Accept children
191175
modal?:boolean;
192176
})=>{
193177
const{ data={}}=props;
194178
constonlyOne=Object.keys(data).length===1;
195-
constdataString=useMemo(()=>safeStringify(data),[data]);
196-
197179
return(
198180
<Collapse
199181
isSelected={props.isSelected}
@@ -236,7 +218,7 @@ const CollapseView = React.memo(
236218
</CollapseTitleWrapper>
237219
</Tooltip>
238220
{Object.keys(data).length>0&&
239-
<CopyTextButtontext={dataString}style={{color:"#aaa",marginRight:"8px"}}/>
221+
<CopyTextButtontext={safeStringify(data)}style={{color:"#aaa",marginRight:"8px"}}/>
240222
}
241223
</div>
242224
),
@@ -248,6 +230,7 @@ const CollapseView = React.memo(
248230
}
249231
);
250232

233+
251234
interfaceLeftContentProps{
252235
uiComp:InstanceType<typeofUIComp>;
253236
}
@@ -296,21 +279,13 @@ const LeftContentWrapper = styled.div`
296279
height: calc(100vh -${TopHeaderHeight});
297280
`;
298281

299-
exportconstLeftContent=React.memo((props:LeftContentProps)=>{
282+
exportconstLeftContent=(props:LeftContentProps)=>{
300283
const{ uiComp}=props;
301284
consteditorState=useContext(EditorContext);
302-
constmountedRef=useRef(true);
303285
const[expandedKeys,setExpandedKeys]=useState<Array<React.Key>>([]);
304286
const[showData,setShowData]=useState<NodeInfo[]>([]);
305287

306-
useEffect(()=>{
307-
return()=>{
308-
mountedRef.current=false;
309-
};
310-
},[]);
311-
312-
constgetTree=useCallback((tree:CompTree,result:NodeItem[],key?:string)=>{
313-
if(!mountedRef.current)returnresult;
288+
constgetTree=(tree:CompTree,result:NodeItem[],key?:string)=>{
314289
const{ items, children}=tree;
315290
if(Object.keys(items).length){
316291
for(constiinitems){
@@ -335,64 +310,60 @@ export const LeftContent = React.memo((props: LeftContentProps) => {
335310
}
336311
}
337312
returnresult;
338-
},[]);
313+
};
339314

340-
consthandleNodeClick=useCallback(
341-
(e:React.MouseEvent<HTMLSpanElement,MouseEvent>,
315+
consthandleNodeClick=(
316+
e:React.MouseEvent<HTMLSpanElement,MouseEvent>,
342317
node:EventDataNode<DataNode>,
343-
uiCompInfos:CompInfo[])=>{
344-
if(!mountedRef.current)return;
345-
uiCollapseClick(node.title+"");
346-
constdata=uiCompInfos.find((item)=>item.name===node.title);
347-
if(!node.children?.length&&data&&Object.keys(data.data)?.length&&node.selected){
348-
constindex=showData.findIndex((item)=>item.key===node.key);
349-
letnewData:NodeInfo[]=[];
350-
letclientX=e.currentTarget?.offsetLeft+20;
351-
if(index>-1){
352-
newData=showData.map((item)=>{
353-
if(item.key===node.key){
354-
return{
355-
key:item.key,
356-
show:!item.show,
357-
clientX,
358-
};
359-
}
360-
returnitem;
361-
});
362-
}else{
363-
newData=[
364-
...showData,
365-
{
366-
key:node.key+"",
367-
show:true,
318+
uiCompInfos:CompInfo[]
319+
)=>{
320+
uiCollapseClick(node.title+"");
321+
constdata=uiCompInfos.find((item)=>item.name===node.title);
322+
if(!node.children?.length&&data&&Object.keys(data.data)?.length&&node.selected){
323+
// leaf and selected node, toggle showData
324+
constindex=showData.findIndex((item)=>item.key===node.key);
325+
letnewData:NodeInfo[]=[];
326+
letclientX=e.currentTarget?.offsetLeft+20;
327+
if(index>-1){
328+
newData=showData.map((item)=>{
329+
if(item.key===node.key){
330+
return{
331+
key:item.key,
332+
show:!item.show,
368333
clientX,
369-
},
370-
];
371-
}
372-
setShowData(newData);
334+
};
335+
}
336+
returnitem;
337+
});
338+
}else{
339+
newData=[
340+
...showData,
341+
{
342+
key:node.key+"",
343+
show:true,
344+
clientX,
345+
},
346+
];
373347
}
374-
},
375-
[showData]
376-
);
348+
setShowData(newData);
349+
}
350+
};
377351

378352
constuiCollapseClick=useCallback(
379353
(compName:string)=>{
380-
if(!mountedRef.current)return;
381354
editorState.setSelectedCompNames(newSet([compName]),"leftPanel");
382355
},
383356
[editorState]
384357
);
385358

386359
consthandleBottomResItemClick=useCallback(
387360
(type:BottomResTypeEnum,name:string)=>{
388-
if(!mountedRef.current)return;
389361
editorState.setSelectedBottomRes(name,type);
390362
},
391363
[editorState]
392364
);
393365

394-
constgetTreeNode=useCallback((node:NodeItem,uiCompInfos:CompInfo[])=>{
395-
if(!mountedRef.current)returnnull;
366+
constgetTreeNode=(node:NodeItem,uiCompInfos:CompInfo[])=>{
396367
constinfo=showData.find((item)=>item.key===node.key);
397368
constdata=uiCompInfos.find((item)=>item.name===node.title);
398369

@@ -420,7 +391,6 @@ export const LeftContent = React.memo((props: LeftContentProps) => {
420391
title=""
421392
className="show-data"
422393
onClick={(e)=>{
423-
if(!mountedRef.current)return;
424394
e.stopPropagation();
425395
constnewData=showData.map((item)=>{
426396
if(item.key===node.key){
@@ -435,7 +405,7 @@ export const LeftContent = React.memo((props: LeftContentProps) => {
435405
setShowData(newData);
436406
}}
437407
>
438-
<LeftOpen/>
408+
439409
</div>
440410
</Tooltip>
441411
) :(
@@ -445,20 +415,26 @@ export const LeftContent = React.memo((props: LeftContentProps) => {
445415
>
446416
<div
447417
title=""
448-
className="show-data"
418+
className="no-data"
449419
onClick={(e)=>{
450-
if(!mountedRef.current)return;
451420
e.stopPropagation();
452-
constnewData=showData.map((item)=>{
453-
if(item.key===node.key){
454-
return{
455-
key:item.key,
456-
show:true,
457-
clientX:undefined,
458-
};
459-
}
460-
returnitem;
461-
});
421+
constindex=showData.findIndex((item)=>item.key===node.key);
422+
letnewData:NodeInfo[]=[];
423+
constinfo={
424+
key:node.key,
425+
show:true,
426+
clientX:e.currentTarget.parentElement?.offsetLeft,
427+
};
428+
if(index>-1){
429+
newData=showData.map((item)=>{
430+
if(item.key===node.key){
431+
returninfo;
432+
}
433+
returnitem;
434+
});
435+
}else{
436+
newData=[...showData,info];
437+
}
462438
setShowData(newData);
463439
}}
464440
>
@@ -489,10 +465,10 @@ export const LeftContent = React.memo((props: LeftContentProps) => {
489465
)}
490466
</Node>
491467
);
492-
},[showData]);
468+
};
469+
493470

494-
constgetTreeUI=useCallback((type:TreeUIKey)=>{
495-
if(!mountedRef.current)returnnull;
471+
constgetTreeUI=(type:TreeUIKey)=>{
496472
constuiCompInfos=_.sortBy(editorState.uiCompInfoList(),[(x)=>x.name]);
497473
consttree=
498474
type===TreeUIKey.Components
@@ -529,22 +505,13 @@ export const LeftContent = React.memo((props: LeftContentProps) => {
529505
props.expanded ?<FoldedIcon/> :<UnfoldIcon/>
530506
}
531507
expandedKeys={expandedKeys}
532-
onExpand={(keys)=>{
533-
if(!mountedRef.current)return;
534-
setExpandedKeys(keys);
535-
}}
508+
onExpand={(keys)=>setExpandedKeys(keys)}
536509
onClick={(e,node)=>handleNodeClick(e,node,uiCompInfos)}
537510
selectedKeys={selectedKeys}
538511
titleRender={(nodeData)=>getTreeNode(nodeDataasNodeItem,uiCompInfos)}
539512
/>
540513
);
541-
},[editorState,expandedKeys,getTree,handleNodeClick,getTreeNode]);
542-
543-
useUnmount(()=>{
544-
mountedRef.current=false;
545-
setExpandedKeys([]);
546-
setShowData([]);
547-
});
514+
};
548515

549516
constuiCollapse=useMemo(()=>{
550517
if(isAggregationApp(editorState.getAppType())){
@@ -644,4 +611,4 @@ export const LeftContent = React.memo((props: LeftContentProps) => {
644611
</LeftContentTabs>
645612
</LeftContentWrapper>
646613
);
647-
});
614+
};

0 commit comments

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