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

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

@@ -1,56 +1,32 @@
 "use strict";
 
 var _flatMapInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/flat-map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.rowDetail = rowDetail;
-
 var _toArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toArray"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _extends4 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
-
 var _symbol = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/symbol"));
-
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
-
 var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
-
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
 var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
-
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _commonViews = require("../../common-views");
-
 var _internals = require("../../internals");
-
 var _utils = require("../../utils");
-
 var _others = require("../../utils/others");
-
 var _console = _interopRequireDefault(require("../../utils/console"));
-
 var _renderTemplates = _interopRequireDefault(require("../../base/renderTemplates"));
-
 var _base = require("../../base");
-
 var rowDetailSymbol = (0, _symbol.default)('row-detail');
-
 var fallbackRenderDetail = function fallbackRenderDetail() {
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -62,14 +38,11 @@ var fallbackRenderDetail = function fallbackRenderDetail() {
     }
   }, "\u8BBE\u7F6E ", /*#__PURE__*/_react.default.createElement("code", null, "rowDetail.renderDetail"), " \u6765\u81EA\u5B9A\u4E49\u8BE6\u60C5\u5185\u5BB9"));
 };
-
 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');
@@ -84,33 +57,26 @@ function rowDetail() {
     var openKeys = (_h = (_g = (_f = opts.openKeys) !== null && _f !== void 0 ? _f : pipeline.getStateAtKey(stateKey)) !== null && _g !== void 0 ? _g : opts.defaultOpenAll ? (0, _map.default)(_context = (0, _filter.default)(_context2 = pipeline.getDataSource()).call(_context2, hasDetail)).call(_context, function (row, rowIndex) {
       return _internals.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.default(openKeys);
-
     var toggle = function toggle(rowKey) {
       var expanded = openKeySet.has(rowKey);
-
       if (expanded) {
         onChangeOpenKeys((0, _filter.default)(openKeys).call(openKeys, function (key) {
           return key !== rowKey;
         }), rowKey, 'collapse');
       } else {
         var _context3;
-
         onChangeOpenKeys((0, _concat.default)(_context3 = []).call(_context3, (0, _toConsumableArray2.default)(openKeys), [rowKey]), rowKey, 'expand');
       }
     };
-
     var detailPrimaryKey = typeof primaryKey === 'string' ? primaryKey : rowDetailMetaKey.toString() + 'PrimaryKey';
     return pipeline.dataSource((0, _flatMapInstanceProperty(_others))(pipeline.getDataSource(), function (row, rowIndex) {
       if (openKeySet.has(_internals.internals.safeGetRowKey(primaryKey, row, rowIndex))) {
@@ -126,35 +92,27 @@ function rowDetail() {
         };
       }
     });
-
     function processColumns(columns) {
       if (columns.length === 0) {
         return columns;
       }
-
       var expandColumnIndex = 0;
-
       if (opts.expandColumnCode) {
         expandColumnIndex = (0, _findIndex.default)(columns).call(columns, function (col) {
           return col.code === opts.expandColumnCode;
         });
-
         if (expandColumnIndex < 0) {
           _console.default.warn('没找到可展开的列，请检查设置的展开列code');
-
           return columns;
         }
       }
-
       var expandCol = columns[expandColumnIndex];
       var tableColumns = (0, _toConsumableArray2.default)(columns);
-
       var render = function render(value, row, rowIndex) {
         if (row[rowDetailMetaKey]) {
           // 第一列内容已经渲染
           if (expandColumnIndex !== 0) return;
           var renderRowDetail = (0, _renderTemplates.default)('rowDetail');
-
           if (typeof renderRowDetail === 'function') {
             return renderRowDetail({
               row: row,
@@ -163,12 +121,9 @@ function rowDetail() {
               renderDetail: renderDetail
             });
           }
-
           return renderDetail(row, rowIndex);
         }
-
         var content = _internals.internals.safeRender(expandCol, row, rowIndex);
-
         if (!hasDetail(row, rowIndex)) {
           return /*#__PURE__*/_react.default.createElement(_commonViews.InlineFlexCell, {
             style: {
@@ -176,19 +131,14 @@ function rowDetail() {
             }
           }, content);
         }
-
         var rowKey = _internals.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 ? _base.Classes.expanded : _base.Classes.collapsed;
         var ExpandIcon = opts.expandIcon;
         return /*#__PURE__*/_react.default.createElement(_commonViews.ExpansionCell, {
@@ -210,10 +160,8 @@ function rowDetail() {
           onClick: clickArea === 'icon' ? onClick : undefined
         }), content);
       };
-
       var getCellProps = function getCellProps(value, row, rowIndex) {
         var _a;
-
         if (row[rowDetailMetaKey]) {
           return {
             style: (0, _extends4.default)({
@@ -222,19 +170,15 @@ 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 (0, _utils.mergeCellProps)(prevProps, {
           onClick: function onClick(e) {
             if (opts.stopClickEventPropagation) {
               e.stopPropagation();
             }
-
             toggle(_internals.internals.safeGetRowKey(primaryKey, row, rowIndex));
           },
           style: {
@@ -242,15 +186,12 @@ function rowDetail() {
           }
         });
       };
-
       var _tableColumns = (0, _toArray2.default)(tableColumns),
-          firstCol = _tableColumns[0],
-          others = (0, _slice.default)(_tableColumns).call(_tableColumns, 1);
-
+        firstCol = _tableColumns[0],
+        others = (0, _slice.default)(_tableColumns).call(_tableColumns, 1);
       var firstColRender = function firstColRender(value, row, rowIndex) {
         if (row[rowDetailMetaKey]) {
           var renderRowDetail = (0, _renderTemplates.default)('rowDetail');
-
           if (typeof renderRowDetail === 'function') {
             return renderRowDetail({
               row: row,
@@ -259,15 +200,11 @@ function rowDetail() {
               renderDetail: renderDetail
             });
           }
-
           return renderDetail(row, rowIndex);
         }
-
         var content = _internals.internals.safeRender(firstCol, row, rowIndex);
-
         return content;
       };
-
       tableColumns[0] = (0, _extends4.default)((0, _extends4.default)({}, firstCol), {
         render: firstColRender,
         getSpanRect: function getSpanRect(value, row, rowIndex) {

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

@@ -1,32 +1,21 @@
 "use strict";
 
 var _mapInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/map");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ROW_DRAG_COLUMN_CODE = void 0;
 exports.rowDrag = rowDrag;
 exports.rowDragKey = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
-
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
-
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _rxjs = require("rxjs");
-
 var _operators = require("rxjs/operators");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _styles = require("../../base/styles");
-
 var ROW_DRAG_COLUMN_CODE = '$_row_drag_column_&';
 exports.ROW_DRAG_COLUMN_CODE = ROW_DRAG_COLUMN_CODE;
 var rowDragKey = 'rowDragKey';
@@ -58,47 +47,38 @@ var defaultRowDragColumn = {
     }));
   }
 };
-
 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((0, _classnames.default)(_styles.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((0, _classnames.default)(_styles.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,
@@ -108,31 +88,26 @@ 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, {
@@ -141,11 +116,11 @@ function rowDrag(opt) {
       });
       handleDragStrat(dragStartEvent);
       var tableWidth = tableBody.clientWidth;
-      var startRowRects = startRowInfo.cell.getBoundingClientRect(); // 光标位置距离初始拖拽行的偏移量
-
+      var startRowRects = startRowInfo.cell.getBoundingClientRect();
+      // 光标位置距离初始拖拽行的偏移量
       var startOffset = mouseDownEvent.clientY - startRowRects.y;
-      var dragElement = createDragElement(startRowRects, tableWidth, rowHeight); // 可拖拽的范围
-
+      var dragElement = createDragElement(startRowRects, tableWidth, rowHeight);
+      // 可拖拽的范围
       var dragRange = getDragRange(tableBody, {
         startOffset: startOffset,
         rowHeight: startRowRects.height
@@ -154,15 +129,13 @@ function rowDrag(opt) {
       var mouseup$ = (0, _rxjs.fromEvent)(window, 'mouseup');
       var rowDrag$ = mousemove$.pipe((0, _mapInstanceProperty(_operators))(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 targetRowRects = endRowInfo.cell.getBoundingClientRect();
+        // 判断拖拽插入的位置，拖拽框上边框位于目标行之上则向上插入，否则向下插入
         var isMoveToTop = clientY - startOffset < targetRowRects.y;
         dragPosition = isMoveToTop ? 'top' : 'bottom';
         isOutOfRange = isOutOfDragRange({
@@ -170,7 +143,6 @@ function rowDrag(opt) {
           y: clientY
         }, dragRange);
         updateScrollPosition(mouseMoveEvent); // 拖拽到底时让滚动条可以滚动
-
         updateDragElementPosition(dragElement, dragRange, {
           x: clientX,
           y: clientY,
@@ -186,8 +158,8 @@ 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
@@ -205,7 +177,6 @@ function rowDrag(opt) {
         }
       });
     };
-
     var rowDragColumn = (opt === null || opt === void 0 ? void 0 : opt.rowDragColumn) || defaultRowDragColumn;
     pipeline.setFeatureOptions('rowDragColumnKey', rowDragColumn.code);
     var nextColumns = (0, _slice.default)(_context = pipeline.getColumns()).call(_context);
@@ -216,12 +187,11 @@ function rowDrag(opt) {
     });
     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 = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.rowDragStart, rowIndex === startRowIndex), (0, _defineProperty2.default)(_cx, _styles.Classes.rowDragEnd, rowIndex === endRowIndex), (0, _defineProperty2.default)(_cx, _styles.Classes.rowDragEndToTop, rowIndex === endRowIndex && dragPosition === 'top'), (0, _defineProperty2.default)(_cx, _styles.Classes.rowDragEndToBottom, rowIndex === endRowIndex && dragPosition === 'bottom'), _cx));
@@ -232,7 +202,6 @@ function rowDrag(opt) {
     return pipeline;
   };
 }
-
 function getTargetRowInfo(target, tableBody, record) {
   while (target && tableBody.contains(target)) {
     if (target.getAttribute('data-role') === 'table-cell') {
@@ -248,41 +217,33 @@ function getTargetRowInfo(target, tableBody, record) {
         cell: target
       };
     }
-
     target = target.parentElement;
   }
-
   return null;
 }
-
 function isEleInFooter(target) {
   while (target && !target.classList.contains(_styles.Classes.artTable)) {
     if (target.classList.contains(_styles.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 = (0, _classnames.default)(_styles.Classes.rowDragElement);
   dragMoveElement.style.cssText = (0, _concat.default)(_context2 = (0, _concat.default)(_context3 = (0, _concat.default)(_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
@@ -290,11 +251,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';
@@ -302,19 +261,17 @@ 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,
+    x = tableBodyClientRect.x,
+    y = tableBodyClientRect.y;
   return {
     minX: x,
     maxX: x + width,
@@ -322,14 +279,13 @@ function getDragRange(tableBody, _ref4) {
     maxY: y + 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 {
@@ -337,13 +293,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;
 }