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

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

@@ -79,7 +79,7 @@ export function rowDrag(opt) {
           direction = getDirection(cell, event.clientY, allowDragIntoRow);
         }
       }
-      if (overIndex === -1 && dataSource.length > 0 && event.target === dropZoneTarget) {
+      if (overIndex === -1 && dataSource.length > 0 && dropZoneTarget.contains(event.target)) {
         overIndex = dataSource.length - 1;
         direction = 'bottom';
       }
@@ -430,6 +430,7 @@ function createDragLine(isTreeTable) {
   return dragLine;
 }
 function positionDragLine(_ref) {
+  var _context7;
   var lineElement = _ref.lineElement,
     dragZone = _ref.dragZone,
     event = _ref.event;
@@ -442,6 +443,9 @@ 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(Classes.rowDragNoData);
     lineElement.style.display = 'none';
@@ -451,60 +455,57 @@ function positionDragLine(_ref) {
   }
   // 鼠标悬停所在的拖拽行信息
   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(_concatInstanceProperty(_context5 = "tr[data-rowindex=\"".concat(_rowIndex, "\"] .")).call(_context5, Classes.tableExtendCell)) : tableContainer.querySelector(_concatInstanceProperty(_context6 = "tr[data-rowindex=\"".concat(_rowIndex, "\"] .")).call(_context6, 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(_concatInstanceProperty(_context5 = "tr[data-rowindex=\"".concat(rowIndex, "\"] .")).call(_context5, 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(_concatInstanceProperty(_context7 = "tr[data-rowindex=\"".concat(rowIndex, "\"] .")).call(_context7, 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';
@@ -537,11 +538,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),
@@ -667,4 +668,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/lib/table/pipeline/features/rowDrag.js

@@ -90,7 +90,7 @@ function rowDrag(opt) {
           direction = getDirection(cell, event.clientY, allowDragIntoRow);
         }
       }
-      if (overIndex === -1 && dataSource.length > 0 && event.target === dropZoneTarget) {
+      if (overIndex === -1 && dataSource.length > 0 && dropZoneTarget.contains(event.target)) {
         overIndex = dataSource.length - 1;
         direction = 'bottom';
       }
@@ -441,6 +441,7 @@ function createDragLine(isTreeTable) {
   return dragLine;
 }
 function positionDragLine(_ref) {
+  var _context7;
   var lineElement = _ref.lineElement,
     dragZone = _ref.dragZone,
     event = _ref.event;
@@ -453,6 +454,9 @@ 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';
@@ -462,60 +466,57 @@ function positionDragLine(_ref) {
   }
   // 鼠标悬停所在的拖拽行信息
   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';
@@ -548,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),
@@ -678,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.5",
+  "version": "1.2.2-canary.6",
   "description": "金蝶 react table 组件",
   "title": "table",
   "keywords": [