zmdms-webui 2.3.0 → 2.3.1
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/es/canvastable/canvasTable.js +367 -0
- package/dist/es/canvastable/components/BadgePopover.js +27 -0
- package/dist/es/canvastable/components/CanvasTableMenu.js +74 -0
- package/dist/es/canvastable/components/CellOverlay.js +49 -0
- package/dist/es/canvastable/components/ColumnDynamic.js +12 -0
- package/dist/es/canvastable/components/EmptyPlaceholder.js +20 -0
- package/dist/es/canvastable/components/FilterPopover.js +274 -0
- package/dist/es/canvastable/components/HeaderOverlay.js +22 -0
- package/dist/es/canvastable/components/Tooltip.js +27 -0
- package/dist/es/canvastable/hooks/useClickOutside.js +30 -0
- package/dist/es/canvastable/hooks/useColumnResize.js +130 -0
- package/dist/es/canvastable/hooks/useContainerSize.js +40 -0
- package/dist/es/canvastable/hooks/useCopyToClipboard.js +150 -0
- package/dist/es/canvastable/hooks/useHeaderHeight.js +103 -0
- package/dist/es/canvastable/hooks/useMergeCells.js +111 -0
- package/dist/es/canvastable/hooks/useOverlays.js +364 -0
- package/dist/es/canvastable/hooks/usePopovers.js +93 -0
- package/dist/es/canvastable/hooks/useProcessedColumns.js +94 -0
- package/dist/es/canvastable/hooks/useScroll.js +251 -0
- package/dist/es/canvastable/hooks/useSummaryRow.js +81 -0
- package/dist/es/canvastable/hooks/useTableInteraction.js +804 -0
- package/dist/es/canvastable/hooks/useTableRender.js +1289 -0
- package/dist/es/canvastable/hooks/useTableSelection.js +57 -0
- package/dist/es/canvastable/hooks/useTableState.js +218 -0
- package/dist/es/canvastable/index.js +5 -0
- package/dist/es/canvastable/utils/canvasDrawHelpers.js +156 -0
- package/dist/es/canvastable/utils/cellHelpers.js +121 -0
- package/dist/es/canvastable/utils/columnHelpers.js +67 -0
- package/dist/es/canvastable/utils/constants.js +42 -0
- package/dist/es/canvastable/utils/formatHelpers.js +60 -0
- package/dist/es/canvastable/utils/interactionHelpers.js +176 -0
- package/dist/es/canvastable/utils/multiHeaderHelpers.js +82 -0
- package/dist/es/canvastable/utils/tableCalculations.js +100 -0
- package/dist/index.es.css +1 -1
- package/dist/less/components/CanvasTable/style/index.less +106 -0
- package/package.json +1 -1
- package/dist/es/cascader/index.css +0 -1
- package/dist/es/collapse/index.css +0 -1
- package/dist/es/container/index.css +0 -1
- package/dist/es/datepicker/index.css +0 -1
- package/dist/es/descriptions/index.css +0 -1
- package/dist/es/detaillist/index.css +0 -1
- package/dist/es/differences/index.css +0 -1
- package/dist/es/dynamicsetting/index.css +0 -1
- package/dist/es/electronsignatures/index.css +0 -1
- package/dist/es/footer/index.css +0 -1
- package/dist/es/form/index.css +0 -1
- package/dist/es/formitem/index.css +0 -1
- package/dist/es/input/index.css +0 -1
- package/dist/es/inputnumber/index.css +0 -1
- package/dist/es/leftcontent/index.css +0 -1
- package/dist/es/message/index.css +0 -1
- package/dist/es/microloading/index.css +0 -1
- package/dist/es/modal/index.css +0 -1
- package/dist/es/notauthpage/index.css +0 -0
- package/dist/es/notroutepage/index.css +0 -0
- package/dist/es/pagination/index.css +0 -1
- package/dist/es/placeholder/index.css +0 -1
- package/dist/es/print/index.css +0 -1
- package/dist/es/select/index.css +0 -1
- package/dist/es/table/index.css +0 -1
- package/dist/es/tabs/index.css +0 -1
- package/dist/es/tag/index.css +0 -1
- package/dist/es/title/index.css +0 -1
- package/dist/es/tree/index.css +0 -1
- package/dist/es/treeselect/index.css +0 -1
- package/dist/es/uploadlist/index.css +0 -1
- package/dist/es/watermark/index.css +0 -1
- package/dist/es/zttransfer/index.css +0 -1
|
@@ -0,0 +1,367 @@
|
|
|
1
|
+
import { __assign } from '../_virtual/_tslib.js';
|
|
2
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
|
+
import { useRef, useState, useCallback, useMemo } from 'react';
|
|
4
|
+
import { Spin } from 'antd';
|
|
5
|
+
import './components/FilterPopover.js';
|
|
6
|
+
import CellOverlay from './components/CellOverlay.js';
|
|
7
|
+
import Tooltip from './components/Tooltip.js';
|
|
8
|
+
import BadgePopover from './components/BadgePopover.js';
|
|
9
|
+
import EmptyPlaceholder from './components/EmptyPlaceholder.js';
|
|
10
|
+
import CanvasTableMenu from './components/CanvasTableMenu.js';
|
|
11
|
+
import './components/ColumnDynamic.js';
|
|
12
|
+
import HeaderOverlay from './components/HeaderOverlay.js';
|
|
13
|
+
import { useContextMenu as Fe } from '../node_modules/react-contexify/dist/index.js';
|
|
14
|
+
import { useTableState } from './hooks/useTableState.js';
|
|
15
|
+
import { useTableSelection } from './hooks/useTableSelection.js';
|
|
16
|
+
import { useTableRender } from './hooks/useTableRender.js';
|
|
17
|
+
import { useTableInteraction } from './hooks/useTableInteraction.js';
|
|
18
|
+
import { useScrollbarMetrics, useTableScroll, useScrollReset } from './hooks/useScroll.js';
|
|
19
|
+
import { useFilterPopover, useBadgePopover } from './hooks/usePopovers.js';
|
|
20
|
+
import { useTableCellOverlay, useHeaderOverlay } from './hooks/useOverlays.js';
|
|
21
|
+
import { useCopyToClipboard } from './hooks/useCopyToClipboard.js';
|
|
22
|
+
import { useColumnResize } from './hooks/useColumnResize.js';
|
|
23
|
+
import { useHeaderHeight } from './hooks/useHeaderHeight.js';
|
|
24
|
+
import { useClickOutside } from './hooks/useClickOutside.js';
|
|
25
|
+
import { useMergeCells } from './hooks/useMergeCells.js';
|
|
26
|
+
import { useContainerSize } from './hooks/useContainerSize.js';
|
|
27
|
+
import { useProcessedColumns } from './hooks/useProcessedColumns.js';
|
|
28
|
+
import { useSummaryRow } from './hooks/useSummaryRow.js';
|
|
29
|
+
import { SCROLLBAR_SIZE } from './utils/constants.js';
|
|
30
|
+
import { calculateColumnRenderInfos, calculateTotalWidth, calculateTotalHeight } from './utils/tableCalculations.js';
|
|
31
|
+
import 'dayjs';
|
|
32
|
+
import { TABLE_DYNAMIC_KEY } from '../table/constant.js';
|
|
33
|
+
import { useDynamicListByColumns } from '../table/useDynamicListByColumns.js';
|
|
34
|
+
import { useAutoMerge } from '../table/hooks.js';
|
|
35
|
+
import { useExcelExport } from '../table/excel.js';
|
|
36
|
+
import { getTableColumns } from '../table/utils.js';
|
|
37
|
+
import DynamicSetting from '../dynamicsetting/dynamicSetting.js';
|
|
38
|
+
|
|
39
|
+
function CanvasTable(props) {
|
|
40
|
+
var _a = props.dataSource, dataSource = _a === void 0 ? [] : _a, _b = props.columns, columns = _b === void 0 ? [] : _b, _c = props.rowKey, rowKey = _c === void 0 ? "id" : _c, _d = props.height, height = _d === void 0 ? 600 : _d, width = props.width, _e = props.rowHeight, rowHeight = _e === void 0 ? 36 : _e, _f = props.headerHeight, headerHeight = _f === void 0 ? 36 : _f, rowSelection = props.rowSelection, onSortChange = props.onSortChange, onFilterChange = props.onFilterChange, onScroll = props.onScroll, onRowClick = props.onRowClick, onColumnResize = props.onColumnResize, _g = props.bordered, bordered = _g === void 0 ? true : _g, _h = props.striped, striped = _h === void 0 ? false : _h, _j = props.emptyText, emptyText = _j === void 0 ? "暂无数据" : _j, style = props.style, className = props.className, _k = props.loading, loading = _k === void 0 ? false : _k, _l = props.isContextMenu, isContextMenu = _l === void 0 ? true : _l, isFullscreenHandle = props.isFullscreenHandle, mode = props.mode, dynamicKey = props.dynamicKey, dynamicVersion = props.dynamicVersion, customDynamicListHandle = props.customDynamicListHandle, isDimensionDynamic = props.isDimensionDynamic, dimensionCustomSumKeys = props.dimensionCustomSumKeys, isAutoMerge = props.isAutoMerge, _m = props.isIndexMerge, isIndexMerge = _m === void 0 ? true : _m, _o = props.isSelectionMerge, isSelectionMerge = _o === void 0 ? false : _o, _p = props.renderMode, renderMode = _p === void 0 ? "object" : _p, fixedRowsCount = props.fixedRowsCount, fixedRowsConfig = props.fixedRowsConfig, _q = props.fixedSummaryRow, fixedSummaryRow = _q === void 0 ? false : _q;
|
|
41
|
+
var canvasRef = useRef(null);
|
|
42
|
+
var containerRef = useRef(null);
|
|
43
|
+
var filterPopoverRef = useRef(null);
|
|
44
|
+
var badgePopoverRef = useRef(null);
|
|
45
|
+
var tableMenuRef = useRef();
|
|
46
|
+
// 右键菜单
|
|
47
|
+
var menuId = useState(isContextMenu
|
|
48
|
+
? "canvas-table-menu-" + Math.floor(Math.random() * 100000000)
|
|
49
|
+
: undefined)[0];
|
|
50
|
+
var menuShow = Fe({
|
|
51
|
+
id: menuId,
|
|
52
|
+
}).show;
|
|
53
|
+
// 获取行的key
|
|
54
|
+
var getRowKey = useCallback(function (record, index) {
|
|
55
|
+
var _a;
|
|
56
|
+
if (typeof rowKey === "function") {
|
|
57
|
+
return String(rowKey(record));
|
|
58
|
+
}
|
|
59
|
+
return String((_a = record[rowKey]) !== null && _a !== void 0 ? _a : index);
|
|
60
|
+
}, [rowKey]);
|
|
61
|
+
// 动态列配置
|
|
62
|
+
var _r = useDynamicListByColumns(columns, {
|
|
63
|
+
dynamicKey: dynamicKey,
|
|
64
|
+
dynamicVersion: dynamicVersion,
|
|
65
|
+
customDynamicListHandle: customDynamicListHandle,
|
|
66
|
+
}), defaultDynamicList = _r.defaultDynamicList, currentDynamicList = _r.currentDynamicList, onCurrentListChange = _r.onCurrentListChange, dynamicSettingRef = _r.dynamicSettingRef;
|
|
67
|
+
// 根据动态列配置处理columns
|
|
68
|
+
var dynamicColumns = useMemo(function () { return getTableColumns(columns, currentDynamicList); }, [columns, currentDynamicList]).columns;
|
|
69
|
+
// 计算表头动态高度(支持wrap换行)
|
|
70
|
+
var calculatedHeaderHeight = useHeaderHeight({
|
|
71
|
+
columns: (dynamicColumns || columns),
|
|
72
|
+
headerHeight: headerHeight,
|
|
73
|
+
});
|
|
74
|
+
// 内部列宽状态(未开启动态配置时使用)
|
|
75
|
+
var _s = useState({}), internalColumnWidths = _s[0], setInternalColumnWidths = _s[1];
|
|
76
|
+
// 处理选中框列、序号列等
|
|
77
|
+
var processedColumnsOld = useProcessedColumns({
|
|
78
|
+
columns: columns,
|
|
79
|
+
dynamicColumns: dynamicColumns,
|
|
80
|
+
mode: mode,
|
|
81
|
+
rowSelection: rowSelection,
|
|
82
|
+
internalColumnWidths: internalColumnWidths,
|
|
83
|
+
dynamicKey: dynamicKey,
|
|
84
|
+
renderMode: renderMode,
|
|
85
|
+
dynamicSettingRef: dynamicSettingRef,
|
|
86
|
+
});
|
|
87
|
+
// 表格状态管理
|
|
88
|
+
var _t = useTableState({
|
|
89
|
+
dataSource: dataSource,
|
|
90
|
+
columns: processedColumnsOld,
|
|
91
|
+
rowSelection: rowSelection,
|
|
92
|
+
onFilterChange: onFilterChange,
|
|
93
|
+
}), state = _t.state, setState = _t.setState, processedDataSource = _t.processedDataSource, handleFilterChange = _t.handleFilterChange, closeFilterPopover = _t.closeFilterPopover, autoGeneratedFilters = _t.autoGeneratedFilters;
|
|
94
|
+
var order = useMemo(function () {
|
|
95
|
+
return state.sortOrder && state.sortField
|
|
96
|
+
? { field: state.sortField, order: state.sortOrder }
|
|
97
|
+
: undefined;
|
|
98
|
+
}, [state.sortOrder, state.sortField]);
|
|
99
|
+
var _u = useAutoMerge(processedDataSource, processedColumnsOld, {
|
|
100
|
+
isAutoMerge: isAutoMerge,
|
|
101
|
+
isDimensionDynamic: isDimensionDynamic,
|
|
102
|
+
order: order,
|
|
103
|
+
dimensionCustomSumKeys: dimensionCustomSumKeys,
|
|
104
|
+
}), newDataSource = _u[0], processedColumns = _u[1];
|
|
105
|
+
// 生成合计行和最终数据源
|
|
106
|
+
var _v = useSummaryRow({
|
|
107
|
+
columns: processedColumns,
|
|
108
|
+
dataSource: newDataSource,
|
|
109
|
+
}), finalDataSource = _v.finalDataSource, hasSummaryRow = _v.hasSummaryRow;
|
|
110
|
+
// 计算列的渲染信息
|
|
111
|
+
var columnRenderInfos = useMemo(function () { return calculateColumnRenderInfos(processedColumns); }, [processedColumns]);
|
|
112
|
+
// 计算合并单元格信息
|
|
113
|
+
var mergeCellMap = useMergeCells({
|
|
114
|
+
dataSource: finalDataSource,
|
|
115
|
+
columns: processedColumns,
|
|
116
|
+
isIndexMerge: isIndexMerge,
|
|
117
|
+
isSelectionMerge: isSelectionMerge,
|
|
118
|
+
}).mergeCellMap;
|
|
119
|
+
// 计算总宽度和总高度
|
|
120
|
+
var totalWidth = useMemo(function () { return calculateTotalWidth(columnRenderInfos); }, [columnRenderInfos]);
|
|
121
|
+
var totalHeight = useMemo(function () {
|
|
122
|
+
return calculateTotalHeight(calculatedHeaderHeight, finalDataSource.length, rowHeight);
|
|
123
|
+
}, [calculatedHeaderHeight, finalDataSource.length, rowHeight]);
|
|
124
|
+
// 监听容器尺寸变化
|
|
125
|
+
var containerSize = useContainerSize({
|
|
126
|
+
containerRef: containerRef,
|
|
127
|
+
width: width,
|
|
128
|
+
height: height,
|
|
129
|
+
});
|
|
130
|
+
var containerWidth = containerSize.width;
|
|
131
|
+
var containerHeight = containerSize.height;
|
|
132
|
+
// 计算滚动条指标
|
|
133
|
+
var _w = useScrollbarMetrics({
|
|
134
|
+
containerWidth: containerWidth,
|
|
135
|
+
containerHeight: containerHeight,
|
|
136
|
+
totalWidth: totalWidth,
|
|
137
|
+
totalHeight: totalHeight,
|
|
138
|
+
headerHeight: calculatedHeaderHeight,
|
|
139
|
+
scrollTop: 0,
|
|
140
|
+
scrollLeft: 0,
|
|
141
|
+
}), maxScrollTop = _w.maxScrollTop, maxScrollLeft = _w.maxScrollLeft;
|
|
142
|
+
// 滚动管理(使用预先计算的maxScrollTop和maxScrollLeft)
|
|
143
|
+
var _x = useTableScroll({
|
|
144
|
+
canvasRef: canvasRef,
|
|
145
|
+
containerRef: containerRef,
|
|
146
|
+
maxScrollTop: maxScrollTop,
|
|
147
|
+
maxScrollLeft: maxScrollLeft,
|
|
148
|
+
onScroll: onScroll,
|
|
149
|
+
}), scrollState = _x.scrollState, setScrollState = _x.setScrollState;
|
|
150
|
+
// 数据变化时重置滚动位置(筛选、排序、数据源更新等操作后)
|
|
151
|
+
useScrollReset({
|
|
152
|
+
dataSourceLength: dataSource.length,
|
|
153
|
+
processedDataLength: processedDataSource.length,
|
|
154
|
+
filters: state.filters,
|
|
155
|
+
sortField: state.sortField,
|
|
156
|
+
sortOrder: state.sortOrder,
|
|
157
|
+
setScrollState: setScrollState,
|
|
158
|
+
});
|
|
159
|
+
// 使用实际滚动位置重新计算滚动条的显示位置
|
|
160
|
+
var scrollbarMetrics = useScrollbarMetrics({
|
|
161
|
+
containerWidth: containerWidth,
|
|
162
|
+
containerHeight: containerHeight,
|
|
163
|
+
totalWidth: totalWidth,
|
|
164
|
+
totalHeight: totalHeight,
|
|
165
|
+
headerHeight: calculatedHeaderHeight,
|
|
166
|
+
scrollTop: scrollState.scrollTop,
|
|
167
|
+
scrollLeft: scrollState.scrollLeft,
|
|
168
|
+
}).actualMetrics;
|
|
169
|
+
// 单元格框选
|
|
170
|
+
var _y = useTableSelection({
|
|
171
|
+
state: state,
|
|
172
|
+
setState: setState,
|
|
173
|
+
}),
|
|
174
|
+
// selectionStartRef,
|
|
175
|
+
startSelection = _y.startSelection, updateSelection = _y.updateSelection, extendSelection = _y.extendSelection;
|
|
176
|
+
// 处理列宽调整
|
|
177
|
+
var handleColumnResize = useCallback(function (columnKey, newWidth) {
|
|
178
|
+
var _a;
|
|
179
|
+
// 先调用外部回调(用户可以监听列宽变化)
|
|
180
|
+
onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize(columnKey, newWidth);
|
|
181
|
+
if (dynamicKey && currentDynamicList) {
|
|
182
|
+
// 开启了动态配置:更新到动态配置中
|
|
183
|
+
var newList = currentDynamicList.map(function (item) { return (__assign({}, item)); });
|
|
184
|
+
// 递归查找并更新列宽
|
|
185
|
+
var updateWidth_1 = function (items) {
|
|
186
|
+
for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
|
|
187
|
+
var item = items_1[_i];
|
|
188
|
+
if (item.key === columnKey) {
|
|
189
|
+
item.width = newWidth;
|
|
190
|
+
return true;
|
|
191
|
+
}
|
|
192
|
+
// 递归处理多级表头
|
|
193
|
+
if (item.children && updateWidth_1(item.children)) {
|
|
194
|
+
return true;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
return false;
|
|
198
|
+
};
|
|
199
|
+
if (updateWidth_1(newList)) {
|
|
200
|
+
// 更新动态配置
|
|
201
|
+
if ((_a = dynamicSettingRef === null || dynamicSettingRef === void 0 ? void 0 : dynamicSettingRef.current) === null || _a === void 0 ? void 0 : _a.updateList) {
|
|
202
|
+
dynamicSettingRef.current.updateList(newList);
|
|
203
|
+
}
|
|
204
|
+
else {
|
|
205
|
+
onCurrentListChange === null || onCurrentListChange === void 0 ? void 0 : onCurrentListChange(newList);
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
else {
|
|
210
|
+
// 未开启动态配置:保存到内部状态
|
|
211
|
+
setInternalColumnWidths(function (prev) {
|
|
212
|
+
var _a;
|
|
213
|
+
return (__assign(__assign({}, prev), (_a = {}, _a[columnKey] = newWidth, _a)));
|
|
214
|
+
});
|
|
215
|
+
}
|
|
216
|
+
}, [
|
|
217
|
+
onColumnResize,
|
|
218
|
+
dynamicKey,
|
|
219
|
+
currentDynamicList,
|
|
220
|
+
dynamicSettingRef,
|
|
221
|
+
onCurrentListChange,
|
|
222
|
+
]);
|
|
223
|
+
// 列宽调整
|
|
224
|
+
var _z = useColumnResize({
|
|
225
|
+
columnRenderInfos: columnRenderInfos,
|
|
226
|
+
containerWidth: containerWidth,
|
|
227
|
+
headerHeight: calculatedHeaderHeight,
|
|
228
|
+
scrollLeft: scrollState.scrollLeft,
|
|
229
|
+
onColumnResize: handleColumnResize,
|
|
230
|
+
}), resizeState = _z.resizeState, checkResizeHandle = _z.checkResizeHandle, startResize = _z.startResize, updateResize = _z.updateResize, endResize = _z.endResize, setHoverResizeColumn = _z.setHoverResizeColumn, getColumnWidth = _z.getColumnWidth, RESIZE_HANDLE_WIDTH = _z.RESIZE_HANDLE_WIDTH;
|
|
231
|
+
// 复制到剪贴板
|
|
232
|
+
var getSelectedCellsText = useCopyToClipboard({
|
|
233
|
+
cellSelection: state.cellSelection,
|
|
234
|
+
processedDataSource: finalDataSource,
|
|
235
|
+
columns: processedColumns,
|
|
236
|
+
containerRef: containerRef,
|
|
237
|
+
}).getSelectedCellsText;
|
|
238
|
+
// 处理右键菜单的复制操作
|
|
239
|
+
var handleCopy = useCallback(function () {
|
|
240
|
+
var text = getSelectedCellsText();
|
|
241
|
+
if (text && navigator.clipboard) {
|
|
242
|
+
navigator.clipboard.writeText(text).catch(function (err) {
|
|
243
|
+
console.error("Failed to copy:", err);
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
}, [getSelectedCellsText]);
|
|
247
|
+
// Excel导出功能
|
|
248
|
+
var exportExcel = useExcelExport(processedDataSource, {
|
|
249
|
+
columns: processedColumns,
|
|
250
|
+
isAutoMerge: isAutoMerge,
|
|
251
|
+
});
|
|
252
|
+
// 交互事件处理(使用baseScrollbarMetrics的maxScrollTop/maxScrollLeft以保持稳定)
|
|
253
|
+
var _0 = useTableInteraction({
|
|
254
|
+
state: state,
|
|
255
|
+
setState: setState,
|
|
256
|
+
scrollState: scrollState,
|
|
257
|
+
setScrollState: setScrollState,
|
|
258
|
+
processedDataSource: finalDataSource,
|
|
259
|
+
columnRenderInfos: columnRenderInfos,
|
|
260
|
+
columns: processedColumns,
|
|
261
|
+
rowSelection: rowSelection,
|
|
262
|
+
rowHeight: rowHeight,
|
|
263
|
+
headerHeight: calculatedHeaderHeight,
|
|
264
|
+
containerWidth: containerWidth,
|
|
265
|
+
containerHeight: containerHeight,
|
|
266
|
+
scrollbarSize: SCROLLBAR_SIZE,
|
|
267
|
+
canvasRef: canvasRef,
|
|
268
|
+
totalHeight: totalHeight,
|
|
269
|
+
totalWidth: totalWidth,
|
|
270
|
+
// 使用scrollbarMetrics的显示相关属性(需要随滚动更新)
|
|
271
|
+
needVerticalScrollbar: scrollbarMetrics.needVerticalScrollbar,
|
|
272
|
+
needHorizontalScrollbar: scrollbarMetrics.needHorizontalScrollbar,
|
|
273
|
+
verticalScrollbarTop: scrollbarMetrics.verticalScrollbarTop,
|
|
274
|
+
verticalScrollbarHeight: scrollbarMetrics.verticalScrollbarHeight,
|
|
275
|
+
horizontalScrollbarLeft: scrollbarMetrics.horizontalScrollbarLeft,
|
|
276
|
+
horizontalScrollbarWidth: scrollbarMetrics.horizontalScrollbarWidth,
|
|
277
|
+
dataAreaHeight: scrollbarMetrics.dataAreaHeight,
|
|
278
|
+
// 使用baseMetrics的max值(保持稳定,避免滚动过程中突变)
|
|
279
|
+
maxScrollTop: maxScrollTop,
|
|
280
|
+
maxScrollLeft: maxScrollLeft,
|
|
281
|
+
onSortChange: onSortChange,
|
|
282
|
+
onRowClick: onRowClick,
|
|
283
|
+
getRowKey: getRowKey,
|
|
284
|
+
startSelection: startSelection,
|
|
285
|
+
updateSelection: updateSelection,
|
|
286
|
+
extendSelection: extendSelection,
|
|
287
|
+
checkResizeHandle: checkResizeHandle,
|
|
288
|
+
startResize: startResize,
|
|
289
|
+
updateResize: updateResize,
|
|
290
|
+
endResize: endResize,
|
|
291
|
+
setHoverResizeColumn: setHoverResizeColumn,
|
|
292
|
+
resizeState: resizeState,
|
|
293
|
+
hasSummaryRow: hasSummaryRow,
|
|
294
|
+
mergeCellMap: mergeCellMap,
|
|
295
|
+
menuShow: isContextMenu ? menuShow : undefined,
|
|
296
|
+
fixedRowsCount: fixedRowsCount,
|
|
297
|
+
fixedRowsConfig: fixedRowsConfig,
|
|
298
|
+
fixedSummaryRow: fixedSummaryRow,
|
|
299
|
+
}), handleCanvasMouseDown = _0.handleCanvasMouseDown, handleCanvasMouseMove = _0.handleCanvasMouseMove, handleCanvasMouseUp = _0.handleCanvasMouseUp, handleCanvasMouseLeave = _0.handleCanvasMouseLeave, handleCanvasContextMenu = _0.handleCanvasContextMenu;
|
|
300
|
+
// 渲染表格
|
|
301
|
+
useTableRender(__assign(__assign({ canvasRef: canvasRef, processedDataSource: finalDataSource, columnRenderInfos: columnRenderInfos, columns: processedColumns, // 传递原始columns用于渲染多级表头
|
|
302
|
+
state: state, scrollState: scrollState, rowSelection: rowSelection, containerWidth: containerWidth, containerHeight: containerHeight, headerHeight: calculatedHeaderHeight, rowHeight: rowHeight, bordered: bordered, striped: striped }, scrollbarMetrics), { getRowKey: getRowKey, resizeState: resizeState, getColumnWidth: getColumnWidth, RESIZE_HANDLE_WIDTH: RESIZE_HANDLE_WIDTH, mergeCellMap: mergeCellMap, hasSummaryRow: hasSummaryRow, fixedRowsCount: fixedRowsCount, fixedRowsConfig: fixedRowsConfig, fixedSummaryRow: fixedSummaryRow }));
|
|
303
|
+
// 单元格覆盖层
|
|
304
|
+
var cellOverlays = useTableCellOverlay({
|
|
305
|
+
canvasRef: canvasRef,
|
|
306
|
+
processedDataSource: finalDataSource,
|
|
307
|
+
columnRenderInfos: columnRenderInfos,
|
|
308
|
+
scrollState: scrollState,
|
|
309
|
+
containerWidth: containerWidth,
|
|
310
|
+
containerHeight: containerHeight,
|
|
311
|
+
headerHeight: calculatedHeaderHeight,
|
|
312
|
+
rowHeight: rowHeight,
|
|
313
|
+
needHorizontalScrollbar: scrollbarMetrics.needHorizontalScrollbar,
|
|
314
|
+
needVerticalScrollbar: scrollbarMetrics.needVerticalScrollbar,
|
|
315
|
+
scrollbarSize: SCROLLBAR_SIZE,
|
|
316
|
+
fixedRowsCount: fixedRowsCount,
|
|
317
|
+
fixedRowsConfig: fixedRowsConfig,
|
|
318
|
+
hasSummaryRow: hasSummaryRow,
|
|
319
|
+
fixedSummaryRow: fixedSummaryRow,
|
|
320
|
+
}).cellOverlays;
|
|
321
|
+
// 表头覆盖层
|
|
322
|
+
var headerOverlays = useHeaderOverlay({
|
|
323
|
+
columnRenderInfos: columnRenderInfos,
|
|
324
|
+
scrollLeft: scrollState.scrollLeft,
|
|
325
|
+
headerHeight: calculatedHeaderHeight,
|
|
326
|
+
containerWidth: containerWidth,
|
|
327
|
+
needVerticalScrollbar: scrollbarMetrics.needVerticalScrollbar,
|
|
328
|
+
scrollbarSize: SCROLLBAR_SIZE,
|
|
329
|
+
getColumnWidth: getColumnWidth,
|
|
330
|
+
}).headerOverlays;
|
|
331
|
+
// 渲染过滤弹窗
|
|
332
|
+
var filterPopoverElement = useFilterPopover({
|
|
333
|
+
filterPopover: state.filterPopover,
|
|
334
|
+
filters: state.filters,
|
|
335
|
+
columns: processedColumns,
|
|
336
|
+
autoGeneratedFilters: autoGeneratedFilters,
|
|
337
|
+
onFilterChange: handleFilterChange,
|
|
338
|
+
onClose: closeFilterPopover,
|
|
339
|
+
popoverRef: filterPopoverRef,
|
|
340
|
+
}).filterPopoverElement;
|
|
341
|
+
// 点击外部关闭过滤弹窗
|
|
342
|
+
useClickOutside({
|
|
343
|
+
ref: filterPopoverRef,
|
|
344
|
+
isVisible: state.filterPopover.visible,
|
|
345
|
+
onClose: closeFilterPopover,
|
|
346
|
+
});
|
|
347
|
+
// Badge弹窗管理
|
|
348
|
+
var handleCloseBadgePopover = useBadgePopover({
|
|
349
|
+
badgePopover: state.badgePopover,
|
|
350
|
+
tooltip: state.tooltip,
|
|
351
|
+
scrollTop: scrollState.scrollTop,
|
|
352
|
+
scrollLeft: scrollState.scrollLeft,
|
|
353
|
+
setState: setState,
|
|
354
|
+
}).handleCloseBadgePopover;
|
|
355
|
+
useClickOutside({
|
|
356
|
+
ref: badgePopoverRef,
|
|
357
|
+
isVisible: state.badgePopover.visible,
|
|
358
|
+
onClose: handleCloseBadgePopover,
|
|
359
|
+
});
|
|
360
|
+
return (jsx(Spin, __assign({ spinning: loading }, { children: jsxs("div", __assign({ ref: containerRef, className: "canvas-table-container ".concat(className || ""), tabIndex: 0, style: __assign(__assign({}, style), { position: "relative", width: width || "100%", height: containerHeight, overflow: "hidden", touchAction: "none", outline: "none" }) }, { children: [jsx("canvas", { ref: canvasRef, onMouseDown: handleCanvasMouseDown, onMouseMove: handleCanvasMouseMove, onMouseUp: handleCanvasMouseUp, onMouseLeave: handleCanvasMouseLeave, onContextMenu: handleCanvasContextMenu, style: {
|
|
361
|
+
display: "block",
|
|
362
|
+
// cursor 由 useTableInteraction 动态管理
|
|
363
|
+
touchAction: "none",
|
|
364
|
+
} }), dynamicKey ? (jsx(DynamicSetting, { parentDynamicKey: TABLE_DYNAMIC_KEY, dynamicKey: dynamicKey, defaultList: defaultDynamicList, onCurrentListChange: onCurrentListChange, ref: dynamicSettingRef, hiddenOperationIcon: true, isMore: true, isFixed: true, isDimensionDynamic: isDimensionDynamic })) : null, jsx(EmptyPlaceholder, { visible: finalDataSource.length === 0, text: emptyText, headerHeight: calculatedHeaderHeight }), jsx(HeaderOverlay, { overlays: headerOverlays }), jsx(CellOverlay, { overlays: cellOverlays }), filterPopoverElement, jsx(Tooltip, { visible: state.tooltip.visible, content: state.tooltip.content, position: state.tooltip.position }), jsx(BadgePopover, { visible: state.badgePopover.visible, content: state.badgePopover.content, position: state.badgePopover.position, popoverRef: badgePopoverRef }), menuId ? (jsx(CanvasTableMenu, { menuId: menuId, containerRef: containerRef, isFullscreenHandle: isFullscreenHandle, tableMenuRef: tableMenuRef, onCopy: handleCopy, onExport: dynamicKey ? exportExcel : undefined })) : null] })) })));
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
export { CanvasTable as default };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { __assign } from '../../_virtual/_tslib.js';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
var BadgePopover = function (_a) {
|
|
5
|
+
var visible = _a.visible, content = _a.content, position = _a.position, popoverRef = _a.popoverRef;
|
|
6
|
+
if (!visible) {
|
|
7
|
+
return null;
|
|
8
|
+
}
|
|
9
|
+
return (jsx("div", __assign({ ref: popoverRef, className: "canvas-table-badge-popover", style: {
|
|
10
|
+
position: "fixed",
|
|
11
|
+
left: position.x,
|
|
12
|
+
top: position.y,
|
|
13
|
+
zIndex: 1002,
|
|
14
|
+
background: "#fff",
|
|
15
|
+
color: "rgba(0, 0, 0, 0.85)",
|
|
16
|
+
padding: "12px 16px",
|
|
17
|
+
borderRadius: "4px",
|
|
18
|
+
fontSize: "14px",
|
|
19
|
+
maxWidth: "400px",
|
|
20
|
+
wordBreak: "break-all",
|
|
21
|
+
whiteSpace: "pre-wrap",
|
|
22
|
+
boxShadow: "0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)",
|
|
23
|
+
border: "1px solid #f0f0f0",
|
|
24
|
+
} }, { children: content })));
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export { BadgePopover as default };
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { __assign } from '../../_virtual/_tslib.js';
|
|
2
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { useState, useEffect, useImperativeHandle } from 'react';
|
|
4
|
+
import { Menu as it, Item as pt } from '../../node_modules/react-contexify/dist/index.js';
|
|
5
|
+
import screenfull from '../../node_modules/screenfull/index.js';
|
|
6
|
+
import { useLatest } from 'ahooks';
|
|
7
|
+
|
|
8
|
+
var CanvasTableMenu = function (_a) {
|
|
9
|
+
var menuId = _a.menuId, containerRef = _a.containerRef, isFullscreenHandle = _a.isFullscreenHandle, tableMenuRef = _a.tableMenuRef, onCopy = _a.onCopy, onExport = _a.onExport;
|
|
10
|
+
var _b = useState(false), isFull = _b[0], setIsFull = _b[1];
|
|
11
|
+
var isFullscreenHandleRef = useLatest(isFullscreenHandle);
|
|
12
|
+
function toggleFullscreen() {
|
|
13
|
+
if (screenfull.isEnabled) {
|
|
14
|
+
var realScreenFull = screenfull;
|
|
15
|
+
if (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) {
|
|
16
|
+
realScreenFull.toggle(containerRef.current);
|
|
17
|
+
}
|
|
18
|
+
else {
|
|
19
|
+
realScreenFull.toggle();
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
function onMenuItemClick(e) {
|
|
24
|
+
var data = e.data;
|
|
25
|
+
switch (data) {
|
|
26
|
+
case "fullscreen": {
|
|
27
|
+
toggleFullscreen();
|
|
28
|
+
break;
|
|
29
|
+
}
|
|
30
|
+
case "copy": {
|
|
31
|
+
onCopy === null || onCopy === void 0 ? void 0 : onCopy();
|
|
32
|
+
break;
|
|
33
|
+
}
|
|
34
|
+
case "export": {
|
|
35
|
+
var fileName = "\u8868\u683C\u6570\u636E_".concat(new Date().toLocaleDateString());
|
|
36
|
+
onExport === null || onExport === void 0 ? void 0 : onExport(fileName);
|
|
37
|
+
break;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
// 全屏
|
|
42
|
+
useEffect(function () {
|
|
43
|
+
if (screenfull.isEnabled) {
|
|
44
|
+
var realScreenFull_1 = screenfull;
|
|
45
|
+
var callback_1 = function () {
|
|
46
|
+
var _a;
|
|
47
|
+
var isFull = realScreenFull_1.isFullscreen;
|
|
48
|
+
(_a = isFullscreenHandleRef.current) === null || _a === void 0 ? void 0 : _a.call(isFullscreenHandleRef, isFull);
|
|
49
|
+
setIsFull(isFull);
|
|
50
|
+
// 如果是全屏状态,那么修改背景
|
|
51
|
+
if (containerRef && containerRef.current) {
|
|
52
|
+
if (isFull) {
|
|
53
|
+
containerRef.current.classList.add("canvas-table--fullscreen");
|
|
54
|
+
containerRef.current.style.backgroundColor = "#fff";
|
|
55
|
+
}
|
|
56
|
+
else {
|
|
57
|
+
containerRef.current.classList.remove("canvas-table--fullscreen");
|
|
58
|
+
containerRef.current.style.removeProperty("background-color");
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
realScreenFull_1.on("change", callback_1);
|
|
63
|
+
return function () {
|
|
64
|
+
realScreenFull_1.off("change", callback_1);
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
}, [containerRef, isFullscreenHandleRef]);
|
|
68
|
+
useImperativeHandle(tableMenuRef, function () { return ({
|
|
69
|
+
toggleFullscreen: toggleFullscreen,
|
|
70
|
+
}); });
|
|
71
|
+
return (jsxs(Fragment, { children: [jsxs(it, __assign({ id: menuId, className: "canvas-table-menu" }, { children: [jsx(pt, __assign({ data: "copy", onClick: onMenuItemClick }, { children: "\u590D\u5236" })), onExport ? (jsx(pt, __assign({ data: "export", onClick: onMenuItemClick }, { children: "\u5BFC\u51FAExcel" }))) : null, jsx(pt, __assign({ data: "fullscreen", onClick: onMenuItemClick }, { children: isFull ? "退出全屏" : "全屏" }))] })), isFull ? (jsx("div", __assign({ className: "canvas-table--exit-fullscreen", onClick: toggleFullscreen }, { children: "\u9000\u51FA\u5168\u5C4F" }))) : null] }));
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
export { CanvasTableMenu as default };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { __assign } from '../../_virtual/_tslib.js';
|
|
2
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
var CellOverlay = function (_a) {
|
|
5
|
+
var overlays = _a.overlays;
|
|
6
|
+
if (!overlays || overlays.length === 0) {
|
|
7
|
+
return null;
|
|
8
|
+
}
|
|
9
|
+
return (jsx(Fragment, { children: overlays.map(function (overlay, index) { return (jsx("div", __assign({ className: "canvas-table-cell-overlay", style: {
|
|
10
|
+
position: "absolute",
|
|
11
|
+
left: overlay.x,
|
|
12
|
+
top: overlay.y,
|
|
13
|
+
width: overlay.width,
|
|
14
|
+
height: overlay.height,
|
|
15
|
+
pointerEvents: "none",
|
|
16
|
+
overflow: "hidden",
|
|
17
|
+
boxSizing: "border-box",
|
|
18
|
+
zIndex: (function () {
|
|
19
|
+
// z-index 优先级:固定行必须有足够高的优先级避免被滚动行覆盖
|
|
20
|
+
if (overlay.isFixedRow && overlay.isFixed)
|
|
21
|
+
return 100; // 固定行固定列(最高优先级)
|
|
22
|
+
if (overlay.isFixedRow && !overlay.isFixed)
|
|
23
|
+
return 90; // 固定行非固定列
|
|
24
|
+
if (!overlay.isFixedRow && overlay.isFixed)
|
|
25
|
+
return 10; // 非固定行固定列
|
|
26
|
+
return 1; // 非固定行非固定列(最低优先级)
|
|
27
|
+
})(), // 根据固定列和固定行设置 z-index
|
|
28
|
+
} }, { children: jsx("div", __assign({ className: "canvas-table-cell-content", style: {
|
|
29
|
+
position: "absolute",
|
|
30
|
+
left: -overlay.offsetLeft + 16,
|
|
31
|
+
top: -overlay.offsetTop,
|
|
32
|
+
width: overlay.originalWidth - 32,
|
|
33
|
+
height: overlay.originalHeight,
|
|
34
|
+
display: "flex",
|
|
35
|
+
alignItems: "center",
|
|
36
|
+
justifyContent: (function () {
|
|
37
|
+
// 根据列的align属性设置对齐方式
|
|
38
|
+
var align = overlay.align || "left";
|
|
39
|
+
if (align === "center")
|
|
40
|
+
return "center";
|
|
41
|
+
if (align === "right")
|
|
42
|
+
return "flex-end";
|
|
43
|
+
return "flex-start"; // left 默认
|
|
44
|
+
})(),
|
|
45
|
+
pointerEvents: "none", // 容器本身不捕获事件,允许框选穿透
|
|
46
|
+
} }, { children: overlay.content })) }), "overlay-".concat(overlay.rowIndex, "-").concat(overlay.colIndex, "-").concat(index))); }) }));
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export { CellOverlay as default };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { memo } from 'react';
|
|
3
|
+
import PicRightOutlined from '../../node_modules/@ant-design/icons/es/icons/PicRightOutlined.js';
|
|
4
|
+
|
|
5
|
+
var ColumnDynamic = function (_a) {
|
|
6
|
+
var dynamicSettingRef = _a.dynamicSettingRef;
|
|
7
|
+
return (jsx(PicRightOutlined, { onClick: function () {
|
|
8
|
+
var _a;
|
|
9
|
+
(_a = dynamicSettingRef === null || dynamicSettingRef === void 0 ? void 0 : dynamicSettingRef.current) === null || _a === void 0 ? void 0 : _a.setVisible(true);
|
|
10
|
+
} }));
|
|
11
|
+
};
|
|
12
|
+
memo(ColumnDynamic);
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { __assign } from '../../_virtual/_tslib.js';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
|
|
4
|
+
var EmptyPlaceholder = function (_a) {
|
|
5
|
+
var visible = _a.visible, text = _a.text, headerHeight = _a.headerHeight;
|
|
6
|
+
if (!visible) {
|
|
7
|
+
return null;
|
|
8
|
+
}
|
|
9
|
+
return (jsx("div", __assign({ className: "canvas-table-empty", style: {
|
|
10
|
+
position: "absolute",
|
|
11
|
+
top: headerHeight,
|
|
12
|
+
left: 0,
|
|
13
|
+
right: 0,
|
|
14
|
+
textAlign: "center",
|
|
15
|
+
padding: "50px 0",
|
|
16
|
+
color: "rgba(0, 0, 0, 0.25)",
|
|
17
|
+
} }, { children: text })));
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export { EmptyPlaceholder as default };
|