@kdcloudjs/table 1.2.2-canary.3 → 1.2.2-canary.4
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 +73 -23
- package/dist/@kdcloudjs/table.js.map +1 -1
- package/dist/@kdcloudjs/table.min.css +1 -1
- package/dist/@kdcloudjs/table.min.js +6 -6
- package/dist/@kdcloudjs/table.min.js.map +1 -1
- package/es/table/base/styles.js +2 -2
- package/es/table/interfaces.d.ts +4 -1
- package/es/table/pipeline/features/rowDrag.d.ts +2 -0
- package/es/table/pipeline/features/rowDrag.js +57 -19
- package/es/table/pipeline/features/treeMode.js +14 -2
- package/lib/table/base/styles.js +2 -2
- package/lib/table/interfaces.d.ts +4 -1
- package/lib/table/pipeline/features/rowDrag.d.ts +2 -0
- package/lib/table/pipeline/features/rowDrag.js +57 -19
- package/lib/table/pipeline/features/treeMode.js +14 -2
- package/package.json +1 -1
|
@@ -62,12 +62,13 @@ function rowDrag(opt) {
|
|
|
62
62
|
if (!tableBody) return pipeline;
|
|
63
63
|
var dataSource = pipeline.getDataSource();
|
|
64
64
|
var getRowDragEvent = function getRowDragEvent(dropTargetEvent, isFinished) {
|
|
65
|
-
var source = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'targetTable';
|
|
66
65
|
var dragItem = dropTargetEvent.dragItem,
|
|
67
66
|
x = dropTargetEvent.x,
|
|
68
67
|
y = dropTargetEvent.y,
|
|
69
68
|
dropZoneTarget = dropTargetEvent.dropZoneTarget,
|
|
70
69
|
startDropZoneTagret = dropTargetEvent.startDropZoneTagret,
|
|
70
|
+
commonParams = dropTargetEvent.commonParams,
|
|
71
|
+
startCommonParams = dropTargetEvent.startCommonParams,
|
|
71
72
|
event = dropTargetEvent.event,
|
|
72
73
|
dropZoneTableParams = dropTargetEvent.dropZoneTableParams;
|
|
73
74
|
var getDataSource = dropZoneTableParams.getDataSource,
|
|
@@ -96,24 +97,25 @@ function rowDrag(opt) {
|
|
|
96
97
|
endRowIndex: overIndex,
|
|
97
98
|
endRow: overRow,
|
|
98
99
|
startDropZoneTagret: startDropZoneTagret,
|
|
100
|
+
startCommonParams: startCommonParams,
|
|
101
|
+
commonParams: commonParams,
|
|
99
102
|
dropZoneTarget: dropZoneTarget,
|
|
100
103
|
event: event,
|
|
101
104
|
dragPosition: direction,
|
|
102
105
|
isFinished: isFinished,
|
|
103
|
-
source: source,
|
|
104
106
|
x: x,
|
|
105
107
|
y: y
|
|
106
108
|
};
|
|
107
109
|
};
|
|
108
110
|
var onDragging = function onDragging(event) {
|
|
109
111
|
var _a;
|
|
110
|
-
var rowDragEvent = getRowDragEvent(event, false
|
|
112
|
+
var rowDragEvent = getRowDragEvent(event, false);
|
|
111
113
|
(_a = opt === null || opt === void 0 ? void 0 : opt.onDragMove) === null || _a === void 0 ? void 0 : _a.call(opt, rowDragEvent);
|
|
112
114
|
pipeline.setStateAtKey(rowDragKey, rowDragEvent);
|
|
113
115
|
};
|
|
114
|
-
var onDragStop = function onDragStop(event
|
|
116
|
+
var onDragStop = function onDragStop(event) {
|
|
115
117
|
var _a;
|
|
116
|
-
var rowDragEvent = getRowDragEvent(event, true
|
|
118
|
+
var rowDragEvent = getRowDragEvent(event, true);
|
|
117
119
|
pipeline.setStateAtKey(rowDragKey, rowDragEvent);
|
|
118
120
|
(_a = opt === null || opt === void 0 ? void 0 : opt.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(opt, rowDragEvent);
|
|
119
121
|
};
|
|
@@ -172,6 +174,8 @@ function rowDrag(opt) {
|
|
|
172
174
|
var lastDropTarget = null;
|
|
173
175
|
var timeoutId = null;
|
|
174
176
|
var intervalId = null;
|
|
177
|
+
var expandRowTimeoutId = null;
|
|
178
|
+
var expandRowCallBackList = [];
|
|
175
179
|
var updateScrollPosition = function updateScrollPosition(tableBody, mouseMoveEvent) {
|
|
176
180
|
if (opt === null || opt === void 0 ? void 0 : opt.suppressScrollMove) return;
|
|
177
181
|
if (timeoutId) {
|
|
@@ -199,10 +203,11 @@ function rowDrag(opt) {
|
|
|
199
203
|
setDragText(dragElement, dragText); // 设置悬浮框显示文本
|
|
200
204
|
artTable.classList.add((0, _classnames.default)(_styles.Classes.rowDragging));
|
|
201
205
|
rowDragApi.setDragStatus('start');
|
|
202
|
-
var dragEvent = createDropTargetEvent(currentDropZone, mouseDownEvent, startDataItem,
|
|
206
|
+
var dragEvent = createDropTargetEvent(currentDropZone, mouseDownEvent, startDataItem, currentDropZone);
|
|
203
207
|
onDragStart(dragEvent);
|
|
204
208
|
};
|
|
205
209
|
var handleDragMove = function handleDragMove(mouseMoveEvent) {
|
|
210
|
+
var _a;
|
|
206
211
|
positionDragElemment(dragElement, mouseMoveEvent); // 更新拖拽悬浮框位置
|
|
207
212
|
rowDragApi.setDragStatus('dragging');
|
|
208
213
|
setDragElementIcon(dragElement, 'move');
|
|
@@ -217,7 +222,7 @@ function rowDrag(opt) {
|
|
|
217
222
|
if (lastDropTarget.onDragLeave) {
|
|
218
223
|
setDragElementIcon(dragElement, 'notAllowed');
|
|
219
224
|
hiddenDragLine(dragLine);
|
|
220
|
-
var dragEvent = createDropTargetEvent(lastDropTarget, mouseMoveEvent, startDataItem,
|
|
225
|
+
var dragEvent = createDropTargetEvent(lastDropTarget, mouseMoveEvent, startDataItem, currentDropZone);
|
|
221
226
|
lastDropTarget.onDragLeave(dragEvent);
|
|
222
227
|
}
|
|
223
228
|
}
|
|
@@ -228,7 +233,7 @@ function rowDrag(opt) {
|
|
|
228
233
|
if (dropTarget.isTable) {
|
|
229
234
|
showDragLine(dragLine);
|
|
230
235
|
}
|
|
231
|
-
var _dragEvent = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem,
|
|
236
|
+
var _dragEvent = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, currentDropZone);
|
|
232
237
|
dropTarget.onDragEnter(_dragEvent);
|
|
233
238
|
}
|
|
234
239
|
}
|
|
@@ -244,8 +249,33 @@ function rowDrag(opt) {
|
|
|
244
249
|
});
|
|
245
250
|
updateScrollPosition(dropTarget.getContainer(), mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
|
|
246
251
|
}
|
|
252
|
+
// 树形表格悬停1s展开对应行节点
|
|
253
|
+
if ((_a = dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.tableParams) === null || _a === void 0 ? void 0 : _a.getTreeModeOptions()) {
|
|
254
|
+
if (expandRowTimeoutId) {
|
|
255
|
+
clearTimeout(expandRowTimeoutId);
|
|
256
|
+
}
|
|
257
|
+
expandRowTimeoutId = setTimeout(function () {
|
|
258
|
+
var treeModeOptions = dropTarget.tableParams.getTreeModeOptions();
|
|
259
|
+
var treeMetaKey = treeModeOptions.treeMetaKey,
|
|
260
|
+
onExpand = treeModeOptions.onExpand,
|
|
261
|
+
isExpanded = treeModeOptions.isExpanded,
|
|
262
|
+
onCollapse = treeModeOptions.onCollapse;
|
|
263
|
+
// 鼠标悬停所在的拖拽行信息
|
|
264
|
+
var dataSource = dropTarget.tableParams.getDataSource();
|
|
265
|
+
var dragItem = getDragRowItem(mouseMoveEvent.target, dropTarget.getContainer(), dataSource);
|
|
266
|
+
if (!dragItem) return;
|
|
267
|
+
var row = dragItem.row;
|
|
268
|
+
var rowKey = row[treeMetaKey].rowKey;
|
|
269
|
+
if (!isExpanded(rowKey)) {
|
|
270
|
+
onExpand(rowKey);
|
|
271
|
+
expandRowCallBackList.push(function () {
|
|
272
|
+
return onCollapse(rowKey);
|
|
273
|
+
});
|
|
274
|
+
}
|
|
275
|
+
}, 1000);
|
|
276
|
+
}
|
|
247
277
|
if (dropTarget.onDragging) {
|
|
248
|
-
var _dragEvent2 = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem,
|
|
278
|
+
var _dragEvent2 = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, currentDropZone);
|
|
249
279
|
dropTarget.onDragging(_dragEvent2);
|
|
250
280
|
}
|
|
251
281
|
}
|
|
@@ -257,18 +287,19 @@ function rowDrag(opt) {
|
|
|
257
287
|
rowDragApi.setDragStatus('finished');
|
|
258
288
|
clearTimeout(timeoutId);
|
|
259
289
|
clearInterval(intervalId);
|
|
290
|
+
clearTimeout(expandRowTimeoutId);
|
|
291
|
+
while (expandRowCallBackList.length > 0) {
|
|
292
|
+
var callback = expandRowCallBackList.pop();
|
|
293
|
+
callback();
|
|
294
|
+
}
|
|
260
295
|
var rowDropZones = rowDragApi.getRowDropZone();
|
|
261
296
|
var validDropZones = (0, _concat.default)(rowDropZones).call(rowDropZones, currentDropZone);
|
|
262
297
|
var dropTarget = (0, _find.default)(validDropZones).call(validDropZones, function (zone) {
|
|
263
298
|
return isMouseOnDropTarget(mouseUpEvent, zone.getContainer());
|
|
264
299
|
});
|
|
265
300
|
if (dropTarget && dropTarget.onDragStop) {
|
|
266
|
-
var dragEvent = createDropTargetEvent(dropTarget, mouseUpEvent, startDataItem,
|
|
301
|
+
var dragEvent = createDropTargetEvent(dropTarget, mouseUpEvent, startDataItem, currentDropZone);
|
|
267
302
|
dropTarget.onDragStop(dragEvent);
|
|
268
|
-
// 原表也触发onDragStop, 方便上层调用
|
|
269
|
-
if (dropTarget !== currentDropZone) {
|
|
270
|
-
currentDropZone.onDragStop(dragEvent, 'startTable');
|
|
271
|
-
}
|
|
272
303
|
}
|
|
273
304
|
};
|
|
274
305
|
var mousemove$ = (0, _rxjs.fromEvent)(window, 'mousemove');
|
|
@@ -329,7 +360,7 @@ function rowDrag(opt) {
|
|
|
329
360
|
return _internals.internals.safeGetRowKey(primaryKey, row, -1) === parentRowKey;
|
|
330
361
|
});
|
|
331
362
|
}
|
|
332
|
-
var className = (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _styles.Classes.rowDragStart, rowIndex === startRowIndex && dragStatus !== 'finished'), _styles.Classes.rowDragEnd, rowIndex === endRowIndex), _styles.Classes.rowDragEndParent, isTreeTable && rowIndex === parentRowKeyIndex), _styles.Classes.rowDragEndInto, rowIndex === endRowIndex && dragPosition === 'into'), _styles.Classes.rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), _styles.Classes.rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'));
|
|
363
|
+
var className = (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _styles.Classes.rowDragStart, rowIndex === startRowIndex && dragStatus !== 'finished'), _styles.Classes.rowDragEnd, rowIndex === endRowIndex), _styles.Classes.rowDragEndParent, isTreeTable && rowIndex === parentRowKeyIndex && dragPosition !== 'into'), _styles.Classes.rowDragEndInto, rowIndex === endRowIndex && dragPosition === 'into'), _styles.Classes.rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), _styles.Classes.rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'));
|
|
333
364
|
return {
|
|
334
365
|
className: className
|
|
335
366
|
};
|
|
@@ -589,21 +620,28 @@ function setDragText(element, dragText) {
|
|
|
589
620
|
function isMouseOnDropTarget(mouseEvent, target) {
|
|
590
621
|
return target.contains(mouseEvent.target);
|
|
591
622
|
}
|
|
592
|
-
function createDropTargetEvent(
|
|
593
|
-
var dropZoneTarget =
|
|
623
|
+
function createDropTargetEvent(dropZone, event, dragItem, startDropZone) {
|
|
624
|
+
var dropZoneTarget = dropZone.getContainer();
|
|
625
|
+
var startDropZoneTagret = startDropZone.getContainer();
|
|
594
626
|
var rect = dropZoneTarget.getBoundingClientRect();
|
|
595
627
|
var x = event.clientX - rect.left;
|
|
596
628
|
var y = event.clientY - rect.top;
|
|
629
|
+
var startDropZoneOptions = startDropZone.tableParams.getRowDragOptions();
|
|
630
|
+
var startCommonParams = startDropZoneOptions === null || startDropZoneOptions === void 0 ? void 0 : startDropZoneOptions.commonParams;
|
|
597
631
|
var targetEvent = {
|
|
598
632
|
dragItem: dragItem,
|
|
599
633
|
startDropZoneTagret: startDropZoneTagret,
|
|
634
|
+
startCommonParams: startCommonParams,
|
|
600
635
|
dropZoneTarget: dropZoneTarget,
|
|
601
636
|
event: event,
|
|
602
637
|
x: x,
|
|
603
638
|
y: y
|
|
604
639
|
};
|
|
605
|
-
if (
|
|
606
|
-
|
|
640
|
+
if (dropZone.isTable) {
|
|
641
|
+
var dropZoneOptions = dropZone.tableParams.getRowDragOptions();
|
|
642
|
+
var commonParams = dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.commonParams;
|
|
643
|
+
targetEvent.dropZoneTableParams = dropZone.tableParams;
|
|
644
|
+
targetEvent.commonParams = commonParams;
|
|
607
645
|
}
|
|
608
646
|
return targetEvent;
|
|
609
647
|
}
|
|
@@ -26,7 +26,7 @@ var _internals = require("../../internals");
|
|
|
26
26
|
var _utils = require("../../utils");
|
|
27
27
|
var _styles = require("../../base/styles");
|
|
28
28
|
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof _Symbol2 && _getIteratorMethod(r) || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
29
|
-
function _unsupportedIterableToArray(r, a) { if (r) { var
|
|
29
|
+
function _unsupportedIterableToArray(r, a) { if (r) { var _context3; if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = _sliceInstanceProperty(_context3 = {}.toString.call(r)).call(_context3, 8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? _Array$from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
30
30
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
31
31
|
var treeMetaSymbol = exports.treeMetaSymbol = (0, _symbol.default)('treeMetaSymbol');
|
|
32
32
|
var treeModeOptionsKey = exports.treeModeOptionsKey = 'treeModeOptions';
|
|
@@ -72,7 +72,19 @@ function treeMode() {
|
|
|
72
72
|
iconIndent: iconIndent,
|
|
73
73
|
iconGap: iconGap,
|
|
74
74
|
indentSize: indentSize,
|
|
75
|
-
treeMetaKey: treeMetaKey
|
|
75
|
+
treeMetaKey: treeMetaKey,
|
|
76
|
+
isExpanded: function isExpanded(rowKey) {
|
|
77
|
+
return openKeySet.has(rowKey);
|
|
78
|
+
},
|
|
79
|
+
onExpand: function onExpand(rowKey) {
|
|
80
|
+
var _context2;
|
|
81
|
+
onChangeOpenKeys((0, _concat.default)(_context2 = []).call(_context2, (0, _toConsumableArray2.default)(openKeys), [rowKey]), rowKey, 'expand');
|
|
82
|
+
},
|
|
83
|
+
onCollapse: function onCollapse(rowKey) {
|
|
84
|
+
onChangeOpenKeys((0, _filter.default)(openKeys).call(openKeys, function (key) {
|
|
85
|
+
return key !== rowKey;
|
|
86
|
+
}), rowKey, 'collapse');
|
|
87
|
+
}
|
|
76
88
|
});
|
|
77
89
|
var Icon = opts.icon;
|
|
78
90
|
return pipeline.mapDataSource(processDataSource).mapColumns(processColumns);
|