Skip to content

Commit d6fde12

Browse files
raheeliftikhar5raheeliftikhar5
committed
rever left panel optimisations
1 parent 1d9645b commit d6fde12

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-
import React, { ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
18+
import React, { ReactNode, useCallback, useContext, useMemo, useState } from "react";
1919
import { hookCompCategory } from "comps/hooks/hookCompTypes";
2020
import _ from "lodash";
2121
import styled from "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
import Modal from "antd/es/modal/Modal";
36-
import { useUnmount } from "react-use";
3736

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

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

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

124+
141125
export default toDataView;
142126

143127
function sliceArr(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
const onlyOne = Object.keys(data).length === 1;
195-
const dataString = 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-
<CopyTextButton text={dataString} style={{ color: "#aaa", marginRight: "8px" }} />
221+
<CopyTextButton text={safeStringify(data)} style={{ color: "#aaa", marginRight: "8px" }} />
240222
}
241223
</div>
242224
),
@@ -248,6 +230,7 @@ const CollapseView = React.memo(
248230
}
249231
);
250232

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

299-
export const LeftContent = React.memo((props: LeftContentProps) => {
282+
export const LeftContent = (props: LeftContentProps) => {
300283
const { uiComp } = props;
301284
const editorState = useContext(EditorContext);
302-
const mountedRef = 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-
const getTree = useCallback((tree: CompTree, result: NodeItem[], key?: string) => {
313-
if (!mountedRef.current) return result;
288+
const getTree = (tree: CompTree, result: NodeItem[], key?: string) => {
314289
const { items, children } = tree;
315290
if (Object.keys(items).length) {
316291
for (const i in items) {
@@ -335,64 +310,60 @@ export const LeftContent = React.memo((props: LeftContentProps) => {
335310
}
336311
}
337312
return result;
338-
}, []);
313+
};
339314

340-
const handleNodeClick = useCallback(
341-
(e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
315+
const handleNodeClick = (
316+
e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
342317
node: EventDataNode<DataNode>,
343-
uiCompInfos: CompInfo[]) => {
344-
if (!mountedRef.current) return;
345-
uiCollapseClick(node.title + "");
346-
const data = uiCompInfos.find((item) => item.name === node.title);
347-
if (!node.children?.length && data && Object.keys(data.data)?.length && node.selected) {
348-
const index = showData.findIndex((item) => item.key === node.key);
349-
let newData: NodeInfo[] = [];
350-
let clientX = 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-
return item;
361-
});
362-
} else {
363-
newData = [
364-
...showData,
365-
{
366-
key: node.key + "",
367-
show: true,
318+
uiCompInfos: CompInfo[]
319+
) => {
320+
uiCollapseClick(node.title + "");
321+
const data = 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+
const index = showData.findIndex((item) => item.key === node.key);
325+
let newData: NodeInfo[] = [];
326+
let clientX = 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+
return item;
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
const uiCollapseClick = useCallback(
379353
(compName: string) => {
380-
if (!mountedRef.current) return;
381354
editorState.setSelectedCompNames(new Set([compName]), "leftPanel");
382355
},
383356
[editorState]
384357
);
385358

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

394-
const getTreeNode = useCallback((node: NodeItem, uiCompInfos: CompInfo[]) => {
395-
if (!mountedRef.current) return null;
366+
const getTreeNode = (node: NodeItem, uiCompInfos: CompInfo[]) => {
396367
const info = showData.find((item) => item.key === node.key);
397368
const data = 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
const newData = 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-
const newData = showData.map((item) => {
453-
if (item.key === node.key) {
454-
return {
455-
key: item.key,
456-
show: true,
457-
clientX: undefined,
458-
};
459-
}
460-
return item;
461-
});
421+
const index = showData.findIndex((item) => item.key === node.key);
422+
let newData: NodeInfo[] = [];
423+
const info = {
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+
return info;
432+
}
433+
return item;
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-
const getTreeUI = useCallback((type: TreeUIKey) => {
495-
if (!mountedRef.current) return null;
471+
const getTreeUI = (type: TreeUIKey) => {
496472
const uiCompInfos = _.sortBy(editorState.uiCompInfoList(), [(x) => x.name]);
497473
const tree =
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(nodeData as NodeItem, uiCompInfos)}
539512
/>
540513
);
541-
}, [editorState, expandedKeys, getTree, handleNodeClick, getTreeNode]);
542-
543-
useUnmount(() => {
544-
mountedRef.current = false;
545-
setExpandedKeys([]);
546-
setShowData([]);
547-
});
514+
};
548515

549516
const uiCollapse = 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)