@kdcloudjs/table 1.2.2-canary.3 → 1.2.2-canary.5

package/lib/table/pipeline/features/rowDrag.js

@@ -62,12 +62,13 @@ function rowDrag(opt) {
     if (!tableBody) return pipeline;
     var dataSource = pipeline.getDataSource();
     var getRowDragEvent = function getRowDragEvent(dropTargetEvent, isFinished) {
-      var source = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'targetTable';
       var dragItem = dropTargetEvent.dragItem,
         x = dropTargetEvent.x,
         y = dropTargetEvent.y,
         dropZoneTarget = dropTargetEvent.dropZoneTarget,
         startDropZoneTagret = dropTargetEvent.startDropZoneTagret,
+        commonParams = dropTargetEvent.commonParams,
+        startCommonParams = dropTargetEvent.startCommonParams,
         event = dropTargetEvent.event,
         dropZoneTableParams = dropTargetEvent.dropZoneTableParams;
       var getDataSource = dropZoneTableParams.getDataSource,
@@ -80,7 +81,7 @@ function rowDrag(opt) {
       var isLeave = !isMouseOnDropTarget(event, dropZoneTarget);
       var overIndex = -1;
       var direction = 'bottom';
-      if (!isLeave) {
+      if (!isLeave && dataSource.length > 0) {
         var overDragItem = getDragRowItem(event.target, dropZoneTarget, dataSource);
         if (overDragItem) {
           var rowIndex = overDragItem.rowIndex,
@@ -89,6 +90,10 @@ function rowDrag(opt) {
           direction = getDirection(cell, event.clientY, allowDragIntoRow);
         }
       }
+      if (overIndex === -1 && dataSource.length > 0 && event.target === dropZoneTarget) {
+        overIndex = dataSource.length - 1;
+        direction = 'bottom';
+      }
       var overRow = overIndex >= 0 ? dataSource[overIndex] : null;
       return {
         startRowIndex: dragItem.rowIndex,
@@ -96,24 +101,25 @@ function rowDrag(opt) {
         endRowIndex: overIndex,
         endRow: overRow,
         startDropZoneTagret: startDropZoneTagret,
+        startCommonParams: startCommonParams,
+        commonParams: commonParams,
         dropZoneTarget: dropZoneTarget,
         event: event,
         dragPosition: direction,
         isFinished: isFinished,
-        source: source,
         x: x,
         y: y
       };
     };
     var onDragging = function onDragging(event) {
       var _a;
-      var rowDragEvent = getRowDragEvent(event, false, 'targetTable');
+      var rowDragEvent = getRowDragEvent(event, false);
       (_a = opt === null || opt === void 0 ? void 0 : opt.onDragMove) === null || _a === void 0 ? void 0 : _a.call(opt, rowDragEvent);
       pipeline.setStateAtKey(rowDragKey, rowDragEvent);
     };
-    var onDragStop = function onDragStop(event, source) {
+    var onDragStop = function onDragStop(event) {
       var _a;
-      var rowDragEvent = getRowDragEvent(event, true, source);
+      var rowDragEvent = getRowDragEvent(event, true);
       pipeline.setStateAtKey(rowDragKey, rowDragEvent);
       (_a = opt === null || opt === void 0 ? void 0 : opt.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(opt, rowDragEvent);
     };
@@ -172,6 +178,8 @@ function rowDrag(opt) {
       var lastDropTarget = null;
       var timeoutId = null;
       var intervalId = null;
+      var expandRowTimeoutId = null;
+      var expandRowCallBackList = [];
       var updateScrollPosition = function updateScrollPosition(tableBody, mouseMoveEvent) {
         if (opt === null || opt === void 0 ? void 0 : opt.suppressScrollMove) return;
         if (timeoutId) {
@@ -180,6 +188,7 @@ function rowDrag(opt) {
         if (intervalId) {
           clearInterval(intervalId);
         }
+        if (!tableBody) return;
         var moveOffset = getScrollMoveOffset(tableBody, mouseMoveEvent);
         if (moveOffset === 0) {
           return;
@@ -199,10 +208,11 @@ function rowDrag(opt) {
         setDragText(dragElement, dragText); // 设置悬浮框显示文本
         artTable.classList.add((0, _classnames.default)(_styles.Classes.rowDragging));
         rowDragApi.setDragStatus('start');
-        var dragEvent = createDropTargetEvent(currentDropZone, mouseDownEvent, startDataItem, tableBody);
+        var dragEvent = createDropTargetEvent(currentDropZone, mouseDownEvent, startDataItem, currentDropZone);
         onDragStart(dragEvent);
       };
       var handleDragMove = function handleDragMove(mouseMoveEvent) {
+        var _a;
         positionDragElemment(dragElement, mouseMoveEvent); // 更新拖拽悬浮框位置
         rowDragApi.setDragStatus('dragging');
         setDragElementIcon(dragElement, 'move');
@@ -211,13 +221,15 @@ function rowDrag(opt) {
         var dropTarget = (0, _find.default)(validDropZones).call(validDropZones, function (zone) {
           return isMouseOnDropTarget(mouseMoveEvent, zone.getContainer());
         }) || null;
+        updateScrollPosition(dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.getContainer(), mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
         if (dropTarget !== lastDropTarget) {
           // 拖拽离开表格
           if (lastDropTarget !== null && dropTarget === null) {
             if (lastDropTarget.onDragLeave) {
               setDragElementIcon(dragElement, 'notAllowed');
               hiddenDragLine(dragLine);
-              var dragEvent = createDropTargetEvent(lastDropTarget, mouseMoveEvent, startDataItem, tableBody);
+              lastDropTarget.getContainer().classList.remove(_styles.Classes.rowDragNoData);
+              var dragEvent = createDropTargetEvent(lastDropTarget, mouseMoveEvent, startDataItem, currentDropZone);
               lastDropTarget.onDragLeave(dragEvent);
             }
           }
@@ -228,7 +240,7 @@ function rowDrag(opt) {
               if (dropTarget.isTable) {
                 showDragLine(dragLine);
               }
-              var _dragEvent = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, tableBody);
+              var _dragEvent = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, currentDropZone);
               dropTarget.onDragEnter(_dragEvent);
             }
           }
@@ -242,10 +254,34 @@ function rowDrag(opt) {
               dragZone: dropTarget,
               event: mouseMoveEvent
             });
-            updateScrollPosition(dropTarget.getContainer(), mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
+          }
+          // 树形表格悬停1s展开对应行节点
+          if ((_a = dropTarget === null || dropTarget === void 0 ? void 0 : dropTarget.tableParams) === null || _a === void 0 ? void 0 : _a.getTreeModeOptions()) {
+            if (expandRowTimeoutId) {
+              clearTimeout(expandRowTimeoutId);
+            }
+            expandRowTimeoutId = setTimeout(function () {
+              var treeModeOptions = dropTarget.tableParams.getTreeModeOptions();
+              var treeMetaKey = treeModeOptions.treeMetaKey,
+                onExpand = treeModeOptions.onExpand,
+                isExpanded = treeModeOptions.isExpanded,
+                onCollapse = treeModeOptions.onCollapse;
+              // 鼠标悬停所在的拖拽行信息
+              var dataSource = dropTarget.tableParams.getDataSource();
+              var dragItem = getDragRowItem(mouseMoveEvent.target, dropTarget.getContainer(), dataSource);
+              if (!dragItem) return;
+              var row = dragItem.row;
+              var rowKey = row[treeMetaKey].rowKey;
+              if (!isExpanded(rowKey)) {
+                onExpand(rowKey);
+                expandRowCallBackList.push(function () {
+                  return onCollapse(rowKey);
+                });
+              }
+            }, 1000);
           }
           if (dropTarget.onDragging) {
-            var _dragEvent2 = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, tableBody);
+            var _dragEvent2 = createDropTargetEvent(dropTarget, mouseMoveEvent, startDataItem, currentDropZone);
             dropTarget.onDragging(_dragEvent2);
           }
         }
@@ -257,18 +293,23 @@ function rowDrag(opt) {
         rowDragApi.setDragStatus('finished');
         clearTimeout(timeoutId);
         clearInterval(intervalId);
+        clearTimeout(expandRowTimeoutId);
+        while (expandRowCallBackList.length > 0) {
+          var callback = expandRowCallBackList.pop();
+          callback();
+        }
         var rowDropZones = rowDragApi.getRowDropZone();
+        rowDropZones.forEach(function (dropzone) {
+          var container = dropzone.getContainer();
+          container && container.classList.remove(_styles.Classes.rowDragNoData);
+        });
         var validDropZones = (0, _concat.default)(rowDropZones).call(rowDropZones, currentDropZone);
         var dropTarget = (0, _find.default)(validDropZones).call(validDropZones, function (zone) {
           return isMouseOnDropTarget(mouseUpEvent, zone.getContainer());
         });
         if (dropTarget && dropTarget.onDragStop) {
-          var dragEvent = createDropTargetEvent(dropTarget, mouseUpEvent, startDataItem, tableBody);
+          var dragEvent = createDropTargetEvent(dropTarget, mouseUpEvent, startDataItem, currentDropZone);
           dropTarget.onDragStop(dragEvent);
-          // 原表也触发onDragStop, 方便上层调用
-          if (dropTarget !== currentDropZone) {
-            currentDropZone.onDragStop(dragEvent, 'startTable');
-          }
         }
       };
       var mousemove$ = (0, _rxjs.fromEvent)(window, 'mousemove');
@@ -329,7 +370,7 @@ function rowDrag(opt) {
           return _internals.internals.safeGetRowKey(primaryKey, row, -1) === parentRowKey;
         });
       }
-      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'));
+      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'));
       return {
         className: className
       };
@@ -412,6 +453,13 @@ function positionDragLine(_ref) {
   var treeModeOptions = getTreeModeOptions();
   var rowDragOptions = getRowDragOptions() || {};
   var allowDragIntoRow = rowDragOptions.allowDragIntoRow;
+  if (dataSource.length === 0) {
+    tableContainer.classList.add(_styles.Classes.rowDragNoData);
+    lineElement.style.display = 'none';
+  } else {
+    tableContainer.classList.remove(_styles.Classes.rowDragNoData);
+    lineElement.style.display = 'block';
+  }
   // 鼠标悬停所在的拖拽行信息
   var dragItem = getDragRowItem(event.target, tableContainer, dataSource);
   if (!dragItem) return;
@@ -589,21 +637,28 @@ function setDragText(element, dragText) {
 function isMouseOnDropTarget(mouseEvent, target) {
   return target.contains(mouseEvent.target);
 }
-function createDropTargetEvent(dropTarget, event, dragItem, startDropZoneTagret) {
-  var dropZoneTarget = dropTarget.getContainer();
+function createDropTargetEvent(dropZone, event, dragItem, startDropZone) {
+  var dropZoneTarget = dropZone.getContainer();
+  var startDropZoneTagret = startDropZone.getContainer();
   var rect = dropZoneTarget.getBoundingClientRect();
   var x = event.clientX - rect.left;
   var y = event.clientY - rect.top;
+  var startDropZoneOptions = startDropZone.tableParams.getRowDragOptions();
+  var startCommonParams = startDropZoneOptions === null || startDropZoneOptions === void 0 ? void 0 : startDropZoneOptions.commonParams;
   var targetEvent = {
     dragItem: dragItem,
     startDropZoneTagret: startDropZoneTagret,
+    startCommonParams: startCommonParams,
     dropZoneTarget: dropZoneTarget,
     event: event,
     x: x,
     y: y
   };
-  if (dropTarget.isTable) {
-    targetEvent.dropZoneTableParams = dropTarget.tableParams;
+  if (dropZone.isTable) {
+    var dropZoneOptions = dropZone.tableParams.getRowDragOptions();
+    var commonParams = dropZoneOptions === null || dropZoneOptions === void 0 ? void 0 : dropZoneOptions.commonParams;
+    targetEvent.dropZoneTableParams = dropZone.tableParams;
+    targetEvent.commonParams = commonParams;
   }
   return targetEvent;
 }

package/lib/table/pipeline/features/treeMode.js

@@ -26,7 +26,7 @@ var _internals = require("../../internals");
 var _utils = require("../../utils");
 var _styles = require("../../base/styles");
 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; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { var _context2; if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = _sliceInstanceProperty(_context2 = {}.toString.call(r)).call(_context2, 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; } }
+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; } }
 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; }
 var treeMetaSymbol = exports.treeMetaSymbol = (0, _symbol.default)('treeMetaSymbol');
 var treeModeOptionsKey = exports.treeModeOptionsKey = 'treeModeOptions';
@@ -72,7 +72,19 @@ function treeMode() {
       iconIndent: iconIndent,
       iconGap: iconGap,
       indentSize: indentSize,
-      treeMetaKey: treeMetaKey
+      treeMetaKey: treeMetaKey,
+      isExpanded: function isExpanded(rowKey) {
+        return openKeySet.has(rowKey);
+      },
+      onExpand: function onExpand(rowKey) {
+        var _context2;
+        onChangeOpenKeys((0, _concat.default)(_context2 = []).call(_context2, (0, _toConsumableArray2.default)(openKeys), [rowKey]), rowKey, 'expand');
+      },
+      onCollapse: function onCollapse(rowKey) {
+        onChangeOpenKeys((0, _filter.default)(openKeys).call(openKeys, function (key) {
+          return key !== rowKey;
+        }), rowKey, 'collapse');
+      }
     });
     var Icon = opts.icon;
     return pipeline.mapDataSource(processDataSource).mapColumns(processColumns);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/table",
-  "version": "1.2.2-canary.3",
+  "version": "1.2.2-canary.5",
   "description": "金蝶 react table 组件",
   "title": "table",
   "keywords": [