@arim-aisdc/public-components 2.3.83 → 2.3.85
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/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/components/ColumnSort/customSortFns.d.ts +8 -8
- package/package.json +1 -1
|
@@ -81,6 +81,9 @@ var VirtualRow = function VirtualRow(_ref) {
|
|
|
81
81
|
var timerRef = useRef();
|
|
82
82
|
var clickCountRef = useRef(0);
|
|
83
83
|
|
|
84
|
+
// 拖拽时的鼠标位置跟踪
|
|
85
|
+
var dragStartPosRef = useRef(null);
|
|
86
|
+
|
|
84
87
|
// 优化:使用useMemo缓存计算结果
|
|
85
88
|
var dropPreviewLineClassName = useMemo(function () {
|
|
86
89
|
if (hoverRowIndex === row.index) {
|
|
@@ -114,7 +117,7 @@ var VirtualRow = function VirtualRow(_ref) {
|
|
|
114
117
|
return row.getVisibleCells();
|
|
115
118
|
}, [row, table.getState().columnVisibility]);
|
|
116
119
|
|
|
117
|
-
//
|
|
120
|
+
// 拖拽相关逻辑
|
|
118
121
|
var _useDrop = useDrop({
|
|
119
122
|
accept: 'TABLE_ROW',
|
|
120
123
|
drop: function drop(formDatas) {
|
|
@@ -125,7 +128,9 @@ var VirtualRow = function VirtualRow(_ref) {
|
|
|
125
128
|
});
|
|
126
129
|
},
|
|
127
130
|
hover: function hover(item, monitor) {
|
|
128
|
-
|
|
131
|
+
var clientOffset = monitor.getClientOffset();
|
|
132
|
+
if (clientOffset && monitor.isOver() && monitor.canDrop()) {
|
|
133
|
+
// 在hover时传递鼠标位置,触发滚动
|
|
129
134
|
changeHoverRow({
|
|
130
135
|
target: row,
|
|
131
136
|
origin: item
|
|
@@ -149,14 +154,30 @@ var VirtualRow = function VirtualRow(_ref) {
|
|
|
149
154
|
return row.index;
|
|
150
155
|
});
|
|
151
156
|
var isMultipleDrag = selectedRowsNumber > 1 && selectedRowsIndexList.includes(row.index);
|
|
157
|
+
|
|
158
|
+
// 记录拖拽开始时的位置
|
|
159
|
+
dragStartPosRef.current = {
|
|
160
|
+
x: 0,
|
|
161
|
+
y: 0
|
|
162
|
+
};
|
|
152
163
|
return {
|
|
153
164
|
draggedRow: row,
|
|
154
165
|
isMultipleDrag: isMultipleDrag,
|
|
155
166
|
draggedRows: isMultipleDrag ? selectedRows : [row],
|
|
156
|
-
sourceTableId: tableId
|
|
167
|
+
sourceTableId: tableId,
|
|
168
|
+
dragStartTime: Date.now()
|
|
157
169
|
};
|
|
158
170
|
},
|
|
159
|
-
type: 'TABLE_ROW'
|
|
171
|
+
type: 'TABLE_ROW',
|
|
172
|
+
end: function end(item, monitor) {
|
|
173
|
+
// 拖拽结束时的清理
|
|
174
|
+
dragStartPosRef.current = null;
|
|
175
|
+
var didDrop = monitor.didDrop();
|
|
176
|
+
if (!didDrop) {
|
|
177
|
+
// 拖拽取消时的处理
|
|
178
|
+
console.log('Drag cancelled');
|
|
179
|
+
}
|
|
180
|
+
}
|
|
160
181
|
}),
|
|
161
182
|
_useDrag2 = _slicedToArray(_useDrag, 3),
|
|
162
183
|
isDragging = _useDrag2[0].isDragging,
|
|
@@ -168,17 +189,17 @@ var VirtualRow = function VirtualRow(_ref) {
|
|
|
168
189
|
captureDraggingState: true
|
|
169
190
|
});
|
|
170
191
|
}
|
|
171
|
-
}, [canRowDrag]);
|
|
192
|
+
}, [canRowDrag, preview]);
|
|
172
193
|
useEffect(function () {
|
|
173
194
|
if (setSelectedRowDragging && row.getIsSelected()) {
|
|
174
195
|
setSelectedRowDragging(isDragging);
|
|
175
196
|
}
|
|
176
|
-
}, [isDragging, row.getIsSelected()]);
|
|
197
|
+
}, [isDragging, row.getIsSelected(), setSelectedRowDragging]);
|
|
177
198
|
useUpdateEffect(function () {
|
|
178
199
|
if (!isDragging) {
|
|
179
200
|
clearHoverRowIndex();
|
|
180
201
|
}
|
|
181
|
-
}, [isDragging]);
|
|
202
|
+
}, [isDragging, clearHoverRowIndex]);
|
|
182
203
|
var handleCellRightClick = useCallback(function (e, cell) {
|
|
183
204
|
onCellContextMenu(e, cell);
|
|
184
205
|
}, [onCellContextMenu]);
|
|
@@ -203,7 +224,7 @@ var VirtualRow = function VirtualRow(_ref) {
|
|
|
203
224
|
return baseStyle;
|
|
204
225
|
}, [isDragging, selectedRowDragging, row.getIsSelected(), canRowDrag, editting, disableDragRowIds, row.id, rowStyle, virtualRowStart]);
|
|
205
226
|
|
|
206
|
-
//
|
|
227
|
+
// 点击事件处理逻辑
|
|
207
228
|
var handleRowClick = useCallback(function (evt) {
|
|
208
229
|
clickCountRef.current++;
|
|
209
230
|
if (clickCountRef.current === 1) {
|
|
@@ -225,7 +246,7 @@ var VirtualRow = function VirtualRow(_ref) {
|
|
|
225
246
|
timerRef.current = undefined;
|
|
226
247
|
}
|
|
227
248
|
}
|
|
228
|
-
}, [row, table, canSelection, selectionWithoutChecked, setRowHighLightId, setRowSelectedId, selectedRowChange, onSelectChange, selectRowWhenClick, editting, onRowMouseClick, onRowMouseDoubleClick, canEditRowWhenDClick, handleEditRowWhenDClick
|
|
249
|
+
}, [row, table, canSelection, selectionWithoutChecked, setRowHighLightId, setRowSelectedId, selectedRowChange, onSelectChange, selectRowWhenClick, editting, onRowMouseClick, onRowMouseDoubleClick, canEditRowWhenDClick, handleEditRowWhenDClick]);
|
|
229
250
|
var handleSingleClick = useCallback(function (evt) {
|
|
230
251
|
onRowMouseClick === null || onRowMouseClick === void 0 || onRowMouseClick(row);
|
|
231
252
|
if (!row.getCanSelect()) {
|
|
@@ -240,7 +261,7 @@ var VirtualRow = function VirtualRow(_ref) {
|
|
|
240
261
|
} else {
|
|
241
262
|
handleSingleSelection(evt);
|
|
242
263
|
}
|
|
243
|
-
}, [row, canSelection, selectRowWhenClick, setRowHighLightId]);
|
|
264
|
+
}, [row, canSelection, selectRowWhenClick, setRowHighLightId, onRowMouseClick]);
|
|
244
265
|
var handleDoubleClick = useCallback(function (evt) {
|
|
245
266
|
onRowMouseDoubleClick === null || onRowMouseDoubleClick === void 0 || onRowMouseDoubleClick(row);
|
|
246
267
|
if (canEditRowWhenDClick) {
|
|
@@ -248,10 +269,70 @@ var VirtualRow = function VirtualRow(_ref) {
|
|
|
248
269
|
}
|
|
249
270
|
}, [row, onRowMouseDoubleClick, canEditRowWhenDClick, handleEditRowWhenDClick]);
|
|
250
271
|
|
|
251
|
-
//
|
|
272
|
+
// 选择点击处理
|
|
252
273
|
var handleSelectionClick = useCallback(function (evt) {
|
|
253
|
-
|
|
274
|
+
if (selectionWithoutChecked) {
|
|
275
|
+
if (evt.ctrlKey) {
|
|
276
|
+
handleCtrlSelection();
|
|
277
|
+
} else if (evt.shiftKey) {
|
|
278
|
+
handleShiftSelection();
|
|
279
|
+
} else {
|
|
280
|
+
handleSingleRowSelection();
|
|
281
|
+
}
|
|
282
|
+
} else {
|
|
283
|
+
if (evt.shiftKey) {
|
|
284
|
+
handleShiftSelectionWithCheckbox();
|
|
285
|
+
} else {
|
|
286
|
+
handleToggleSelection();
|
|
287
|
+
}
|
|
288
|
+
}
|
|
254
289
|
}, [row, table, selectionWithoutChecked]);
|
|
290
|
+
var handleCtrlSelection = useCallback(function () {
|
|
291
|
+
var selectionConfig = _objectSpread({}, table.getState().rowSelection);
|
|
292
|
+
if (!row.getIsSelected()) {
|
|
293
|
+
selectionConfig[row.id] = true;
|
|
294
|
+
} else if (Object.keys(selectionConfig).length > 1) {
|
|
295
|
+
delete selectionConfig[row.id];
|
|
296
|
+
}
|
|
297
|
+
// setRowSelection({ ...selectionConfig });
|
|
298
|
+
}, [row, table]);
|
|
299
|
+
var handleShiftSelection = useCallback(function () {
|
|
300
|
+
var min = Math.min(initselectedIndex || 0, row.index);
|
|
301
|
+
var max = Math.max(initselectedIndex || 0, row.index);
|
|
302
|
+
var selectionConfig = {};
|
|
303
|
+
table.getRowModel().rows.filter(function (row) {
|
|
304
|
+
return row.index >= min && row.index <= max;
|
|
305
|
+
}).forEach(function (row) {
|
|
306
|
+
selectionConfig[row.id] = true;
|
|
307
|
+
});
|
|
308
|
+
|
|
309
|
+
// setRowSelection(selectionConfig);
|
|
310
|
+
}, [row, table]);
|
|
311
|
+
var handleSingleRowSelection = useCallback(function () {
|
|
312
|
+
initselectedIndex = row.index;
|
|
313
|
+
// setRowSelection({ [row?.id]: true });
|
|
314
|
+
}, [row, table]);
|
|
315
|
+
var handleShiftSelectionWithCheckbox = useCallback(function () {
|
|
316
|
+
var selectionConfig = _objectSpread({}, table.getState().rowSelection);
|
|
317
|
+
var min = Math.min(initselectedIndex || 0, row.index);
|
|
318
|
+
var max = Math.max(initselectedIndex || 0, row.index);
|
|
319
|
+
table.getRowModel().rows.filter(function (row) {
|
|
320
|
+
return row.index >= min && row.index <= max;
|
|
321
|
+
}).forEach(function (row) {
|
|
322
|
+
selectionConfig[row.id] = true;
|
|
323
|
+
});
|
|
324
|
+
|
|
325
|
+
// setRowSelection(selectionConfig);
|
|
326
|
+
}, [row, table]);
|
|
327
|
+
var handleToggleSelection = useCallback(function () {
|
|
328
|
+
if (!row.getIsSelected()) {
|
|
329
|
+
initselectedIndex = row.index;
|
|
330
|
+
}
|
|
331
|
+
var selectionConfig = _objectSpread(_objectSpread({}, table.getState().rowSelection), {}, _defineProperty({}, row.id, !row.getIsSelected()));
|
|
332
|
+
if (row.getCanSelect()) {
|
|
333
|
+
// setRowSelection(selectionConfig);
|
|
334
|
+
}
|
|
335
|
+
}, [row, table]);
|
|
255
336
|
var handleSingleSelection = useCallback(function (evt) {
|
|
256
337
|
setRowSelectedId === null || setRowSelectedId === void 0 || setRowSelectedId(row === null || row === void 0 ? void 0 : row.id);
|
|
257
338
|
selectedRowChange === null || selectedRowChange === void 0 || selectedRowChange(row);
|
|
@@ -371,9 +452,7 @@ var VirtualRow = function VirtualRow(_ref) {
|
|
|
371
452
|
console.error('Error rendering row:', error);
|
|
372
453
|
return null;
|
|
373
454
|
}
|
|
374
|
-
}, [
|
|
375
|
-
// 依赖项保持不变
|
|
376
|
-
row, row.id, rowEditing, tableId, editting, canRowDrag, disableDragRowIds, isDragging, selectedRowDragging, rowStyle, handleRowClick, rowMouseEnter, rowMouseLeave, rowClassNames, cellClassName, theme, table, handleCellRightClick, getCellProps, tableTooltip, onEditValueChange, dateFormat, row.getVisibleCells(), row.getIsSelected(), rowStyles, table.getState().columnSizing, row.getIsExpanded(), table.getExpandedRowModel()]);
|
|
455
|
+
}, [row, row.id, rowEditing, tableId, editting, canRowDrag, disableDragRowIds, isDragging, selectedRowDragging, rowStyle, handleRowClick, rowMouseEnter, rowMouseLeave, rowClassNames, cellClassName, theme, table, handleCellRightClick, getCellProps, tableTooltip, onEditValueChange, dateFormat, rowStyles, row.getVisibleCells(), row.getIsSelected(), row.getIsExpanded(), table.getState().columnSizing]);
|
|
377
456
|
var rowCom = function rowCom() {
|
|
378
457
|
var renderCell = function renderCell(cell) {
|
|
379
458
|
var _cellClassName2;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { DropSide, OnSelectChangeType } from "../type";
|
|
2
|
+
import { Table } from '@tanstack/react-table';
|
|
3
|
+
import React, { Dispatch, ReactNode, SetStateAction } from 'react';
|
|
4
|
+
import './index.less';
|
|
5
|
+
type IRowProps = {
|
|
6
|
+
table: Table<any>;
|
|
7
|
+
tableId: string;
|
|
8
|
+
row: any;
|
|
9
|
+
rowSelectedId?: string;
|
|
10
|
+
setRowSelectedId?: Dispatch<SetStateAction<string | undefined>>;
|
|
11
|
+
rowHighLightId: string;
|
|
12
|
+
setRowHighLightId?: Dispatch<SetStateAction<string | undefined>>;
|
|
13
|
+
selectedRowChange?: (row: any) => void;
|
|
14
|
+
onSelectChange?: OnSelectChangeType;
|
|
15
|
+
tableBodyRef: any;
|
|
16
|
+
canSelection?: boolean;
|
|
17
|
+
selectionWithoutChecked?: boolean;
|
|
18
|
+
reorderRow?: (targetRowIndex: any, draggedRowIndex: any) => void;
|
|
19
|
+
canRowDrag?: boolean;
|
|
20
|
+
rowClassName?: (row: any) => string[];
|
|
21
|
+
cellClassName?: (cell: any) => string[];
|
|
22
|
+
rowStyle?: object;
|
|
23
|
+
getCellProps?: (ctx: any) => object;
|
|
24
|
+
editting?: boolean;
|
|
25
|
+
rowEditing?: boolean;
|
|
26
|
+
renderSubComponent?: (value: {
|
|
27
|
+
row: any;
|
|
28
|
+
}) => ReactNode;
|
|
29
|
+
selectedRowDragging?: boolean;
|
|
30
|
+
setSelectedRowDragging?: Dispatch<SetStateAction<boolean>>;
|
|
31
|
+
onRowMouseEnter?: (row: any) => void;
|
|
32
|
+
onRowMouseLeave?: (row: any) => void;
|
|
33
|
+
onRowMouseClick?: (row: any) => void;
|
|
34
|
+
onRowMouseDoubleClick?: (row: any) => void;
|
|
35
|
+
disableDragRowIds?: any[];
|
|
36
|
+
selectRowWhenClick: boolean;
|
|
37
|
+
handleEditRowWhenDClick: (row: any) => void;
|
|
38
|
+
canEditRowWhenDClick: boolean;
|
|
39
|
+
theme: string;
|
|
40
|
+
dragBeforeStart?: (datas: any) => boolean;
|
|
41
|
+
rowKey?: string;
|
|
42
|
+
onCellContextMenu: (e: React.MouseEvent, cell: any) => void;
|
|
43
|
+
/**获取行hover时的tip信息 */
|
|
44
|
+
getRowHoverTipConfig?: (row: any) => {
|
|
45
|
+
title: string;
|
|
46
|
+
color: string;
|
|
47
|
+
};
|
|
48
|
+
tableTooltip: boolean;
|
|
49
|
+
changeHoverRow: (params: {
|
|
50
|
+
target?: any;
|
|
51
|
+
origin?: any;
|
|
52
|
+
}) => void;
|
|
53
|
+
clearHoverRowIndex: () => void;
|
|
54
|
+
hoverRowIndex: number;
|
|
55
|
+
dropSide: DropSide;
|
|
56
|
+
onEditValueChange?: (field: string, value: any, extra?: any) => void;
|
|
57
|
+
setRowSelection?: Function;
|
|
58
|
+
openMemo?: boolean;
|
|
59
|
+
virtualRowStart?: number;
|
|
60
|
+
};
|
|
61
|
+
declare const VirtualRow: ({ tableBodyRef, table, tableId, row, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, reorderRow, canRowDrag, rowClassName, cellClassName, rowStyle, getCellProps, editting, rowEditing, renderSubComponent, selectedRowDragging, setSelectedRowDragging, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, handleEditRowWhenDClick, canEditRowWhenDClick, theme, dragBeforeStart, onCellContextMenu, getRowHoverTipConfig, tableTooltip, changeHoverRow, clearHoverRowIndex, hoverRowIndex, dropSide, onEditValueChange, setRowSelection, openMemo, virtualRowStart, }: IRowProps) => import("react/jsx-runtime").JSX.Element;
|
|
62
|
+
export { VirtualRow };
|
|
@@ -0,0 +1,560 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
3
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
5
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
6
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
7
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
8
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
9
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
10
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
11
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
12
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
13
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
14
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
15
|
+
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
16
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
17
|
+
import { DropSide } from "../type";
|
|
18
|
+
import { flexRender } from '@tanstack/react-table';
|
|
19
|
+
import { useUpdateEffect } from 'ahooks';
|
|
20
|
+
import { Tooltip } from 'antd';
|
|
21
|
+
import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
|
|
22
|
+
import { useDrag, useDrop } from 'react-dnd';
|
|
23
|
+
import { getEmptyImage } from 'react-dnd-html5-backend';
|
|
24
|
+
import { getPinningStyle } from "../TableHeader/utils";
|
|
25
|
+
import { EditableCell } from "../components/ColumnEdit";
|
|
26
|
+
import "./index.less";
|
|
27
|
+
import dayjs from 'dayjs';
|
|
28
|
+
import { useConfig } from "../../ConfigProvider";
|
|
29
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
30
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
31
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
32
|
+
var initselectedIndex;
|
|
33
|
+
var VirtualRow = function VirtualRow(_ref) {
|
|
34
|
+
var _tableBodyRef$current, _tableBodyRef$current2;
|
|
35
|
+
var tableBodyRef = _ref.tableBodyRef,
|
|
36
|
+
table = _ref.table,
|
|
37
|
+
tableId = _ref.tableId,
|
|
38
|
+
row = _ref.row,
|
|
39
|
+
rowSelectedId = _ref.rowSelectedId,
|
|
40
|
+
setRowSelectedId = _ref.setRowSelectedId,
|
|
41
|
+
rowHighLightId = _ref.rowHighLightId,
|
|
42
|
+
setRowHighLightId = _ref.setRowHighLightId,
|
|
43
|
+
selectedRowChange = _ref.selectedRowChange,
|
|
44
|
+
onSelectChange = _ref.onSelectChange,
|
|
45
|
+
canSelection = _ref.canSelection,
|
|
46
|
+
selectionWithoutChecked = _ref.selectionWithoutChecked,
|
|
47
|
+
reorderRow = _ref.reorderRow,
|
|
48
|
+
canRowDrag = _ref.canRowDrag,
|
|
49
|
+
rowClassName = _ref.rowClassName,
|
|
50
|
+
cellClassName = _ref.cellClassName,
|
|
51
|
+
rowStyle = _ref.rowStyle,
|
|
52
|
+
getCellProps = _ref.getCellProps,
|
|
53
|
+
editting = _ref.editting,
|
|
54
|
+
rowEditing = _ref.rowEditing,
|
|
55
|
+
renderSubComponent = _ref.renderSubComponent,
|
|
56
|
+
selectedRowDragging = _ref.selectedRowDragging,
|
|
57
|
+
setSelectedRowDragging = _ref.setSelectedRowDragging,
|
|
58
|
+
onRowMouseEnter = _ref.onRowMouseEnter,
|
|
59
|
+
onRowMouseLeave = _ref.onRowMouseLeave,
|
|
60
|
+
onRowMouseClick = _ref.onRowMouseClick,
|
|
61
|
+
onRowMouseDoubleClick = _ref.onRowMouseDoubleClick,
|
|
62
|
+
disableDragRowIds = _ref.disableDragRowIds,
|
|
63
|
+
selectRowWhenClick = _ref.selectRowWhenClick,
|
|
64
|
+
handleEditRowWhenDClick = _ref.handleEditRowWhenDClick,
|
|
65
|
+
canEditRowWhenDClick = _ref.canEditRowWhenDClick,
|
|
66
|
+
theme = _ref.theme,
|
|
67
|
+
dragBeforeStart = _ref.dragBeforeStart,
|
|
68
|
+
onCellContextMenu = _ref.onCellContextMenu,
|
|
69
|
+
getRowHoverTipConfig = _ref.getRowHoverTipConfig,
|
|
70
|
+
tableTooltip = _ref.tableTooltip,
|
|
71
|
+
changeHoverRow = _ref.changeHoverRow,
|
|
72
|
+
clearHoverRowIndex = _ref.clearHoverRowIndex,
|
|
73
|
+
hoverRowIndex = _ref.hoverRowIndex,
|
|
74
|
+
dropSide = _ref.dropSide,
|
|
75
|
+
onEditValueChange = _ref.onEditValueChange,
|
|
76
|
+
setRowSelection = _ref.setRowSelection,
|
|
77
|
+
openMemo = _ref.openMemo,
|
|
78
|
+
virtualRowStart = _ref.virtualRowStart;
|
|
79
|
+
var _useConfig = useConfig(),
|
|
80
|
+
dateFormat = _useConfig.dateFormat;
|
|
81
|
+
var timerRef = useRef();
|
|
82
|
+
var clickCountRef = useRef(0);
|
|
83
|
+
|
|
84
|
+
// 拖拽时的鼠标位置跟踪
|
|
85
|
+
var dragStartPosRef = useRef(null);
|
|
86
|
+
|
|
87
|
+
// 优化:使用useMemo缓存计算结果
|
|
88
|
+
var dropPreviewLineClassName = useMemo(function () {
|
|
89
|
+
if (hoverRowIndex === row.index) {
|
|
90
|
+
return dropSide === DropSide.Top ? 'showTopBorder' : 'showBottomBorder';
|
|
91
|
+
}
|
|
92
|
+
return '';
|
|
93
|
+
}, [hoverRowIndex, dropSide, row.index]);
|
|
94
|
+
var highLightClassName = useMemo(function () {
|
|
95
|
+
if (!canSelection && String(row.id) === String(rowSelectedId)) {
|
|
96
|
+
return 'tbody-tr-highlight';
|
|
97
|
+
} else if (canSelection) {
|
|
98
|
+
if (String(row.id) === String(rowHighLightId)) {
|
|
99
|
+
return 'tbody-tr-highlight';
|
|
100
|
+
} else if (row.getIsSelected()) {
|
|
101
|
+
return 'tbody-tr-selected';
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
return '';
|
|
105
|
+
}, [row.id, row.getIsSelected(), rowSelectedId, rowHighLightId, canSelection]);
|
|
106
|
+
var rowClassNames = useMemo(function () {
|
|
107
|
+
var _rowClassName;
|
|
108
|
+
var baseClass = "tbody-tr ".concat(highLightClassName, " ").concat(dropPreviewLineClassName);
|
|
109
|
+
var customClasses = (rowClassName === null || rowClassName === void 0 || (_rowClassName = rowClassName(row)) === null || _rowClassName === void 0 ? void 0 : _rowClassName.map(function (item) {
|
|
110
|
+
return "".concat(item, "-").concat(theme);
|
|
111
|
+
}).join(' ')) || '';
|
|
112
|
+
return "".concat(baseClass, " ").concat(customClasses).trim();
|
|
113
|
+
}, [highLightClassName, dropPreviewLineClassName, rowClassName, row, theme]);
|
|
114
|
+
|
|
115
|
+
// 获取所有可见单元格
|
|
116
|
+
var visibleCells = useMemo(function () {
|
|
117
|
+
return row.getVisibleCells();
|
|
118
|
+
}, [row, table.getState().columnVisibility]);
|
|
119
|
+
|
|
120
|
+
// 拖拽相关逻辑
|
|
121
|
+
var _useDrop = useDrop({
|
|
122
|
+
accept: 'TABLE_ROW',
|
|
123
|
+
drop: function drop(formDatas) {
|
|
124
|
+
clearHoverRowIndex();
|
|
125
|
+
return reorderRow === null || reorderRow === void 0 ? void 0 : reorderRow(formDatas, {
|
|
126
|
+
hoverRow: row,
|
|
127
|
+
targetTableId: tableId
|
|
128
|
+
});
|
|
129
|
+
},
|
|
130
|
+
hover: function hover(item, monitor) {
|
|
131
|
+
var clientOffset = monitor.getClientOffset();
|
|
132
|
+
if (clientOffset && monitor.isOver() && monitor.canDrop()) {
|
|
133
|
+
// 在hover时传递鼠标位置,触发滚动
|
|
134
|
+
changeHoverRow({
|
|
135
|
+
target: row,
|
|
136
|
+
origin: item
|
|
137
|
+
});
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}),
|
|
141
|
+
_useDrop2 = _slicedToArray(_useDrop, 2),
|
|
142
|
+
dropRef = _useDrop2[1];
|
|
143
|
+
var _useDrag = useDrag({
|
|
144
|
+
collect: function collect(monitor) {
|
|
145
|
+
return {
|
|
146
|
+
isDragging: monitor !== null && monitor !== void 0 && monitor.getItem() ? dragBeforeStart === null || dragBeforeStart === void 0 ? void 0 : dragBeforeStart(monitor === null || monitor === void 0 ? void 0 : monitor.getItem()) : monitor.isDragging()
|
|
147
|
+
};
|
|
148
|
+
},
|
|
149
|
+
item: function item() {
|
|
150
|
+
var _table$getSelectedRow;
|
|
151
|
+
var selectedRows = ((_table$getSelectedRow = table.getSelectedRowModel()) === null || _table$getSelectedRow === void 0 ? void 0 : _table$getSelectedRow.rows) || [];
|
|
152
|
+
var selectedRowsNumber = (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) || 0;
|
|
153
|
+
var selectedRowsIndexList = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map(function (row) {
|
|
154
|
+
return row.index;
|
|
155
|
+
});
|
|
156
|
+
var isMultipleDrag = selectedRowsNumber > 1 && selectedRowsIndexList.includes(row.index);
|
|
157
|
+
|
|
158
|
+
// 记录拖拽开始时的位置
|
|
159
|
+
dragStartPosRef.current = {
|
|
160
|
+
x: 0,
|
|
161
|
+
y: 0
|
|
162
|
+
};
|
|
163
|
+
return {
|
|
164
|
+
draggedRow: row,
|
|
165
|
+
isMultipleDrag: isMultipleDrag,
|
|
166
|
+
draggedRows: isMultipleDrag ? selectedRows : [row],
|
|
167
|
+
sourceTableId: tableId,
|
|
168
|
+
dragStartTime: Date.now()
|
|
169
|
+
};
|
|
170
|
+
},
|
|
171
|
+
type: 'TABLE_ROW',
|
|
172
|
+
end: function end(item, monitor) {
|
|
173
|
+
// 拖拽结束时的清理
|
|
174
|
+
dragStartPosRef.current = null;
|
|
175
|
+
var didDrop = monitor.didDrop();
|
|
176
|
+
if (!didDrop) {
|
|
177
|
+
// 拖拽取消时的处理
|
|
178
|
+
console.log('Drag cancelled');
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}),
|
|
182
|
+
_useDrag2 = _slicedToArray(_useDrag, 3),
|
|
183
|
+
isDragging = _useDrag2[0].isDragging,
|
|
184
|
+
dragRef = _useDrag2[1],
|
|
185
|
+
preview = _useDrag2[2];
|
|
186
|
+
useEffect(function () {
|
|
187
|
+
if (canRowDrag) {
|
|
188
|
+
preview(getEmptyImage(), {
|
|
189
|
+
captureDraggingState: true
|
|
190
|
+
});
|
|
191
|
+
}
|
|
192
|
+
}, [canRowDrag, preview]);
|
|
193
|
+
useEffect(function () {
|
|
194
|
+
if (setSelectedRowDragging && row.getIsSelected()) {
|
|
195
|
+
setSelectedRowDragging(isDragging);
|
|
196
|
+
}
|
|
197
|
+
}, [isDragging, row.getIsSelected(), setSelectedRowDragging]);
|
|
198
|
+
useUpdateEffect(function () {
|
|
199
|
+
if (!isDragging) {
|
|
200
|
+
clearHoverRowIndex();
|
|
201
|
+
}
|
|
202
|
+
}, [isDragging, clearHoverRowIndex]);
|
|
203
|
+
var handleCellRightClick = useCallback(function (e, cell) {
|
|
204
|
+
onCellContextMenu(e, cell);
|
|
205
|
+
}, [onCellContextMenu]);
|
|
206
|
+
|
|
207
|
+
// 行样式(支持虚拟行定位)
|
|
208
|
+
var rowStyles = useMemo(function () {
|
|
209
|
+
var baseStyle = _objectSpread({
|
|
210
|
+
opacity: isDragging || selectedRowDragging && row.getIsSelected() ? 0.5 : 1,
|
|
211
|
+
cursor: canRowDrag && !editting && !(disableDragRowIds !== null && disableDragRowIds !== void 0 && disableDragRowIds.includes(row.id)) ? 'move' : 'auto'
|
|
212
|
+
}, rowStyle);
|
|
213
|
+
|
|
214
|
+
// 如果是虚拟行,添加定位样式
|
|
215
|
+
if (virtualRowStart !== undefined) {
|
|
216
|
+
return _objectSpread(_objectSpread({}, baseStyle), {}, {
|
|
217
|
+
position: 'absolute',
|
|
218
|
+
top: 0,
|
|
219
|
+
left: 0,
|
|
220
|
+
width: '100%',
|
|
221
|
+
transform: "translateY(".concat(virtualRowStart, "px)")
|
|
222
|
+
});
|
|
223
|
+
}
|
|
224
|
+
return baseStyle;
|
|
225
|
+
}, [isDragging, selectedRowDragging, row.getIsSelected(), canRowDrag, editting, disableDragRowIds, row.id, rowStyle, virtualRowStart]);
|
|
226
|
+
|
|
227
|
+
// 点击事件处理逻辑
|
|
228
|
+
var handleRowClick = useCallback(function (evt) {
|
|
229
|
+
clickCountRef.current++;
|
|
230
|
+
if (clickCountRef.current === 1) {
|
|
231
|
+
timerRef.current = setTimeout(function () {
|
|
232
|
+
if (clickCountRef.current === 1) {
|
|
233
|
+
handleSingleClick(evt);
|
|
234
|
+
}
|
|
235
|
+
clickCountRef.current = 0;
|
|
236
|
+
if (timerRef.current) {
|
|
237
|
+
clearTimeout(timerRef.current);
|
|
238
|
+
timerRef.current = undefined;
|
|
239
|
+
}
|
|
240
|
+
}, 200);
|
|
241
|
+
} else if (clickCountRef.current === 2) {
|
|
242
|
+
handleDoubleClick(evt);
|
|
243
|
+
clickCountRef.current = 0;
|
|
244
|
+
if (timerRef.current) {
|
|
245
|
+
clearTimeout(timerRef.current);
|
|
246
|
+
timerRef.current = undefined;
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
}, [row, table, canSelection, selectionWithoutChecked, setRowHighLightId, setRowSelectedId, selectedRowChange, onSelectChange, selectRowWhenClick, editting, onRowMouseClick, onRowMouseDoubleClick, canEditRowWhenDClick, handleEditRowWhenDClick]);
|
|
250
|
+
var handleSingleClick = useCallback(function (evt) {
|
|
251
|
+
onRowMouseClick === null || onRowMouseClick === void 0 || onRowMouseClick(row);
|
|
252
|
+
if (!row.getCanSelect()) {
|
|
253
|
+
return;
|
|
254
|
+
}
|
|
255
|
+
if (canSelection && !selectRowWhenClick) {
|
|
256
|
+
setRowHighLightId === null || setRowHighLightId === void 0 || setRowHighLightId(row.id);
|
|
257
|
+
return;
|
|
258
|
+
}
|
|
259
|
+
if (canSelection) {
|
|
260
|
+
handleSelectionClick(evt);
|
|
261
|
+
} else {
|
|
262
|
+
handleSingleSelection(evt);
|
|
263
|
+
}
|
|
264
|
+
}, [row, canSelection, selectRowWhenClick, setRowHighLightId, onRowMouseClick]);
|
|
265
|
+
var handleDoubleClick = useCallback(function (evt) {
|
|
266
|
+
onRowMouseDoubleClick === null || onRowMouseDoubleClick === void 0 || onRowMouseDoubleClick(row);
|
|
267
|
+
if (canEditRowWhenDClick) {
|
|
268
|
+
handleEditRowWhenDClick(row);
|
|
269
|
+
}
|
|
270
|
+
}, [row, onRowMouseDoubleClick, canEditRowWhenDClick, handleEditRowWhenDClick]);
|
|
271
|
+
|
|
272
|
+
// 选择点击处理
|
|
273
|
+
var handleSelectionClick = useCallback(function (evt) {
|
|
274
|
+
if (selectionWithoutChecked) {
|
|
275
|
+
if (evt.ctrlKey) {
|
|
276
|
+
handleCtrlSelection();
|
|
277
|
+
} else if (evt.shiftKey) {
|
|
278
|
+
handleShiftSelection();
|
|
279
|
+
} else {
|
|
280
|
+
handleSingleRowSelection();
|
|
281
|
+
}
|
|
282
|
+
} else {
|
|
283
|
+
if (evt.shiftKey) {
|
|
284
|
+
handleShiftSelectionWithCheckbox();
|
|
285
|
+
} else {
|
|
286
|
+
handleToggleSelection();
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
}, [row, table, selectionWithoutChecked]);
|
|
290
|
+
var handleCtrlSelection = useCallback(function () {
|
|
291
|
+
var selectionConfig = _objectSpread({}, table.getState().rowSelection);
|
|
292
|
+
if (!row.getIsSelected()) {
|
|
293
|
+
selectionConfig[row.id] = true;
|
|
294
|
+
} else if (Object.keys(selectionConfig).length > 1) {
|
|
295
|
+
delete selectionConfig[row.id];
|
|
296
|
+
}
|
|
297
|
+
// setRowSelection({ ...selectionConfig });
|
|
298
|
+
}, [row, table]);
|
|
299
|
+
var handleShiftSelection = useCallback(function () {
|
|
300
|
+
var min = Math.min(initselectedIndex || 0, row.index);
|
|
301
|
+
var max = Math.max(initselectedIndex || 0, row.index);
|
|
302
|
+
var selectionConfig = {};
|
|
303
|
+
table.getRowModel().rows.filter(function (row) {
|
|
304
|
+
return row.index >= min && row.index <= max;
|
|
305
|
+
}).forEach(function (row) {
|
|
306
|
+
selectionConfig[row.id] = true;
|
|
307
|
+
});
|
|
308
|
+
|
|
309
|
+
// setRowSelection(selectionConfig);
|
|
310
|
+
}, [row, table]);
|
|
311
|
+
var handleSingleRowSelection = useCallback(function () {
|
|
312
|
+
initselectedIndex = row.index;
|
|
313
|
+
// setRowSelection({ [row?.id]: true });
|
|
314
|
+
}, [row, table]);
|
|
315
|
+
var handleShiftSelectionWithCheckbox = useCallback(function () {
|
|
316
|
+
var selectionConfig = _objectSpread({}, table.getState().rowSelection);
|
|
317
|
+
var min = Math.min(initselectedIndex || 0, row.index);
|
|
318
|
+
var max = Math.max(initselectedIndex || 0, row.index);
|
|
319
|
+
table.getRowModel().rows.filter(function (row) {
|
|
320
|
+
return row.index >= min && row.index <= max;
|
|
321
|
+
}).forEach(function (row) {
|
|
322
|
+
selectionConfig[row.id] = true;
|
|
323
|
+
});
|
|
324
|
+
|
|
325
|
+
// setRowSelection(selectionConfig);
|
|
326
|
+
}, [row, table]);
|
|
327
|
+
var handleToggleSelection = useCallback(function () {
|
|
328
|
+
if (!row.getIsSelected()) {
|
|
329
|
+
initselectedIndex = row.index;
|
|
330
|
+
}
|
|
331
|
+
var selectionConfig = _objectSpread(_objectSpread({}, table.getState().rowSelection), {}, _defineProperty({}, row.id, !row.getIsSelected()));
|
|
332
|
+
if (row.getCanSelect()) {
|
|
333
|
+
// setRowSelection(selectionConfig);
|
|
334
|
+
}
|
|
335
|
+
}, [row, table]);
|
|
336
|
+
var handleSingleSelection = useCallback(function (evt) {
|
|
337
|
+
setRowSelectedId === null || setRowSelectedId === void 0 || setRowSelectedId(row === null || row === void 0 ? void 0 : row.id);
|
|
338
|
+
selectedRowChange === null || selectedRowChange === void 0 || selectedRowChange(row);
|
|
339
|
+
onSelectChange === null || onSelectChange === void 0 || onSelectChange(row, row === null || row === void 0 ? void 0 : row.original, true, evt);
|
|
340
|
+
}, [row, setRowSelectedId, selectedRowChange, onSelectChange]);
|
|
341
|
+
var rowMouseEnter = useCallback(function () {
|
|
342
|
+
onRowMouseEnter === null || onRowMouseEnter === void 0 || onRowMouseEnter(row);
|
|
343
|
+
}, [row, onRowMouseEnter]);
|
|
344
|
+
var rowMouseLeave = useCallback(function () {
|
|
345
|
+
onRowMouseLeave === null || onRowMouseLeave === void 0 || onRowMouseLeave(row);
|
|
346
|
+
}, [row, onRowMouseLeave]);
|
|
347
|
+
var _useState = useState({
|
|
348
|
+
title: ' ',
|
|
349
|
+
color: ''
|
|
350
|
+
}),
|
|
351
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
352
|
+
tooltipConfig = _useState2[0],
|
|
353
|
+
setTooltipConfig = _useState2[1];
|
|
354
|
+
var onOpenChange = useCallback(function (open) {
|
|
355
|
+
if (open) {
|
|
356
|
+
setTooltipConfig((getRowHoverTipConfig === null || getRowHoverTipConfig === void 0 ? void 0 : getRowHoverTipConfig(row.original)) || {
|
|
357
|
+
title: ' ',
|
|
358
|
+
color: ''
|
|
359
|
+
});
|
|
360
|
+
}
|
|
361
|
+
}, [getRowHoverTipConfig, row.original]);
|
|
362
|
+
|
|
363
|
+
// 清理定时器
|
|
364
|
+
useEffect(function () {
|
|
365
|
+
return function () {
|
|
366
|
+
if (timerRef.current) {
|
|
367
|
+
clearTimeout(timerRef.current);
|
|
368
|
+
}
|
|
369
|
+
};
|
|
370
|
+
}, []);
|
|
371
|
+
var rowComMemo = useMemo(function () {
|
|
372
|
+
// 添加数据验证
|
|
373
|
+
if (!(row !== null && row !== void 0 && row.getVisibleCells)) {
|
|
374
|
+
console.warn('Row data not ready');
|
|
375
|
+
return null;
|
|
376
|
+
}
|
|
377
|
+
var renderCell = function renderCell(cell) {
|
|
378
|
+
var _cell$column, _cell$getValue, _cell$getValue2, _cellClassName;
|
|
379
|
+
// 确保 cell.column.columnDef 存在
|
|
380
|
+
if (!(cell !== null && cell !== void 0 && (_cell$column = cell.column) !== null && _cell$column !== void 0 && _cell$column.columnDef)) {
|
|
381
|
+
console.warn('Cell column definition missing', cell);
|
|
382
|
+
return null;
|
|
383
|
+
}
|
|
384
|
+
var _cell$column$columnDe = cell.column.columnDef,
|
|
385
|
+
columnEditable = _cell$column$columnDe.editable,
|
|
386
|
+
accessorKey = _cell$column$columnDe.accessorKey,
|
|
387
|
+
header = _cell$column$columnDe.header,
|
|
388
|
+
columnClassName = _cell$column$columnDe.columnClassName,
|
|
389
|
+
columnId = _cell$column$columnDe.id,
|
|
390
|
+
filterType = _cell$column$columnDe.filterType;
|
|
391
|
+
|
|
392
|
+
// 多重保障确保列ID不为undefined
|
|
393
|
+
var safeColumnId = columnId || accessorKey || (cell === null || cell === void 0 ? void 0 : cell.id) || "cell-".concat(Math.random().toString(36).slice(2, 9));
|
|
394
|
+
var columnEditing = rowEditing && columnEditable;
|
|
395
|
+
var rawValue = (_cell$getValue = (_cell$getValue2 = cell.getValue) === null || _cell$getValue2 === void 0 ? void 0 : _cell$getValue2.call(cell)) !== null && _cell$getValue !== void 0 ? _cell$getValue : '';
|
|
396
|
+
|
|
397
|
+
// 检查必要的函数是否存在
|
|
398
|
+
if (typeof cell.getContext !== 'function') {
|
|
399
|
+
console.warn('cell.getContext is not a function', cell);
|
|
400
|
+
return null;
|
|
401
|
+
}
|
|
402
|
+
var originalContext = cell.getContext();
|
|
403
|
+
var enhancedContext = _objectSpread(_objectSpread({}, originalContext), {}, {
|
|
404
|
+
getValue: function getValue() {
|
|
405
|
+
return rawValue;
|
|
406
|
+
},
|
|
407
|
+
getFormattedValue: function getFormattedValue() {
|
|
408
|
+
var _cell$column$columnDe2;
|
|
409
|
+
return isDateColumn(cell.column.columnDef) ? formatDate(rawValue, ((_cell$column$columnDe2 = cell.column.columnDef) === null || _cell$column$columnDe2 === void 0 || (_cell$column$columnDe2 = _cell$column$columnDe2.meta) === null || _cell$column$columnDe2 === void 0 ? void 0 : _cell$column$columnDe2.dateFormat) || dateFormat) : rawValue;
|
|
410
|
+
},
|
|
411
|
+
renderValue: function renderValue() {
|
|
412
|
+
return enhancedContext.getFormattedValue();
|
|
413
|
+
}
|
|
414
|
+
});
|
|
415
|
+
var cellClassNames = [columnEditing ? 'tbody-tr-td-editting' : '', columnClassName ? columnClassName.join(' ') : ''].concat(_toConsumableArray((cellClassName === null || cellClassName === void 0 || (_cellClassName = cellClassName(cell)) === null || _cellClassName === void 0 ? void 0 : _cellClassName.map(function (item) {
|
|
416
|
+
return "".concat(item, "-").concat(theme);
|
|
417
|
+
})) || []), ['tbody-tr-td']).filter(Boolean).join(' ');
|
|
418
|
+
return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({
|
|
419
|
+
className: cellClassNames,
|
|
420
|
+
style: _objectSpread({}, getPinningStyle(cell, table, false)),
|
|
421
|
+
onContextMenu: function onContextMenu(e) {
|
|
422
|
+
return handleCellRightClick(e, cell);
|
|
423
|
+
}
|
|
424
|
+
}, getCellProps === null || getCellProps === void 0 ? void 0 : getCellProps(cell.getContext())), {}, {
|
|
425
|
+
children: EditableCell(_objectSpread(_objectSpread({}, cell.column.columnDef), {}, {
|
|
426
|
+
width: cell.column.getSize(),
|
|
427
|
+
tableTooltip: tableTooltip,
|
|
428
|
+
editing: columnEditing,
|
|
429
|
+
dataIndex: accessorKey,
|
|
430
|
+
title: header,
|
|
431
|
+
onEditValueChange: onEditValueChange,
|
|
432
|
+
children: flexRender(cell.column.columnDef.cell, enhancedContext)
|
|
433
|
+
}))
|
|
434
|
+
}), cell.id);
|
|
435
|
+
};
|
|
436
|
+
try {
|
|
437
|
+
var cells = row.getVisibleCells();
|
|
438
|
+
return /*#__PURE__*/_jsx("tr", {
|
|
439
|
+
id: rowEditing ? "".concat(tableId, "-tbody-tr-editing") : undefined,
|
|
440
|
+
ref: function ref(node) {
|
|
441
|
+
dropRef(node && !editting ? node : null);
|
|
442
|
+
dragRef(node && canRowDrag && !editting && !(disableDragRowIds !== null && disableDragRowIds !== void 0 && disableDragRowIds.includes(row.id)) ? node : null);
|
|
443
|
+
},
|
|
444
|
+
style: rowStyles,
|
|
445
|
+
onClick: handleRowClick,
|
|
446
|
+
onMouseEnter: rowMouseEnter,
|
|
447
|
+
onMouseLeave: rowMouseLeave,
|
|
448
|
+
className: rowClassNames,
|
|
449
|
+
children: cells.map(renderCell)
|
|
450
|
+
});
|
|
451
|
+
} catch (error) {
|
|
452
|
+
console.error('Error rendering row:', error);
|
|
453
|
+
return null;
|
|
454
|
+
}
|
|
455
|
+
}, [row, row.id, rowEditing, tableId, editting, canRowDrag, disableDragRowIds, isDragging, selectedRowDragging, rowStyle, handleRowClick, rowMouseEnter, rowMouseLeave, rowClassNames, cellClassName, theme, table, handleCellRightClick, getCellProps, tableTooltip, onEditValueChange, dateFormat, rowStyles]);
|
|
456
|
+
var rowCom = function rowCom() {
|
|
457
|
+
var renderCell = function renderCell(cell) {
|
|
458
|
+
var _cellClassName2;
|
|
459
|
+
var _cell$column$columnDe3 = cell.column.columnDef,
|
|
460
|
+
columnEditable = _cell$column$columnDe3.editable,
|
|
461
|
+
accessorKey = _cell$column$columnDe3.accessorKey,
|
|
462
|
+
header = _cell$column$columnDe3.header,
|
|
463
|
+
columnClassName = _cell$column$columnDe3.columnClassName,
|
|
464
|
+
id = _cell$column$columnDe3.id,
|
|
465
|
+
filterType = _cell$column$columnDe3.filterType;
|
|
466
|
+
var columnEditing = rowEditing && columnEditable;
|
|
467
|
+
var rawValue = cell.getValue();
|
|
468
|
+
|
|
469
|
+
// 创建增强上下文
|
|
470
|
+
var originalContext = cell.getContext();
|
|
471
|
+
var enhancedContext = _objectSpread(_objectSpread({}, originalContext), {}, {
|
|
472
|
+
getValue: function getValue() {
|
|
473
|
+
return rawValue;
|
|
474
|
+
},
|
|
475
|
+
getFormattedValue: function getFormattedValue() {
|
|
476
|
+
var _cell$column$columnDe4;
|
|
477
|
+
return isDateColumn(cell.column.columnDef) ? formatDate(rawValue, ((_cell$column$columnDe4 = cell.column.columnDef) === null || _cell$column$columnDe4 === void 0 || (_cell$column$columnDe4 = _cell$column$columnDe4.meta) === null || _cell$column$columnDe4 === void 0 ? void 0 : _cell$column$columnDe4.dateFormat) || dateFormat) : rawValue;
|
|
478
|
+
},
|
|
479
|
+
renderValue: function renderValue() {
|
|
480
|
+
return enhancedContext.getFormattedValue();
|
|
481
|
+
}
|
|
482
|
+
});
|
|
483
|
+
var cellClassNames = [columnEditing ? 'tbody-tr-td-editting' : '', columnClassName ? columnClassName.join(' ') : ''].concat(_toConsumableArray((cellClassName === null || cellClassName === void 0 || (_cellClassName2 = cellClassName(cell)) === null || _cellClassName2 === void 0 ? void 0 : _cellClassName2.map(function (item) {
|
|
484
|
+
return "".concat(item, "-").concat(theme);
|
|
485
|
+
})) || []), ['tbody-tr-td']).filter(Boolean).join(' ');
|
|
486
|
+
return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({
|
|
487
|
+
className: cellClassNames,
|
|
488
|
+
style: _objectSpread({}, getPinningStyle(cell, table, false)),
|
|
489
|
+
onContextMenu: function onContextMenu(e) {
|
|
490
|
+
return handleCellRightClick(e, cell);
|
|
491
|
+
}
|
|
492
|
+
}, getCellProps === null || getCellProps === void 0 ? void 0 : getCellProps(cell.getContext())), {}, {
|
|
493
|
+
children: EditableCell(_objectSpread(_objectSpread({}, cell.column.columnDef), {}, {
|
|
494
|
+
width: cell.column.getSize(),
|
|
495
|
+
tableTooltip: tableTooltip,
|
|
496
|
+
editing: columnEditing,
|
|
497
|
+
dataIndex: accessorKey,
|
|
498
|
+
title: header,
|
|
499
|
+
onEditValueChange: onEditValueChange,
|
|
500
|
+
children: flexRender(cell.column.columnDef.cell, enhancedContext)
|
|
501
|
+
}))
|
|
502
|
+
}), cell.id);
|
|
503
|
+
};
|
|
504
|
+
return /*#__PURE__*/_jsx("tr", {
|
|
505
|
+
id: rowEditing ? "".concat(tableId, "-tbody-tr-editing") : undefined,
|
|
506
|
+
ref: function ref(node) {
|
|
507
|
+
dropRef(node && !editting ? node : null);
|
|
508
|
+
dragRef(node && canRowDrag && !editting && !(disableDragRowIds !== null && disableDragRowIds !== void 0 && disableDragRowIds.includes(row.id)) ? node : null);
|
|
509
|
+
},
|
|
510
|
+
style: rowStyles,
|
|
511
|
+
onClick: handleRowClick,
|
|
512
|
+
onMouseEnter: rowMouseEnter,
|
|
513
|
+
onMouseLeave: rowMouseLeave,
|
|
514
|
+
className: rowClassNames,
|
|
515
|
+
children: row.getVisibleCells().map(renderCell)
|
|
516
|
+
});
|
|
517
|
+
};
|
|
518
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
519
|
+
children: [!!getRowHoverTipConfig ? /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, tooltipConfig), {}, {
|
|
520
|
+
onOpenChange: onOpenChange,
|
|
521
|
+
destroyTooltipOnHide: {
|
|
522
|
+
keepParent: false
|
|
523
|
+
},
|
|
524
|
+
overlayClassName: "table-max-row-tooltip-wrapper",
|
|
525
|
+
getPopupContainer: function getPopupContainer() {
|
|
526
|
+
return tableBodyRef.current || document.body;
|
|
527
|
+
},
|
|
528
|
+
children: openMemo ? rowComMemo : rowCom()
|
|
529
|
+
})) : openMemo ? rowComMemo : rowCom(), row.getIsExpanded() && /*#__PURE__*/_jsx("tr", {
|
|
530
|
+
className: "tbody-tr-subrow",
|
|
531
|
+
children: /*#__PURE__*/_jsx("td", {
|
|
532
|
+
colSpan: visibleCells.length,
|
|
533
|
+
style: {
|
|
534
|
+
padding: 0
|
|
535
|
+
},
|
|
536
|
+
children: !!(tableBodyRef !== null && tableBodyRef !== void 0 && (_tableBodyRef$current = tableBodyRef.current) !== null && _tableBodyRef$current !== void 0 && _tableBodyRef$current.clientWidth) && /*#__PURE__*/_jsx("div", {
|
|
537
|
+
id: "".concat(tableId, "_expand-table"),
|
|
538
|
+
className: "subRowWrapper",
|
|
539
|
+
style: {
|
|
540
|
+
width: "".concat(tableBodyRef === null || tableBodyRef === void 0 || (_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 ? void 0 : _tableBodyRef$current2.clientWidth, "px")
|
|
541
|
+
},
|
|
542
|
+
children: renderSubComponent && renderSubComponent({
|
|
543
|
+
row: row
|
|
544
|
+
})
|
|
545
|
+
})
|
|
546
|
+
})
|
|
547
|
+
})]
|
|
548
|
+
});
|
|
549
|
+
};
|
|
550
|
+
function formatDate(dateValue) {
|
|
551
|
+
var pattern = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "YYYY-MM-DD HH:mm";
|
|
552
|
+
if (!dateValue) return '';
|
|
553
|
+
var date = dayjs(dateValue);
|
|
554
|
+
return date.isValid() ? date.format(pattern) : 'Invalid Date';
|
|
555
|
+
}
|
|
556
|
+
function isDateColumn(column) {
|
|
557
|
+
var _column$meta;
|
|
558
|
+
return (column === null || column === void 0 || (_column$meta = column.meta) === null || _column$meta === void 0 ? void 0 : _column$meta.isDate) || false;
|
|
559
|
+
}
|
|
560
|
+
export { VirtualRow };
|
|
@@ -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
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { TableMaxColumnType } from "../../type";
|
|
2
|
-
export declare const numberSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
3
|
-
export declare const stringSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
4
|
-
export declare const numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
5
|
-
export declare const timeSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
2
|
+
export declare const numberSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
3
|
+
export declare const stringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
4
|
+
export declare const numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
5
|
+
export declare const timeSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
6
6
|
declare const customSortFns: {
|
|
7
|
-
numberSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
8
|
-
stringSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
9
|
-
timeSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
10
|
-
numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) =>
|
|
7
|
+
numberSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
8
|
+
stringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
9
|
+
timeSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
10
|
+
numberOrStringSortFn: (rowA: any, rowB: any, columnId: string) => 0 | 1 | -1;
|
|
11
11
|
};
|
|
12
12
|
export default customSortFns;
|
|
13
13
|
export type SortFnType = keyof typeof customSortFns | undefined;
|