@arim-aisdc/public-components 2.3.30 → 2.3.31
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/BaseInfo/BaseInfo.d.ts +1 -1
- package/dist/components/TableMax/TableBody/Row copy.d.ts +64 -0
- package/dist/components/TableMax/TableBody/Row copy.js +429 -0
- package/dist/components/TableMax/TableBody/Row.d.ts +2 -1
- package/dist/components/TableMax/TableBody/Row.js +217 -210
- package/dist/components/TableMax/TableBody/index.d.ts +3 -1
- package/dist/components/TableMax/TableBody/index.js +65 -8
- package/dist/components/TableMax/TableMax.js +4 -1
- package/dist/components/TableMax/components/ColumnSort/customSortFns.d.ts +8 -8
- package/dist/components/TableMax/tableMax.less +2 -1
- package/package.json +1 -1
|
@@ -17,7 +17,7 @@ export declare const foramtBaseInfoField: (data: any, dataField: BaseInfoFieldTy
|
|
|
17
17
|
value: any;
|
|
18
18
|
field: string;
|
|
19
19
|
label?: string;
|
|
20
|
-
text: string |
|
|
20
|
+
text: string | Element | JSX.Element;
|
|
21
21
|
units?: string;
|
|
22
22
|
width?: string;
|
|
23
23
|
labelWidth?: string;
|
|
@@ -0,0 +1,64 @@
|
|
|
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
|
+
rowHeight: number;
|
|
36
|
+
disableDragRowIds?: any[];
|
|
37
|
+
selectRowWhenClick: boolean;
|
|
38
|
+
handleEditRowWhenDClick: (row: any) => void;
|
|
39
|
+
canEditRowWhenDClick: boolean;
|
|
40
|
+
theme: string;
|
|
41
|
+
dragBeforeStart?: (datas: any) => boolean;
|
|
42
|
+
rowKey?: string;
|
|
43
|
+
shadowColumnInfo: {
|
|
44
|
+
leftLastColumnId: string;
|
|
45
|
+
rightFirstColumnId: string;
|
|
46
|
+
};
|
|
47
|
+
onCellContextMenu: (e: React.MouseEvent, cell: any) => void;
|
|
48
|
+
/**获取行hover时的tip信息 */
|
|
49
|
+
getRowHoverTipConfig?: (row: any) => {
|
|
50
|
+
title: string;
|
|
51
|
+
color: string;
|
|
52
|
+
};
|
|
53
|
+
tableTooltip: boolean;
|
|
54
|
+
changeHoverRow: (params: {
|
|
55
|
+
target?: any;
|
|
56
|
+
origin?: any;
|
|
57
|
+
}) => void;
|
|
58
|
+
clearHoverRowIndex: () => void;
|
|
59
|
+
hoverRowIndex: number;
|
|
60
|
+
dropSide: DropSide;
|
|
61
|
+
onEditValueChange?: (field: string, value: any, extra?: any) => void;
|
|
62
|
+
};
|
|
63
|
+
declare const Row: ({ 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, rowHeight, disableDragRowIds, selectRowWhenClick, handleEditRowWhenDClick, canEditRowWhenDClick, theme, dragBeforeStart, shadowColumnInfo, onCellContextMenu, getRowHoverTipConfig, tableTooltip, changeHoverRow, clearHoverRowIndex, hoverRowIndex, dropSide, onEditValueChange, }: IRowProps) => import("react/jsx-runtime").JSX.Element;
|
|
64
|
+
export default Row;
|
|
@@ -0,0 +1,429 @@
|
|
|
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 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; }
|
|
3
|
+
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; }
|
|
4
|
+
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; }
|
|
5
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
6
|
+
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); }
|
|
7
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
8
|
+
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."); }
|
|
9
|
+
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); }
|
|
10
|
+
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; }
|
|
11
|
+
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; } }
|
|
12
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
13
|
+
import { DropSide } from "../type";
|
|
14
|
+
import { flexRender } from '@tanstack/react-table';
|
|
15
|
+
import { useUpdateEffect } from 'ahooks';
|
|
16
|
+
import { Tooltip } from 'antd';
|
|
17
|
+
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
18
|
+
import { useDrag, useDrop } from 'react-dnd';
|
|
19
|
+
import { getEmptyImage } from 'react-dnd-html5-backend';
|
|
20
|
+
import { getPinningStyle } from "../TableHeader/utils";
|
|
21
|
+
import { EditableCell } from "../components/ColumnEdit";
|
|
22
|
+
import "./index.less";
|
|
23
|
+
import dayjs from 'dayjs';
|
|
24
|
+
import { useConfig } from "../../ConfigProvider";
|
|
25
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
26
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
27
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
28
|
+
var initselectedIndex;
|
|
29
|
+
var Row = function Row(_ref) {
|
|
30
|
+
var _row2, _tableBodyRef$current, _tableBodyRef$current2;
|
|
31
|
+
var tableBodyRef = _ref.tableBodyRef,
|
|
32
|
+
table = _ref.table,
|
|
33
|
+
tableId = _ref.tableId,
|
|
34
|
+
row = _ref.row,
|
|
35
|
+
rowSelectedId = _ref.rowSelectedId,
|
|
36
|
+
setRowSelectedId = _ref.setRowSelectedId,
|
|
37
|
+
rowHighLightId = _ref.rowHighLightId,
|
|
38
|
+
setRowHighLightId = _ref.setRowHighLightId,
|
|
39
|
+
selectedRowChange = _ref.selectedRowChange,
|
|
40
|
+
onSelectChange = _ref.onSelectChange,
|
|
41
|
+
canSelection = _ref.canSelection,
|
|
42
|
+
selectionWithoutChecked = _ref.selectionWithoutChecked,
|
|
43
|
+
reorderRow = _ref.reorderRow,
|
|
44
|
+
canRowDrag = _ref.canRowDrag,
|
|
45
|
+
rowClassName = _ref.rowClassName,
|
|
46
|
+
cellClassName = _ref.cellClassName,
|
|
47
|
+
rowStyle = _ref.rowStyle,
|
|
48
|
+
getCellProps = _ref.getCellProps,
|
|
49
|
+
editting = _ref.editting,
|
|
50
|
+
rowEditing = _ref.rowEditing,
|
|
51
|
+
renderSubComponent = _ref.renderSubComponent,
|
|
52
|
+
selectedRowDragging = _ref.selectedRowDragging,
|
|
53
|
+
setSelectedRowDragging = _ref.setSelectedRowDragging,
|
|
54
|
+
onRowMouseEnter = _ref.onRowMouseEnter,
|
|
55
|
+
onRowMouseLeave = _ref.onRowMouseLeave,
|
|
56
|
+
onRowMouseClick = _ref.onRowMouseClick,
|
|
57
|
+
onRowMouseDoubleClick = _ref.onRowMouseDoubleClick,
|
|
58
|
+
rowHeight = _ref.rowHeight,
|
|
59
|
+
disableDragRowIds = _ref.disableDragRowIds,
|
|
60
|
+
selectRowWhenClick = _ref.selectRowWhenClick,
|
|
61
|
+
handleEditRowWhenDClick = _ref.handleEditRowWhenDClick,
|
|
62
|
+
canEditRowWhenDClick = _ref.canEditRowWhenDClick,
|
|
63
|
+
theme = _ref.theme,
|
|
64
|
+
dragBeforeStart = _ref.dragBeforeStart,
|
|
65
|
+
shadowColumnInfo = _ref.shadowColumnInfo,
|
|
66
|
+
onCellContextMenu = _ref.onCellContextMenu,
|
|
67
|
+
getRowHoverTipConfig = _ref.getRowHoverTipConfig,
|
|
68
|
+
tableTooltip = _ref.tableTooltip,
|
|
69
|
+
changeHoverRow = _ref.changeHoverRow,
|
|
70
|
+
clearHoverRowIndex = _ref.clearHoverRowIndex,
|
|
71
|
+
hoverRowIndex = _ref.hoverRowIndex,
|
|
72
|
+
dropSide = _ref.dropSide,
|
|
73
|
+
onEditValueChange = _ref.onEditValueChange;
|
|
74
|
+
var dropPreviewLineClassName = useMemo(function () {
|
|
75
|
+
if (hoverRowIndex === row.index) {
|
|
76
|
+
return dropSide === DropSide.Top ? 'showTopBorder' : 'showBottomBorder';
|
|
77
|
+
} else {
|
|
78
|
+
return '';
|
|
79
|
+
}
|
|
80
|
+
}, [hoverRowIndex, dropSide]);
|
|
81
|
+
var timerRef = useRef();
|
|
82
|
+
var _useDrop = useDrop({
|
|
83
|
+
accept: 'TABLE_ROW',
|
|
84
|
+
drop: function drop(formDatas
|
|
85
|
+
// monitor
|
|
86
|
+
) {
|
|
87
|
+
clearHoverRowIndex();
|
|
88
|
+
return reorderRow === null || reorderRow === void 0 ? void 0 : reorderRow(formDatas, {
|
|
89
|
+
hoverRow: row,
|
|
90
|
+
targetTableId: tableId
|
|
91
|
+
});
|
|
92
|
+
},
|
|
93
|
+
hover: function hover(item, monitor) {
|
|
94
|
+
if (monitor.isOver() && monitor.canDrop()) {
|
|
95
|
+
changeHoverRow({
|
|
96
|
+
target: row,
|
|
97
|
+
origin: item
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}),
|
|
102
|
+
_useDrop2 = _slicedToArray(_useDrop, 2),
|
|
103
|
+
dropRef = _useDrop2[1];
|
|
104
|
+
// const [centerSubRowHeight, setCenterSubRowHeight] = useState();
|
|
105
|
+
// const centerSubRowRef: any = useRef(null);
|
|
106
|
+
|
|
107
|
+
var _useDrag = useDrag({
|
|
108
|
+
collect: function collect(monitor) {
|
|
109
|
+
return {
|
|
110
|
+
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()
|
|
111
|
+
};
|
|
112
|
+
},
|
|
113
|
+
item: function item() {
|
|
114
|
+
var _table$getSelectedRow;
|
|
115
|
+
var selectedRows = ((_table$getSelectedRow = table.getSelectedRowModel()) === null || _table$getSelectedRow === void 0 ? void 0 : _table$getSelectedRow.rows) || [];
|
|
116
|
+
var selectedRowsNumber = (selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.length) || 0;
|
|
117
|
+
var selectedRowsIndexList = selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.map(function (row) {
|
|
118
|
+
return row.index;
|
|
119
|
+
});
|
|
120
|
+
var isMultipleDrag = selectedRowsNumber > 1 && selectedRowsIndexList.includes(row.index);
|
|
121
|
+
return {
|
|
122
|
+
draggedRow: row,
|
|
123
|
+
isMultipleDrag: isMultipleDrag,
|
|
124
|
+
draggedRows: isMultipleDrag ? selectedRows : [row],
|
|
125
|
+
sourceTableId: tableId
|
|
126
|
+
};
|
|
127
|
+
},
|
|
128
|
+
type: 'TABLE_ROW'
|
|
129
|
+
}),
|
|
130
|
+
_useDrag2 = _slicedToArray(_useDrag, 3),
|
|
131
|
+
isDragging = _useDrag2[0].isDragging,
|
|
132
|
+
dragRef = _useDrag2[1],
|
|
133
|
+
preview = _useDrag2[2];
|
|
134
|
+
useEffect(function () {
|
|
135
|
+
// 隐藏拖拽dom
|
|
136
|
+
if (canRowDrag) {
|
|
137
|
+
preview(getEmptyImage(), {
|
|
138
|
+
captureDraggingState: true
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
}, [canRowDrag]);
|
|
142
|
+
|
|
143
|
+
// useEffect(() => {
|
|
144
|
+
// setCenterSubRowHeight(centerSubRowRef?.current?.clientHeight);
|
|
145
|
+
// console.log('centerSubRowRef?.current?.clientHeight=====', position, row, centerSubRowRef?.current?.clientHeight)
|
|
146
|
+
// }, [centerSubRowRef?.current?.clientHeight, position]);
|
|
147
|
+
|
|
148
|
+
useEffect(function () {
|
|
149
|
+
if (setSelectedRowDragging && row.getIsSelected()) {
|
|
150
|
+
setSelectedRowDragging(isDragging);
|
|
151
|
+
}
|
|
152
|
+
}, [isDragging, row.getIsSelected()]);
|
|
153
|
+
useUpdateEffect(function () {
|
|
154
|
+
// 鼠标移出,清除border
|
|
155
|
+
if (!isDragging) {
|
|
156
|
+
clearHoverRowIndex();
|
|
157
|
+
}
|
|
158
|
+
}, [isDragging]);
|
|
159
|
+
var rowClickHandler = function rowClickHandler(evt) {
|
|
160
|
+
// 触发单击事件
|
|
161
|
+
onRowMouseClick === null || onRowMouseClick === void 0 || onRowMouseClick(row);
|
|
162
|
+
if (!row.getCanSelect()) {
|
|
163
|
+
return;
|
|
164
|
+
}
|
|
165
|
+
if (canSelection && !selectRowWhenClick) {
|
|
166
|
+
setRowHighLightId(row.id);
|
|
167
|
+
return;
|
|
168
|
+
}
|
|
169
|
+
// 多选
|
|
170
|
+
if (canSelection) {
|
|
171
|
+
// 不展示多选框
|
|
172
|
+
if (selectionWithoutChecked) {
|
|
173
|
+
if (evt.ctrlKey) {
|
|
174
|
+
var selectionConfig = _objectSpread({}, table.getState().rowSelection);
|
|
175
|
+
if (!row.getIsSelected()) {
|
|
176
|
+
selectionConfig[row.id] = true;
|
|
177
|
+
} else {
|
|
178
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
179
|
+
selectionConfig[row.id] && Object.keys(selectionConfig).length > 1 && delete selectionConfig[row.id];
|
|
180
|
+
}
|
|
181
|
+
table === null || table === void 0 || table.setRowSelection(_objectSpread({}, selectionConfig));
|
|
182
|
+
} else if (evt.shiftKey) {
|
|
183
|
+
var _table$getRowModel$ro;
|
|
184
|
+
var _selectionConfig = {};
|
|
185
|
+
var min = Math.min(initselectedIndex || 0, row.index);
|
|
186
|
+
var max = Math.max(initselectedIndex || 0, row.index);
|
|
187
|
+
// console.log(selectionConfig, table.getRowModel(), 'selectionConfig');
|
|
188
|
+
var newSelectedRowIds = ((_table$getRowModel$ro = table.getRowModel().rows.filter(function (row) {
|
|
189
|
+
return row.index >= min && row.index <= max;
|
|
190
|
+
})) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.map(function (row) {
|
|
191
|
+
return row.id;
|
|
192
|
+
})) || [];
|
|
193
|
+
for (var i = 0; i <= newSelectedRowIds.length; i++) {
|
|
194
|
+
_selectionConfig[newSelectedRowIds[i]] = true;
|
|
195
|
+
}
|
|
196
|
+
table === null || table === void 0 || table.setRowSelection(_selectionConfig);
|
|
197
|
+
} else {
|
|
198
|
+
initselectedIndex = row.index;
|
|
199
|
+
table === null || table === void 0 || table.setRowSelection(_defineProperty({}, row === null || row === void 0 ? void 0 : row.id, true));
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
// 展示多选框
|
|
203
|
+
else {
|
|
204
|
+
if (evt.shiftKey) {
|
|
205
|
+
var _table$getRowModel$ro2;
|
|
206
|
+
// console.log('table.getState().rowSelection :>> ', table.getState().rowSelection);
|
|
207
|
+
var _selectionConfig2 = _objectSpread({}, table.getState().rowSelection);
|
|
208
|
+
var _min = Math.min(initselectedIndex || 0, row.index);
|
|
209
|
+
var _max = Math.max(initselectedIndex || 0, row.index);
|
|
210
|
+
// console.log(selectionConfig, table.getRowModel(), 'selectionConfig');
|
|
211
|
+
var _newSelectedRowIds = ((_table$getRowModel$ro2 = table.getRowModel().rows.filter(function (row) {
|
|
212
|
+
return row.index >= _min && row.index <= _max;
|
|
213
|
+
})) === null || _table$getRowModel$ro2 === void 0 ? void 0 : _table$getRowModel$ro2.map(function (row) {
|
|
214
|
+
return row.id;
|
|
215
|
+
})) || [];
|
|
216
|
+
for (var _i = 0; _i <= _newSelectedRowIds.length; _i++) {
|
|
217
|
+
_selectionConfig2[_newSelectedRowIds[_i]] = true;
|
|
218
|
+
}
|
|
219
|
+
table === null || table === void 0 || table.setRowSelection(_selectionConfig2);
|
|
220
|
+
} else {
|
|
221
|
+
if (!row.getIsSelected()) {
|
|
222
|
+
initselectedIndex = row.index;
|
|
223
|
+
}
|
|
224
|
+
var _selectionConfig3 = _objectSpread(_objectSpread({}, table.getState().rowSelection), {}, _defineProperty({}, row.id, !row.getIsSelected()));
|
|
225
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
226
|
+
row.getCanSelect() && (table === null || table === void 0 ? void 0 : table.setRowSelection(_selectionConfig3));
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
// 单选
|
|
231
|
+
else {
|
|
232
|
+
setRowSelectedId === null || setRowSelectedId === void 0 || setRowSelectedId(row === null || row === void 0 ? void 0 : row.id);
|
|
233
|
+
selectedRowChange === null || selectedRowChange === void 0 || selectedRowChange(row);
|
|
234
|
+
onSelectChange === null || onSelectChange === void 0 || onSelectChange(row, row === null || row === void 0 ? void 0 : row.original, true, evt);
|
|
235
|
+
}
|
|
236
|
+
};
|
|
237
|
+
var rowClickOrDoubleClick = function rowClickOrDoubleClick(e) {
|
|
238
|
+
// console.log('rowClickOrDoubleClick');
|
|
239
|
+
if (editting) return;
|
|
240
|
+
if (onRowMouseDoubleClick || canEditRowWhenDClick) {
|
|
241
|
+
// 监听了双击事件 | 双击可以编辑行
|
|
242
|
+
if (!timerRef.current) {
|
|
243
|
+
timerRef.current = setTimeout(function () {
|
|
244
|
+
rowClickHandler(e);
|
|
245
|
+
clearTimeout(timerRef.current);
|
|
246
|
+
timerRef.current = undefined;
|
|
247
|
+
}, 300);
|
|
248
|
+
} else {
|
|
249
|
+
clearTimeout(timerRef.current);
|
|
250
|
+
timerRef.current = undefined;
|
|
251
|
+
onRowMouseDoubleClick === null || onRowMouseDoubleClick === void 0 || onRowMouseDoubleClick(row);
|
|
252
|
+
if (canEditRowWhenDClick) {
|
|
253
|
+
handleEditRowWhenDClick(row);
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
} else {
|
|
257
|
+
// 没有监听双击事件,直接触发单击逻辑
|
|
258
|
+
rowClickHandler(e);
|
|
259
|
+
}
|
|
260
|
+
};
|
|
261
|
+
var rowMouseEnter = function rowMouseEnter() {
|
|
262
|
+
onRowMouseEnter === null || onRowMouseEnter === void 0 || onRowMouseEnter(row);
|
|
263
|
+
};
|
|
264
|
+
var rowMouseLeave = function rowMouseLeave() {
|
|
265
|
+
onRowMouseLeave === null || onRowMouseLeave === void 0 || onRowMouseLeave(row);
|
|
266
|
+
};
|
|
267
|
+
var handleCellRightClick = function handleCellRightClick(e, cell) {
|
|
268
|
+
onCellContextMenu(e, cell);
|
|
269
|
+
};
|
|
270
|
+
var leftLastColumnId = shadowColumnInfo.leftLastColumnId,
|
|
271
|
+
rightFirstColumnId = shadowColumnInfo.rightFirstColumnId;
|
|
272
|
+
var _useState = useState({
|
|
273
|
+
title: ' ',
|
|
274
|
+
color: ''
|
|
275
|
+
}),
|
|
276
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
277
|
+
tooltipConfig = _useState2[0],
|
|
278
|
+
setTooltipConfig = _useState2[1];
|
|
279
|
+
var onOpenChange = function onOpenChange(open) {
|
|
280
|
+
if (open) {
|
|
281
|
+
setTooltipConfig(getRowHoverTipConfig(row.original));
|
|
282
|
+
}
|
|
283
|
+
};
|
|
284
|
+
|
|
285
|
+
// 高亮色
|
|
286
|
+
var highLightClassName = useMemo(function () {
|
|
287
|
+
if (!canSelection && String(row.id) === String(rowSelectedId)) {
|
|
288
|
+
// 单选,选中用高亮色显示
|
|
289
|
+
return 'tbody-tr-highlight';
|
|
290
|
+
} else if (canSelection) {
|
|
291
|
+
// 多选
|
|
292
|
+
if (String(row.id) === String(rowHighLightId)) {
|
|
293
|
+
// 高亮状态
|
|
294
|
+
return 'tbody-tr-highlight';
|
|
295
|
+
} else if (row.getIsSelected()) {
|
|
296
|
+
// checked选中用选中色
|
|
297
|
+
return 'tbody-tr-selected';
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
return '';
|
|
301
|
+
}, [row.id, row.getIsSelected(), rowSelectedId, selectRowWhenClick, rowHighLightId, canSelection]);
|
|
302
|
+
|
|
303
|
+
// console.log('row render');
|
|
304
|
+
|
|
305
|
+
var rowCom = function rowCom() {
|
|
306
|
+
var _row;
|
|
307
|
+
var _useConfig = useConfig(),
|
|
308
|
+
dateFormat = _useConfig.dateFormat;
|
|
309
|
+
return /*#__PURE__*/_jsx("tr", {
|
|
310
|
+
id: rowEditing ? "".concat(tableId, "-tbody-tr-editing") : undefined,
|
|
311
|
+
ref: function ref(node) {
|
|
312
|
+
dropRef(node && !editting ? node : null);
|
|
313
|
+
dragRef(node && canRowDrag && !editting && !(disableDragRowIds !== null && disableDragRowIds !== void 0 && disableDragRowIds.includes(row.id)) ? node : null);
|
|
314
|
+
},
|
|
315
|
+
style: _objectSpread({
|
|
316
|
+
opacity: isDragging || selectedRowDragging && row.getIsSelected() ? 0.5 : 1,
|
|
317
|
+
cursor: canRowDrag && !editting && !(disableDragRowIds !== null && disableDragRowIds !== void 0 && disableDragRowIds.includes(row.id)) ? 'move' : 'auto'
|
|
318
|
+
}, rowStyle),
|
|
319
|
+
onClick: rowClickOrDoubleClick,
|
|
320
|
+
onMouseEnter: rowMouseEnter,
|
|
321
|
+
onMouseLeave: rowMouseLeave,
|
|
322
|
+
className: "tbody-tr ".concat(highLightClassName, " ").concat(dropPreviewLineClassName, " ").concat((rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row).map(function (item) {
|
|
323
|
+
return "".concat(item, "-").concat(theme);
|
|
324
|
+
}).join(' ')) || ''),
|
|
325
|
+
children: (_row = row["getVisibleCells"]) === null || _row === void 0 ? void 0 : _row.call(row).map(function (cell) {
|
|
326
|
+
var _cell$column$columnDe = cell.column.columnDef,
|
|
327
|
+
columnEditable = _cell$column$columnDe.editable,
|
|
328
|
+
accessorKey = _cell$column$columnDe.accessorKey,
|
|
329
|
+
header = _cell$column$columnDe.header,
|
|
330
|
+
columnClassName = _cell$column$columnDe.columnClassName,
|
|
331
|
+
id = _cell$column$columnDe.id,
|
|
332
|
+
filterType = _cell$column$columnDe.filterType;
|
|
333
|
+
// 当前列是否编辑中
|
|
334
|
+
var columnEditing = rowEditing && columnEditable;
|
|
335
|
+
// const cellValue = cell.getValue();
|
|
336
|
+
|
|
337
|
+
// const cellRenderer = cell.column.columnDef.cell;
|
|
338
|
+
// const formattedValue = isDateColumn(cell.column.columnDef)
|
|
339
|
+
// ? formatDate(cellValue, cell.column.columnDef?.meta?.dateFormat)
|
|
340
|
+
// : cellValue;
|
|
341
|
+
|
|
342
|
+
var originalContext = cell.getContext();
|
|
343
|
+
var rawValue = originalContext.getValue();
|
|
344
|
+
|
|
345
|
+
// 创建增强上下文
|
|
346
|
+
var enhancedContext = _objectSpread(_objectSpread({}, originalContext), {}, {
|
|
347
|
+
// 原始值获取
|
|
348
|
+
getValue: function getValue() {
|
|
349
|
+
return rawValue;
|
|
350
|
+
},
|
|
351
|
+
// 格式化值获取
|
|
352
|
+
getFormattedValue: function getFormattedValue() {
|
|
353
|
+
var _cell$column$columnDe2;
|
|
354
|
+
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;
|
|
355
|
+
},
|
|
356
|
+
// 默认渲染使用格式化值
|
|
357
|
+
renderValue: function renderValue() {
|
|
358
|
+
return enhancedContext.getFormattedValue();
|
|
359
|
+
}
|
|
360
|
+
});
|
|
361
|
+
return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({
|
|
362
|
+
className: "".concat(columnEditing ? 'tbody-tr-td-editting' : '', " ").concat(id === leftLastColumnId ? 'tbody-tr-td-cell-fix-left-last' : '', " ").concat(id === rightFirstColumnId ? 'tbody-tr-td-cell-fix-right-first' : '', " ").concat(columnClassName ? columnClassName.join(' ') : '', " ").concat((cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(cell).map(function (item) {
|
|
363
|
+
return "".concat(item, "-").concat(theme);
|
|
364
|
+
})) || '', " tbody-tr-td"),
|
|
365
|
+
style: _objectSpread({
|
|
366
|
+
height: rowHeight - 1
|
|
367
|
+
}, getPinningStyle(cell, table, false)),
|
|
368
|
+
onContextMenu: function onContextMenu(e) {
|
|
369
|
+
return handleCellRightClick(e, cell);
|
|
370
|
+
}
|
|
371
|
+
}, getCellProps === null || getCellProps === void 0 ? void 0 : getCellProps(cell.getContext())), {}, {
|
|
372
|
+
children: EditableCell(_objectSpread(_objectSpread({}, cell.column.columnDef), {}, {
|
|
373
|
+
tableTooltip: tableTooltip,
|
|
374
|
+
editing: columnEditing,
|
|
375
|
+
dataIndex: accessorKey,
|
|
376
|
+
title: header,
|
|
377
|
+
onEditValueChange: onEditValueChange,
|
|
378
|
+
children: flexRender(cell.column.columnDef.cell, enhancedContext)
|
|
379
|
+
}))
|
|
380
|
+
}), cell.id);
|
|
381
|
+
})
|
|
382
|
+
});
|
|
383
|
+
};
|
|
384
|
+
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
385
|
+
children: [!!getRowHoverTipConfig ? /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, tooltipConfig), {}, {
|
|
386
|
+
onOpenChange: onOpenChange,
|
|
387
|
+
destroyTooltipOnHide: {
|
|
388
|
+
keepParent: false
|
|
389
|
+
},
|
|
390
|
+
overlayClassName: "table-max-row-tooltip-wrapper",
|
|
391
|
+
getPopupContainer: function getPopupContainer() {
|
|
392
|
+
return tableBodyRef.current || document.body;
|
|
393
|
+
},
|
|
394
|
+
children: rowCom()
|
|
395
|
+
})) : rowCom(), row.getIsExpanded() && /*#__PURE__*/_jsx("tr", {
|
|
396
|
+
className: "tbody-tr-subrow",
|
|
397
|
+
children: /*#__PURE__*/_jsx("td", {
|
|
398
|
+
colSpan: (_row2 = row["getVisibleCells"]) === null || _row2 === void 0 ? void 0 : _row2.call(row).length,
|
|
399
|
+
style: {
|
|
400
|
+
padding: 0
|
|
401
|
+
},
|
|
402
|
+
children: !!(tableBodyRef !== null && tableBodyRef !== void 0 && (_tableBodyRef$current = tableBodyRef.current) !== null && _tableBodyRef$current !== void 0 && _tableBodyRef$current.clientWidth) && /*#__PURE__*/_jsx("div", {
|
|
403
|
+
id: "".concat(tableId, "_expand-table"),
|
|
404
|
+
className: "subRowWrapper",
|
|
405
|
+
style: {
|
|
406
|
+
width: "".concat(tableBodyRef === null || tableBodyRef === void 0 || (_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 ? void 0 : _tableBodyRef$current2.clientWidth, "px")
|
|
407
|
+
},
|
|
408
|
+
children: renderSubComponent && renderSubComponent({
|
|
409
|
+
row: row
|
|
410
|
+
})
|
|
411
|
+
})
|
|
412
|
+
})
|
|
413
|
+
})]
|
|
414
|
+
});
|
|
415
|
+
};
|
|
416
|
+
// export default React.memo(Row);
|
|
417
|
+
export default Row;
|
|
418
|
+
function formatDate(dateValue) {
|
|
419
|
+
var pattern = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "YYYY-MM-DD HH:mm";
|
|
420
|
+
if (!dateValue) return '';
|
|
421
|
+
var date = dayjs(dateValue);
|
|
422
|
+
if (!date.isValid()) return 'Invalid Date';
|
|
423
|
+
// console.log(date.format(pattern), pattern, 'pattern')
|
|
424
|
+
return date.format(pattern);
|
|
425
|
+
}
|
|
426
|
+
function isDateColumn(column) {
|
|
427
|
+
var _column$meta;
|
|
428
|
+
return (column === null || column === void 0 || (_column$meta = column.meta) === null || _column$meta === void 0 ? void 0 : _column$meta.isDate) || false;
|
|
429
|
+
}
|
|
@@ -59,6 +59,7 @@ type IRowProps = {
|
|
|
59
59
|
hoverRowIndex: number;
|
|
60
60
|
dropSide: DropSide;
|
|
61
61
|
onEditValueChange?: (field: string, value: any, extra?: any) => void;
|
|
62
|
+
setRowSelection?: Function;
|
|
62
63
|
};
|
|
63
|
-
declare const Row: ({ 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, rowHeight, disableDragRowIds, selectRowWhenClick, handleEditRowWhenDClick, canEditRowWhenDClick, theme, dragBeforeStart, shadowColumnInfo, onCellContextMenu, getRowHoverTipConfig, tableTooltip, changeHoverRow, clearHoverRowIndex, hoverRowIndex, dropSide, onEditValueChange, }: IRowProps) => import("react/jsx-runtime").JSX.Element;
|
|
64
|
+
declare const Row: ({ 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, rowHeight, disableDragRowIds, selectRowWhenClick, handleEditRowWhenDClick, canEditRowWhenDClick, theme, dragBeforeStart, shadowColumnInfo, onCellContextMenu, getRowHoverTipConfig, tableTooltip, changeHoverRow, clearHoverRowIndex, hoverRowIndex, dropSide, onEditValueChange, setRowSelection }: IRowProps) => import("react/jsx-runtime").JSX.Element;
|
|
64
65
|
export default Row;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
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); }
|
|
2
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; }
|
|
3
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; }
|
|
4
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; }
|
|
@@ -14,7 +18,7 @@ import { DropSide } from "../type";
|
|
|
14
18
|
import { flexRender } from '@tanstack/react-table';
|
|
15
19
|
import { useUpdateEffect } from 'ahooks';
|
|
16
20
|
import { Tooltip } from 'antd';
|
|
17
|
-
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
21
|
+
import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
|
|
18
22
|
import { useDrag, useDrop } from 'react-dnd';
|
|
19
23
|
import { getEmptyImage } from 'react-dnd-html5-backend';
|
|
20
24
|
import { getPinningStyle } from "../TableHeader/utils";
|
|
@@ -27,7 +31,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
|
27
31
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
28
32
|
var initselectedIndex;
|
|
29
33
|
var Row = function Row(_ref) {
|
|
30
|
-
var
|
|
34
|
+
var _tableBodyRef$current, _tableBodyRef$current2;
|
|
31
35
|
var tableBodyRef = _ref.tableBodyRef,
|
|
32
36
|
table = _ref.table,
|
|
33
37
|
tableId = _ref.tableId,
|
|
@@ -70,20 +74,45 @@ var Row = function Row(_ref) {
|
|
|
70
74
|
clearHoverRowIndex = _ref.clearHoverRowIndex,
|
|
71
75
|
hoverRowIndex = _ref.hoverRowIndex,
|
|
72
76
|
dropSide = _ref.dropSide,
|
|
73
|
-
onEditValueChange = _ref.onEditValueChange
|
|
77
|
+
onEditValueChange = _ref.onEditValueChange,
|
|
78
|
+
setRowSelection = _ref.setRowSelection;
|
|
79
|
+
var _useConfig = useConfig(),
|
|
80
|
+
dateFormat = _useConfig.dateFormat;
|
|
81
|
+
var timerRef = useRef();
|
|
82
|
+
var clickCountRef = useRef(0);
|
|
83
|
+
|
|
84
|
+
// 优化:使用useMemo缓存计算结果
|
|
74
85
|
var dropPreviewLineClassName = useMemo(function () {
|
|
75
86
|
if (hoverRowIndex === row.index) {
|
|
76
87
|
return dropSide === DropSide.Top ? 'showTopBorder' : 'showBottomBorder';
|
|
77
|
-
} else {
|
|
78
|
-
return '';
|
|
79
88
|
}
|
|
80
|
-
|
|
81
|
-
|
|
89
|
+
return '';
|
|
90
|
+
}, [hoverRowIndex, dropSide, row.index]);
|
|
91
|
+
var highLightClassName = useMemo(function () {
|
|
92
|
+
if (!canSelection && String(row.id) === String(rowSelectedId)) {
|
|
93
|
+
return 'tbody-tr-highlight';
|
|
94
|
+
} else if (canSelection) {
|
|
95
|
+
if (String(row.id) === String(rowHighLightId)) {
|
|
96
|
+
return 'tbody-tr-highlight';
|
|
97
|
+
} else if (row.getIsSelected()) {
|
|
98
|
+
return 'tbody-tr-selected';
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
return '';
|
|
102
|
+
}, [row.id, row.getIsSelected(), rowSelectedId, rowHighLightId, canSelection]);
|
|
103
|
+
var rowClassNames = useMemo(function () {
|
|
104
|
+
var _rowClassName;
|
|
105
|
+
var baseClass = "tbody-tr ".concat(highLightClassName, " ").concat(dropPreviewLineClassName);
|
|
106
|
+
var customClasses = (rowClassName === null || rowClassName === void 0 || (_rowClassName = rowClassName(row)) === null || _rowClassName === void 0 ? void 0 : _rowClassName.map(function (item) {
|
|
107
|
+
return "".concat(item, "-").concat(theme);
|
|
108
|
+
}).join(' ')) || '';
|
|
109
|
+
return "".concat(baseClass, " ").concat(customClasses).trim();
|
|
110
|
+
}, [highLightClassName, dropPreviewLineClassName, rowClassName, row, theme]);
|
|
111
|
+
|
|
112
|
+
// 优化:使用useCallback避免函数重复创建
|
|
82
113
|
var _useDrop = useDrop({
|
|
83
114
|
accept: 'TABLE_ROW',
|
|
84
|
-
drop: function drop(formDatas
|
|
85
|
-
// monitor
|
|
86
|
-
) {
|
|
115
|
+
drop: function drop(formDatas) {
|
|
87
116
|
clearHoverRowIndex();
|
|
88
117
|
return reorderRow === null || reorderRow === void 0 ? void 0 : reorderRow(formDatas, {
|
|
89
118
|
hoverRow: row,
|
|
@@ -101,9 +130,6 @@ var Row = function Row(_ref) {
|
|
|
101
130
|
}),
|
|
102
131
|
_useDrop2 = _slicedToArray(_useDrop, 2),
|
|
103
132
|
dropRef = _useDrop2[1];
|
|
104
|
-
// const [centerSubRowHeight, setCenterSubRowHeight] = useState();
|
|
105
|
-
// const centerSubRowRef: any = useRef(null);
|
|
106
|
-
|
|
107
133
|
var _useDrag = useDrag({
|
|
108
134
|
collect: function collect(monitor) {
|
|
109
135
|
return {
|
|
@@ -132,141 +158,144 @@ var Row = function Row(_ref) {
|
|
|
132
158
|
dragRef = _useDrag2[1],
|
|
133
159
|
preview = _useDrag2[2];
|
|
134
160
|
useEffect(function () {
|
|
135
|
-
// 隐藏拖拽dom
|
|
136
161
|
if (canRowDrag) {
|
|
137
162
|
preview(getEmptyImage(), {
|
|
138
163
|
captureDraggingState: true
|
|
139
164
|
});
|
|
140
165
|
}
|
|
141
166
|
}, [canRowDrag]);
|
|
142
|
-
|
|
143
|
-
// useEffect(() => {
|
|
144
|
-
// setCenterSubRowHeight(centerSubRowRef?.current?.clientHeight);
|
|
145
|
-
// console.log('centerSubRowRef?.current?.clientHeight=====', position, row, centerSubRowRef?.current?.clientHeight)
|
|
146
|
-
// }, [centerSubRowRef?.current?.clientHeight, position]);
|
|
147
|
-
|
|
148
167
|
useEffect(function () {
|
|
149
168
|
if (setSelectedRowDragging && row.getIsSelected()) {
|
|
150
169
|
setSelectedRowDragging(isDragging);
|
|
151
170
|
}
|
|
152
171
|
}, [isDragging, row.getIsSelected()]);
|
|
153
172
|
useUpdateEffect(function () {
|
|
154
|
-
// 鼠标移出,清除border
|
|
155
173
|
if (!isDragging) {
|
|
156
174
|
clearHoverRowIndex();
|
|
157
175
|
}
|
|
158
176
|
}, [isDragging]);
|
|
159
|
-
|
|
160
|
-
|
|
177
|
+
|
|
178
|
+
// 优化:分离单击和双击逻辑,避免定时器延迟
|
|
179
|
+
var handleRowClick = useCallback(function (evt) {
|
|
180
|
+
clickCountRef.current++;
|
|
181
|
+
if (clickCountRef.current === 1) {
|
|
182
|
+
timerRef.current = setTimeout(function () {
|
|
183
|
+
// 单击逻辑
|
|
184
|
+
if (clickCountRef.current === 1) {
|
|
185
|
+
handleSingleClick(evt);
|
|
186
|
+
}
|
|
187
|
+
clickCountRef.current = 0;
|
|
188
|
+
if (timerRef.current) {
|
|
189
|
+
clearTimeout(timerRef.current);
|
|
190
|
+
timerRef.current = undefined;
|
|
191
|
+
}
|
|
192
|
+
}, 200); // 减少到200ms,提高响应速度
|
|
193
|
+
} else if (clickCountRef.current === 2) {
|
|
194
|
+
// 双击逻辑
|
|
195
|
+
handleDoubleClick(evt);
|
|
196
|
+
clickCountRef.current = 0;
|
|
197
|
+
if (timerRef.current) {
|
|
198
|
+
clearTimeout(timerRef.current);
|
|
199
|
+
timerRef.current = undefined;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}, [row, table, canSelection, selectionWithoutChecked, setRowHighLightId, setRowSelectedId, selectedRowChange, onSelectChange, selectRowWhenClick, editting, onRowMouseClick, onRowMouseDoubleClick, canEditRowWhenDClick, handleEditRowWhenDClick]);
|
|
203
|
+
var handleSingleClick = useCallback(function (evt) {
|
|
161
204
|
onRowMouseClick === null || onRowMouseClick === void 0 || onRowMouseClick(row);
|
|
162
205
|
if (!row.getCanSelect()) {
|
|
163
206
|
return;
|
|
164
207
|
}
|
|
165
208
|
if (canSelection && !selectRowWhenClick) {
|
|
166
|
-
setRowHighLightId(row.id);
|
|
209
|
+
setRowHighLightId === null || setRowHighLightId === void 0 || setRowHighLightId(row.id);
|
|
167
210
|
return;
|
|
168
211
|
}
|
|
169
|
-
// 多选
|
|
170
212
|
if (canSelection) {
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
var selectionConfig = _objectSpread({}, table.getState().rowSelection);
|
|
175
|
-
if (!row.getIsSelected()) {
|
|
176
|
-
selectionConfig[row.id] = true;
|
|
177
|
-
} else {
|
|
178
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
179
|
-
selectionConfig[row.id] && Object.keys(selectionConfig).length > 1 && delete selectionConfig[row.id];
|
|
180
|
-
}
|
|
181
|
-
table === null || table === void 0 || table.setRowSelection(_objectSpread({}, selectionConfig));
|
|
182
|
-
} else if (evt.shiftKey) {
|
|
183
|
-
var _table$getRowModel$ro;
|
|
184
|
-
var _selectionConfig = {};
|
|
185
|
-
var min = Math.min(initselectedIndex || 0, row.index);
|
|
186
|
-
var max = Math.max(initselectedIndex || 0, row.index);
|
|
187
|
-
// console.log(selectionConfig, table.getRowModel(), 'selectionConfig');
|
|
188
|
-
var newSelectedRowIds = ((_table$getRowModel$ro = table.getRowModel().rows.filter(function (row) {
|
|
189
|
-
return row.index >= min && row.index <= max;
|
|
190
|
-
})) === null || _table$getRowModel$ro === void 0 ? void 0 : _table$getRowModel$ro.map(function (row) {
|
|
191
|
-
return row.id;
|
|
192
|
-
})) || [];
|
|
193
|
-
for (var i = 0; i <= newSelectedRowIds.length; i++) {
|
|
194
|
-
_selectionConfig[newSelectedRowIds[i]] = true;
|
|
195
|
-
}
|
|
196
|
-
table === null || table === void 0 || table.setRowSelection(_selectionConfig);
|
|
197
|
-
} else {
|
|
198
|
-
initselectedIndex = row.index;
|
|
199
|
-
table === null || table === void 0 || table.setRowSelection(_defineProperty({}, row === null || row === void 0 ? void 0 : row.id, true));
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
// 展示多选框
|
|
203
|
-
else {
|
|
204
|
-
if (evt.shiftKey) {
|
|
205
|
-
var _table$getRowModel$ro2;
|
|
206
|
-
// console.log('table.getState().rowSelection :>> ', table.getState().rowSelection);
|
|
207
|
-
var _selectionConfig2 = _objectSpread({}, table.getState().rowSelection);
|
|
208
|
-
var _min = Math.min(initselectedIndex || 0, row.index);
|
|
209
|
-
var _max = Math.max(initselectedIndex || 0, row.index);
|
|
210
|
-
// console.log(selectionConfig, table.getRowModel(), 'selectionConfig');
|
|
211
|
-
var _newSelectedRowIds = ((_table$getRowModel$ro2 = table.getRowModel().rows.filter(function (row) {
|
|
212
|
-
return row.index >= _min && row.index <= _max;
|
|
213
|
-
})) === null || _table$getRowModel$ro2 === void 0 ? void 0 : _table$getRowModel$ro2.map(function (row) {
|
|
214
|
-
return row.id;
|
|
215
|
-
})) || [];
|
|
216
|
-
for (var _i = 0; _i <= _newSelectedRowIds.length; _i++) {
|
|
217
|
-
_selectionConfig2[_newSelectedRowIds[_i]] = true;
|
|
218
|
-
}
|
|
219
|
-
table === null || table === void 0 || table.setRowSelection(_selectionConfig2);
|
|
220
|
-
} else {
|
|
221
|
-
if (!row.getIsSelected()) {
|
|
222
|
-
initselectedIndex = row.index;
|
|
223
|
-
}
|
|
224
|
-
var _selectionConfig3 = _objectSpread(_objectSpread({}, table.getState().rowSelection), {}, _defineProperty({}, row.id, !row.getIsSelected()));
|
|
225
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-expressions
|
|
226
|
-
row.getCanSelect() && (table === null || table === void 0 ? void 0 : table.setRowSelection(_selectionConfig3));
|
|
227
|
-
}
|
|
228
|
-
}
|
|
213
|
+
handleSelectionClick(evt);
|
|
214
|
+
} else {
|
|
215
|
+
handleSingleSelection(evt);
|
|
229
216
|
}
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
217
|
+
}, [row, canSelection, selectRowWhenClick, setRowHighLightId]);
|
|
218
|
+
var handleDoubleClick = useCallback(function (evt) {
|
|
219
|
+
onRowMouseDoubleClick === null || onRowMouseDoubleClick === void 0 || onRowMouseDoubleClick(row);
|
|
220
|
+
if (canEditRowWhenDClick) {
|
|
221
|
+
handleEditRowWhenDClick(row);
|
|
235
222
|
}
|
|
236
|
-
};
|
|
237
|
-
var
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
timerRef.current = setTimeout(function () {
|
|
244
|
-
rowClickHandler(e);
|
|
245
|
-
clearTimeout(timerRef.current);
|
|
246
|
-
timerRef.current = undefined;
|
|
247
|
-
}, 300);
|
|
223
|
+
}, [row, onRowMouseDoubleClick, canEditRowWhenDClick, handleEditRowWhenDClick]);
|
|
224
|
+
var handleSelectionClick = useCallback(function (evt) {
|
|
225
|
+
if (selectionWithoutChecked) {
|
|
226
|
+
if (evt.ctrlKey) {
|
|
227
|
+
handleCtrlSelection();
|
|
228
|
+
} else if (evt.shiftKey) {
|
|
229
|
+
handleShiftSelection();
|
|
248
230
|
} else {
|
|
249
|
-
|
|
250
|
-
timerRef.current = undefined;
|
|
251
|
-
onRowMouseDoubleClick === null || onRowMouseDoubleClick === void 0 || onRowMouseDoubleClick(row);
|
|
252
|
-
if (canEditRowWhenDClick) {
|
|
253
|
-
handleEditRowWhenDClick(row);
|
|
254
|
-
}
|
|
231
|
+
handleSingleRowSelection();
|
|
255
232
|
}
|
|
256
233
|
} else {
|
|
257
|
-
|
|
258
|
-
|
|
234
|
+
if (evt.shiftKey) {
|
|
235
|
+
handleShiftSelectionWithCheckbox();
|
|
236
|
+
} else {
|
|
237
|
+
handleToggleSelection();
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
}, [row, table, selectionWithoutChecked]);
|
|
241
|
+
var handleCtrlSelection = useCallback(function () {
|
|
242
|
+
var selectionConfig = _objectSpread({}, table.getState().rowSelection);
|
|
243
|
+
if (!row.getIsSelected()) {
|
|
244
|
+
selectionConfig[row.id] = true;
|
|
245
|
+
} else if (Object.keys(selectionConfig).length > 1) {
|
|
246
|
+
delete selectionConfig[row.id];
|
|
247
|
+
}
|
|
248
|
+
setRowSelection(_objectSpread({}, selectionConfig));
|
|
249
|
+
}, [row, table]);
|
|
250
|
+
var handleShiftSelection = useCallback(function () {
|
|
251
|
+
var min = Math.min(initselectedIndex || 0, row.index);
|
|
252
|
+
var max = Math.max(initselectedIndex || 0, row.index);
|
|
253
|
+
var selectionConfig = {};
|
|
254
|
+
table.getRowModel().rows.filter(function (row) {
|
|
255
|
+
return row.index >= min && row.index <= max;
|
|
256
|
+
}).forEach(function (row) {
|
|
257
|
+
selectionConfig[row.id] = true;
|
|
258
|
+
});
|
|
259
|
+
setRowSelection(selectionConfig);
|
|
260
|
+
}, [row, table]);
|
|
261
|
+
var handleSingleRowSelection = useCallback(function () {
|
|
262
|
+
initselectedIndex = row.index;
|
|
263
|
+
setRowSelection(_defineProperty({}, row === null || row === void 0 ? void 0 : row.id, true));
|
|
264
|
+
}, [row, table]);
|
|
265
|
+
var handleShiftSelectionWithCheckbox = useCallback(function () {
|
|
266
|
+
var selectionConfig = _objectSpread({}, table.getState().rowSelection);
|
|
267
|
+
var min = Math.min(initselectedIndex || 0, row.index);
|
|
268
|
+
var max = Math.max(initselectedIndex || 0, row.index);
|
|
269
|
+
table.getRowModel().rows.filter(function (row) {
|
|
270
|
+
return row.index >= min && row.index <= max;
|
|
271
|
+
}).forEach(function (row) {
|
|
272
|
+
selectionConfig[row.id] = true;
|
|
273
|
+
});
|
|
274
|
+
setRowSelection(selectionConfig);
|
|
275
|
+
}, [row, table]);
|
|
276
|
+
var handleToggleSelection = useCallback(function () {
|
|
277
|
+
if (!row.getIsSelected()) {
|
|
278
|
+
initselectedIndex = row.index;
|
|
279
|
+
}
|
|
280
|
+
var selectionConfig = _objectSpread(_objectSpread({}, table.getState().rowSelection), {}, _defineProperty({}, row.id, !row.getIsSelected()));
|
|
281
|
+
if (row.getCanSelect()) {
|
|
282
|
+
setRowSelection(selectionConfig);
|
|
259
283
|
}
|
|
260
|
-
};
|
|
261
|
-
var
|
|
284
|
+
}, [row, table]);
|
|
285
|
+
var handleSingleSelection = useCallback(function (evt) {
|
|
286
|
+
setRowSelectedId === null || setRowSelectedId === void 0 || setRowSelectedId(row === null || row === void 0 ? void 0 : row.id);
|
|
287
|
+
selectedRowChange === null || selectedRowChange === void 0 || selectedRowChange(row);
|
|
288
|
+
onSelectChange === null || onSelectChange === void 0 || onSelectChange(row, row === null || row === void 0 ? void 0 : row.original, true, evt);
|
|
289
|
+
}, [row, setRowSelectedId, selectedRowChange, onSelectChange]);
|
|
290
|
+
var rowMouseEnter = useCallback(function () {
|
|
262
291
|
onRowMouseEnter === null || onRowMouseEnter === void 0 || onRowMouseEnter(row);
|
|
263
|
-
};
|
|
264
|
-
var rowMouseLeave = function
|
|
292
|
+
}, [row, onRowMouseEnter]);
|
|
293
|
+
var rowMouseLeave = useCallback(function () {
|
|
265
294
|
onRowMouseLeave === null || onRowMouseLeave === void 0 || onRowMouseLeave(row);
|
|
266
|
-
};
|
|
267
|
-
var handleCellRightClick = function
|
|
295
|
+
}, [row, onRowMouseLeave]);
|
|
296
|
+
var handleCellRightClick = useCallback(function (e, cell) {
|
|
268
297
|
onCellContextMenu(e, cell);
|
|
269
|
-
};
|
|
298
|
+
}, [onCellContextMenu]);
|
|
270
299
|
var leftLastColumnId = shadowColumnInfo.leftLastColumnId,
|
|
271
300
|
rightFirstColumnId = shadowColumnInfo.rightFirstColumnId;
|
|
272
301
|
var _useState = useState({
|
|
@@ -276,36 +305,74 @@ var Row = function Row(_ref) {
|
|
|
276
305
|
_useState2 = _slicedToArray(_useState, 2),
|
|
277
306
|
tooltipConfig = _useState2[0],
|
|
278
307
|
setTooltipConfig = _useState2[1];
|
|
279
|
-
var onOpenChange = function
|
|
308
|
+
var onOpenChange = useCallback(function (open) {
|
|
280
309
|
if (open) {
|
|
281
|
-
setTooltipConfig(getRowHoverTipConfig(row.original))
|
|
310
|
+
setTooltipConfig((getRowHoverTipConfig === null || getRowHoverTipConfig === void 0 ? void 0 : getRowHoverTipConfig(row.original)) || {
|
|
311
|
+
title: ' ',
|
|
312
|
+
color: ''
|
|
313
|
+
});
|
|
282
314
|
}
|
|
283
|
-
};
|
|
315
|
+
}, [getRowHoverTipConfig, row.original]);
|
|
284
316
|
|
|
285
|
-
//
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
} else if (canSelection) {
|
|
291
|
-
// 多选
|
|
292
|
-
if (String(row.id) === String(rowHighLightId)) {
|
|
293
|
-
// 高亮状态
|
|
294
|
-
return 'tbody-tr-highlight';
|
|
295
|
-
} else if (row.getIsSelected()) {
|
|
296
|
-
// checked选中用选中色
|
|
297
|
-
return 'tbody-tr-selected';
|
|
317
|
+
// 清理定时器
|
|
318
|
+
useEffect(function () {
|
|
319
|
+
return function () {
|
|
320
|
+
if (timerRef.current) {
|
|
321
|
+
clearTimeout(timerRef.current);
|
|
298
322
|
}
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
}, [row.id, row.getIsSelected(), rowSelectedId, selectRowWhenClick, rowHighLightId, canSelection]);
|
|
323
|
+
};
|
|
324
|
+
}, []);
|
|
302
325
|
|
|
303
|
-
//
|
|
326
|
+
// 优化:将行渲染逻辑提取为useMemo
|
|
327
|
+
var rowCom = useMemo(function () {
|
|
328
|
+
var renderCell = function renderCell(cell) {
|
|
329
|
+
var _cellClassName;
|
|
330
|
+
var _cell$column$columnDe = cell.column.columnDef,
|
|
331
|
+
columnEditable = _cell$column$columnDe.editable,
|
|
332
|
+
accessorKey = _cell$column$columnDe.accessorKey,
|
|
333
|
+
header = _cell$column$columnDe.header,
|
|
334
|
+
columnClassName = _cell$column$columnDe.columnClassName,
|
|
335
|
+
id = _cell$column$columnDe.id,
|
|
336
|
+
filterType = _cell$column$columnDe.filterType;
|
|
337
|
+
var columnEditing = rowEditing && columnEditable;
|
|
338
|
+
var rawValue = cell.getValue();
|
|
304
339
|
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
340
|
+
// 创建增强上下文
|
|
341
|
+
var originalContext = cell.getContext();
|
|
342
|
+
var enhancedContext = _objectSpread(_objectSpread({}, originalContext), {}, {
|
|
343
|
+
getValue: function getValue() {
|
|
344
|
+
return rawValue;
|
|
345
|
+
},
|
|
346
|
+
getFormattedValue: function getFormattedValue() {
|
|
347
|
+
var _cell$column$columnDe2;
|
|
348
|
+
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;
|
|
349
|
+
},
|
|
350
|
+
renderValue: function renderValue() {
|
|
351
|
+
return enhancedContext.getFormattedValue();
|
|
352
|
+
}
|
|
353
|
+
});
|
|
354
|
+
var cellClassNames = [columnEditing ? 'tbody-tr-td-editting' : '', id === leftLastColumnId ? 'tbody-tr-td-cell-fix-left-last' : '', id === rightFirstColumnId ? 'tbody-tr-td-cell-fix-right-first' : '', columnClassName ? columnClassName.join(' ') : ''].concat(_toConsumableArray((cellClassName === null || cellClassName === void 0 || (_cellClassName = cellClassName(cell)) === null || _cellClassName === void 0 ? void 0 : _cellClassName.map(function (item) {
|
|
355
|
+
return "".concat(item, "-").concat(theme);
|
|
356
|
+
})) || []), ['tbody-tr-td']).filter(Boolean).join(' ');
|
|
357
|
+
return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({
|
|
358
|
+
className: cellClassNames,
|
|
359
|
+
style: _objectSpread({
|
|
360
|
+
height: rowHeight - 1
|
|
361
|
+
}, getPinningStyle(cell, table, false)),
|
|
362
|
+
onContextMenu: function onContextMenu(e) {
|
|
363
|
+
return handleCellRightClick(e, cell);
|
|
364
|
+
}
|
|
365
|
+
}, getCellProps === null || getCellProps === void 0 ? void 0 : getCellProps(cell.getContext())), {}, {
|
|
366
|
+
children: EditableCell(_objectSpread(_objectSpread({}, cell.column.columnDef), {}, {
|
|
367
|
+
tableTooltip: tableTooltip,
|
|
368
|
+
editing: columnEditing,
|
|
369
|
+
dataIndex: accessorKey,
|
|
370
|
+
title: header,
|
|
371
|
+
onEditValueChange: onEditValueChange,
|
|
372
|
+
children: flexRender(cell.column.columnDef.cell, enhancedContext)
|
|
373
|
+
}))
|
|
374
|
+
}), cell.id);
|
|
375
|
+
};
|
|
309
376
|
return /*#__PURE__*/_jsx("tr", {
|
|
310
377
|
id: rowEditing ? "".concat(tableId, "-tbody-tr-editing") : undefined,
|
|
311
378
|
ref: function ref(node) {
|
|
@@ -316,71 +383,13 @@ var Row = function Row(_ref) {
|
|
|
316
383
|
opacity: isDragging || selectedRowDragging && row.getIsSelected() ? 0.5 : 1,
|
|
317
384
|
cursor: canRowDrag && !editting && !(disableDragRowIds !== null && disableDragRowIds !== void 0 && disableDragRowIds.includes(row.id)) ? 'move' : 'auto'
|
|
318
385
|
}, rowStyle),
|
|
319
|
-
onClick:
|
|
386
|
+
onClick: handleRowClick,
|
|
320
387
|
onMouseEnter: rowMouseEnter,
|
|
321
388
|
onMouseLeave: rowMouseLeave,
|
|
322
|
-
className:
|
|
323
|
-
|
|
324
|
-
}).join(' ')) || ''),
|
|
325
|
-
children: (_row = row["getVisibleCells"]) === null || _row === void 0 ? void 0 : _row.call(row).map(function (cell) {
|
|
326
|
-
var _cell$column$columnDe = cell.column.columnDef,
|
|
327
|
-
columnEditable = _cell$column$columnDe.editable,
|
|
328
|
-
accessorKey = _cell$column$columnDe.accessorKey,
|
|
329
|
-
header = _cell$column$columnDe.header,
|
|
330
|
-
columnClassName = _cell$column$columnDe.columnClassName,
|
|
331
|
-
id = _cell$column$columnDe.id,
|
|
332
|
-
filterType = _cell$column$columnDe.filterType;
|
|
333
|
-
// 当前列是否编辑中
|
|
334
|
-
var columnEditing = rowEditing && columnEditable;
|
|
335
|
-
// const cellValue = cell.getValue();
|
|
336
|
-
|
|
337
|
-
// const cellRenderer = cell.column.columnDef.cell;
|
|
338
|
-
// const formattedValue = isDateColumn(cell.column.columnDef)
|
|
339
|
-
// ? formatDate(cellValue, cell.column.columnDef?.meta?.dateFormat)
|
|
340
|
-
// : cellValue;
|
|
341
|
-
|
|
342
|
-
var originalContext = cell.getContext();
|
|
343
|
-
var rawValue = originalContext.getValue();
|
|
344
|
-
|
|
345
|
-
// 创建增强上下文
|
|
346
|
-
var enhancedContext = _objectSpread(_objectSpread({}, originalContext), {}, {
|
|
347
|
-
// 原始值获取
|
|
348
|
-
getValue: function getValue() {
|
|
349
|
-
return rawValue;
|
|
350
|
-
},
|
|
351
|
-
// 格式化值获取
|
|
352
|
-
getFormattedValue: function getFormattedValue() {
|
|
353
|
-
var _cell$column$columnDe2;
|
|
354
|
-
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;
|
|
355
|
-
},
|
|
356
|
-
// 默认渲染使用格式化值
|
|
357
|
-
renderValue: function renderValue() {
|
|
358
|
-
return enhancedContext.getFormattedValue();
|
|
359
|
-
}
|
|
360
|
-
});
|
|
361
|
-
return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({
|
|
362
|
-
className: "".concat(columnEditing ? 'tbody-tr-td-editting' : '', " ").concat(id === leftLastColumnId ? 'tbody-tr-td-cell-fix-left-last' : '', " ").concat(id === rightFirstColumnId ? 'tbody-tr-td-cell-fix-right-first' : '', " ").concat(columnClassName ? columnClassName.join(' ') : '', " ").concat((cellClassName === null || cellClassName === void 0 ? void 0 : cellClassName(cell).map(function (item) {
|
|
363
|
-
return "".concat(item, "-").concat(theme);
|
|
364
|
-
})) || '', " tbody-tr-td"),
|
|
365
|
-
style: _objectSpread({
|
|
366
|
-
height: rowHeight - 1
|
|
367
|
-
}, getPinningStyle(cell, table, false)),
|
|
368
|
-
onContextMenu: function onContextMenu(e) {
|
|
369
|
-
return handleCellRightClick(e, cell);
|
|
370
|
-
}
|
|
371
|
-
}, getCellProps === null || getCellProps === void 0 ? void 0 : getCellProps(cell.getContext())), {}, {
|
|
372
|
-
children: EditableCell(_objectSpread(_objectSpread({}, cell.column.columnDef), {}, {
|
|
373
|
-
tableTooltip: tableTooltip,
|
|
374
|
-
editing: columnEditing,
|
|
375
|
-
dataIndex: accessorKey,
|
|
376
|
-
title: header,
|
|
377
|
-
onEditValueChange: onEditValueChange,
|
|
378
|
-
children: flexRender(cell.column.columnDef.cell, enhancedContext)
|
|
379
|
-
}))
|
|
380
|
-
}), cell.id);
|
|
381
|
-
})
|
|
389
|
+
className: rowClassNames,
|
|
390
|
+
children: row.getVisibleCells().map(renderCell)
|
|
382
391
|
});
|
|
383
|
-
};
|
|
392
|
+
}, [row, rowEditing, tableId, editting, canRowDrag, disableDragRowIds, isDragging, selectedRowDragging, rowStyle, handleRowClick, rowMouseEnter, rowMouseLeave, rowClassNames, leftLastColumnId, rightFirstColumnId, cellClassName, theme, rowHeight, table, handleCellRightClick, getCellProps, tableTooltip, onEditValueChange, dateFormat]);
|
|
384
393
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
385
394
|
children: [!!getRowHoverTipConfig ? /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({}, tooltipConfig), {}, {
|
|
386
395
|
onOpenChange: onOpenChange,
|
|
@@ -391,11 +400,11 @@ var Row = function Row(_ref) {
|
|
|
391
400
|
getPopupContainer: function getPopupContainer() {
|
|
392
401
|
return tableBodyRef.current || document.body;
|
|
393
402
|
},
|
|
394
|
-
children: rowCom
|
|
395
|
-
})) : rowCom
|
|
403
|
+
children: rowCom
|
|
404
|
+
})) : rowCom, row.getIsExpanded() && /*#__PURE__*/_jsx("tr", {
|
|
396
405
|
className: "tbody-tr-subrow",
|
|
397
406
|
children: /*#__PURE__*/_jsx("td", {
|
|
398
|
-
colSpan:
|
|
407
|
+
colSpan: row.getVisibleCells().length,
|
|
399
408
|
style: {
|
|
400
409
|
padding: 0
|
|
401
410
|
},
|
|
@@ -413,17 +422,15 @@ var Row = function Row(_ref) {
|
|
|
413
422
|
})]
|
|
414
423
|
});
|
|
415
424
|
};
|
|
416
|
-
// export default React.memo(Row);
|
|
417
|
-
export default Row;
|
|
418
425
|
function formatDate(dateValue) {
|
|
419
426
|
var pattern = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "YYYY-MM-DD HH:mm";
|
|
420
427
|
if (!dateValue) return '';
|
|
421
428
|
var date = dayjs(dateValue);
|
|
422
|
-
|
|
423
|
-
// console.log(date.format(pattern), pattern, 'pattern')
|
|
424
|
-
return date.format(pattern);
|
|
429
|
+
return date.isValid() ? date.format(pattern) : 'Invalid Date';
|
|
425
430
|
}
|
|
426
431
|
function isDateColumn(column) {
|
|
427
432
|
var _column$meta;
|
|
428
433
|
return (column === null || column === void 0 || (_column$meta = column.meta) === null || _column$meta === void 0 ? void 0 : _column$meta.isDate) || false;
|
|
429
|
-
}
|
|
434
|
+
}
|
|
435
|
+
export default Row;
|
|
436
|
+
// export default React.memo(Row);
|
|
@@ -73,6 +73,8 @@ type TableBodyPropsType = {
|
|
|
73
73
|
onEditValueChange?: (field: string, value: any, extra?: any) => void;
|
|
74
74
|
hasTotalRow?: boolean;
|
|
75
75
|
totalDatas?: any[];
|
|
76
|
+
setRowSelection: Function;
|
|
76
77
|
};
|
|
77
|
-
declare const TableBody: ({ tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, tableContainerWidth, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, datas, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, dragBeforeStart, shadowColumnInfo, getContextMenu, onClickContextMenu, getRowHoverTipConfig, tableTooltip, compactMode, onEditValueChange, hasTotalRow, totalDatas }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
|
|
78
|
+
declare const TableBody: ({ tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, tableContainerWidth, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, datas, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, dragBeforeStart, shadowColumnInfo, getContextMenu, onClickContextMenu, getRowHoverTipConfig, tableTooltip, compactMode, onEditValueChange, hasTotalRow, totalDatas, setRowSelection }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
|
|
78
79
|
export default TableBody;
|
|
80
|
+
export declare const MemoizedTableBody: ({ tableBodyRef, table, tableId, theme, reorderRow, rowSelectedId, setRowSelectedId, rowHighLightId, setRowHighLightId, selectedRowChange, onSelectChange, canSelection, selectionWithoutChecked, tableContainerWidth, selectedRowDragging, setSelectedRowDragging, canRowDrag, rowKey, loading, rowClassName, cellClassName, rowStyle, getCellProps, rowHeight, renderSubComponent, onRowMouseEnter, onRowMouseLeave, onRowMouseClick, onRowMouseDoubleClick, disableDragRowIds, selectRowWhenClick, datas, canEditRowWhenDClick, editingRowId, handleEditRowWhenDClick, dragBeforeStart, shadowColumnInfo, getContextMenu, onClickContextMenu, getRowHoverTipConfig, tableTooltip, compactMode, onEditValueChange, hasTotalRow, totalDatas, setRowSelection }: TableBodyPropsType) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -75,7 +75,8 @@ var TableBody = function TableBody(_ref) {
|
|
|
75
75
|
compactMode = _ref.compactMode,
|
|
76
76
|
onEditValueChange = _ref.onEditValueChange,
|
|
77
77
|
hasTotalRow = _ref.hasTotalRow,
|
|
78
|
-
totalDatas = _ref.totalDatas
|
|
78
|
+
totalDatas = _ref.totalDatas,
|
|
79
|
+
setRowSelection = _ref.setRowSelection;
|
|
79
80
|
var _useConfig = useConfig(),
|
|
80
81
|
root = _useConfig.root;
|
|
81
82
|
var headerGroups = table.getHeaderGroups();
|
|
@@ -371,7 +372,8 @@ var TableBody = function TableBody(_ref) {
|
|
|
371
372
|
clearHoverRowIndex: clearHoverRowIndex,
|
|
372
373
|
hoverRowIndex: hoverRowIndex,
|
|
373
374
|
dropSide: dropSide,
|
|
374
|
-
onEditValueChange: onEditValueChange
|
|
375
|
+
onEditValueChange: onEditValueChange,
|
|
376
|
+
setRowSelection: setRowSelection
|
|
375
377
|
}, row.id);
|
|
376
378
|
});
|
|
377
379
|
};
|
|
@@ -384,6 +386,10 @@ var TableBody = function TableBody(_ref) {
|
|
|
384
386
|
|
|
385
387
|
// console.log('rowHeight :>>', rowHeight);
|
|
386
388
|
|
|
389
|
+
var TableRow = useMemo(function () {
|
|
390
|
+
console.log(TableRow, 'TableRow');
|
|
391
|
+
return table.getRowModel().rows;
|
|
392
|
+
}, [table, table.getState().rowSelection]);
|
|
387
393
|
return (
|
|
388
394
|
/*#__PURE__*/
|
|
389
395
|
// 修复筛选数据为空时,滚动条丢失
|
|
@@ -414,7 +420,59 @@ var TableBody = function TableBody(_ref) {
|
|
|
414
420
|
})
|
|
415
421
|
}), /*#__PURE__*/_jsxs("tbody", {
|
|
416
422
|
id: "table-max-tableBody-tbody-".concat(tableId),
|
|
417
|
-
children: [
|
|
423
|
+
children: [table.getRowModel().rows.map(function (row) {
|
|
424
|
+
// 当前行是否编辑中
|
|
425
|
+
var rowEditing = row.id === editingRowId;
|
|
426
|
+
return /*#__PURE__*/_jsx(Row, {
|
|
427
|
+
tableBodyRef: tableBodyRef,
|
|
428
|
+
table: table,
|
|
429
|
+
tableId: tableId,
|
|
430
|
+
row: row,
|
|
431
|
+
rowKey: rowKey,
|
|
432
|
+
theme: theme,
|
|
433
|
+
reorderRow: reorderRow,
|
|
434
|
+
rowSelectedId: rowSelectedId,
|
|
435
|
+
setRowSelectedId: setRowSelectedId,
|
|
436
|
+
rowHighLightId: rowHighLightId,
|
|
437
|
+
setRowHighLightId: setRowHighLightId,
|
|
438
|
+
selectedRowChange: selectedRowChange,
|
|
439
|
+
onSelectChange: onSelectChange,
|
|
440
|
+
canSelection: canSelection,
|
|
441
|
+
selectionWithoutChecked: selectionWithoutChecked,
|
|
442
|
+
selectedRowDragging: selectedRowDragging,
|
|
443
|
+
setSelectedRowDragging: setSelectedRowDragging,
|
|
444
|
+
canRowDrag: canRowDrag,
|
|
445
|
+
dragBeforeStart: dragBeforeStart,
|
|
446
|
+
rowClassName: rowClassName,
|
|
447
|
+
cellClassName: cellClassName,
|
|
448
|
+
rowStyle: rowStyle,
|
|
449
|
+
getCellProps: getCellProps,
|
|
450
|
+
editting: !!editingRowId,
|
|
451
|
+
rowEditing: rowEditing,
|
|
452
|
+
renderSubComponent: renderSubComponent,
|
|
453
|
+
onRowMouseEnter: onRowMouseEnter,
|
|
454
|
+
onRowMouseLeave: onRowMouseLeave,
|
|
455
|
+
onRowMouseClick: onRowMouseClick,
|
|
456
|
+
onRowMouseDoubleClick: onRowMouseDoubleClick,
|
|
457
|
+
rowHeight: rowHeight,
|
|
458
|
+
disableDragRowIds: disableDragRowIds,
|
|
459
|
+
selectRowWhenClick: selectRowWhenClick,
|
|
460
|
+
handleEditRowWhenDClick: handleEditRowWhenDClick,
|
|
461
|
+
canEditRowWhenDClick: canEditRowWhenDClick,
|
|
462
|
+
shadowColumnInfo: shadowColumnInfo,
|
|
463
|
+
onCellContextMenu: handleCellContextMenu,
|
|
464
|
+
getRowHoverTipConfig: getRowHoverTipConfig,
|
|
465
|
+
tableTooltip: tableTooltip,
|
|
466
|
+
changeHoverRow: changeHoverRow,
|
|
467
|
+
clearHoverRowIndex: clearHoverRowIndex,
|
|
468
|
+
hoverRowIndex: hoverRowIndex,
|
|
469
|
+
dropSide: dropSide,
|
|
470
|
+
onEditValueChange: onEditValueChange,
|
|
471
|
+
setRowSelection: setRowSelection
|
|
472
|
+
}, row.id);
|
|
473
|
+
})
|
|
474
|
+
// TBodyContent()
|
|
475
|
+
, /*#__PURE__*/_jsx(_Fragment, {
|
|
418
476
|
children: hasTotalRow && /*#__PURE__*/_jsx(Total, {
|
|
419
477
|
table: table,
|
|
420
478
|
totalDatas: totalDatas,
|
|
@@ -432,9 +490,8 @@ var TableBody = function TableBody(_ref) {
|
|
|
432
490
|
);
|
|
433
491
|
};
|
|
434
492
|
export default TableBody;
|
|
435
|
-
// export default React.memo(TableBody);
|
|
493
|
+
// export default React.memo(TableBody, (prev, next) => prev.table.getState() !== next.table.getState() );
|
|
436
494
|
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
// ) as typeof TableBody
|
|
495
|
+
export var MemoizedTableBody = /*#__PURE__*/React.memo(TableBody, function (prev, next) {
|
|
496
|
+
return prev.table.options.data === next.table.options.data;
|
|
497
|
+
});
|
|
@@ -456,6 +456,7 @@ var TableMax = function TableMax(_ref) {
|
|
|
456
456
|
onExpandedChange: setExpanded,
|
|
457
457
|
sortDescFirst: true // 首次排序为递减排序,不加这个属性的话,有些列的排序会有问题
|
|
458
458
|
});
|
|
459
|
+
console.log(table, 'table');
|
|
459
460
|
|
|
460
461
|
// 暴露给外部的api
|
|
461
462
|
useImperativeHandle(refInstance, function () {
|
|
@@ -601,6 +602,7 @@ var TableMax = function TableMax(_ref) {
|
|
|
601
602
|
cell: function cell(_ref5) {
|
|
602
603
|
var row = _ref5.row,
|
|
603
604
|
table = _ref5.table;
|
|
605
|
+
console.log("cell-check", row, table);
|
|
604
606
|
return /*#__PURE__*/_jsx(Checkbox, {
|
|
605
607
|
checked: row.getIsSelected(),
|
|
606
608
|
disabled: !row.getCanSelect(),
|
|
@@ -1068,7 +1070,8 @@ var TableMax = function TableMax(_ref) {
|
|
|
1068
1070
|
compactMode: compactMode,
|
|
1069
1071
|
onEditValueChange: onEditValueChange,
|
|
1070
1072
|
hasTotalRow: hasTotalRow,
|
|
1071
|
-
totalDatas: totalDatas
|
|
1073
|
+
totalDatas: totalDatas,
|
|
1074
|
+
setRowSelection: setRowSelection
|
|
1072
1075
|
};
|
|
1073
1076
|
var changeCompactMode = function changeCompactMode() {
|
|
1074
1077
|
setCompactMode(!compactMode);
|
|
@@ -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;
|
|
@@ -257,9 +257,10 @@
|
|
|
257
257
|
.cell-wapper {
|
|
258
258
|
line-height: 16px !important;
|
|
259
259
|
padding: 4px 2px !important;
|
|
260
|
+
height: 24px !important;
|
|
260
261
|
}
|
|
261
262
|
|
|
262
|
-
.tbody-tr-td {
|
|
263
|
+
.tbody-tr-td, .table-thead-tr {
|
|
263
264
|
height: 24px !important;
|
|
264
265
|
line-height: 24px !important;
|
|
265
266
|
|