@kdcloudjs/table 1.2.0-canary.16 → 1.2.0-canary.17-hotfix

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

@@ -18,9 +18,7 @@ import { always, flatMap } from '../../utils/others';
 import console from '../../utils/console';
 import getTableRenderTemplate from '../../base/renderTemplates';
 import { Classes } from '../../base';
-
 var rowDetailSymbol = _Symbol('row-detail');
-
 var fallbackRenderDetail = function fallbackRenderDetail() {
   return /*#__PURE__*/React.createElement("div", {
     style: {
@@ -32,14 +30,11 @@ var fallbackRenderDetail = function fallbackRenderDetail() {
     }
   }, "\u8BBE\u7F6E ", /*#__PURE__*/React.createElement("code", null, "rowDetail.renderDetail"), " \u6765\u81EA\u5B9A\u4E49\u8BE6\u60C5\u5185\u5BB9"));
 };
-
 export function rowDetail() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function rowDetailStep(pipeline) {
     var _context, _context2;
-
     var _a, _b, _c, _d, _e, _f, _g, _h;
-
     var stateKey = 'rowDetail';
     var rowDetailMetaKey = (_a = opts.rowDetailMetaKey) !== null && _a !== void 0 ? _a : rowDetailSymbol;
     var primaryKey = pipeline.ensurePrimaryKey('rowDetail');
@@ -54,33 +49,26 @@ export function rowDetail() {
     var openKeys = (_h = (_g = (_f = opts.openKeys) !== null && _f !== void 0 ? _f : pipeline.getStateAtKey(stateKey)) !== null && _g !== void 0 ? _g : opts.defaultOpenAll ? _mapInstanceProperty(_context = _filterInstanceProperty(_context2 = pipeline.getDataSource()).call(_context2, hasDetail)).call(_context, function (row, rowIndex) {
       return internals.safeGetRowKey(primaryKey, row, rowIndex);
     }) : opts.defaultOpenKeys) !== null && _h !== void 0 ? _h : [];
-
     var onChangeOpenKeys = function onChangeOpenKeys(nextKeys, key, action) {
       var _a;
-
       (_a = opts.onChangeOpenKeys) === null || _a === void 0 ? void 0 : _a.call(opts, nextKeys, key, action);
       pipeline.setStateAtKey(stateKey, nextKeys, {
         key: key,
         action: action
       });
     };
-
     var openKeySet = new _Set(openKeys);
-
     var toggle = function toggle(rowKey) {
       var expanded = openKeySet.has(rowKey);
-
       if (expanded) {
         onChangeOpenKeys(_filterInstanceProperty(openKeys).call(openKeys, function (key) {
           return key !== rowKey;
         }), rowKey, 'collapse');
       } else {
         var _context3;
-
         onChangeOpenKeys(_concatInstanceProperty(_context3 = []).call(_context3, _toConsumableArray(openKeys), [rowKey]), rowKey, 'expand');
       }
     };
-
     var detailPrimaryKey = typeof primaryKey === 'string' ? primaryKey : rowDetailMetaKey.toString() + 'PrimaryKey';
     return pipeline.dataSource(flatMap(pipeline.getDataSource(), function (row, rowIndex) {
       if (openKeySet.has(internals.safeGetRowKey(primaryKey, row, rowIndex))) {
@@ -96,35 +84,27 @@ export function rowDetail() {
         };
       }
     });
-
     function processColumns(columns) {
       if (columns.length === 0) {
         return columns;
       }
-
       var expandColumnIndex = 0;
-
       if (opts.expandColumnCode) {
         expandColumnIndex = _findIndexInstanceProperty(columns).call(columns, function (col) {
           return col.code === opts.expandColumnCode;
         });
-
         if (expandColumnIndex < 0) {
           console.warn('没找到可展开的列，请检查设置的展开列code');
           return columns;
         }
       }
-
       var expandCol = columns[expandColumnIndex];
-
       var tableColumns = _toConsumableArray(columns);
-
       var render = function render(value, row, rowIndex) {
         if (row[rowDetailMetaKey]) {
           // 第一列内容已经渲染
           if (expandColumnIndex !== 0) return;
           var renderRowDetail = getTableRenderTemplate('rowDetail');
-
           if (typeof renderRowDetail === 'function') {
             return renderRowDetail({
               row: row,
@@ -133,12 +113,9 @@ export function rowDetail() {
               renderDetail: renderDetail
             });
           }
-
           return renderDetail(row, rowIndex);
         }
-
         var content = internals.safeRender(expandCol, row, rowIndex);
-
         if (!hasDetail(row, rowIndex)) {
           return /*#__PURE__*/React.createElement(InlineFlexCell, {
             style: {
@@ -146,18 +123,14 @@ export function rowDetail() {
             }
           }, content);
         }
-
         var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
         var expanded = openKeySet.has(rowKey);
-
         var onClick = function onClick(e) {
           if (opts.stopClickEventPropagation) {
             e.stopPropagation();
           }
-
           toggle(rowKey);
         };
-
         var expandCls = expanded ? Classes.expanded : Classes.collapsed;
         var ExpandIcon = opts.expandIcon;
         return /*#__PURE__*/React.createElement(ExpansionCell, {
@@ -179,10 +152,8 @@ export function rowDetail() {
           onClick: clickArea === 'icon' ? onClick : undefined
         }), content);
       };
-
       var getCellProps = function getCellProps(value, row, rowIndex) {
         var _a;
-
         if (row[rowDetailMetaKey]) {
           return {
             style: _extends({
@@ -191,19 +162,15 @@ export function rowDetail() {
             }, opts.detailCellStyle)
           };
         }
-
         var prevProps = (_a = expandCol.getCellProps) === null || _a === void 0 ? void 0 : _a.call(expandCol, value, row, rowIndex);
-
         if (!hasDetail(row, rowIndex)) {
           return prevProps;
         }
-
         return mergeCellProps(prevProps, {
           onClick: function onClick(e) {
             if (opts.stopClickEventPropagation) {
               e.stopPropagation();
             }
-
             toggle(internals.safeGetRowKey(primaryKey, row, rowIndex));
           },
           style: {
@@ -211,15 +178,12 @@ export function rowDetail() {
           }
         });
       };
-
       var _tableColumns = _toArray(tableColumns),
-          firstCol = _tableColumns[0],
-          others = _sliceInstanceProperty(_tableColumns).call(_tableColumns, 1);
-
+        firstCol = _tableColumns[0],
+        others = _sliceInstanceProperty(_tableColumns).call(_tableColumns, 1);
       var firstColRender = function firstColRender(value, row, rowIndex) {
         if (row[rowDetailMetaKey]) {
           var renderRowDetail = getTableRenderTemplate('rowDetail');
-
           if (typeof renderRowDetail === 'function') {
             return renderRowDetail({
               row: row,
@@ -228,14 +192,11 @@ export function rowDetail() {
               renderDetail: renderDetail
             });
           }
-
           return renderDetail(row, rowIndex);
         }
-
         var content = internals.safeRender(firstCol, row, rowIndex);
         return content;
       };
-
       tableColumns[0] = _extends(_extends({}, firstCol), {
         render: firstColRender,
         getSpanRect: function getSpanRect(value, row, rowIndex) {
@@ -251,12 +212,12 @@ export function rowDetail() {
         }
       });
       tableColumns[expandColumnIndex] = _extends(_extends({}, expandCol), {
-        title: /*#__PURE__*/React.createElement("div", {
+        title: ( /*#__PURE__*/React.createElement("div", {
           style: {
             display: 'inline-block',
             marginLeft: textOffset
           }
-        }, internals.safeRenderHeader(expandCol)),
+        }, internals.safeRenderHeader(expandCol))),
         render: render,
         getCellProps: clickArea === 'cell' ? getCellProps : expandCol.getCellProps,
         getSpanRect: function getSpanRect(value, row, rowIndex) {

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

@@ -38,43 +38,35 @@ var defaultRowDragColumn = {
 export function rowDrag(opt) {
   return function rowDragStep(pipeline) {
     var _context;
-
     var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
     var artTable = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.artTable;
     if (!tableBody) return pipeline;
     var dataSource = pipeline.getDataSource();
     var rowHeight = (opt === null || opt === void 0 ? void 0 : opt.rowHeight) || 48;
-
     var handleDragStrat = function handleDragStrat(event) {
-      var _a; // 开始拖拽
-
-
+      var _a;
+      // 开始拖拽
       artTable.classList.add(cx(Classes.rowDragging));
       (_a = opt === null || opt === void 0 ? void 0 : opt.onDragStart) === null || _a === void 0 ? void 0 : _a.call(opt, event);
     };
-
     var handleDragMove = function handleDragMove(event) {
       var _a;
-
       (_a = opt === null || opt === void 0 ? void 0 : opt.onDragMove) === null || _a === void 0 ? void 0 : _a.call(opt, event);
       pipeline.setStateAtKey(rowDragKey, event);
     };
-
     var handleDragEnd = function handleDragEnd(event, isOutOfRange) {
       var _a;
-
       artTable.classList.remove(cx(Classes.rowDragging));
-      pipeline.setStateAtKey(rowDragKey, event); // 超出拖拽范围不触发dragend事件
-
+      pipeline.setStateAtKey(rowDragKey, event);
+      // 超出拖拽范围不触发dragend事件
       if (!isOutOfRange) {
         (_a = opt === null || opt === void 0 ? void 0 : opt.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(opt, event);
       }
     };
-
     var getDragEvent = function getDragEvent(startRowInfo, endRowInfo, _ref) {
       var isFinished = _ref.isFinished,
-          _ref$dragPosition = _ref.dragPosition,
-          dragPosition = _ref$dragPosition === void 0 ? 'bottom' : _ref$dragPosition;
+        _ref$dragPosition = _ref.dragPosition,
+        dragPosition = _ref$dragPosition === void 0 ? 'bottom' : _ref$dragPosition;
       return {
         startRowIndex: startRowInfo.rowIndex,
         startRow: startRowInfo.row,
@@ -84,31 +76,26 @@ export function rowDrag(opt) {
         isFinished: isFinished
       };
     };
-
     var updateScrollPosition = function updateScrollPosition(mouseMoveEvent) {
       if (opt === null || opt === void 0 ? void 0 : opt.suppressScrollMove) return;
       var clientY = mouseMoveEvent.clientY;
       var tableBodyClientRect = tableBody.getBoundingClientRect();
       var top = tableBodyClientRect.top,
-          height = tableBodyClientRect.height;
-
+        height = tableBodyClientRect.height;
       if (clientY + SCROLL_OFFSET >= top + height) {
         pipeline.ref.current.domHelper.tableBody.scrollTop += SCROLL_OFFSET;
       }
-
       if (clientY + SCROLL_OFFSET <= top) {
         pipeline.ref.current.domHelper.tableBody.scrollTop -= SCROLL_OFFSET;
       }
     };
-
     var onMouseDown = function onMouseDown(mouseDownEvent) {
       var _a;
-
       var startRowInfo = getTargetRowInfo(mouseDownEvent.target, tableBody, dataSource);
       var endRowInfo = startRowInfo;
       if (!startRowInfo || startRowInfo.code !== rowDragColumn.code) return;
-      if ((_a = opt === null || opt === void 0 ? void 0 : opt.isDisabled) === null || _a === void 0 ? void 0 : _a.call(opt, startRowInfo.row, startRowInfo.rowIndex)) return; // 默认拖拽插入的位置是向下
-
+      if ((_a = opt === null || opt === void 0 ? void 0 : opt.isDisabled) === null || _a === void 0 ? void 0 : _a.call(opt, startRowInfo.row, startRowInfo.rowIndex)) return;
+      // 默认拖拽插入的位置是向下
       var dragPosition = 'bottom';
       var isOutOfRange = false;
       var dragStartEvent = getDragEvent(startRowInfo, endRowInfo, {
@@ -117,36 +104,52 @@ export function rowDrag(opt) {
       });
       handleDragStrat(dragStartEvent);
       var tableWidth = tableBody.clientWidth;
-      var startRowRects = startRowInfo.cell.getBoundingClientRect(); // 光标位置距离初始拖拽行的偏移量
-
-      var startOffset = mouseDownEvent.clientY - startRowRects.y;
-      var dragElement = createDragElement(startRowRects, tableWidth, rowHeight); // 可拖拽的范围
-
+      var startRowRects = startRowInfo.cell.getBoundingClientRect();
+      // 光标位置距离初始拖拽行的偏移量
+      var startOffset = mouseDownEvent.clientY - startRowRects.top;
+      var dragElement = createDragElement(startRowRects, tableWidth, rowHeight);
+      // 可拖拽的范围
       var dragRange = getDragRange(tableBody, {
         startOffset: startOffset,
-        rowHeight: startRowRects.height
+        rowHeight: rowHeight
       });
+      var mousePosition = {
+        x: mouseDownEvent.clientX,
+        y: mouseDownEvent.clientY
+      };
       var mousemove$ = fromEvent(window, 'mousemove');
       var mouseup$ = fromEvent(window, 'mouseup');
+      var scrollCallback = function scrollCallback(event) {
+        // 在当前表格内滚动不处理
+        if (event.target === tableBody) return;
+        dragRange = getDragRange(tableBody, {
+          startOffset: startOffset,
+          rowHeight: rowHeight
+        });
+        var isOutOfRange = isOutOfDragRange(mousePosition, dragRange);
+        updateCurSorStyle(isOutOfRange);
+      };
+      document.addEventListener('scroll', scrollCallback, true);
       var rowDrag$ = mousemove$.pipe(map(function (mouseMoveEvent) {
         var clientX = mouseMoveEvent.clientX,
-            clientY = mouseMoveEvent.clientY;
+          clientY = mouseMoveEvent.clientY;
         var tagretRow = getTargetRowInfo(mouseMoveEvent.target, tableBody, dataSource);
-
         if (tagretRow) {
           endRowInfo = tagretRow;
         }
-
-        var targetRowRects = endRowInfo.cell.getBoundingClientRect(); // 判断拖拽插入的位置，拖拽框上边框位于目标行之上则向上插入，否则向下插入
-
-        var isMoveToTop = clientY - startOffset < targetRowRects.y;
+        var targetRowRects = endRowInfo.cell.getBoundingClientRect();
+        // 判断拖拽插入的位置，拖拽框上边框位于目标行之上则向上插入，否则向下插入
+        var isMoveToTop = clientY - startOffset < targetRowRects.top;
         dragPosition = isMoveToTop ? 'top' : 'bottom';
         isOutOfRange = isOutOfDragRange({
           x: clientX,
           y: clientY
         }, dragRange);
+        mousePosition = {
+          x: clientX,
+          y: clientY
+        };
         updateScrollPosition(mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
-
         updateDragElementPosition(dragElement, dragRange, {
           x: clientX,
           y: clientY,
@@ -162,8 +165,8 @@ export function rowDrag(opt) {
       rowDrag$.subscribe({
         next: function next(_ref2) {
           var startRowInfo = _ref2.startRowInfo,
-              endRowInfo = _ref2.endRowInfo,
-              dragPosition = _ref2.dragPosition;
+            endRowInfo = _ref2.endRowInfo,
+            dragPosition = _ref2.dragPosition;
           var dragMoveEvent = getDragEvent(startRowInfo, endRowInfo, {
             isFinished: false,
             dragPosition: dragPosition
@@ -178,31 +181,27 @@ export function rowDrag(opt) {
           handleDragEnd(dragEndEvent, isOutOfRange);
           removeDragElement(dragElement);
           removeCurSorStyle();
+          document.removeEventListener('scroll', scrollCallback, true);
         }
       });
     };
-
     var rowDragColumn = (opt === null || opt === void 0 ? void 0 : opt.rowDragColumn) || defaultRowDragColumn;
     pipeline.setFeatureOptions('rowDragColumnKey', rowDragColumn.code);
-
     var nextColumns = _sliceInstanceProperty(_context = pipeline.getColumns()).call(_context);
-
     nextColumns.unshift(rowDragColumn);
     pipeline.columns(nextColumns);
     pipeline.addTableProps({
       onMouseDown: onMouseDown
     });
     pipeline.appendRowPropsGetter(function (row, rowIndex) {
-      var _cx;
-
       var rowDragEvent = pipeline.getStateAtKey(rowDragKey) || {};
       var startRowIndex = rowDragEvent.startRowIndex,
-          endRowIndex = rowDragEvent.endRowIndex,
-          isFinished = rowDragEvent.isFinished,
-          dragPosition = rowDragEvent.dragPosition;
+        endRowIndex = rowDragEvent.endRowIndex,
+        isFinished = rowDragEvent.isFinished,
+        dragPosition = rowDragEvent.dragPosition;
       var isFooterCell = row[pipeline.getFeatureOptions('footerRowMetaKey')];
       if (isFooterCell || isFinished || rowIndex !== startRowIndex && rowIndex !== endRowIndex) return;
-      var className = cx((_cx = {}, _defineProperty(_cx, Classes.rowDragStart, rowIndex === startRowIndex), _defineProperty(_cx, Classes.rowDragEnd, rowIndex === endRowIndex), _defineProperty(_cx, Classes.rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), _defineProperty(_cx, Classes.rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'), _cx));
+      var className = cx(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, Classes.rowDragStart, rowIndex === startRowIndex), Classes.rowDragEnd, rowIndex === endRowIndex), Classes.rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), Classes.rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'));
       return {
         className: className
       };
@@ -210,7 +209,6 @@ export function rowDrag(opt) {
     return pipeline;
   };
 }
-
 function getTargetRowInfo(target, tableBody, record) {
   while (target && tableBody.contains(target)) {
     if (target.getAttribute('data-role') === 'table-cell') {
@@ -226,41 +224,33 @@ function getTargetRowInfo(target, tableBody, record) {
         cell: target
       };
     }
-
     target = target.parentElement;
   }
-
   return null;
 }
-
 function isEleInFooter(target) {
   while (target && !target.classList.contains(Classes.artTable)) {
     if (target.classList.contains(Classes.tableFooter)) {
       return true;
     }
-
     target = target.parentElement;
   }
-
   return false;
 }
-
 function createDragElement(rects, tableWidth, rowHeight) {
   var _context2, _context3, _context4;
-
   var x = rects.x,
-      y = rects.y;
+    y = rects.y;
   var dragMoveElement = document.createElement('div');
   dragMoveElement.className = cx(Classes.rowDragElement);
   dragMoveElement.style.cssText = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = "position:fixed;z-index:9999;left:".concat(x, "px;top:")).call(_context4, y, "px;pointer-events:none;width:")).call(_context3, tableWidth, "px;height:")).call(_context2, rowHeight, "px;background:var(--primary-color);opacity: 0.1;");
   document.body.appendChild(dragMoveElement);
   return dragMoveElement;
 }
-
 function updateDragElementPosition(element, dragRange, _ref3) {
   var x = _ref3.x,
-      y = _ref3.y,
-      startOffset = _ref3.startOffset;
+    y = _ref3.y,
+    startOffset = _ref3.startOffset;
   var validPosition = getValidPosition({
     x: x,
     y: y
@@ -268,11 +258,9 @@ function updateDragElementPosition(element, dragRange, _ref3) {
   element.style.top = validPosition.y - startOffset + 'px';
   return element;
 }
-
 function removeDragElement(element) {
   document.body.removeChild(element);
 }
-
 function updateCurSorStyle(isOutOfRange) {
   if (isOutOfRange) {
     document.body.style.cursor = 'no-drop';
@@ -280,34 +268,31 @@ function updateCurSorStyle(isOutOfRange) {
     document.body.style.cursor = 'move';
   }
 }
-
 function removeCurSorStyle() {
   document.body.style.cursor = 'default';
 }
-
 function getDragRange(tableBody, _ref4) {
   var startOffset = _ref4.startOffset,
-      rowHeight = _ref4.rowHeight;
+    rowHeight = _ref4.rowHeight;
   var tableBodyClientRect = tableBody.getBoundingClientRect();
   var height = tableBodyClientRect.height,
-      width = tableBodyClientRect.width,
-      x = tableBodyClientRect.x,
-      y = tableBodyClientRect.y;
+    width = tableBodyClientRect.width,
+    top = tableBodyClientRect.top,
+    left = tableBodyClientRect.left;
   return {
-    minX: x,
-    maxX: x + width,
-    minY: y - rowHeight + startOffset,
-    maxY: y + height + startOffset
+    minX: left,
+    maxX: left + width,
+    minY: top - rowHeight + startOffset,
+    maxY: top + height + startOffset
   };
 }
-
 function getValidPosition(position, dragRange) {
   var x = position.x,
-      y = position.y;
+    y = position.y;
   var minX = dragRange.minX,
-      maxX = dragRange.maxX,
-      minY = dragRange.minY,
-      maxY = dragRange.maxY;
+    maxX = dragRange.maxX,
+    minY = dragRange.minY,
+    maxY = dragRange.maxY;
   var newX = x < minX ? minX : x > maxX ? maxX : x;
   var newY = y < minY ? minY : y > maxY ? maxY : y;
   return {
@@ -315,13 +300,12 @@ function getValidPosition(position, dragRange) {
     y: newY
   };
 }
-
 function isOutOfDragRange(position, dragRange) {
   var x = position.x,
-      y = position.y;
+    y = position.y;
   var minX = dragRange.minX,
-      maxX = dragRange.maxX,
-      minY = dragRange.minY,
-      maxY = dragRange.maxY;
+    maxX = dragRange.maxX,
+    minY = dragRange.minY,
+    maxY = dragRange.maxY;
   return x > maxX || x < minX || y > maxY || y < minY;
 }