@kdcloudjs/table 1.2.2-canary.4 → 1.2.2-canary.6

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

@@ -81,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,
@@ -90,6 +90,10 @@ function rowDrag(opt) {
           direction = getDirection(cell, event.clientY, allowDragIntoRow);
         }
       }
+      if (overIndex === -1 && dataSource.length > 0 && dropZoneTarget.contains(event.target)) {
+        overIndex = dataSource.length - 1;
+        direction = 'bottom';
+      }
       var overRow = overIndex >= 0 ? dataSource[overIndex] : null;
       return {
         startRowIndex: dragItem.rowIndex,
@@ -184,6 +188,7 @@ function rowDrag(opt) {
         if (intervalId) {
           clearInterval(intervalId);
         }
+        if (!tableBody) return;
         var moveOffset = getScrollMoveOffset(tableBody, mouseMoveEvent);
         if (moveOffset === 0) {
           return;
@@ -216,12 +221,14 @@ 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);
+              lastDropTarget.getContainer().classList.remove(_styles.Classes.rowDragNoData);
               var dragEvent = createDropTargetEvent(lastDropTarget, mouseMoveEvent, startDataItem, currentDropZone);
               lastDropTarget.onDragLeave(dragEvent);
             }
@@ -247,7 +254,6 @@ 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()) {
@@ -293,6 +299,10 @@ function rowDrag(opt) {
           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());
@@ -431,6 +441,7 @@ function createDragLine(isTreeTable) {
   return dragLine;
 }
 function positionDragLine(_ref) {
+  var _context7;
   var lineElement = _ref.lineElement,
     dragZone = _ref.dragZone,
     event = _ref.event;
@@ -443,62 +454,69 @@ function positionDragLine(_ref) {
   var treeModeOptions = getTreeModeOptions();
   var rowDragOptions = getRowDragOptions() || {};
   var allowDragIntoRow = rowDragOptions.allowDragIntoRow;
+  var isTreeTable = !!treeModeOptions;
+  var bodyRect = tableContainer.getBoundingClientRect();
+  var offsetParentSize = getElementRectWithOffset(document.body);
+  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;
+  if (!dragItem) {
+    if (dataSource.length > 0 && tableContainer.contains(event.target)) {
+      var _context5, _context6;
+      var _rowIndex = dataSource.length - 1;
+      var _row = dataSource[_rowIndex];
+      var _direction = 'bottom';
+      var _targetCell = isTreeTable ? tableContainer.querySelector((0, _concat.default)(_context5 = "tr[data-rowindex=\"".concat(_rowIndex, "\"] .")).call(_context5, _styles.Classes.tableExtendCell)) : tableContainer.querySelector((0, _concat.default)(_context6 = "tr[data-rowindex=\"".concat(_rowIndex, "\"] .")).call(_context6, _styles.Classes.rowDragCell));
+      if (!_targetCell) return;
+      var _getLinePosition = getLinePosition({
+          treeModeOptions: treeModeOptions,
+          cell: _targetCell,
+          row: _row,
+          direction: _direction,
+          offsetParentSize: offsetParentSize,
+          bodyRect: bodyRect
+        }),
+        _top = _getLinePosition.top,
+        _left = _getLinePosition.left,
+        _width = _getLinePosition.width;
+      lineElement.style.left = "".concat(_left, "px");
+      lineElement.style.top = "".concat(_top, "px");
+      lineElement.style.width = "".concat(_width, "px");
+    }
+    return;
+  }
   var cell = dragItem.cell,
     rowIndex = dragItem.rowIndex,
     row = dragItem.row;
-  var bodyRect = tableContainer.getBoundingClientRect();
-  var offsetParentSize = getElementRectWithOffset(document.body);
-  var isTreeTable = !!treeModeOptions;
   var allowDragInto = isTreeTable && allowDragIntoRow;
   var direction = getDirection(cell, event.clientY, allowDragInto);
-  if (isTreeTable) {
-    var _context5;
-    var iconWidth = treeModeOptions.iconWidth,
-      iconIndent = treeModeOptions.iconIndent,
-      iconGap = treeModeOptions.iconGap,
-      indentSize = treeModeOptions.indentSize,
-      treeMetaKey = treeModeOptions.treeMetaKey;
-    var expandCell = tableContainer.querySelector((0, _concat.default)(_context5 = "tr[data-rowindex=\"".concat(rowIndex, "\"] .")).call(_context5, _styles.Classes.tableExtendCell));
-    if (expandCell) {
-      var _getElementSize2 = _getElementSize(expandCell),
-        paddingLeft = _getElementSize2.paddingLeft;
-      var expandCellRect = expandCell.getBoundingClientRect();
-      var _row$treeMetaKey = row[treeMetaKey],
-        rowKey = _row$treeMetaKey.rowKey,
-        depth = _row$treeMetaKey.depth,
-        isLeaf = _row$treeMetaKey.isLeaf,
-        expanded = _row$treeMetaKey.expanded;
-      var addWidth = isLeaf ? iconWidth + iconGap : 0;
-      var indent = iconIndent + depth * indentSize + addWidth;
-      var x = expandCellRect.x,
-        _y = expandCellRect.y,
-        _height = expandCellRect.height;
-      var _top = direction === 'bottom' ? _y + _height - offsetParentSize.top : _y - offsetParentSize.top;
-      var offsetX = Math.max(x + paddingLeft + indent - bodyRect.x, 0);
-      var _left = bodyRect.x + offsetX - offsetParentSize.left;
-      lineElement.style.left = "".concat(_left, "px");
-      lineElement.style.top = "".concat(_top, "px");
-      lineElement.style.width = "".concat(bodyRect.width - offsetX, "px");
-      if (direction === 'into') {
-        lineElement.style.display = 'none';
-      } else {
-        lineElement.style.display = 'block';
-      }
-      return;
-    }
-  }
-  // 根据鼠标悬停位置所在单元格和显示位置计算拖拽线的位置
-  var rect = cell.getBoundingClientRect();
-  var y = rect.y,
-    height = rect.height;
-  var top = direction === 'bottom' ? y + height - offsetParentSize.top : y - offsetParentSize.top;
-  var left = bodyRect.x - offsetParentSize.left;
+  var targetCell = isTreeTable ? tableContainer.querySelector((0, _concat.default)(_context7 = "tr[data-rowindex=\"".concat(rowIndex, "\"] .")).call(_context7, _styles.Classes.tableExtendCell)) : cell;
+  if (!targetCell) return;
+  var _getLinePosition2 = getLinePosition({
+      treeModeOptions: treeModeOptions,
+      cell: targetCell,
+      row: row,
+      direction: direction,
+      offsetParentSize: offsetParentSize,
+      bodyRect: bodyRect
+    }),
+    top = _getLinePosition2.top,
+    left = _getLinePosition2.left,
+    width = _getLinePosition2.width;
   lineElement.style.left = "".concat(left, "px");
   lineElement.style.top = "".concat(top, "px");
-  lineElement.style.width = "".concat(bodyRect.width, "px");
+  lineElement.style.width = "".concat(width, "px");
+  if (direction === 'into') {
+    lineElement.style.display = 'none';
+  } else {
+    lineElement.style.display = 'block';
+  }
 }
 function showDragLine(lineElement) {
   lineElement.style.display = 'block';
@@ -531,11 +549,11 @@ function positionDragElemment(element, event) {
 }
 function getElementRectWithOffset(el) {
   var offsetElementRect = el.getBoundingClientRect();
-  var _getElementSize3 = _getElementSize(el),
-    borderTopWidth = _getElementSize3.borderTopWidth,
-    borderLeftWidth = _getElementSize3.borderLeftWidth,
-    borderRightWidth = _getElementSize3.borderRightWidth,
-    borderBottomWidth = _getElementSize3.borderBottomWidth;
+  var _getElementSize2 = _getElementSize(el),
+    borderTopWidth = _getElementSize2.borderTopWidth,
+    borderLeftWidth = _getElementSize2.borderLeftWidth,
+    borderRightWidth = _getElementSize2.borderRightWidth,
+    borderBottomWidth = _getElementSize2.borderBottomWidth;
   return {
     top: offsetElementRect.top + (borderTopWidth || 0),
     left: offsetElementRect.left + (borderLeftWidth || 0),
@@ -661,4 +679,54 @@ function getDirection(cell, clientY) {
     direction = 'top';
   }
   return direction;
-}
+}
+var getLinePosition = function getLinePosition(_ref2) {
+  var treeModeOptions = _ref2.treeModeOptions,
+    cell = _ref2.cell,
+    row = _ref2.row,
+    direction = _ref2.direction,
+    offsetParentSize = _ref2.offsetParentSize,
+    bodyRect = _ref2.bodyRect;
+  var isTreeTable = !!treeModeOptions;
+  if (isTreeTable) {
+    var iconWidth = treeModeOptions.iconWidth,
+      iconIndent = treeModeOptions.iconIndent,
+      iconGap = treeModeOptions.iconGap,
+      indentSize = treeModeOptions.indentSize,
+      treeMetaKey = treeModeOptions.treeMetaKey;
+    var _getElementSize3 = _getElementSize(cell),
+      paddingLeft = _getElementSize3.paddingLeft;
+    var expandCellRect = cell.getBoundingClientRect();
+    var _row$treeMetaKey = row[treeMetaKey],
+      rowKey = _row$treeMetaKey.rowKey,
+      depth = _row$treeMetaKey.depth,
+      isLeaf = _row$treeMetaKey.isLeaf,
+      expanded = _row$treeMetaKey.expanded;
+    var addWidth = isLeaf ? iconWidth + iconGap : 0;
+    var indent = iconIndent + depth * indentSize + addWidth;
+    var x = expandCellRect.x,
+      _y = expandCellRect.y,
+      _height = expandCellRect.height;
+    var _top2 = direction === 'bottom' ? _y + _height - offsetParentSize.top : _y - offsetParentSize.top;
+    var offsetX = Math.max(x + paddingLeft + indent - bodyRect.x, 0);
+    var _left2 = bodyRect.x + offsetX - offsetParentSize.left;
+    var _width2 = bodyRect.width - offsetX;
+    return {
+      top: _top2,
+      left: _left2,
+      width: _width2
+    };
+  }
+  // 根据鼠标悬停位置所在单元格和显示位置计算拖拽线的位置
+  var rect = cell.getBoundingClientRect();
+  var y = rect.y,
+    height = rect.height;
+  var top = direction === 'bottom' ? y + height - offsetParentSize.top : y - offsetParentSize.top;
+  var left = bodyRect.x - offsetParentSize.left;
+  var width = bodyRect.width;
+  return {
+    top: top,
+    left: left,
+    width: width
+  };
+};

package/package.json

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