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

package/dist/@kdcloudjs/table.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/table v1.2.2-canary.4
+ *   @kdcloudjs/table v1.2.2-canary.6
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.

package/dist/@kdcloudjs/table.js

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/table v1.2.2-canary.4
+ *   @kdcloudjs/table v1.2.2-canary.6
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -3200,7 +3200,7 @@ var Z = {
   scrollItem: 30,
   loadingIndicator: 40
 };
-var GlobalStyle = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["createGlobalStyle"])(_templateObject || (_templateObject = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  .", "{\n    position: absolute;\n    top:0;\n    left:0;\n    z-index: 9999;\n    pointer-events:none;\n    user-select: none;\n\n    display:flex;\n    opacity: 0.9;\n    align-items:center;\n    min-width:80px;\n    padding: 0px 8px;\n    border: 1px solid #d9d9d9;\n    box-shadow: 0px 6px 16px 3px rgba(0,0,0,0.08);\n    border-radius: 2px;\n    background: #fff;\n\n    .", "{\n      font-size:12px;\n      overflow:hidden;\n      text-overflow: ellipsis;\n      white-space:nowrap;\n    }\n    \n  }\n\n  .", "{\n    position: absolute;\n    top:0;\n    left:0;\n    z-index: 9998;\n    pointer-events:none;\n    user-select: none;\n    height: 2px;\n    background: var(--primary-color);\n  }\n  .", ":before{\n    content: \" \";\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    top:-4px;\n    border: 2px solid var(--primary-color);\n    border-radius: 50%;\n    background:#fff;\n  }\n"])), Classes.rowDragElement, Classes.rowDragElementLabel, Classes.rowDragLine, Classes.treeTableRowDragLine);
+var GlobalStyle = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["createGlobalStyle"])(_templateObject || (_templateObject = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  .", "{\n    position: absolute;\n    top:0;\n    left:0;\n    z-index: 9999;\n    pointer-events:none;\n    user-select: none;\n\n    display:flex;\n    opacity: 0.9;\n    align-items:center;\n    min-width:80px;\n    padding: 0px 8px;\n    border: 1px solid #d9d9d9;\n    box-shadow: 0px 6px 16px 3px rgba(0,0,0,0.08);\n    border-radius: 2px;\n    background: #fff;\n    max-height:48px;\n\n    .", "{\n      font-size:12px;\n      overflow:hidden;\n      text-overflow: ellipsis;\n      white-space:nowrap;\n    }\n    \n  }\n\n  .", "{\n    position: absolute;\n    top:0;\n    left:0;\n    z-index: 9998;\n    pointer-events:none;\n    user-select: none;\n    height: 2px;\n    background: var(--primary-color);\n  }\n  .", ":before{\n    content: \" \";\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    top:-4px;\n    border: 2px solid var(--primary-color);\n    border-radius: 50%;\n    background:#fff;\n  }\n"])), Classes.rowDragElement, Classes.rowDragElementLabel, Classes.rowDragLine, Classes.treeTableRowDragLine);
 var outerBorderStyleMixin = Object(styled_components__WEBPACK_IMPORTED_MODULE_4__["css"])(_templateObject2 || (_templateObject2 = _babel_runtime_helpers_taggedTemplateLiteral__WEBPACK_IMPORTED_MODULE_0___default()(["\n  border-top: 1px solid #cccccc;\n  border-right: 1px solid #cccccc;\n  border-bottom: 1px solid #cccccc;\n  border-left: 1px solid #cccccc;\n\n  td.", ",\n  th.", " {\n    border-left: none;\n  }\n  td.", ",\n  th.", " {\n    border-right: none;\n  }\n\n  thead tr.", " th,\n  tbody tr.", " td {\n    border-top: none;\n  }\n  &.has-footer tfoot tr.", " td {\n    border-bottom: none;\n  }\n  &:not(.has-footer) tbody tr.", " td {\n    border-bottom: none;\n  }\n  td.", ":not(.", "){\n    border-left: var(---cell-border-vertical);\n  }\n  td.", ":not(.", "){\n    border-right: var(---cell-border-vertical);\n  }\n"])), Classes.first, Classes.first, Classes.last, Classes.last, Classes.first, Classes.first, Classes.last, Classes.last, Classes.rowSpan, Classes.first, Classes.rowSpan, Classes.last);
 var defaultCSSVariables = {
   '--row-height': '48px',
@@ -8862,7 +8862,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';
       }
@@ -8968,7 +8968,7 @@ function rowDrag(opt) {
         timeoutId = setTimeout(function () {
           intervalId = setInterval(function () {
             tableBody.scrollTop += moveOffset;
-          }, 100);
+          }, 50);
         }, 500);
       };
       var handleDragStart = function handleDragStart(mouseDownEvent) {
@@ -9062,6 +9062,9 @@ function rowDrag(opt) {
         }
       };
       var handleDragStop = function handleDragStop(mouseUpEvent) {
+        if (!isValidDrag) {
+          return;
+        }
         removeElement(dragElement);
         removeElement(dragLine);
         artTable.classList.remove(classnames__WEBPACK_IMPORTED_MODULE_11___default()(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragging));
@@ -9069,10 +9072,6 @@ function rowDrag(opt) {
         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();
@@ -9086,6 +9085,10 @@ function rowDrag(opt) {
           var dragEvent = createDropTargetEvent(dropTarget, mouseUpEvent, startDataItem, currentDropZone);
           dropTarget.onDragStop(dragEvent);
         }
+        while (expandRowCallBackList.length > 0) {
+          var callback = expandRowCallBackList.pop();
+          callback();
+        }
       };
       var mousemove$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'mousemove');
       var mouseup$ = Object(rxjs__WEBPACK_IMPORTED_MODULE_9__["fromEvent"])(window, 'mouseup');
@@ -9226,6 +9229,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(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].rowDragNoData);
     lineElement.style.display = 'none';
@@ -9235,59 +9241,56 @@ function positionDragLine(_ref) {
   }
   // 鼠标悬停所在的拖拽行信息
   var dragItem = getDragRowItem(event.target, tableContainer, dataSource);
-  if (!dragItem) return;
+  if (!dragItem) {
+    if (dataSource.length > 0 && tableContainer.contains(event.target)) {
+      var _rowIndex = dataSource.length - 1;
+      var _row = dataSource[_rowIndex];
+      var _direction = 'bottom';
+      var _targetCell = isTreeTable ? tableContainer.querySelector("tr[data-rowindex=\"".concat(_rowIndex, "\"] .").concat(_base_styles__WEBPACK_IMPORTED_MODULE_12__["Classes"].tableExtendCell)) : tableContainer.querySelector("tr[data-rowindex=\"".concat(_rowIndex, "\"] .").concat(_base_styles__WEBPACK_IMPORTED_MODULE_12__["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 iconWidth = treeModeOptions.iconWidth,
-      iconIndent = treeModeOptions.iconIndent,
-      iconGap = treeModeOptions.iconGap,
-      indentSize = treeModeOptions.indentSize,
-      treeMetaKey = treeModeOptions.treeMetaKey;
-    var expandCell = tableContainer.querySelector("tr[data-rowindex=\"".concat(rowIndex, "\"] .").concat(_base_styles__WEBPACK_IMPORTED_MODULE_12__["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("tr[data-rowindex=\"".concat(rowIndex, "\"] .").concat(_base_styles__WEBPACK_IMPORTED_MODULE_12__["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';
@@ -9320,11 +9323,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),
@@ -9451,6 +9454,57 @@ function getDirection(cell, clientY) {
   }
   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
+  };
+};
 
 /***/ }),