@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
|
@@ -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,371 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _mapInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/map");
|
|
4
|
+
|
|
5
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
|
6
|
+
|
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
|
8
|
+
value: true
|
|
9
|
+
});
|
|
10
|
+
exports.ROW_DRAG_COLUMN_CODE = void 0;
|
|
11
|
+
exports.rowDrag = rowDrag;
|
|
12
|
+
exports.rowDragKey = void 0;
|
|
13
|
+
|
|
14
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
15
|
+
|
|
16
|
+
var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
|
|
17
|
+
|
|
18
|
+
var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
|
|
19
|
+
|
|
20
|
+
var _react = _interopRequireDefault(require("react"));
|
|
21
|
+
|
|
22
|
+
var _rxjs = require("rxjs");
|
|
23
|
+
|
|
24
|
+
var _operators = require("rxjs/operators");
|
|
25
|
+
|
|
26
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
27
|
+
|
|
28
|
+
var _styles = require("../../base/styles");
|
|
29
|
+
|
|
30
|
+
var ROW_DRAG_COLUMN_CODE = '$_row_drag_column_&';
|
|
31
|
+
exports.ROW_DRAG_COLUMN_CODE = ROW_DRAG_COLUMN_CODE;
|
|
32
|
+
var rowDragKey = 'rowDragKey';
|
|
33
|
+
exports.rowDragKey = rowDragKey;
|
|
34
|
+
var SCROLL_OFFSET = 30;
|
|
35
|
+
var defaultRowDragColumn = {
|
|
36
|
+
name: '拖拽列',
|
|
37
|
+
code: ROW_DRAG_COLUMN_CODE,
|
|
38
|
+
lock: true,
|
|
39
|
+
title: '',
|
|
40
|
+
width: 40,
|
|
41
|
+
align: 'center',
|
|
42
|
+
getCellProps: function getCellProps(value, row, rowIndex) {
|
|
43
|
+
return {
|
|
44
|
+
className: (0, _classnames.default)(_styles.Classes.rowDragCell)
|
|
45
|
+
};
|
|
46
|
+
},
|
|
47
|
+
render: function render(value, row, rowIndex) {
|
|
48
|
+
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
49
|
+
viewBox: '0 0 1024 1024',
|
|
50
|
+
version: '1.1',
|
|
51
|
+
xmlns: 'http://www.w3.org/1999/xlink',
|
|
52
|
+
"data-icon": 'drag',
|
|
53
|
+
width: '16',
|
|
54
|
+
height: '16'
|
|
55
|
+
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
56
|
+
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',
|
|
57
|
+
"p-id": '4278'
|
|
58
|
+
}));
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
function rowDrag(opt) {
|
|
63
|
+
return function rowDragStep(pipeline) {
|
|
64
|
+
var _context;
|
|
65
|
+
|
|
66
|
+
var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
|
|
67
|
+
var artTable = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.artTable;
|
|
68
|
+
if (!tableBody) return pipeline;
|
|
69
|
+
var dataSource = pipeline.getDataSource();
|
|
70
|
+
var rowHeight = (opt === null || opt === void 0 ? void 0 : opt.rowHeight) || 48;
|
|
71
|
+
|
|
72
|
+
var handleDragStrat = function handleDragStrat(event) {
|
|
73
|
+
var _a; // 开始拖拽
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
artTable.classList.add((0, _classnames.default)(_styles.Classes.rowDragging));
|
|
77
|
+
(_a = opt === null || opt === void 0 ? void 0 : opt.onDragStart) === null || _a === void 0 ? void 0 : _a.call(opt, event);
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
var handleDragMove = function handleDragMove(event) {
|
|
81
|
+
var _a;
|
|
82
|
+
|
|
83
|
+
(_a = opt === null || opt === void 0 ? void 0 : opt.onDragMove) === null || _a === void 0 ? void 0 : _a.call(opt, event);
|
|
84
|
+
pipeline.setStateAtKey(rowDragKey, event);
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
var handleDragEnd = function handleDragEnd(event, isOutOfRange) {
|
|
88
|
+
var _a;
|
|
89
|
+
|
|
90
|
+
artTable.classList.remove((0, _classnames.default)(_styles.Classes.rowDragging));
|
|
91
|
+
pipeline.setStateAtKey(rowDragKey, event); // 超出拖拽范围不触发dragend事件
|
|
92
|
+
|
|
93
|
+
if (!isOutOfRange) {
|
|
94
|
+
(_a = opt === null || opt === void 0 ? void 0 : opt.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(opt, event);
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
var getDragEvent = function getDragEvent(startRowInfo, endRowInfo, _ref) {
|
|
99
|
+
var isFinished = _ref.isFinished,
|
|
100
|
+
_ref$dragPosition = _ref.dragPosition,
|
|
101
|
+
dragPosition = _ref$dragPosition === void 0 ? 'bottom' : _ref$dragPosition;
|
|
102
|
+
return {
|
|
103
|
+
startRowIndex: startRowInfo.rowIndex,
|
|
104
|
+
startRow: startRowInfo.row,
|
|
105
|
+
endRowIndex: endRowInfo.rowIndex,
|
|
106
|
+
endRow: endRowInfo.row,
|
|
107
|
+
dragPosition: dragPosition,
|
|
108
|
+
isFinished: isFinished
|
|
109
|
+
};
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
var updateScrollPosition = function updateScrollPosition(mouseMoveEvent) {
|
|
113
|
+
if (opt === null || opt === void 0 ? void 0 : opt.suppressScrollMove) return;
|
|
114
|
+
var clientY = mouseMoveEvent.clientY;
|
|
115
|
+
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
116
|
+
var top = tableBodyClientRect.top,
|
|
117
|
+
height = tableBodyClientRect.height;
|
|
118
|
+
|
|
119
|
+
if (clientY + SCROLL_OFFSET >= top + height) {
|
|
120
|
+
pipeline.ref.current.domHelper.tableBody.scrollTop += SCROLL_OFFSET;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
if (clientY + SCROLL_OFFSET <= top) {
|
|
124
|
+
pipeline.ref.current.domHelper.tableBody.scrollTop -= SCROLL_OFFSET;
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
|
|
128
|
+
var onMouseDown = function onMouseDown(mouseDownEvent) {
|
|
129
|
+
var _a;
|
|
130
|
+
|
|
131
|
+
var startRowInfo = getTargetRowInfo(mouseDownEvent.target, tableBody, dataSource);
|
|
132
|
+
var endRowInfo = startRowInfo;
|
|
133
|
+
if (!startRowInfo || startRowInfo.code !== rowDragColumn.code) return;
|
|
134
|
+
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; // 默认拖拽插入的位置是向下
|
|
135
|
+
|
|
136
|
+
var dragPosition = 'bottom';
|
|
137
|
+
var isOutOfRange = false;
|
|
138
|
+
var dragStartEvent = getDragEvent(startRowInfo, endRowInfo, {
|
|
139
|
+
isFinished: false,
|
|
140
|
+
dragPosition: 'bottom'
|
|
141
|
+
});
|
|
142
|
+
handleDragStrat(dragStartEvent);
|
|
143
|
+
var tableWidth = tableBody.clientWidth;
|
|
144
|
+
var startRowRects = startRowInfo.cell.getBoundingClientRect(); // 光标位置距离初始拖拽行的偏移量
|
|
145
|
+
|
|
146
|
+
var startOffset = mouseDownEvent.clientY - startRowRects.top;
|
|
147
|
+
var dragElement = createDragElement(startRowRects, tableWidth, rowHeight); // 可拖拽的范围
|
|
148
|
+
|
|
149
|
+
var dragRange = getDragRange(tableBody, {
|
|
150
|
+
startOffset: startOffset,
|
|
151
|
+
rowHeight: rowHeight
|
|
152
|
+
});
|
|
153
|
+
var mousePosition = {
|
|
154
|
+
x: mouseDownEvent.clientX,
|
|
155
|
+
y: mouseDownEvent.clientY
|
|
156
|
+
};
|
|
157
|
+
var mousemove$ = (0, _rxjs.fromEvent)(window, 'mousemove');
|
|
158
|
+
var mouseup$ = (0, _rxjs.fromEvent)(window, 'mouseup');
|
|
159
|
+
|
|
160
|
+
var scrollCallback = function scrollCallback(event) {
|
|
161
|
+
// 在当前表格内滚动不处理
|
|
162
|
+
if (event.target === tableBody) return;
|
|
163
|
+
dragRange = getDragRange(tableBody, {
|
|
164
|
+
startOffset: startOffset,
|
|
165
|
+
rowHeight: rowHeight
|
|
166
|
+
});
|
|
167
|
+
var isOutOfRange = isOutOfDragRange(mousePosition, dragRange);
|
|
168
|
+
updateCurSorStyle(isOutOfRange);
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
document.addEventListener('scroll', scrollCallback, true);
|
|
172
|
+
var rowDrag$ = mousemove$.pipe((0, _mapInstanceProperty(_operators))(function (mouseMoveEvent) {
|
|
173
|
+
var clientX = mouseMoveEvent.clientX,
|
|
174
|
+
clientY = mouseMoveEvent.clientY;
|
|
175
|
+
var tagretRow = getTargetRowInfo(mouseMoveEvent.target, tableBody, dataSource);
|
|
176
|
+
|
|
177
|
+
if (tagretRow) {
|
|
178
|
+
endRowInfo = tagretRow;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
var targetRowRects = endRowInfo.cell.getBoundingClientRect(); // 判断拖拽插入的位置,拖拽框上边框位于目标行之上则向上插入,否则向下插入
|
|
182
|
+
|
|
183
|
+
var isMoveToTop = clientY - startOffset < targetRowRects.top;
|
|
184
|
+
dragPosition = isMoveToTop ? 'top' : 'bottom';
|
|
185
|
+
isOutOfRange = isOutOfDragRange({
|
|
186
|
+
x: clientX,
|
|
187
|
+
y: clientY
|
|
188
|
+
}, dragRange);
|
|
189
|
+
mousePosition = {
|
|
190
|
+
x: clientX,
|
|
191
|
+
y: clientY
|
|
192
|
+
};
|
|
193
|
+
updateScrollPosition(mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
|
|
194
|
+
|
|
195
|
+
updateDragElementPosition(dragElement, dragRange, {
|
|
196
|
+
x: clientX,
|
|
197
|
+
y: clientY,
|
|
198
|
+
startOffset: startOffset
|
|
199
|
+
});
|
|
200
|
+
updateCurSorStyle(isOutOfRange);
|
|
201
|
+
return {
|
|
202
|
+
startRowInfo: startRowInfo,
|
|
203
|
+
endRowInfo: endRowInfo,
|
|
204
|
+
dragPosition: dragPosition
|
|
205
|
+
};
|
|
206
|
+
}), (0, _operators.takeUntil)(mouseup$));
|
|
207
|
+
rowDrag$.subscribe({
|
|
208
|
+
next: function next(_ref2) {
|
|
209
|
+
var startRowInfo = _ref2.startRowInfo,
|
|
210
|
+
endRowInfo = _ref2.endRowInfo,
|
|
211
|
+
dragPosition = _ref2.dragPosition;
|
|
212
|
+
var dragMoveEvent = getDragEvent(startRowInfo, endRowInfo, {
|
|
213
|
+
isFinished: false,
|
|
214
|
+
dragPosition: dragPosition
|
|
215
|
+
});
|
|
216
|
+
handleDragMove(dragMoveEvent);
|
|
217
|
+
},
|
|
218
|
+
complete: function complete() {
|
|
219
|
+
var dragEndEvent = getDragEvent(startRowInfo, endRowInfo, {
|
|
220
|
+
isFinished: true,
|
|
221
|
+
dragPosition: dragPosition
|
|
222
|
+
});
|
|
223
|
+
handleDragEnd(dragEndEvent, isOutOfRange);
|
|
224
|
+
removeDragElement(dragElement);
|
|
225
|
+
removeCurSorStyle();
|
|
226
|
+
document.removeEventListener('scroll', scrollCallback, true);
|
|
227
|
+
}
|
|
228
|
+
});
|
|
229
|
+
};
|
|
230
|
+
|
|
231
|
+
var rowDragColumn = (opt === null || opt === void 0 ? void 0 : opt.rowDragColumn) || defaultRowDragColumn;
|
|
232
|
+
pipeline.setFeatureOptions('rowDragColumnKey', rowDragColumn.code);
|
|
233
|
+
var nextColumns = (0, _slice.default)(_context = pipeline.getColumns()).call(_context);
|
|
234
|
+
nextColumns.unshift(rowDragColumn);
|
|
235
|
+
pipeline.columns(nextColumns);
|
|
236
|
+
pipeline.addTableProps({
|
|
237
|
+
onMouseDown: onMouseDown
|
|
238
|
+
});
|
|
239
|
+
pipeline.appendRowPropsGetter(function (row, rowIndex) {
|
|
240
|
+
var _cx;
|
|
241
|
+
|
|
242
|
+
var rowDragEvent = pipeline.getStateAtKey(rowDragKey) || {};
|
|
243
|
+
var startRowIndex = rowDragEvent.startRowIndex,
|
|
244
|
+
endRowIndex = rowDragEvent.endRowIndex,
|
|
245
|
+
isFinished = rowDragEvent.isFinished,
|
|
246
|
+
dragPosition = rowDragEvent.dragPosition;
|
|
247
|
+
var isFooterCell = row[pipeline.getFeatureOptions('footerRowMetaKey')];
|
|
248
|
+
if (isFooterCell || isFinished || rowIndex !== startRowIndex && rowIndex !== endRowIndex) return;
|
|
249
|
+
var className = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.rowDragStart, rowIndex === startRowIndex), (0, _defineProperty2.default)(_cx, _styles.Classes.rowDragEnd, rowIndex === endRowIndex), (0, _defineProperty2.default)(_cx, _styles.Classes.rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), (0, _defineProperty2.default)(_cx, _styles.Classes.rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'), _cx));
|
|
250
|
+
return {
|
|
251
|
+
className: className
|
|
252
|
+
};
|
|
253
|
+
});
|
|
254
|
+
return pipeline;
|
|
255
|
+
};
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
function getTargetRowInfo(target, tableBody, record) {
|
|
259
|
+
while (target && tableBody.contains(target)) {
|
|
260
|
+
if (target.getAttribute('data-role') === 'table-cell') {
|
|
261
|
+
var code = target.getAttribute('data-code');
|
|
262
|
+
var rowIndex = parseInt(target.getAttribute('data-rowindex'));
|
|
263
|
+
var row = record[rowIndex];
|
|
264
|
+
var isFooterCell = isEleInFooter(target);
|
|
265
|
+
if (!row || isFooterCell) return null;
|
|
266
|
+
return {
|
|
267
|
+
rowIndex: rowIndex,
|
|
268
|
+
row: row,
|
|
269
|
+
code: code,
|
|
270
|
+
cell: target
|
|
271
|
+
};
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
target = target.parentElement;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
return null;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
function isEleInFooter(target) {
|
|
281
|
+
while (target && !target.classList.contains(_styles.Classes.artTable)) {
|
|
282
|
+
if (target.classList.contains(_styles.Classes.tableFooter)) {
|
|
283
|
+
return true;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
target = target.parentElement;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
return false;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
function createDragElement(rects, tableWidth, rowHeight) {
|
|
293
|
+
var _context2, _context3, _context4;
|
|
294
|
+
|
|
295
|
+
var x = rects.x,
|
|
296
|
+
y = rects.y;
|
|
297
|
+
var dragMoveElement = document.createElement('div');
|
|
298
|
+
dragMoveElement.className = (0, _classnames.default)(_styles.Classes.rowDragElement);
|
|
299
|
+
dragMoveElement.style.cssText = (0, _concat.default)(_context2 = (0, _concat.default)(_context3 = (0, _concat.default)(_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;");
|
|
300
|
+
document.body.appendChild(dragMoveElement);
|
|
301
|
+
return dragMoveElement;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
function updateDragElementPosition(element, dragRange, _ref3) {
|
|
305
|
+
var x = _ref3.x,
|
|
306
|
+
y = _ref3.y,
|
|
307
|
+
startOffset = _ref3.startOffset;
|
|
308
|
+
var validPosition = getValidPosition({
|
|
309
|
+
x: x,
|
|
310
|
+
y: y
|
|
311
|
+
}, dragRange);
|
|
312
|
+
element.style.top = validPosition.y - startOffset + 'px';
|
|
313
|
+
return element;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
function removeDragElement(element) {
|
|
317
|
+
document.body.removeChild(element);
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
function updateCurSorStyle(isOutOfRange) {
|
|
321
|
+
if (isOutOfRange) {
|
|
322
|
+
document.body.style.cursor = 'no-drop';
|
|
323
|
+
} else {
|
|
324
|
+
document.body.style.cursor = 'move';
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
function removeCurSorStyle() {
|
|
329
|
+
document.body.style.cursor = 'default';
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
function getDragRange(tableBody, _ref4) {
|
|
333
|
+
var startOffset = _ref4.startOffset,
|
|
334
|
+
rowHeight = _ref4.rowHeight;
|
|
335
|
+
var tableBodyClientRect = tableBody.getBoundingClientRect();
|
|
336
|
+
var height = tableBodyClientRect.height,
|
|
337
|
+
width = tableBodyClientRect.width,
|
|
338
|
+
top = tableBodyClientRect.top,
|
|
339
|
+
left = tableBodyClientRect.left;
|
|
340
|
+
return {
|
|
341
|
+
minX: left,
|
|
342
|
+
maxX: left + width,
|
|
343
|
+
minY: top - rowHeight + startOffset,
|
|
344
|
+
maxY: top + height + startOffset
|
|
345
|
+
};
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
function getValidPosition(position, dragRange) {
|
|
349
|
+
var x = position.x,
|
|
350
|
+
y = position.y;
|
|
351
|
+
var minX = dragRange.minX,
|
|
352
|
+
maxX = dragRange.maxX,
|
|
353
|
+
minY = dragRange.minY,
|
|
354
|
+
maxY = dragRange.maxY;
|
|
355
|
+
var newX = x < minX ? minX : x > maxX ? maxX : x;
|
|
356
|
+
var newY = y < minY ? minY : y > maxY ? maxY : y;
|
|
357
|
+
return {
|
|
358
|
+
x: newX,
|
|
359
|
+
y: newY
|
|
360
|
+
};
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
function isOutOfDragRange(position, dragRange) {
|
|
364
|
+
var x = position.x,
|
|
365
|
+
y = position.y;
|
|
366
|
+
var minX = dragRange.minX,
|
|
367
|
+
maxX = dragRange.maxX,
|
|
368
|
+
minY = dragRange.minY,
|
|
369
|
+
maxY = dragRange.maxY;
|
|
370
|
+
return x > maxX || x < minX || y > maxY || y < minY;
|
|
371
|
+
}
|
|
@@ -9,7 +9,9 @@ exports.singleSelect = singleSelect;
|
|
|
9
9
|
|
|
10
10
|
var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
|
13
|
+
|
|
14
|
+
var _extends3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
|
13
15
|
|
|
14
16
|
var _react = _interopRequireDefault(require("react"));
|
|
15
17
|
|
|
@@ -24,7 +26,7 @@ function singleSelect() {
|
|
|
24
26
|
return function singleSelectStep(pipeline) {
|
|
25
27
|
var _context;
|
|
26
28
|
|
|
27
|
-
var _a, _b, _c, _d, _e;
|
|
29
|
+
var _a, _b, _c, _d, _e, _f;
|
|
28
30
|
|
|
29
31
|
var Radio = pipeline.ctx.components.Radio;
|
|
30
32
|
|
|
@@ -45,7 +47,7 @@ function singleSelect() {
|
|
|
45
47
|
pipeline.setStateAtKey(stateKey, rowKey);
|
|
46
48
|
};
|
|
47
49
|
|
|
48
|
-
var radioColumn = (0,
|
|
50
|
+
var radioColumn = (0, _extends3.default)((0, _extends3.default)({
|
|
49
51
|
name: '',
|
|
50
52
|
width: 50,
|
|
51
53
|
align: 'center'
|
|
@@ -97,10 +99,11 @@ function singleSelect() {
|
|
|
97
99
|
onChange(rowKey);
|
|
98
100
|
} : undefined
|
|
99
101
|
});
|
|
100
|
-
}
|
|
102
|
+
},
|
|
103
|
+
features: (0, _extends3.default)((0, _extends3.default)({}, (_e = opts.radioColumn) === null || _e === void 0 ? void 0 : _e.features), (0, _defineProperty2.default)({}, _utils.SINGLE_SELECT_MARK_PROPNAME, true))
|
|
101
104
|
});
|
|
102
105
|
var nextColumns = (0, _slice.default)(_context = pipeline.getColumns()).call(_context);
|
|
103
|
-
var radioPlacement = (
|
|
106
|
+
var radioPlacement = (_f = opts.radioPlacement) !== null && _f !== void 0 ? _f : 'start';
|
|
104
107
|
|
|
105
108
|
if (radioPlacement === 'start') {
|
|
106
109
|
nextColumns.unshift(radioColumn);
|
|
@@ -101,6 +101,11 @@ function treeMode() {
|
|
|
101
101
|
return pipeline.mapDataSource(processDataSource).mapColumns(processColumns);
|
|
102
102
|
|
|
103
103
|
function processDataSource(input) {
|
|
104
|
+
if (pipeline.isSameInputDataSource() && openKeys === pipeline.getFeatureOptions('lastOpenKeys')) {
|
|
105
|
+
return pipeline.getFeatureOptions('lastTreeMode');
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
pipeline.setFeatureOptions('lastOpenKeys', pipeline.getStateAtKey(stateKey));
|
|
104
109
|
var result = [];
|
|
105
110
|
dfs(input, 0);
|
|
106
111
|
|
|
@@ -143,6 +148,7 @@ function treeMode() {
|
|
|
143
148
|
}
|
|
144
149
|
}
|
|
145
150
|
|
|
151
|
+
pipeline.setFeatureOptions('lastTreeMode', result);
|
|
146
152
|
return result;
|
|
147
153
|
}
|
|
148
154
|
|
|
@@ -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;
|
|
@@ -92,6 +92,11 @@ var TablePipeline = /*#__PURE__*/function () {
|
|
|
92
92
|
return this._snapshots[name].dataSource;
|
|
93
93
|
}
|
|
94
94
|
}
|
|
95
|
+
}, {
|
|
96
|
+
key: "isSameInputDataSource",
|
|
97
|
+
value: function isSameInputDataSource() {
|
|
98
|
+
return this._isSameInputDataSource;
|
|
99
|
+
}
|
|
95
100
|
}, {
|
|
96
101
|
key: "getColumns",
|
|
97
102
|
value: function getColumns(name) {
|
|
@@ -143,9 +148,12 @@ var TablePipeline = /*#__PURE__*/function () {
|
|
|
143
148
|
|
|
144
149
|
if (this._dataSource != null || this._columns != null) {
|
|
145
150
|
throw new Error('input 不能调用两次');
|
|
146
|
-
}
|
|
151
|
+
} // 在 pipeline 中识别本次更新是否有数据变化
|
|
152
|
+
|
|
147
153
|
|
|
154
|
+
this._isSameInputDataSource = _input.dataSource === this.ref.current._lastInputDataSource;
|
|
148
155
|
this._dataSource = _input.dataSource;
|
|
156
|
+
this.ref.current._lastInputDataSource = _input.dataSource;
|
|
149
157
|
this._columns = (0, _map.default)(_context = _input.columns).call(_context, function (col) {
|
|
150
158
|
return (0, _extends3.default)((0, _extends3.default)({}, col), {
|
|
151
159
|
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/lib/table/utils/index.js
CHANGED
|
@@ -5,6 +5,18 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
+
Object.defineProperty(exports, "MULTI_SELECT_MARK_PROPNAME", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function get() {
|
|
11
|
+
return _selectColumn.MULTI_SELECT_MARK_PROPNAME;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
Object.defineProperty(exports, "SINGLE_SELECT_MARK_PROPNAME", {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function get() {
|
|
17
|
+
return _selectColumn.SINGLE_SELECT_MARK_PROPNAME;
|
|
18
|
+
}
|
|
19
|
+
});
|
|
8
20
|
Object.defineProperty(exports, "applyTransforms", {
|
|
9
21
|
enumerable: true,
|
|
10
22
|
get: function get() {
|
|
@@ -107,6 +119,12 @@ Object.defineProperty(exports, "isLeafNode", {
|
|
|
107
119
|
return _isLeafNode.default;
|
|
108
120
|
}
|
|
109
121
|
});
|
|
122
|
+
Object.defineProperty(exports, "isSelectColumn", {
|
|
123
|
+
enumerable: true,
|
|
124
|
+
get: function get() {
|
|
125
|
+
return _selectColumn.isSelectColumn;
|
|
126
|
+
}
|
|
127
|
+
});
|
|
110
128
|
Object.defineProperty(exports, "keepWithinBounds", {
|
|
111
129
|
enumerable: true,
|
|
112
130
|
get: function get() {
|
|
@@ -192,4 +210,6 @@ var _element = require("./element");
|
|
|
192
210
|
|
|
193
211
|
var _console = _interopRequireDefault(require("./console"));
|
|
194
212
|
|
|
195
|
-
var _browserType = require("./browserType");
|
|
213
|
+
var _browserType = require("./browserType");
|
|
214
|
+
|
|
215
|
+
var _selectColumn = require("./selectColumn");
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.SINGLE_SELECT_MARK_PROPNAME = exports.MULTI_SELECT_MARK_PROPNAME = void 0;
|
|
7
|
+
exports.isSelectColumn = isSelectColumn;
|
|
8
|
+
var MULTI_SELECT_MARK_PROPNAME = 'checkboxSelection';
|
|
9
|
+
exports.MULTI_SELECT_MARK_PROPNAME = MULTI_SELECT_MARK_PROPNAME;
|
|
10
|
+
var SINGLE_SELECT_MARK_PROPNAME = 'radioSelection';
|
|
11
|
+
exports.SINGLE_SELECT_MARK_PROPNAME = SINGLE_SELECT_MARK_PROPNAME;
|
|
12
|
+
|
|
13
|
+
function isSelectColumn(column) {
|
|
14
|
+
var features = column.features || {};
|
|
15
|
+
return features[MULTI_SELECT_MARK_PROPNAME] === true || features[SINGLE_SELECT_MARK_PROPNAME] === true;
|
|
16
|
+
}
|