@kdcloudjs/table 1.2.0-canary.9 → 1.2.1-canary.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/@kdcloudjs/table.css +1 -1
- package/dist/@kdcloudjs/table.js +589 -89
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +9 -9
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/base/header.d.ts +2 -1
- package/es/table/base/header.js +4 -2
- package/es/table/base/helpers/TableDOMUtils.js +3 -1
- package/es/table/base/helpers/getRichVisibleRectsStream.js +2 -1
- package/es/table/base/html-table.js +1 -1
- package/es/table/base/renderTemplates.js +24 -10
- package/es/table/base/styles.d.ts +7 -0
- package/es/table/base/styles.js +9 -2
- package/es/table/base/table.d.ts +2 -1
- package/es/table/base/table.js +73 -46
- package/es/table/pipeline/features/autoFill.js +3 -1
- package/es/table/pipeline/features/columnDrag.js +11 -7
- package/es/table/pipeline/features/columnFilter.js +1 -1
- package/es/table/pipeline/features/index.d.ts +1 -0
- package/es/table/pipeline/features/index.js +2 -1
- package/es/table/pipeline/features/multiSelect.js +6 -4
- package/es/table/pipeline/features/rangeSelection.js +3 -2
- package/es/table/pipeline/features/rowDrag.d.ts +30 -0
- package/es/table/pipeline/features/rowDrag.js +349 -0
- package/es/table/pipeline/features/singleSelect.js +6 -4
- package/es/table/pipeline/features/treeMode.js +6 -0
- package/es/table/pipeline/pipeline.d.ts +2 -0
- package/es/table/pipeline/pipeline.js +9 -1
- package/es/table/utils/index.d.ts +1 -0
- package/es/table/utils/index.js +2 -1
- package/es/table/utils/selectColumn.d.ts +4 -0
- package/es/table/utils/selectColumn.js +6 -0
- package/lib/table/base/header.d.ts +2 -1
- package/lib/table/base/header.js +4 -2
- package/lib/table/base/helpers/TableDOMUtils.js +3 -1
- package/lib/table/base/helpers/getRichVisibleRectsStream.js +2 -1
- package/lib/table/base/html-table.js +1 -1
- package/lib/table/base/renderTemplates.js +24 -10
- package/lib/table/base/styles.d.ts +7 -0
- package/lib/table/base/styles.js +9 -2
- package/lib/table/base/table.d.ts +2 -1
- package/lib/table/base/table.js +73 -46
- package/lib/table/pipeline/features/autoFill.js +3 -1
- package/lib/table/pipeline/features/columnDrag.js +10 -6
- package/lib/table/pipeline/features/columnFilter.js +1 -1
- package/lib/table/pipeline/features/index.d.ts +1 -0
- package/lib/table/pipeline/features/index.js +9 -1
- package/lib/table/pipeline/features/multiSelect.js +8 -5
- package/lib/table/pipeline/features/rangeSelection.js +3 -2
- package/lib/table/pipeline/features/rowDrag.d.ts +30 -0
- package/lib/table/pipeline/features/rowDrag.js +371 -0
- package/lib/table/pipeline/features/singleSelect.js +8 -5
- package/lib/table/pipeline/features/treeMode.js +6 -0
- package/lib/table/pipeline/pipeline.d.ts +2 -0
- package/lib/table/pipeline/pipeline.js +9 -1
- package/lib/table/utils/index.d.ts +1 -0
- package/lib/table/utils/index.js +21 -1
- package/lib/table/utils/selectColumn.d.ts +4 -0
- package/lib/table/utils/selectColumn.js +16 -0
- package/package.json +1 -1
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
|
|
2
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
2
3
|
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
3
4
|
import _Set from "@babel/runtime-corejs3/core-js-stable/set";
|
|
4
5
|
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
5
6
|
import React from 'react';
|
|
6
7
|
import { internals } from '../../internals';
|
|
7
8
|
import { always, arrayUtils } from '../../utils/others';
|
|
8
|
-
import { collectNodes, mergeCellProps } from '../../utils';
|
|
9
|
+
import { collectNodes, mergeCellProps, MULTI_SELECT_MARK_PROPNAME } from '../../utils';
|
|
9
10
|
var fullRowsSetKey = 'fullRowsSetKey';
|
|
10
11
|
var allEnableKeys = 'allEnableKeys';
|
|
11
12
|
var selectValueSetKey = 'selectValueSetKey';
|
|
12
13
|
export function multiSelect() {
|
|
13
14
|
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
14
15
|
return function multiSelectStep(pipeline) {
|
|
15
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
16
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
16
17
|
|
|
17
18
|
var stateKey = 'multiSelect';
|
|
18
19
|
var Checkbox = pipeline.ctx.components.Checkbox;
|
|
@@ -150,12 +151,13 @@ export function multiSelect() {
|
|
|
150
151
|
}
|
|
151
152
|
} : undefined
|
|
152
153
|
});
|
|
153
|
-
}
|
|
154
|
+
},
|
|
155
|
+
features: _extends(_extends({}, (_l = opts.checkboxColumn) === null || _l === void 0 ? void 0 : _l.features), _defineProperty({}, MULTI_SELECT_MARK_PROPNAME, true))
|
|
154
156
|
});
|
|
155
157
|
|
|
156
158
|
var nextColumns = _sliceInstanceProperty(_context = pipeline.getColumns()).call(_context);
|
|
157
159
|
|
|
158
|
-
var checkboxPlacement = (
|
|
160
|
+
var checkboxPlacement = (_m = opts.checkboxPlacement) !== null && _m !== void 0 ? _m : 'start';
|
|
159
161
|
|
|
160
162
|
if (checkboxPlacement === 'start') {
|
|
161
163
|
nextColumns.unshift(checkboxColumn);
|
|
@@ -145,7 +145,9 @@ export function rangeSelection(opts) {
|
|
|
145
145
|
|
|
146
146
|
var isCtrlKey = mouseDownEvent.ctrlKey || mouseDownEvent.metaKey;
|
|
147
147
|
var isShiftKey = mouseDownEvent.shiftKey;
|
|
148
|
-
var target = mouseDownEvent.target;
|
|
148
|
+
var target = mouseDownEvent.target;
|
|
149
|
+
var startDragCell = getTargetCell(target, columns);
|
|
150
|
+
if (!startDragCell) return; // 每次点击时先确认初始生效的框选范围
|
|
149
151
|
|
|
150
152
|
setStartSelectedCellRanges(isCtrlKey, isShiftKey);
|
|
151
153
|
|
|
@@ -154,7 +156,6 @@ export function rangeSelection(opts) {
|
|
|
154
156
|
return;
|
|
155
157
|
}
|
|
156
158
|
|
|
157
|
-
var startDragCell = getTargetCell(target, columns);
|
|
158
159
|
pipeline.setFeatureOptions(lastClickCellKey, startDragCell);
|
|
159
160
|
var draggingCell = startDragCell;
|
|
160
161
|
var mousemove$ = fromEvent(window, 'mousemove');
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { TablePipeline } from '../pipeline';
|
|
2
|
+
import { ArtColumn } from '../../interfaces';
|
|
3
|
+
interface RowDragEvent {
|
|
4
|
+
startRowIndex: number;
|
|
5
|
+
startRow: any;
|
|
6
|
+
endRowIndex: number;
|
|
7
|
+
endRow: any;
|
|
8
|
+
isFinished: boolean;
|
|
9
|
+
dragPosition: string;
|
|
10
|
+
}
|
|
11
|
+
export interface RowDragFeatureOptions {
|
|
12
|
+
/** 拖拽开始事件 */
|
|
13
|
+
onDragStart?: (event: RowDragEvent) => void;
|
|
14
|
+
/** 拖拽移动事件 */
|
|
15
|
+
onDragMove?: (event: RowDragEvent) => void;
|
|
16
|
+
/** 拖拽结束事件 */
|
|
17
|
+
onDragEnd?: (event: RowDragEvent) => void;
|
|
18
|
+
/** 判断一行是否要禁用拖拽 */
|
|
19
|
+
isDisabled?: (row: any, rowIndex: number) => boolean;
|
|
20
|
+
/** 拖拽列定义 */
|
|
21
|
+
rowDragColumn?: ArtColumn;
|
|
22
|
+
/** 行高 */
|
|
23
|
+
rowHeight?: number;
|
|
24
|
+
/** 拖拽过程中是否禁止滚动条滚动 */
|
|
25
|
+
suppressScrollMove?: boolean;
|
|
26
|
+
}
|
|
27
|
+
export declare const ROW_DRAG_COLUMN_CODE = "$_row_drag_column_&";
|
|
28
|
+
export declare const rowDragKey = "rowDragKey";
|
|
29
|
+
export declare function rowDrag(opt: RowDragFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
|
|
30
|
+
export {};
|
|
@@ -0,0 +1,349 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
2
|
+
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
3
|
+
import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { fromEvent } from 'rxjs';
|
|
6
|
+
import { map, takeUntil } from 'rxjs/operators';
|
|
7
|
+
import cx from 'classnames';
|
|
8
|
+
import { Classes } from '../../base/styles';
|
|
9
|
+
export var ROW_DRAG_COLUMN_CODE = '$_row_drag_column_&';
|
|
10
|
+
export var rowDragKey = 'rowDragKey';
|
|
11
|
+
var SCROLL_OFFSET = 30;
|
|
12
|
+
var defaultRowDragColumn = {
|
|
13
|
+
name: '拖拽列',
|
|
14
|
+
code: ROW_DRAG_COLUMN_CODE,
|
|
15
|
+
lock: true,
|
|
16
|
+
title: '',
|
|
17
|
+
width: 40,
|
|
18
|
+
align: 'center',
|
|
19
|
+
getCellProps: function getCellProps(value, row, rowIndex) {
|
|
20
|
+
return {
|
|
21
|
+
className: cx(Classes.rowDragCell)
|
|
22
|
+
};
|
|
23
|
+
},
|
|
24
|
+
render: function render(value, row, rowIndex) {
|
|
25
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
26
|
+
viewBox: '0 0 1024 1024',
|
|
27
|
+
version: '1.1',
|
|
28
|
+
xmlns: 'http://www.w3.org/1999/xlink',
|
|
29
|
+
"data-icon": 'drag',
|
|
30
|
+
width: '16',
|
|
31
|
+
height: '16'
|
|
32
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
33
|
+
d: 'M298.688 192a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0zM298.688 512a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m-298.624 320a64 64 0 1 0 128 0 64 64 0 0 0-128 0z m298.624 0a64 64 0 1 0 128 0 64 64 0 0 0-128 0z',
|
|
34
|
+
"p-id": '4278'
|
|
35
|
+
}));
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
export function rowDrag(opt) {
|
|
39
|
+
return function rowDragStep(pipeline) {
|
|
40
|
+
var _context;
|
|
41
|
+
|
|
42
|
+
var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
|
|
43
|
+
var artTable = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.artTable;
|
|
44
|
+
if (!tableBody) return pipeline;
|
|
45
|
+
var dataSource = pipeline.getDataSource();
|
|
46
|
+
var rowHeight = (opt === null || opt === void 0 ? void 0 : opt.rowHeight) || 48;
|
|
47
|
+
|
|
48
|
+
var handleDragStrat = function handleDragStrat(event) {
|
|
49
|
+
var _a; // 开始拖拽
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
artTable.classList.add(cx(Classes.rowDragging));
|
|
53
|
+
(_a = opt === null || opt === void 0 ? void 0 : opt.onDragStart) === null || _a === void 0 ? void 0 : _a.call(opt, event);
|
|
54
|
+
};
|
|
55
|
+
|
|
56
|
+
var handleDragMove = function handleDragMove(event) {
|
|
57
|
+
var _a;
|
|
58
|
+
|
|
59
|
+
(_a = opt === null || opt === void 0 ? void 0 : opt.onDragMove) === null || _a === void 0 ? void 0 : _a.call(opt, event);
|
|
60
|
+
pipeline.setStateAtKey(rowDragKey, event);
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
var handleDragEnd = function handleDragEnd(event, isOutOfRange) {
|
|
64
|
+
var _a;
|
|
65
|
+
|
|
66
|
+
artTable.classList.remove(cx(Classes.rowDragging));
|
|
67
|
+
pipeline.setStateAtKey(rowDragKey, event); // 超出拖拽范围不触发dragend事件
|
|
68
|
+
|
|
69
|
+
if (!isOutOfRange) {
|
|
70
|
+
(_a = opt === null || opt === void 0 ? void 0 : opt.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(opt, event);
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
var getDragEvent = function getDragEvent(startRowInfo, endRowInfo, _ref) {
|
|
75
|
+
var isFinished = _ref.isFinished,
|
|
76
|
+
_ref$dragPosition = _ref.dragPosition,
|
|
77
|
+
dragPosition = _ref$dragPosition === void 0 ? 'bottom' : _ref$dragPosition;
|
|
78
|
+
return {
|
|
79
|
+
startRowIndex: startRowInfo.rowIndex,
|
|
80
|
+
startRow: startRowInfo.row,
|
|
81
|
+
endRowIndex: endRowInfo.rowIndex,
|
|
82
|
+
endRow: endRowInfo.row,
|
|
83
|
+
dragPosition: dragPosition,
|
|
84
|
+
isFinished: isFinished
|
|
85
|
+
};
|
|
86
|
+
};
|
|
87
|
+
|
|
88
|
+
var updateScrollPosition = function updateScrollPosition(mouseMoveEvent) {
|
|
89
|
+
if (opt === null || opt === void 0 ? void 0 : opt.suppressScrollMove) return;
|
|
90
|
+
var clientY = mouseMoveEvent.clientY;
|
|
91
|
+
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
92
|
+
var top = tableBodyClientRect.top,
|
|
93
|
+
height = tableBodyClientRect.height;
|
|
94
|
+
|
|
95
|
+
if (clientY + SCROLL_OFFSET >= top + height) {
|
|
96
|
+
pipeline.ref.current.domHelper.tableBody.scrollTop += SCROLL_OFFSET;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
if (clientY + SCROLL_OFFSET <= top) {
|
|
100
|
+
pipeline.ref.current.domHelper.tableBody.scrollTop -= SCROLL_OFFSET;
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
var onMouseDown = function onMouseDown(mouseDownEvent) {
|
|
105
|
+
var _a;
|
|
106
|
+
|
|
107
|
+
var startRowInfo = getTargetRowInfo(mouseDownEvent.target, tableBody, dataSource);
|
|
108
|
+
var endRowInfo = startRowInfo;
|
|
109
|
+
if (!startRowInfo || startRowInfo.code !== rowDragColumn.code) return;
|
|
110
|
+
if ((_a = opt === null || opt === void 0 ? void 0 : opt.isDisabled) === null || _a === void 0 ? void 0 : _a.call(opt, startRowInfo.row, startRowInfo.rowIndex)) return; // 默认拖拽插入的位置是向下
|
|
111
|
+
|
|
112
|
+
var dragPosition = 'bottom';
|
|
113
|
+
var isOutOfRange = false;
|
|
114
|
+
var dragStartEvent = getDragEvent(startRowInfo, endRowInfo, {
|
|
115
|
+
isFinished: false,
|
|
116
|
+
dragPosition: 'bottom'
|
|
117
|
+
});
|
|
118
|
+
handleDragStrat(dragStartEvent);
|
|
119
|
+
var tableWidth = tableBody.clientWidth;
|
|
120
|
+
var startRowRects = startRowInfo.cell.getBoundingClientRect(); // 光标位置距离初始拖拽行的偏移量
|
|
121
|
+
|
|
122
|
+
var startOffset = mouseDownEvent.clientY - startRowRects.top;
|
|
123
|
+
var dragElement = createDragElement(startRowRects, tableWidth, rowHeight); // 可拖拽的范围
|
|
124
|
+
|
|
125
|
+
var dragRange = getDragRange(tableBody, {
|
|
126
|
+
startOffset: startOffset,
|
|
127
|
+
rowHeight: rowHeight
|
|
128
|
+
});
|
|
129
|
+
var mousePosition = {
|
|
130
|
+
x: mouseDownEvent.clientX,
|
|
131
|
+
y: mouseDownEvent.clientY
|
|
132
|
+
};
|
|
133
|
+
var mousemove$ = fromEvent(window, 'mousemove');
|
|
134
|
+
var mouseup$ = fromEvent(window, 'mouseup');
|
|
135
|
+
|
|
136
|
+
var scrollCallback = function scrollCallback(event) {
|
|
137
|
+
// 在当前表格内滚动不处理
|
|
138
|
+
if (event.target === tableBody) return;
|
|
139
|
+
dragRange = getDragRange(tableBody, {
|
|
140
|
+
startOffset: startOffset,
|
|
141
|
+
rowHeight: rowHeight
|
|
142
|
+
});
|
|
143
|
+
var isOutOfRange = isOutOfDragRange(mousePosition, dragRange);
|
|
144
|
+
updateCurSorStyle(isOutOfRange);
|
|
145
|
+
};
|
|
146
|
+
|
|
147
|
+
document.addEventListener('scroll', scrollCallback, true);
|
|
148
|
+
var rowDrag$ = mousemove$.pipe(map(function (mouseMoveEvent) {
|
|
149
|
+
var clientX = mouseMoveEvent.clientX,
|
|
150
|
+
clientY = mouseMoveEvent.clientY;
|
|
151
|
+
var tagretRow = getTargetRowInfo(mouseMoveEvent.target, tableBody, dataSource);
|
|
152
|
+
|
|
153
|
+
if (tagretRow) {
|
|
154
|
+
endRowInfo = tagretRow;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
var targetRowRects = endRowInfo.cell.getBoundingClientRect(); // 判断拖拽插入的位置,拖拽框上边框位于目标行之上则向上插入,否则向下插入
|
|
158
|
+
|
|
159
|
+
var isMoveToTop = clientY - startOffset < targetRowRects.top;
|
|
160
|
+
dragPosition = isMoveToTop ? 'top' : 'bottom';
|
|
161
|
+
isOutOfRange = isOutOfDragRange({
|
|
162
|
+
x: clientX,
|
|
163
|
+
y: clientY
|
|
164
|
+
}, dragRange);
|
|
165
|
+
mousePosition = {
|
|
166
|
+
x: clientX,
|
|
167
|
+
y: clientY
|
|
168
|
+
};
|
|
169
|
+
updateScrollPosition(mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
|
|
170
|
+
|
|
171
|
+
updateDragElementPosition(dragElement, dragRange, {
|
|
172
|
+
x: clientX,
|
|
173
|
+
y: clientY,
|
|
174
|
+
startOffset: startOffset
|
|
175
|
+
});
|
|
176
|
+
updateCurSorStyle(isOutOfRange);
|
|
177
|
+
return {
|
|
178
|
+
startRowInfo: startRowInfo,
|
|
179
|
+
endRowInfo: endRowInfo,
|
|
180
|
+
dragPosition: dragPosition
|
|
181
|
+
};
|
|
182
|
+
}), takeUntil(mouseup$));
|
|
183
|
+
rowDrag$.subscribe({
|
|
184
|
+
next: function next(_ref2) {
|
|
185
|
+
var startRowInfo = _ref2.startRowInfo,
|
|
186
|
+
endRowInfo = _ref2.endRowInfo,
|
|
187
|
+
dragPosition = _ref2.dragPosition;
|
|
188
|
+
var dragMoveEvent = getDragEvent(startRowInfo, endRowInfo, {
|
|
189
|
+
isFinished: false,
|
|
190
|
+
dragPosition: dragPosition
|
|
191
|
+
});
|
|
192
|
+
handleDragMove(dragMoveEvent);
|
|
193
|
+
},
|
|
194
|
+
complete: function complete() {
|
|
195
|
+
var dragEndEvent = getDragEvent(startRowInfo, endRowInfo, {
|
|
196
|
+
isFinished: true,
|
|
197
|
+
dragPosition: dragPosition
|
|
198
|
+
});
|
|
199
|
+
handleDragEnd(dragEndEvent, isOutOfRange);
|
|
200
|
+
removeDragElement(dragElement);
|
|
201
|
+
removeCurSorStyle();
|
|
202
|
+
document.removeEventListener('scroll', scrollCallback, true);
|
|
203
|
+
}
|
|
204
|
+
});
|
|
205
|
+
};
|
|
206
|
+
|
|
207
|
+
var rowDragColumn = (opt === null || opt === void 0 ? void 0 : opt.rowDragColumn) || defaultRowDragColumn;
|
|
208
|
+
pipeline.setFeatureOptions('rowDragColumnKey', rowDragColumn.code);
|
|
209
|
+
|
|
210
|
+
var nextColumns = _sliceInstanceProperty(_context = pipeline.getColumns()).call(_context);
|
|
211
|
+
|
|
212
|
+
nextColumns.unshift(rowDragColumn);
|
|
213
|
+
pipeline.columns(nextColumns);
|
|
214
|
+
pipeline.addTableProps({
|
|
215
|
+
onMouseDown: onMouseDown
|
|
216
|
+
});
|
|
217
|
+
pipeline.appendRowPropsGetter(function (row, rowIndex) {
|
|
218
|
+
var _cx;
|
|
219
|
+
|
|
220
|
+
var rowDragEvent = pipeline.getStateAtKey(rowDragKey) || {};
|
|
221
|
+
var startRowIndex = rowDragEvent.startRowIndex,
|
|
222
|
+
endRowIndex = rowDragEvent.endRowIndex,
|
|
223
|
+
isFinished = rowDragEvent.isFinished,
|
|
224
|
+
dragPosition = rowDragEvent.dragPosition;
|
|
225
|
+
var isFooterCell = row[pipeline.getFeatureOptions('footerRowMetaKey')];
|
|
226
|
+
if (isFooterCell || isFinished || rowIndex !== startRowIndex && rowIndex !== endRowIndex) return;
|
|
227
|
+
var className = cx((_cx = {}, _defineProperty(_cx, Classes.rowDragStart, rowIndex === startRowIndex), _defineProperty(_cx, Classes.rowDragEnd, rowIndex === endRowIndex), _defineProperty(_cx, Classes.rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), _defineProperty(_cx, Classes.rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'), _cx));
|
|
228
|
+
return {
|
|
229
|
+
className: className
|
|
230
|
+
};
|
|
231
|
+
});
|
|
232
|
+
return pipeline;
|
|
233
|
+
};
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
function getTargetRowInfo(target, tableBody, record) {
|
|
237
|
+
while (target && tableBody.contains(target)) {
|
|
238
|
+
if (target.getAttribute('data-role') === 'table-cell') {
|
|
239
|
+
var code = target.getAttribute('data-code');
|
|
240
|
+
var rowIndex = parseInt(target.getAttribute('data-rowindex'));
|
|
241
|
+
var row = record[rowIndex];
|
|
242
|
+
var isFooterCell = isEleInFooter(target);
|
|
243
|
+
if (!row || isFooterCell) return null;
|
|
244
|
+
return {
|
|
245
|
+
rowIndex: rowIndex,
|
|
246
|
+
row: row,
|
|
247
|
+
code: code,
|
|
248
|
+
cell: target
|
|
249
|
+
};
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
target = target.parentElement;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
return null;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
function isEleInFooter(target) {
|
|
259
|
+
while (target && !target.classList.contains(Classes.artTable)) {
|
|
260
|
+
if (target.classList.contains(Classes.tableFooter)) {
|
|
261
|
+
return true;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
target = target.parentElement;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
return false;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
function createDragElement(rects, tableWidth, rowHeight) {
|
|
271
|
+
var _context2, _context3, _context4;
|
|
272
|
+
|
|
273
|
+
var x = rects.x,
|
|
274
|
+
y = rects.y;
|
|
275
|
+
var dragMoveElement = document.createElement('div');
|
|
276
|
+
dragMoveElement.className = cx(Classes.rowDragElement);
|
|
277
|
+
dragMoveElement.style.cssText = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "position:fixed;z-index:9999;left:".concat(x, "px;top:")).call(_context4, y, "px;pointer-events:none;width:")).call(_context3, tableWidth, "px;height:")).call(_context2, rowHeight, "px;background:var(--primary-color);opacity: 0.1;");
|
|
278
|
+
document.body.appendChild(dragMoveElement);
|
|
279
|
+
return dragMoveElement;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
function updateDragElementPosition(element, dragRange, _ref3) {
|
|
283
|
+
var x = _ref3.x,
|
|
284
|
+
y = _ref3.y,
|
|
285
|
+
startOffset = _ref3.startOffset;
|
|
286
|
+
var validPosition = getValidPosition({
|
|
287
|
+
x: x,
|
|
288
|
+
y: y
|
|
289
|
+
}, dragRange);
|
|
290
|
+
element.style.top = validPosition.y - startOffset + 'px';
|
|
291
|
+
return element;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
function removeDragElement(element) {
|
|
295
|
+
document.body.removeChild(element);
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
function updateCurSorStyle(isOutOfRange) {
|
|
299
|
+
if (isOutOfRange) {
|
|
300
|
+
document.body.style.cursor = 'no-drop';
|
|
301
|
+
} else {
|
|
302
|
+
document.body.style.cursor = 'move';
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
function removeCurSorStyle() {
|
|
307
|
+
document.body.style.cursor = 'default';
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
function getDragRange(tableBody, _ref4) {
|
|
311
|
+
var startOffset = _ref4.startOffset,
|
|
312
|
+
rowHeight = _ref4.rowHeight;
|
|
313
|
+
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
314
|
+
var height = tableBodyClientRect.height,
|
|
315
|
+
width = tableBodyClientRect.width,
|
|
316
|
+
top = tableBodyClientRect.top,
|
|
317
|
+
left = tableBodyClientRect.left;
|
|
318
|
+
return {
|
|
319
|
+
minX: left,
|
|
320
|
+
maxX: left + width,
|
|
321
|
+
minY: top - rowHeight + startOffset,
|
|
322
|
+
maxY: top + height + startOffset
|
|
323
|
+
};
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
function getValidPosition(position, dragRange) {
|
|
327
|
+
var x = position.x,
|
|
328
|
+
y = position.y;
|
|
329
|
+
var minX = dragRange.minX,
|
|
330
|
+
maxX = dragRange.maxX,
|
|
331
|
+
minY = dragRange.minY,
|
|
332
|
+
maxY = dragRange.maxY;
|
|
333
|
+
var newX = x < minX ? minX : x > maxX ? maxX : x;
|
|
334
|
+
var newY = y < minY ? minY : y > maxY ? maxY : y;
|
|
335
|
+
return {
|
|
336
|
+
x: newX,
|
|
337
|
+
y: newY
|
|
338
|
+
};
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
function isOutOfDragRange(position, dragRange) {
|
|
342
|
+
var x = position.x,
|
|
343
|
+
y = position.y;
|
|
344
|
+
var minX = dragRange.minX,
|
|
345
|
+
maxX = dragRange.maxX,
|
|
346
|
+
minY = dragRange.minY,
|
|
347
|
+
maxY = dragRange.maxY;
|
|
348
|
+
return x > maxX || x < minX || y > maxY || y < minY;
|
|
349
|
+
}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
|
|
1
2
|
import _extends from "@babel/runtime-corejs3/helpers/extends";
|
|
2
3
|
import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
|
|
3
4
|
import React from 'react';
|
|
4
5
|
import { internals } from '../../internals';
|
|
5
6
|
import { always } from '../../utils/others';
|
|
6
|
-
import { mergeCellProps } from '../../utils';
|
|
7
|
+
import { mergeCellProps, SINGLE_SELECT_MARK_PROPNAME } from '../../utils';
|
|
7
8
|
export function singleSelect() {
|
|
8
9
|
var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
9
10
|
return function singleSelectStep(pipeline) {
|
|
10
11
|
var _context;
|
|
11
12
|
|
|
12
|
-
var _a, _b, _c, _d, _e;
|
|
13
|
+
var _a, _b, _c, _d, _e, _f;
|
|
13
14
|
|
|
14
15
|
var Radio = pipeline.ctx.components.Radio;
|
|
15
16
|
|
|
@@ -80,12 +81,13 @@ export function singleSelect() {
|
|
|
80
81
|
onChange(rowKey);
|
|
81
82
|
} : undefined
|
|
82
83
|
});
|
|
83
|
-
}
|
|
84
|
+
},
|
|
85
|
+
features: _extends(_extends({}, (_e = opts.radioColumn) === null || _e === void 0 ? void 0 : _e.features), _defineProperty({}, SINGLE_SELECT_MARK_PROPNAME, true))
|
|
84
86
|
});
|
|
85
87
|
|
|
86
88
|
var nextColumns = _sliceInstanceProperty(_context = pipeline.getColumns()).call(_context);
|
|
87
89
|
|
|
88
|
-
var radioPlacement = (
|
|
90
|
+
var radioPlacement = (_f = opts.radioPlacement) !== null && _f !== void 0 ? _f : 'start';
|
|
89
91
|
|
|
90
92
|
if (radioPlacement === 'start') {
|
|
91
93
|
nextColumns.unshift(radioColumn);
|
|
@@ -71,6 +71,11 @@ export function treeMode() {
|
|
|
71
71
|
return pipeline.mapDataSource(processDataSource).mapColumns(processColumns);
|
|
72
72
|
|
|
73
73
|
function processDataSource(input) {
|
|
74
|
+
if (pipeline.isSameInputDataSource() && openKeys === pipeline.getFeatureOptions('lastOpenKeys')) {
|
|
75
|
+
return pipeline.getFeatureOptions('lastTreeMode');
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
pipeline.setFeatureOptions('lastOpenKeys', pipeline.getStateAtKey(stateKey));
|
|
74
79
|
var result = [];
|
|
75
80
|
dfs(input, 0);
|
|
76
81
|
|
|
@@ -111,6 +116,7 @@ export function treeMode() {
|
|
|
111
116
|
}
|
|
112
117
|
}
|
|
113
118
|
|
|
119
|
+
pipeline.setFeatureOptions('lastTreeMode', result);
|
|
114
120
|
return result;
|
|
115
121
|
}
|
|
116
122
|
|
|
@@ -35,6 +35,7 @@ export declare class TablePipeline {
|
|
|
35
35
|
private readonly _rowPropsGetters;
|
|
36
36
|
private _tableProps;
|
|
37
37
|
private _dataSource;
|
|
38
|
+
private _isSameInputDataSource;
|
|
38
39
|
private _columns;
|
|
39
40
|
private _footerDataSource?;
|
|
40
41
|
static defaultIndents: TablePipelineIndentsConfig;
|
|
@@ -51,6 +52,7 @@ export declare class TablePipeline {
|
|
|
51
52
|
appendRowPropsGetter(getter: RowPropsGetter): this;
|
|
52
53
|
addTableProps(props: React.HTMLAttributes<HTMLTableElement>): void;
|
|
53
54
|
getDataSource(name?: string): any[];
|
|
55
|
+
isSameInputDataSource(): boolean;
|
|
54
56
|
getColumns(name?: string): any[];
|
|
55
57
|
getFooterDataSource(): any[];
|
|
56
58
|
getStateAtKey<T = any>(stateKey: string, defaultValue?: T): T;
|
|
@@ -76,6 +76,11 @@ export var TablePipeline = /*#__PURE__*/function () {
|
|
|
76
76
|
return this._snapshots[name].dataSource;
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
|
+
}, {
|
|
80
|
+
key: "isSameInputDataSource",
|
|
81
|
+
value: function isSameInputDataSource() {
|
|
82
|
+
return this._isSameInputDataSource;
|
|
83
|
+
}
|
|
79
84
|
}, {
|
|
80
85
|
key: "getColumns",
|
|
81
86
|
value: function getColumns(name) {
|
|
@@ -127,9 +132,12 @@ export var TablePipeline = /*#__PURE__*/function () {
|
|
|
127
132
|
|
|
128
133
|
if (this._dataSource != null || this._columns != null) {
|
|
129
134
|
throw new Error('input 不能调用两次');
|
|
130
|
-
}
|
|
135
|
+
} // 在 pipeline 中识别本次更新是否有数据变化
|
|
136
|
+
|
|
131
137
|
|
|
138
|
+
this._isSameInputDataSource = _input.dataSource === this.ref.current._lastInputDataSource;
|
|
132
139
|
this._dataSource = _input.dataSource;
|
|
140
|
+
this.ref.current._lastInputDataSource = _input.dataSource;
|
|
133
141
|
this._columns = _mapInstanceProperty(_context = _input.columns).call(_context, function (col) {
|
|
134
142
|
return _extends(_extends({}, col), {
|
|
135
143
|
key: _this.guid()
|
|
@@ -17,3 +17,4 @@ export { default as layeredFilter } from './layeredFilter';
|
|
|
17
17
|
export { getEventPath, isElementInEventPath, getTargetEleInEventPath, calculatePointerRelative, calculatePopupRelative, keepWithinBounds } from './element';
|
|
18
18
|
export { default as console } from './console';
|
|
19
19
|
export { browserType } from './browserType';
|
|
20
|
+
export { MULTI_SELECT_MARK_PROPNAME, SINGLE_SELECT_MARK_PROPNAME, isSelectColumn } from './selectColumn';
|
package/es/table/utils/index.js
CHANGED
|
@@ -16,4 +16,5 @@ export { copyDataToClipboard, executeOnTempElement } from './copyToClipboard';
|
|
|
16
16
|
export { default as layeredFilter } from './layeredFilter';
|
|
17
17
|
export { getEventPath, isElementInEventPath, getTargetEleInEventPath, calculatePointerRelative, calculatePopupRelative, keepWithinBounds } from './element';
|
|
18
18
|
export { default as console } from './console';
|
|
19
|
-
export { browserType } from './browserType';
|
|
19
|
+
export { browserType } from './browserType';
|
|
20
|
+
export { MULTI_SELECT_MARK_PROPNAME, SINGLE_SELECT_MARK_PROPNAME, isSelectColumn } from './selectColumn';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export var MULTI_SELECT_MARK_PROPNAME = 'checkboxSelection';
|
|
2
|
+
export var SINGLE_SELECT_MARK_PROPNAME = 'radioSelection';
|
|
3
|
+
export function isSelectColumn(column) {
|
|
4
|
+
var features = column.features || {};
|
|
5
|
+
return features[MULTI_SELECT_MARK_PROPNAME] === true || features[SINGLE_SELECT_MARK_PROPNAME] === true;
|
|
6
|
+
}
|
|
@@ -4,6 +4,7 @@ interface TableHeaderProps {
|
|
|
4
4
|
info: RenderInfo;
|
|
5
5
|
theaderPosition?: 'left' | 'center' | 'right';
|
|
6
6
|
rowCount?: number;
|
|
7
|
+
stickyRightOffset?: number;
|
|
7
8
|
}
|
|
8
|
-
export default function TableHeader({ info, theaderPosition, rowCount: _rowCount }: TableHeaderProps): JSX.Element;
|
|
9
|
+
export default function TableHeader({ info, theaderPosition, rowCount: _rowCount, stickyRightOffset }: TableHeaderProps): JSX.Element;
|
|
9
10
|
export {};
|
package/lib/table/base/header.js
CHANGED
|
@@ -249,7 +249,8 @@ function TableHeader(_ref2) {
|
|
|
249
249
|
|
|
250
250
|
var info = _ref2.info,
|
|
251
251
|
theaderPosition = _ref2.theaderPosition,
|
|
252
|
-
_rowCount = _ref2.rowCount
|
|
252
|
+
_rowCount = _ref2.rowCount,
|
|
253
|
+
stickyRightOffset = _ref2.stickyRightOffset;
|
|
253
254
|
var nested = info.nested,
|
|
254
255
|
flat = (0, _flat.default)(info),
|
|
255
256
|
stickyLeftMap = info.stickyLeftMap,
|
|
@@ -293,7 +294,8 @@ function TableHeader(_ref2) {
|
|
|
293
294
|
positionStyle.left = stickyLeftMap.get(colIndex);
|
|
294
295
|
} else if (colIndex >= fullFlatCount - rightFlatCount) {
|
|
295
296
|
positionStyle.position = 'sticky';
|
|
296
|
-
|
|
297
|
+
var stickyRightIndex = colSpan > 1 ? colIndex + colSpan - 1 : colIndex;
|
|
298
|
+
positionStyle.right = stickyRightMap.get(stickyRightIndex) + stickyRightOffset;
|
|
297
299
|
}
|
|
298
300
|
|
|
299
301
|
var justifyContent = col.align === 'right' ? 'flex-end' : col.align === 'center' ? 'center' : 'flex-start';
|
|
@@ -107,7 +107,9 @@ var TableDOMHelper = /*#__PURE__*/function () {
|
|
|
107
107
|
this.tableFooter = this.artTable.querySelector(".".concat(_styles.Classes.tableFooter));
|
|
108
108
|
this.tableFooterMain = this.artTable.querySelector(".".concat(_styles.Classes.tableFooterMain));
|
|
109
109
|
var stickyScrollSelector = (0, _concat.default)(_context2 = (0, _concat.default)(_context3 = ".".concat(_styles.Classes.artTable, " + .")).call(_context3, _styles.Classes.horizontalStickyScrollContainer, " .")).call(_context2, _styles.Classes.stickyScroll);
|
|
110
|
-
|
|
110
|
+
var stickyScrolls = artTableWrapper.querySelectorAll(stickyScrollSelector);
|
|
111
|
+
this.stickyScroll = stickyScrolls[stickyScrolls.length - 1]; // 当嵌套多层表格时,需要查找最后一个,否则会查找到父表格内嵌套的子表格的
|
|
112
|
+
|
|
111
113
|
this.stickyScrollItem = this.stickyScroll.querySelector(".".concat(_styles.Classes.stickyScrollItem));
|
|
112
114
|
}
|
|
113
115
|
|
|
@@ -194,7 +194,8 @@ function getScrollParent(elem) {
|
|
|
194
194
|
|
|
195
195
|
|
|
196
196
|
function getRichVisibleRectsStream(target, structureMayChange$, virtualDebugLabel) {
|
|
197
|
-
return structureMayChange$.pipe(op.
|
|
197
|
+
return structureMayChange$.pipe(op.mapTo(target), op.distinctUntilChanged(_utils.shallowEqual), // 当target没有发生变化时,无需重新查找
|
|
198
|
+
op.startWith('init'), op.map(function () {
|
|
198
199
|
// target 的第一个滚动父元素,我们认为这就是虚拟滚动发生的地方
|
|
199
200
|
// 即虚拟滚动不考虑「更上层元素发生滚动」的情况
|
|
200
201
|
// 直接从父元素开始查找,防止自身设置overflow属性导致是同一个元素
|
|
@@ -141,7 +141,7 @@ function HtmlTable(_ref) {
|
|
|
141
141
|
positionStyle.left = hozInfo.stickyLeftMap.get(colIndex);
|
|
142
142
|
} else if (colIndex >= fullFlatCount - rightFlatCount) {
|
|
143
143
|
positionStyle.position = 'sticky';
|
|
144
|
-
positionStyle.right = hozInfo.stickyRightMap.get(colIndex)
|
|
144
|
+
positionStyle.right = hozInfo.stickyRightMap.get(colIndex) + (typeof stickyRightOffset === 'number' ? stickyRightOffset : 0);
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
return /*#__PURE__*/_react.default.createElement('td', (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
|