@arim-aisdc/public-components 2.3.82 → 2.3.84
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.
- package/dist/components/ConfigProvider/context.d.ts +1 -1
- package/dist/components/TableMax/TableBody/VirtualRow.js +94 -15
- package/dist/components/TableMax/TableBody/VirtualRow1.d.ts +62 -0
- package/dist/components/TableMax/TableBody/VirtualRow1.js +560 -0
- package/dist/components/TableMax/TableBody/VirtualTableBody.js +196 -29
- package/dist/components/TableMax/TableBody/virtualTableBody1.d.ts +0 -0
- package/dist/components/TableMax/TableBody/virtualTableBody1.js +0 -0
- package/dist/components/TableMax/TableMax.js +23 -21
- package/dist/components/TableMax/hooks/useColumnWidth.js +53 -15
- package/package.json +2 -1
|
@@ -15,7 +15,7 @@ import { useDrop } from 'react-dnd';
|
|
|
15
15
|
import { CustomDragLayer } from "../components/CustomDragerLayer";
|
|
16
16
|
import { DropSide } from "../type";
|
|
17
17
|
import { events, useEventBus } from "../../..";
|
|
18
|
-
import React, { useCallback, useMemo, useState } from 'react';
|
|
18
|
+
import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
|
|
19
19
|
import { createPortal } from 'react-dom';
|
|
20
20
|
import { useConfig } from "../../ConfigProvider";
|
|
21
21
|
import Empty from "../../Empty";
|
|
@@ -28,6 +28,162 @@ import { useVirtualCalculations } from "../hooks/useVirtualCalculations";
|
|
|
28
28
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
29
29
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
30
30
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
31
|
+
// 自定义的拖拽自动滚动 Hook
|
|
32
|
+
var useDragAutoScroll = function useDragAutoScroll(tableBodyRef, tableContentRef, canRowDrag, rowVirtualizer, table) {
|
|
33
|
+
var autoScrollIntervalRef = useRef(null);
|
|
34
|
+
var lastScrollTimeRef = useRef(0);
|
|
35
|
+
var SCROLL_THROTTLE = 16; // ~60fps
|
|
36
|
+
var SCROLL_ZONE = 80; // 触发滚动的边缘区域
|
|
37
|
+
|
|
38
|
+
var scrollStep = useCallback(function (direction) {
|
|
39
|
+
if (!(tableBodyRef !== null && tableBodyRef !== void 0 && tableBodyRef.current)) return;
|
|
40
|
+
var container = tableBodyRef.current;
|
|
41
|
+
var now = Date.now();
|
|
42
|
+
|
|
43
|
+
// 节流控制
|
|
44
|
+
if (now - lastScrollTimeRef.current < SCROLL_THROTTLE) return;
|
|
45
|
+
var baseScrollAmount = 25;
|
|
46
|
+
var currentScrollTop = container.scrollTop;
|
|
47
|
+
var maxScroll = container.scrollHeight - container.clientHeight;
|
|
48
|
+
|
|
49
|
+
// 动态计算滚动速度:距离边缘越近,滚动越慢
|
|
50
|
+
var dynamicSpeed = baseScrollAmount;
|
|
51
|
+
if (direction > 0) {
|
|
52
|
+
// 向下滚动
|
|
53
|
+
var distanceToBottom = maxScroll - currentScrollTop;
|
|
54
|
+
if (distanceToBottom < 100) {
|
|
55
|
+
dynamicSpeed = Math.max(5, distanceToBottom * 0.3);
|
|
56
|
+
}
|
|
57
|
+
} else {
|
|
58
|
+
// 向上滚动
|
|
59
|
+
if (currentScrollTop < 100) {
|
|
60
|
+
dynamicSpeed = Math.max(5, currentScrollTop * 0.3);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
if (direction > 0) {
|
|
64
|
+
// 向下滚动
|
|
65
|
+
var newScrollTop = Math.min(maxScroll, currentScrollTop + dynamicSpeed);
|
|
66
|
+
container.scrollTop = newScrollTop;
|
|
67
|
+
} else {
|
|
68
|
+
// 向上滚动
|
|
69
|
+
var _newScrollTop = Math.max(0, currentScrollTop - dynamicSpeed);
|
|
70
|
+
container.scrollTop = _newScrollTop;
|
|
71
|
+
}
|
|
72
|
+
lastScrollTimeRef.current = now;
|
|
73
|
+
}, [tableBodyRef]);
|
|
74
|
+
var startAutoScroll = useCallback(function (direction) {
|
|
75
|
+
if (autoScrollIntervalRef.current || !(tableBodyRef !== null && tableBodyRef !== void 0 && tableBodyRef.current)) return;
|
|
76
|
+
|
|
77
|
+
// 立即执行一次滚动
|
|
78
|
+
scrollStep(direction);
|
|
79
|
+
|
|
80
|
+
// 然后开始定时滚动
|
|
81
|
+
autoScrollIntervalRef.current = setInterval(function () {
|
|
82
|
+
scrollStep(direction);
|
|
83
|
+
}, SCROLL_THROTTLE);
|
|
84
|
+
}, [scrollStep, tableBodyRef]);
|
|
85
|
+
var stopAutoScroll = useCallback(function () {
|
|
86
|
+
if (autoScrollIntervalRef.current) {
|
|
87
|
+
clearInterval(autoScrollIntervalRef.current);
|
|
88
|
+
autoScrollIntervalRef.current = null;
|
|
89
|
+
}
|
|
90
|
+
}, []);
|
|
91
|
+
var checkAndScroll = useCallback(function (clientY) {
|
|
92
|
+
if (!(tableBodyRef !== null && tableBodyRef !== void 0 && tableBodyRef.current) || !canRowDrag) return;
|
|
93
|
+
var container = tableBodyRef.current;
|
|
94
|
+
var rect = container.getBoundingClientRect();
|
|
95
|
+
|
|
96
|
+
// 检查鼠标是否在表格区域内
|
|
97
|
+
var isInTableArea = clientY >= rect.top && clientY <= rect.bottom;
|
|
98
|
+
if (!isInTableArea) {
|
|
99
|
+
stopAutoScroll();
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
// 计算鼠标距离容器顶部和底部的距离
|
|
104
|
+
var distanceFromTop = clientY - rect.top;
|
|
105
|
+
var distanceFromBottom = rect.bottom - clientY;
|
|
106
|
+
|
|
107
|
+
// 在边缘区域触发滚动
|
|
108
|
+
if (distanceFromTop < SCROLL_ZONE) {
|
|
109
|
+
// 距离顶部很近,向上滚动
|
|
110
|
+
var intensity = 1 - distanceFromTop / SCROLL_ZONE;
|
|
111
|
+
startAutoScroll(-intensity);
|
|
112
|
+
} else if (distanceFromBottom < SCROLL_ZONE) {
|
|
113
|
+
// 距离底部很近,向下滚动
|
|
114
|
+
var _intensity = 1 - distanceFromBottom / SCROLL_ZONE;
|
|
115
|
+
startAutoScroll(_intensity);
|
|
116
|
+
} else {
|
|
117
|
+
stopAutoScroll();
|
|
118
|
+
}
|
|
119
|
+
}, [startAutoScroll, stopAutoScroll, tableBodyRef, canRowDrag]);
|
|
120
|
+
|
|
121
|
+
// 针对虚拟化表格的特殊滚动检查
|
|
122
|
+
var checkVirtualScroll = useCallback(function (clientY) {
|
|
123
|
+
if (!(tableBodyRef !== null && tableBodyRef !== void 0 && tableBodyRef.current) || !rowVirtualizer || !table) {
|
|
124
|
+
checkAndScroll(clientY);
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
var container = tableBodyRef.current;
|
|
128
|
+
var rect = container.getBoundingClientRect();
|
|
129
|
+
|
|
130
|
+
// 检查鼠标是否在表格区域内
|
|
131
|
+
var isInTableArea = clientY >= rect.top && clientY <= rect.bottom;
|
|
132
|
+
if (!isInTableArea) {
|
|
133
|
+
stopAutoScroll();
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
// 计算鼠标距离容器顶部和底部的距离
|
|
138
|
+
var distanceFromTop = clientY - rect.top;
|
|
139
|
+
var distanceFromBottom = rect.bottom - clientY;
|
|
140
|
+
var virtualRows = rowVirtualizer.getVirtualItems();
|
|
141
|
+
var totalRows = table.getRowModel().rows.length;
|
|
142
|
+
var shouldScroll = false;
|
|
143
|
+
var scrollDirection = 0;
|
|
144
|
+
|
|
145
|
+
// 检查是否需要滚动到虚拟化的边界
|
|
146
|
+
if (distanceFromTop < SCROLL_ZONE) {
|
|
147
|
+
if (virtualRows.length > 0 && virtualRows[0].index > 0) {
|
|
148
|
+
// 还有更多行在上方,向上滚动
|
|
149
|
+
shouldScroll = true;
|
|
150
|
+
scrollDirection = -1;
|
|
151
|
+
} else if (container.scrollTop > 0) {
|
|
152
|
+
// 虚拟行已经到顶部,但容器还有滚动空间
|
|
153
|
+
shouldScroll = true;
|
|
154
|
+
scrollDirection = -1;
|
|
155
|
+
}
|
|
156
|
+
} else if (distanceFromBottom < SCROLL_ZONE) {
|
|
157
|
+
if (virtualRows.length > 0 && virtualRows[virtualRows.length - 1].index < totalRows - 1) {
|
|
158
|
+
// 还有更多行在下方,向下滚动
|
|
159
|
+
shouldScroll = true;
|
|
160
|
+
scrollDirection = 1;
|
|
161
|
+
} else if (container.scrollTop < container.scrollHeight - container.clientHeight) {
|
|
162
|
+
// 虚拟行已经到底部,但容器还有滚动空间
|
|
163
|
+
shouldScroll = true;
|
|
164
|
+
scrollDirection = 1;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
if (shouldScroll) {
|
|
168
|
+
var intensity = scrollDirection > 0 ? 1 - distanceFromBottom / SCROLL_ZONE : 1 - distanceFromTop / SCROLL_ZONE;
|
|
169
|
+
startAutoScroll(scrollDirection * intensity);
|
|
170
|
+
} else {
|
|
171
|
+
stopAutoScroll();
|
|
172
|
+
}
|
|
173
|
+
}, [tableBodyRef, rowVirtualizer, table, startAutoScroll, stopAutoScroll, checkAndScroll]);
|
|
174
|
+
|
|
175
|
+
// 清理函数
|
|
176
|
+
useEffect(function () {
|
|
177
|
+
return function () {
|
|
178
|
+
stopAutoScroll();
|
|
179
|
+
};
|
|
180
|
+
}, []);
|
|
181
|
+
return {
|
|
182
|
+
checkAndScroll: checkVirtualScroll,
|
|
183
|
+
stopAutoScroll: stopAutoScroll,
|
|
184
|
+
startAutoScroll: startAutoScroll
|
|
185
|
+
};
|
|
186
|
+
};
|
|
31
187
|
var VirtualTableBody = function VirtualTableBody(_ref) {
|
|
32
188
|
var _headerGroups, _table$getRowModel$ro2;
|
|
33
189
|
var tableBodyRef = _ref.tableBodyRef,
|
|
@@ -115,6 +271,11 @@ var VirtualTableBody = function VirtualTableBody(_ref) {
|
|
|
115
271
|
dropSide = _useState6[0],
|
|
116
272
|
setDropSide = _useState6[1];
|
|
117
273
|
|
|
274
|
+
// 使用自定义的拖拽自动滚动 Hook
|
|
275
|
+
var _useDragAutoScroll = useDragAutoScroll(tableBodyRef, tableContentRef, canRowDrag, rowVirtualizer, table),
|
|
276
|
+
checkAndScroll = _useDragAutoScroll.checkAndScroll,
|
|
277
|
+
stopAutoScroll = _useDragAutoScroll.stopAutoScroll;
|
|
278
|
+
|
|
118
279
|
// 清除hover行信息
|
|
119
280
|
var clearHoverRowIndex = useCallback(function () {
|
|
120
281
|
setHoverRowIndex(undefined);
|
|
@@ -191,9 +352,36 @@ var VirtualTableBody = function VirtualTableBody(_ref) {
|
|
|
191
352
|
visible: false
|
|
192
353
|
}));
|
|
193
354
|
}, []);
|
|
355
|
+
|
|
356
|
+
// 添加全局拖拽监听,实现自动滚动
|
|
357
|
+
useEffect(function () {
|
|
358
|
+
var handleGlobalDragOver = function handleGlobalDragOver(e) {
|
|
359
|
+
if (canRowDrag) {
|
|
360
|
+
e.preventDefault();
|
|
361
|
+
checkAndScroll(e.clientY);
|
|
362
|
+
}
|
|
363
|
+
};
|
|
364
|
+
var handleDragEnd = function handleDragEnd() {
|
|
365
|
+
stopAutoScroll();
|
|
366
|
+
};
|
|
367
|
+
if (canRowDrag) {
|
|
368
|
+
document.addEventListener('dragover', handleGlobalDragOver, {
|
|
369
|
+
passive: false
|
|
370
|
+
});
|
|
371
|
+
document.addEventListener('dragend', handleDragEnd);
|
|
372
|
+
document.addEventListener('drop', handleDragEnd);
|
|
373
|
+
}
|
|
374
|
+
return function () {
|
|
375
|
+
document.removeEventListener('dragover', handleGlobalDragOver);
|
|
376
|
+
document.removeEventListener('dragend', handleDragEnd);
|
|
377
|
+
document.removeEventListener('drop', handleDragEnd);
|
|
378
|
+
stopAutoScroll();
|
|
379
|
+
};
|
|
380
|
+
}, [canRowDrag, checkAndScroll, stopAutoScroll]);
|
|
194
381
|
var _useDrop = useDrop({
|
|
195
382
|
accept: 'TABLE_ROW',
|
|
196
383
|
drop: function drop(formDatas) {
|
|
384
|
+
stopAutoScroll();
|
|
197
385
|
return reorderRow === null || reorderRow === void 0 ? void 0 : reorderRow(formDatas, {
|
|
198
386
|
hoverRow: {
|
|
199
387
|
index: 0
|
|
@@ -210,6 +398,7 @@ var VirtualTableBody = function VirtualTableBody(_ref) {
|
|
|
210
398
|
if (monitor.didDrop()) {
|
|
211
399
|
return undefined;
|
|
212
400
|
}
|
|
401
|
+
stopAutoScroll();
|
|
213
402
|
clearHoverRowIndex();
|
|
214
403
|
return reorderRow === null || reorderRow === void 0 ? void 0 : reorderRow(formDatas, {
|
|
215
404
|
hoverRow: undefined,
|
|
@@ -217,9 +406,11 @@ var VirtualTableBody = function VirtualTableBody(_ref) {
|
|
|
217
406
|
});
|
|
218
407
|
},
|
|
219
408
|
hover: function hover(item, monitor) {
|
|
220
|
-
|
|
409
|
+
var clientOffset = monitor.getClientOffset();
|
|
410
|
+
if (clientOffset && monitor.isOver({
|
|
221
411
|
shallow: true
|
|
222
412
|
}) && monitor.canDrop()) {
|
|
413
|
+
checkAndScroll(clientOffset.y);
|
|
223
414
|
addToLast();
|
|
224
415
|
}
|
|
225
416
|
}
|
|
@@ -282,14 +473,7 @@ var VirtualTableBody = function VirtualTableBody(_ref) {
|
|
|
282
473
|
dropSide: dropSide,
|
|
283
474
|
onEditValueChange: onEditValueChange,
|
|
284
475
|
setRowSelection: setRowSelection,
|
|
285
|
-
openMemo: openMemo
|
|
286
|
-
// virtualColumns={virtualColumns}
|
|
287
|
-
// scrollableColumns={scrollableColumns}
|
|
288
|
-
// virtualPaddingLeft={virtualPaddingLeft}
|
|
289
|
-
// virtualPaddingRight={virtualPaddingRight}
|
|
290
|
-
// leftPinnedColumns={leftPinnedColumns}
|
|
291
|
-
// rightPinnedColumns={rightPinnedColumns}
|
|
292
|
-
,
|
|
476
|
+
openMemo: openMemo,
|
|
293
477
|
virtualRowStart: virtualRow.start
|
|
294
478
|
}, row.id);
|
|
295
479
|
});
|
|
@@ -348,7 +532,6 @@ var VirtualTableBody = function VirtualTableBody(_ref) {
|
|
|
348
532
|
});
|
|
349
533
|
};
|
|
350
534
|
var tBodyHeight = useMemo(function () {
|
|
351
|
-
// if (!openVirtualRows || !rowVirtualizer?.getTotalSize()) return 'auto';
|
|
352
535
|
if (!(rowVirtualizer !== null && rowVirtualizer !== void 0 && rowVirtualizer.getTotalSize())) return 'auto';
|
|
353
536
|
return (rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.getTotalSize()) + (hasTotalRow ? rowHeight : 0);
|
|
354
537
|
}, [openVirtualRows, hasTotalRow, rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.getTotalSize(), rowHeight]);
|
|
@@ -363,20 +546,7 @@ var VirtualTableBody = function VirtualTableBody(_ref) {
|
|
|
363
546
|
table: table,
|
|
364
547
|
tableId: tableId,
|
|
365
548
|
compactMode: compactMode
|
|
366
|
-
}), root ? document.querySelector(root) : document.body), showTable ?
|
|
367
|
-
/*#__PURE__*/
|
|
368
|
-
// <div
|
|
369
|
-
// className="table-max-table-body-table-wrapper"
|
|
370
|
-
// ref={dropTableEmptyRef}
|
|
371
|
-
// >
|
|
372
|
-
// <table>
|
|
373
|
-
// <colgroup>
|
|
374
|
-
// {headers.map((header: any) => {
|
|
375
|
-
// let size: number = header?.column?.getSize() || 120;
|
|
376
|
-
// return <col key={header.id} width={size}></col>;
|
|
377
|
-
// })}
|
|
378
|
-
// </colgroup>
|
|
379
|
-
_jsxs("tbody", {
|
|
549
|
+
}), root ? document.querySelector(root) : document.body), showTable ? /*#__PURE__*/_jsxs("tbody", {
|
|
380
550
|
ref: dropTableEmptyRef,
|
|
381
551
|
id: "table-max-tableBody-tbody-".concat(tableId),
|
|
382
552
|
style: {
|
|
@@ -388,10 +558,7 @@ var VirtualTableBody = function VirtualTableBody(_ref) {
|
|
|
388
558
|
table: table,
|
|
389
559
|
totalDatas: totalDatas
|
|
390
560
|
})]
|
|
391
|
-
})
|
|
392
|
-
// // {/* </table> */}
|
|
393
|
-
// </div>
|
|
394
|
-
: /*#__PURE__*/_jsx("tbody", {
|
|
561
|
+
}) : /*#__PURE__*/_jsx("tbody", {
|
|
395
562
|
ref: dropEmptyRef,
|
|
396
563
|
children: /*#__PURE__*/_jsx("tr", {
|
|
397
564
|
className: "empty-container",
|
|
File without changes
|
|
File without changes
|
|
@@ -641,14 +641,11 @@ var TableMax = function TableMax(_ref) {
|
|
|
641
641
|
enableResizing: false,
|
|
642
642
|
cell: function cell(_ref7) {
|
|
643
643
|
var row = _ref7.row;
|
|
644
|
-
console.log(row.getIsExpanded(), '3333');
|
|
645
644
|
return row.getCanExpand() ? /*#__PURE__*/_jsx("div", {
|
|
646
645
|
onClick: function onClick(evt) {
|
|
647
646
|
evt.stopPropagation();
|
|
648
647
|
row.getToggleExpandedHandler()();
|
|
649
648
|
// row.toggleExpanded()
|
|
650
|
-
|
|
651
|
-
console.log(row.getIsExpanded(), table.getExpandedRowModel(), '3333');
|
|
652
649
|
},
|
|
653
650
|
style: {
|
|
654
651
|
cursor: 'pointer'
|
|
@@ -759,7 +756,8 @@ var TableMax = function TableMax(_ref) {
|
|
|
759
756
|
|
|
760
757
|
// 初始化列
|
|
761
758
|
useEffect(function () {
|
|
762
|
-
if (!tableMaxRef.current || !tableContentRef.current) return;
|
|
759
|
+
if (!tableMaxRef.current || !tableContentRef.current || !tableId) return;
|
|
760
|
+
if (!Array.isArray(columns) || columns.length === 0) return;
|
|
763
761
|
// 根据props,自动增加勾选列/展开列
|
|
764
762
|
var newColumns = setColumnsByProps().concat(columns);
|
|
765
763
|
initializeColumnSizing(newColumns);
|
|
@@ -774,7 +772,6 @@ var TableMax = function TableMax(_ref) {
|
|
|
774
772
|
}, [columns, tableId]);
|
|
775
773
|
var _rowSelectionChange = useCallback(debounce(function (rowOriginal, row) {
|
|
776
774
|
if (rowSelectionChange) {
|
|
777
|
-
// console.log(rowOriginal, row, 'rowSelectionChange1')
|
|
778
775
|
rowSelectionChange(rowOriginal, row);
|
|
779
776
|
}
|
|
780
777
|
}, 100), [rowSelectionChange]);
|
|
@@ -843,25 +840,30 @@ var TableMax = function TableMax(_ref) {
|
|
|
843
840
|
// tableMaxRef.current && myObserver.disconnect();
|
|
844
841
|
// };
|
|
845
842
|
// }, [tableId]);
|
|
846
|
-
|
|
843
|
+
var cacheTimer = useRef(null);
|
|
847
844
|
/**缓存table数据 */
|
|
848
845
|
useUpdateEffect(function () {
|
|
849
846
|
if (!tableId) return;
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
847
|
+
cacheTimer.current = setTimeout(function () {
|
|
848
|
+
var tableState = table.getState();
|
|
849
|
+
localStorage.setItem(tableKey, JSON.stringify({
|
|
850
|
+
enableFilters: enableFilters,
|
|
851
|
+
headerRowNum: headerRowNum,
|
|
852
|
+
compactMode: compactMode,
|
|
853
|
+
columnVisibility: tableState.columnVisibility,
|
|
854
|
+
columnPinning: tableState.columnPinning,
|
|
855
|
+
columnOrder: tableState.columnOrder,
|
|
856
|
+
columnFilters: tableState.columnFilters,
|
|
857
|
+
columnSorting: tableState.sorting,
|
|
858
|
+
columnSizing: columnSizing,
|
|
859
|
+
editTime: +new Date(),
|
|
860
|
+
editTimeCh: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
|
861
|
+
version: version
|
|
862
|
+
}));
|
|
863
|
+
}, 100);
|
|
864
|
+
return function () {
|
|
865
|
+
clearTimeout(cacheTimer.current);
|
|
866
|
+
};
|
|
865
867
|
}, [table.getState().columnVisibility, table.getState().columnPinning, table.getState().columnOrder, table.getState().columnFilters, table.getState().sorting, enableFilters, headerRowNum, compactMode, columnSizing, tableId]);
|
|
866
868
|
var reorderRow = useCallback(function (fromDatas, toDatas) {
|
|
867
869
|
var draggedRow = fromDatas.draggedRow,
|
|
@@ -58,6 +58,13 @@ export var useColumnWidth = function useColumnWidth(_ref) {
|
|
|
58
58
|
_useState2 = _slicedToArray(_useState, 2),
|
|
59
59
|
state = _useState2[0],
|
|
60
60
|
setState = _useState2[1];
|
|
61
|
+
// 使用 ref 保存最新的状态值
|
|
62
|
+
var stateRef = useRef(state);
|
|
63
|
+
|
|
64
|
+
// 同步更新 ref
|
|
65
|
+
useEffect(function () {
|
|
66
|
+
stateRef.current = state;
|
|
67
|
+
}, [state]);
|
|
61
68
|
var getTableWidth = useCallback(function () {
|
|
62
69
|
if (!tableContentRef.current) return 0;
|
|
63
70
|
var width = tableContentRef.current.getBoundingClientRect().width;
|
|
@@ -94,32 +101,44 @@ export var useColumnWidth = function useColumnWidth(_ref) {
|
|
|
94
101
|
if (!newWidth) return;
|
|
95
102
|
setState(function (prevState) {
|
|
96
103
|
return produce(prevState, function (draft) {
|
|
97
|
-
|
|
98
|
-
|
|
104
|
+
// console.log('handleResize', 111122, draft.columnSizing)
|
|
105
|
+
// 使用最新的状态值(来自 ref)
|
|
106
|
+
var currentState = stateRef.current;
|
|
107
|
+
var columnSizing = currentState.columnSizing || {};
|
|
108
|
+
var initColumnsSizeMap = currentState.initColumnsSizeMap || {};
|
|
109
|
+
// console.log('handleResize', 111122, draft.columnSizing, newWidth, currentState)
|
|
110
|
+
|
|
111
|
+
var visibleColumns = getVisibleColumns(columnSizing);
|
|
112
|
+
var adjustableColumns = getAdjustableColumns(initColumnsSizeMap);
|
|
99
113
|
var totalVisibleWidth = visibleColumns.reduce(function (sum, key) {
|
|
100
|
-
return sum + (
|
|
114
|
+
return sum + (columnSizing[key] || DEFAULT_MIN_SIZE);
|
|
101
115
|
}, 0);
|
|
102
116
|
|
|
103
117
|
// 容器变大时的逻辑
|
|
104
|
-
if (
|
|
118
|
+
if (currentState.tableContainerWidth && newWidth > currentState.tableContainerWidth) {
|
|
105
119
|
if (totalVisibleWidth < newWidth - DEFAULT_TABLE_PADDING) {
|
|
106
120
|
var remainWidth = newWidth - totalVisibleWidth - DEFAULT_TABLE_PADDING;
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
121
|
+
var addColumns = Object.keys(adjustableColumns).filter(function (key) {
|
|
122
|
+
return columnSizing[key] < DEFAULT_MAX_SIZE;
|
|
123
|
+
});
|
|
124
|
+
if (addColumns.length > 0) {
|
|
125
|
+
var averageWidth = remainWidth / addColumns.length;
|
|
126
|
+
addColumns.forEach(function (key) {
|
|
127
|
+
draft.columnSizing[key] = Math.min((columnSizing[key] || 0) + averageWidth, DEFAULT_MAX_SIZE);
|
|
111
128
|
});
|
|
112
129
|
}
|
|
113
130
|
}
|
|
114
131
|
}
|
|
115
132
|
// 容器变小时的逻辑
|
|
116
|
-
else if (
|
|
133
|
+
else if (currentState.tableContainerWidth && newWidth < currentState.tableContainerWidth) {
|
|
117
134
|
var reducedWidth = newWidth - totalVisibleWidth - DEFAULT_TABLE_PADDING;
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
135
|
+
var reduceColumns = Object.keys(adjustableColumns).filter(function (key) {
|
|
136
|
+
return columnSizing[key] > DEFAULT_MIN_SIZE;
|
|
137
|
+
});
|
|
138
|
+
if (reduceColumns.length > 0) {
|
|
139
|
+
var _averageWidth = reducedWidth / reduceColumns.length;
|
|
140
|
+
reduceColumns.forEach(function (key) {
|
|
141
|
+
draft.columnSizing[key] = Math.max((columnSizing[key] || 0) + _averageWidth, Math.max((initColumnsSizeMap === null || initColumnsSizeMap === void 0 ? void 0 : initColumnsSizeMap[key]) || 0, DEFAULT_MIN_SIZE));
|
|
123
142
|
});
|
|
124
143
|
}
|
|
125
144
|
}
|
|
@@ -134,6 +153,7 @@ export var useColumnWidth = function useColumnWidth(_ref) {
|
|
|
134
153
|
var handleVisibleConfigChange = useCallback(function (key, value) {
|
|
135
154
|
setState(function (prevState) {
|
|
136
155
|
return produce(prevState, function (draft) {
|
|
156
|
+
// console.log(111122, 'handleVisibleConfigChange')
|
|
137
157
|
if (value) {
|
|
138
158
|
// 显示列
|
|
139
159
|
draft.columnSizing[key] = draft.allColumnSizing[key] || DEFAULT_MIN_SIZE;
|
|
@@ -198,6 +218,14 @@ export var useColumnWidth = function useColumnWidth(_ref) {
|
|
|
198
218
|
result[key] = Math.min(result[key] + averageExtra, DEFAULT_MAX_SIZE);
|
|
199
219
|
});
|
|
200
220
|
}
|
|
221
|
+
// debugger
|
|
222
|
+
// console.log({
|
|
223
|
+
// hasWidthColumns,
|
|
224
|
+
// noWidthColumns,
|
|
225
|
+
// totalWidth,
|
|
226
|
+
// remainWidth,
|
|
227
|
+
// result
|
|
228
|
+
// }, 1111222)
|
|
201
229
|
return result;
|
|
202
230
|
}, [getAdjustableColumns, getTableWidth, state.tableContainerWidth]);
|
|
203
231
|
|
|
@@ -215,6 +243,7 @@ export var useColumnWidth = function useColumnWidth(_ref) {
|
|
|
215
243
|
var now = +Date.now();
|
|
216
244
|
setState(produce(function (prevState) {
|
|
217
245
|
// 初始化列宽映射
|
|
246
|
+
// console.log(111122, 'initializeWithWidth')
|
|
218
247
|
var initColumnsSizeMap = _objectSpread({}, columnSizeMap);
|
|
219
248
|
var visibleColumnsSizeMap = {};
|
|
220
249
|
|
|
@@ -254,6 +283,11 @@ export var useColumnWidth = function useColumnWidth(_ref) {
|
|
|
254
283
|
var visibleCount = allCount - Object.keys(columnVisibleConfig).filter(function (key) {
|
|
255
284
|
return !columnVisibleConfig[key];
|
|
256
285
|
}).length;
|
|
286
|
+
// debugger
|
|
287
|
+
// console.log({
|
|
288
|
+
// initColumnsSizeMap,
|
|
289
|
+
// visibleColumnsSizeMap
|
|
290
|
+
// }, 1111222)
|
|
257
291
|
|
|
258
292
|
// 计算最终列宽
|
|
259
293
|
prevState.columnSizing = calculateColumnSizing(visibleColumnsSizeMap, visibleCount, width);
|
|
@@ -286,6 +320,7 @@ export var useColumnWidth = function useColumnWidth(_ref) {
|
|
|
286
320
|
if (!changedColumn || JSON.stringify(changedColumn) === '{}') return;
|
|
287
321
|
setState(produce(function (prevState) {
|
|
288
322
|
var _Object$entries;
|
|
323
|
+
// console.log(111122, 'handleColumnSizingChange')
|
|
289
324
|
var _ref4 = (_Object$entries = Object.entries(changedColumn)) === null || _Object$entries === void 0 ? void 0 : _Object$entries[0],
|
|
290
325
|
_ref5 = _slicedToArray(_ref4, 2),
|
|
291
326
|
changedKey = _ref5[0],
|
|
@@ -328,7 +363,10 @@ export var useColumnWidth = function useColumnWidth(_ref) {
|
|
|
328
363
|
var height = (_entries$2 = entries[0]) === null || _entries$2 === void 0 ? void 0 : _entries$2.contentRect.height;
|
|
329
364
|
if (newWidth || height) {
|
|
330
365
|
var _tableContentRef$curr, _tableContentRef$curr2;
|
|
331
|
-
|
|
366
|
+
var currentState = stateRef.current;
|
|
367
|
+
if (currentState.columnSizing && Object.keys(currentState.columnSizing).length > 0) {
|
|
368
|
+
debouncedHandleResizeRef.current(newWidth);
|
|
369
|
+
}
|
|
332
370
|
(_tableContentRef$curr = tableContentRef.current) === null || _tableContentRef$curr === void 0 || (_tableContentRef$curr = _tableContentRef$curr.style) === null || _tableContentRef$curr === void 0 || _tableContentRef$curr.setProperty('--table-body-width', "".concat(newWidth - 12, "px"));
|
|
333
371
|
(_tableContentRef$curr2 = tableContentRef.current) === null || _tableContentRef$curr2 === void 0 || (_tableContentRef$curr2 = _tableContentRef$curr2.style) === null || _tableContentRef$curr2 === void 0 || _tableContentRef$curr2.setProperty('--table-body-height', "".concat(height - 54, "px"));
|
|
334
372
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arim-aisdc/public-components",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.84",
|
|
4
4
|
"description": "前端组件库",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
"dependencies": {
|
|
49
49
|
"@ant-design/icons": "^5.3.7",
|
|
50
50
|
"@ant-design/pro-components": "^2.7.10",
|
|
51
|
+
"@arim-aisdc/public-components": "^2.3.82",
|
|
51
52
|
"@tanstack/match-sorter-utils": "^8.8.4",
|
|
52
53
|
"@tanstack/react-table": "^8.9.1",
|
|
53
54
|
"@tanstack/react-virtual": "^3.13.12",
|