pixel-react 1.10.24 → 1.10.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,26 +1,43 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
2
|
+
import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
|
|
3
3
|
import './TableTree.scss';
|
|
4
4
|
import TableHead from './Components/TableHead';
|
|
5
5
|
import TableBody from './Components/TableBody';
|
|
6
|
+
// Debounce function to limit how often a function is called
|
|
7
|
+
const debounce = (func, delay) => {
|
|
8
|
+
let timeout;
|
|
9
|
+
return function (...args) {
|
|
10
|
+
clearTimeout(timeout);
|
|
11
|
+
timeout = setTimeout(() => func(...args), delay);
|
|
12
|
+
};
|
|
13
|
+
};
|
|
6
14
|
const TreeTable = ({ treeData, columnsData, selected = [], select = null, onChange, onClick, onExpand, loadMore = () => { }, tableBorder, height = 'calc(100vh - 134px)', newNode = {}, onAddConfirm = (_name) => { }, onAddCancel = () => { }, loading = false, }) => {
|
|
7
15
|
const [expanding, setExpanding] = useState(null);
|
|
8
16
|
const [isLoading, setIsLoading] = useState(null);
|
|
9
17
|
const tableContainerRef = useRef(null);
|
|
10
|
-
const [newTreeData, setNewTreeData] = useState(treeData);
|
|
11
18
|
const savedScrollPosition = useRef(0);
|
|
12
19
|
// Dynamic state for row height and visible rows count
|
|
13
20
|
const [rowHeight, setRowHeight] = useState(0);
|
|
14
21
|
const [visibleRows, setVisibleRows] = useState(0);
|
|
15
|
-
|
|
16
|
-
const
|
|
22
|
+
const rowHeightRef = useRef(0);
|
|
23
|
+
const visibleRowsRef = useRef(0);
|
|
24
|
+
const containerRef = useRef(null);
|
|
25
|
+
// Virtualization: Render only the visible rows
|
|
26
|
+
const renderableRows = useMemo(() => {
|
|
27
|
+
const scrollTop = containerRef.current?.scrollTop ?? 0;
|
|
28
|
+
const firstVisibleRow = Math.floor(scrollTop / rowHeight);
|
|
29
|
+
const lastVisibleRow = Math.min(treeData.length - 1, firstVisibleRow + visibleRows - 1);
|
|
30
|
+
return treeData.slice(firstVisibleRow, lastVisibleRow + 1);
|
|
31
|
+
}, [treeData, rowHeight, visibleRows]);
|
|
32
|
+
// Handle scroll with debouncing
|
|
33
|
+
const handleScroll = useCallback(debounce(async () => {
|
|
17
34
|
if (loading || !treeData.length)
|
|
18
35
|
return;
|
|
19
36
|
const container = tableContainerRef.current;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
37
|
+
if (!container)
|
|
38
|
+
return;
|
|
39
|
+
const scrollTop = container.scrollTop;
|
|
40
|
+
const clientHeight = container.clientHeight;
|
|
24
41
|
if (scrollTop === 0) {
|
|
25
42
|
const firstNode = treeData[0];
|
|
26
43
|
if (firstNode && !firstNode.lastResource) {
|
|
@@ -28,71 +45,59 @@ const TreeTable = ({ treeData, columnsData, selected = [], select = null, onChan
|
|
|
28
45
|
loadMore('above');
|
|
29
46
|
}
|
|
30
47
|
}
|
|
31
|
-
else if (scrollTop + clientHeight >=
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
loadMore('below');
|
|
37
|
-
}
|
|
48
|
+
else if (scrollTop + clientHeight >= container.scrollHeight) {
|
|
49
|
+
const lastNode = treeData[treeData.length - 1];
|
|
50
|
+
if (lastNode && !lastNode.lastResource) {
|
|
51
|
+
setIsLoading('below');
|
|
52
|
+
loadMore('below');
|
|
38
53
|
}
|
|
39
54
|
}
|
|
40
|
-
}
|
|
55
|
+
}, 200), // Delay in ms
|
|
56
|
+
[treeData, loading, loadMore]);
|
|
41
57
|
// Dynamically calculate row height and visible rows
|
|
42
58
|
useEffect(() => {
|
|
43
59
|
const container = tableContainerRef.current;
|
|
44
60
|
const row = document.getElementById('table-first-row');
|
|
45
61
|
if (container && row) {
|
|
46
|
-
|
|
47
|
-
const rowHeight = row.getBoundingClientRect().height;
|
|
48
|
-
setRowHeight(rowHeight);
|
|
49
|
-
// Calculate visible rows based on the container height
|
|
62
|
+
const newRowHeight = row.getBoundingClientRect().height;
|
|
50
63
|
const containerHeight = container.clientHeight;
|
|
51
|
-
const
|
|
52
|
-
|
|
64
|
+
const newVisibleRows = Math.floor(containerHeight / newRowHeight);
|
|
65
|
+
// Only update the state if there's a change
|
|
66
|
+
if (newRowHeight !== rowHeightRef.current ||
|
|
67
|
+
newVisibleRows !== visibleRowsRef.current) {
|
|
68
|
+
rowHeightRef.current = newRowHeight;
|
|
69
|
+
visibleRowsRef.current = newVisibleRows;
|
|
70
|
+
setRowHeight(newRowHeight);
|
|
71
|
+
setVisibleRows(newVisibleRows);
|
|
72
|
+
}
|
|
53
73
|
}
|
|
54
74
|
}, [treeData]);
|
|
55
75
|
useEffect(() => {
|
|
56
76
|
if (expanding && !loading) {
|
|
57
77
|
setExpanding(null);
|
|
58
78
|
}
|
|
59
|
-
if (isLoading) {
|
|
60
|
-
|
|
61
|
-
setIsLoading(null);
|
|
62
|
-
}
|
|
79
|
+
if (isLoading && !loading) {
|
|
80
|
+
setIsLoading(null);
|
|
63
81
|
}
|
|
64
82
|
}, [loading]);
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
if (expanding) {
|
|
67
|
-
setTimeout(() => {
|
|
68
|
-
if (expanding) {
|
|
69
|
-
setExpanding(null);
|
|
70
|
-
}
|
|
71
|
-
if (isLoading) {
|
|
72
|
-
setIsLoading(null);
|
|
73
|
-
}
|
|
74
|
-
}, 3000);
|
|
75
|
-
}
|
|
76
|
-
}, [expanding]);
|
|
77
83
|
useEffect(() => {
|
|
78
84
|
if (isLoading === 'above' && treeData.length > 0 && !loading) {
|
|
79
85
|
const container = tableContainerRef.current;
|
|
80
86
|
if (container) {
|
|
81
87
|
const newScrollPosition = savedScrollPosition.current + rowHeight * visibleRows;
|
|
82
|
-
|
|
88
|
+
window.requestAnimationFrame(() => {
|
|
83
89
|
container.scrollTop = newScrollPosition;
|
|
84
|
-
}
|
|
90
|
+
});
|
|
85
91
|
}
|
|
86
92
|
}
|
|
87
|
-
// After data is loaded, update the tree data state
|
|
88
|
-
setNewTreeData(treeData);
|
|
89
93
|
}, [treeData, isLoading, rowHeight, visibleRows]);
|
|
94
|
+
// Memoized handlers to prevent unnecessary re-renders
|
|
90
95
|
const handleToggleExpand = useCallback((node, index) => {
|
|
91
96
|
if (expanding)
|
|
92
97
|
return;
|
|
93
98
|
setExpanding(node.key);
|
|
94
99
|
onExpand?.(node, index);
|
|
95
|
-
}, [onExpand, expanding]);
|
|
100
|
+
}, [onExpand, expanding, loadMore]);
|
|
96
101
|
const handleCheckBoxChange = useCallback((e, node) => {
|
|
97
102
|
if (expanding)
|
|
98
103
|
return;
|
|
@@ -103,10 +108,25 @@ const TreeTable = ({ treeData, columnsData, selected = [], select = null, onChan
|
|
|
103
108
|
return;
|
|
104
109
|
onClick?.(e, node);
|
|
105
110
|
}, [onClick, expanding]);
|
|
106
|
-
|
|
111
|
+
// Memoize TableHead and TableBody components to avoid unnecessary re-renders
|
|
112
|
+
const TableHeadMemo = useMemo(() => _jsx(TableHead, { columnsData: columnsData }), [columnsData]);
|
|
113
|
+
const TableBodyMemo = useMemo(() => (_jsx(TableBody, { flattenedTreeData: renderableRows, columnsData: columnsData, selected: selected, select: select, onRowClick: handleRowClick, onToggleExpand: handleToggleExpand, onCheckBoxChange: handleCheckBoxChange, newNode: newNode, onAddConfirm: onAddConfirm, onAddCancel: onAddCancel, expanding: expanding })), [
|
|
114
|
+
renderableRows,
|
|
115
|
+
columnsData,
|
|
116
|
+
selected,
|
|
117
|
+
select,
|
|
118
|
+
handleRowClick,
|
|
119
|
+
handleToggleExpand,
|
|
120
|
+
handleCheckBoxChange,
|
|
121
|
+
newNode,
|
|
122
|
+
onAddConfirm,
|
|
123
|
+
onAddCancel,
|
|
124
|
+
expanding,
|
|
125
|
+
]);
|
|
126
|
+
return (_jsx("div", { className: "tree-table-wrap", children: _jsx("div", { ref: containerRef, className: "table-scrollable", id: "ff-table-tree-scroll-container", onScroll: handleScroll, style: {
|
|
107
127
|
'--table-height': height,
|
|
108
128
|
border: tableBorder,
|
|
109
|
-
}, children: _jsxs("table", { className: "tree-table", children: [
|
|
129
|
+
}, children: _jsxs("table", { className: "tree-table", children: [TableHeadMemo, TableBodyMemo] }) }) }));
|
|
110
130
|
};
|
|
111
131
|
export default TreeTable;
|
|
112
132
|
//# sourceMappingURL=TableTree.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableTree.js","sourceRoot":"","sources":["../../../src/components/TableTree/TableTree.tsx"],"names":[],"mappings":";AAAA,OAAc,
|
|
1
|
+
{"version":3,"file":"TableTree.js","sourceRoot":"","sources":["../../../src/components/TableTree/TableTree.tsx"],"names":[],"mappings":"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"}
|