@kdcloudjs/table 1.1.3-canary.7 → 1.1.3-canary.8

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.footerDataSource = footerDataSource;
+exports.footerRowMetaSymbol = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _symbol = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/symbol"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var footerRowMetaSymbol = (0, _symbol.default)('footer-row');
+exports.footerRowMetaSymbol = footerRowMetaSymbol;
+
+function footerDataSource() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function footerDataSourceStep(pipeline) {
+    var _a, _b;
+
+    var footerDataSource = (_a = opts.dataSource) !== null && _a !== void 0 ? _a : pipeline.getFooterDataSource();
+    var footerRowMetaKey = (_b = opts.footerRowMetaKey) !== null && _b !== void 0 ? _b : footerRowMetaSymbol;
+    pipeline.setFeatureOptions('footerRowMetaKey', footerRowMetaKey);
+
+    if (footerDataSource) {
+      pipeline.footerDataSource((0, _map.default)(footerDataSource).call(footerDataSource, function (row) {
+        return (0, _extends3.default)((0, _defineProperty2.default)({}, footerRowMetaKey, true), row);
+      }));
+    } else {
+      console.warn('调用 pipeline.use(features.footerDataSource()) 前请先设置页脚数据源，设置方法有：pipeline.use(features.footerDataSource({dataSource:any[]})) 或者 pipeline.footerDataSource(any[])');
+    }
+
+    return pipeline;
+  };
+}

package/lib/table/pipeline/features/index.d.ts

@@ -16,3 +16,4 @@ export { contextMenu, ContextMenuFeatureOptions } from './contextMenu';
 export { filter, FilterFeatureOptions } from './columnFilter';
 export { rangeSelection, RangeSelectionFeatureOptions } from './rangeSelection';
 export { mergeCellHover } from './mergeCellHover';
+export { footerDataSource, FooterDataSourceFeatureOptions, footerRowMetaSymbol } from './footerDataSource';

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

@@ -55,6 +55,18 @@ Object.defineProperty(exports, "filter", {
     return _filterInstanceProperty(_columnFilter);
   }
 });
+Object.defineProperty(exports, "footerDataSource", {
+  enumerable: true,
+  get: function get() {
+    return _footerDataSource.footerDataSource;
+  }
+});
+Object.defineProperty(exports, "footerRowMetaSymbol", {
+  enumerable: true,
+  get: function get() {
+    return _footerDataSource.footerRowMetaSymbol;
+  }
+});
 Object.defineProperty(exports, "mergeCellHover", {
   enumerable: true,
   get: function get() {
@@ -156,4 +168,6 @@ var _columnFilter = require("./columnFilter");
 
 var _rangeSelection = require("./rangeSelection");
 
-var _mergeCellHover = require("./mergeCellHover");
+var _mergeCellHover = require("./mergeCellHover");
+
+var _footerDataSource = require("./footerDataSource");

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

@@ -131,6 +131,10 @@ function multiSelect() {
           return (0, _utils.mergeCellProps)(preCellProps, checkboxCellProps);
         },
         render: function render(_, row, rowIndex) {
+          if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
+            return null;
+          }
+
           var key = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
 
           var checked = set.has(key);

package/lib/table/pipeline/features/rangeSelection.d.ts

@@ -6,5 +6,5 @@ export interface RangeSelectionFeatureOptions {
     preventkDefaultOfKeyDownEvent?: boolean;
 }
 export declare const rangeSelectionKey = "rangeSelection";
-export declare const lastClickCell = "lastClickCell";
+export declare const lastClickCellKey = "lastClickCell";
 export declare function rangeSelection(opts: RangeSelectionFeatureOptions): (pipeline: TablePipeline) => TablePipeline;

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

@@ -7,7 +7,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.lastClickCell = void 0;
+exports.lastClickCellKey = void 0;
 exports.rangeSelection = rangeSelection;
 exports.rangeSelectionKey = void 0;
 
@@ -35,42 +35,44 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var rangeSelectionKey = 'rangeSelection';
 exports.rangeSelectionKey = rangeSelectionKey;
-var lastClickCell = 'lastClickCell';
-exports.lastClickCell = lastClickCell;
+var lastClickCellKey = 'lastClickCell';
+exports.lastClickCellKey = lastClickCellKey;
 
 function rangeSelection(opts) {
   return function step(pipeline) {
     var SCROLL_SIZE = 30;
     var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
+    var tableFooter = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableFooter;
 
     if (!tableBody) {
       return pipeline;
     }
 
     var columns = pipeline.getColumns();
+    var dataSource = pipeline.getDataSource();
 
     var rangeSelectedChange = function rangeSelectedChange(rangeSelection) {
       var _a;
 
       pipeline.setStateAtKey(rangeSelectionKey, rangeSelection);
       (_a = opts === null || opts === void 0 ? void 0 : opts.rangeSelectedChange) === null || _a === void 0 ? void 0 : _a.call(opts, rangeSelection);
-    }; // if (!pipeline.getFeatureOptions(rangeSelectionKey)) {
-    //   pipeline.setFeatureOptions(rangeSelectionKey, {
-    //     optionKey: rangeSelectionKey,
-    //     rangeSelectedChange: rangeSelectedChange
-    //   })
-    // }
-
+    };
 
     var setRangeSelection = function setRangeSelection(startDragCell, draggingCell) {
-      if (!startDragCell || !draggingCell || isSameCell(startDragCell, draggingCell)) return;
+      if (!startDragCell || !draggingCell) return;
       var rangeColumns = getRangeColumns(startDragCell, draggingCell, columns);
-      var isTopToBottom = startDragCell.rowIndex <= draggingCell.rowIndex;
+
+      var _getRangeSelectionRow = getRangeSelectionRowInfo(startDragCell, draggingCell, dataSource),
+          startRow = _getRangeSelectionRow.startRow,
+          endRow = _getRangeSelectionRow.endRow,
+          footerRowRange = _getRangeSelectionRow.footerRowRange;
+
       var rangeSelection = {
-        startRow: isTopToBottom ? startDragCell.rowIndex : startDragCell.rowIndex + startDragCell.rowSpan - 1,
-        endRow: isTopToBottom ? draggingCell.rowIndex + draggingCell.rowSpan - 1 : draggingCell.rowIndex,
+        startRow: startRow,
+        endRow: endRow,
         columns: rangeColumns,
-        startColumn: startDragCell.column
+        startColumn: startDragCell.column,
+        footerRowRange: footerRowRange
       };
       rangeSelectedChange(rangeSelection);
     };
@@ -81,23 +83,23 @@ function rangeSelection(opts) {
 
       if (clickCell) {
         if (event.shiftKey) {
-          var _lastClickCell = pipeline.getStateAtKey(lastClickCell);
+          var _lastClickCell = pipeline.getStateAtKey(lastClickCellKey);
 
           if (_lastClickCell) {
             setRangeSelection(_lastClickCell, clickCell);
           } else {
             // 第一次进来就按住shift键，这时候要记住点击的单元格
-            pipeline.setStateAtKey(lastClickCell, clickCell);
+            pipeline.setStateAtKey(lastClickCellKey, clickCell);
           }
         } else {
-          pipeline.setStateAtKey(lastClickCell, clickCell);
-          rangeSelectedChange(null);
+          pipeline.setStateAtKey(lastClickCellKey, clickCell);
+          setRangeSelection(clickCell, clickCell);
         }
       }
     };
 
     var onMouseDown = function onMouseDown(mouseDownEvent) {
-      if (mouseDownEvent.button !== 0 || !(0, _utils.isElementInEventPath)(tableBody, mouseDownEvent.nativeEvent)) return; // mouseDownEvent.preventDefault()
+      if (mouseDownEvent.button !== 0 || !((0, _utils.isElementInEventPath)(tableBody, mouseDownEvent.nativeEvent) || (0, _utils.isElementInEventPath)(tableFooter, mouseDownEvent.nativeEvent))) return; // mouseDownEvent.preventDefault()
       // shift + 点击选中
 
       shiftKeySelect(mouseDownEvent);
@@ -153,10 +155,11 @@ function rangeSelection(opts) {
     };
 
     var onKeyDown = function onKeyDown(e) {
-      if (!(0, _utils.isElementInEventPath)(tableBody, e.nativeEvent)) return;
+      if (!((0, _utils.isElementInEventPath)(tableBody, e.nativeEvent) || (0, _utils.isElementInEventPath)(tableFooter, e.nativeEvent))) return;
 
       if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
         var rowLen = pipeline.getDataSource().length;
+        var footerDataSource = pipeline.getFooterDataSource() || [];
 
         if (columns.length && rowLen) {
           opts.preventkDefaultOfKeyDownEvent !== false && e.preventDefault();
@@ -164,7 +167,11 @@ function rangeSelection(opts) {
             startRow: 0,
             endRow: rowLen - 1,
             columns: columns,
-            startColumn: columns[0]
+            startColumn: columns[0],
+            footerRowRange: footerDataSource.length > 0 ? {
+              startRow: 0,
+              endRow: footerDataSource.length - 1
+            } : null
           });
         }
       }
@@ -173,7 +180,8 @@ function rangeSelection(opts) {
     pipeline.addTableProps({
       onMouseDown: onMouseDown,
       onKeyDown: onKeyDown,
-      tabIndex: -1
+      tabIndex: -1,
+      className: (0, _classnames.default)([_styles.Classes.rangeSelection])
     }); // todo: 后面可以把mousedown放到一个流里面
 
     return pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col) {
@@ -189,15 +197,29 @@ function rangeSelection(opts) {
           var _cx;
 
           var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
+          var isInFooter = record[pipeline.getFeatureOptions('footerRowMetaKey')];
           var startRow = rangeSelection.startRow,
               endRow = rangeSelection.endRow,
-              columns = rangeSelection.columns;
-          var startIndex = startRow < endRow ? startRow : endRow;
-          var endIndex = startRow < endRow ? endRow : startRow;
+              columns = rangeSelection.columns,
+              footerRowRange = rangeSelection.footerRowRange;
+
+          var _getRowIndex = getRowIndex(startRow, endRow),
+              startRowIndex = _getRowIndex.startRowIndex,
+              endRowIndex = _getRowIndex.endRowIndex;
+
+          var _getFooterRowIndex = getFooterRowIndex(footerRowRange),
+              footerStartRowIndex = _getFooterRowIndex.startRowIndex,
+              footerEndRowIndex = _getFooterRowIndex.endRowIndex;
+
           var startCol = columns[0];
           var endCol = columns[columns.length - 1];
-          var match = rowIndex >= startIndex && rowIndex <= endIndex;
-          var className = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeSelected, match), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeTop, rowIndex === startIndex), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeLeft, col.code === startCol.code && match), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeBottom, rowIndex === endIndex), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeRight, col.code === endCol.code && match), _cx));
+          var bodyMatch = !isInFooter && rowIndex >= startRowIndex && rowIndex <= endRowIndex;
+          var footerMatch = isInFooter && footerRowRange && rowIndex >= footerStartRowIndex && rowIndex <= footerEndRowIndex;
+          var match = footerMatch || bodyMatch;
+          var matchSingleCell = match && isCellRangeSingleCell(rangeSelection); // 单个范围选中单元格不显示样式
+
+          var showCellRangeStyle = match && !matchSingleCell;
+          var className = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeSingleCell, matchSingleCell), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeSelected, showCellRangeStyle), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeTop, showCellRangeStyle && (isInFooter ? startRowIndex !== -1 ? false : rowIndex === footerStartRowIndex : rowIndex === startRowIndex)), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeLeft, showCellRangeStyle && col.code === startCol.code), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeBottom, showCellRangeStyle && (isInFooter ? rowIndex === footerEndRowIndex : footerRowRange ? false : rowIndex === endRowIndex)), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeRight, showCellRangeStyle && col.code === endCol.code), _cx));
           return (0, _utils.mergeCellProps)(prevCellProps, {
             className: className
           });
@@ -223,7 +245,8 @@ function getTargetCell(target, columns) {
             rowIndex: parseInt(target.getAttribute('data-rowindex')),
             rowSpan: parseInt(target.getAttribute('rowspan') || 1),
             code: columnCode,
-            column: column
+            column: column,
+            isInFooter: isEleInFooter(target)
           }
         };
       }();
@@ -238,7 +261,19 @@ function getTargetCell(target, columns) {
 }
 
 function isSameCell(cell1, cell2) {
-  return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code;
+  return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code && cell1.isInFooter === cell2.isInFooter;
+}
+
+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 getRangeColumns(startCell, endCell, columns) {
@@ -255,4 +290,97 @@ function getRangeColumns(startCell, endCell, columns) {
   } else {
     return (0, _slice.default)(flatColumns).call(flatColumns, endIndex, startIndex + 1);
   }
+}
+
+function getRangeSelectionRowInfo(startCell, endCell, dataSource) {
+  var footerRowRange = null;
+  var startRow = -1;
+  var endRow = -1;
+
+  var _getCellRangeRow = getCellRangeRow(startCell, endCell),
+      _startRow = _getCellRangeRow.startRow,
+      _endRow = _getCellRangeRow.endRow; // 两个单元格都在表体
+
+
+  if (!startCell.isInFooter && !endCell.isInFooter) {
+    startRow = _startRow;
+    endRow = _endRow;
+  } else if (startCell.isInFooter && endCell.isInFooter) {
+    // 两个单元格都在表底
+    footerRowRange = {
+      startRow: _startRow,
+      endRow: _endRow
+    };
+  } else {
+    // 一个单元格在表体，一个在表底
+    if (startCell.isInFooter) {
+      startRow = dataSource.length - 1;
+      endRow = endCell.rowIndex;
+      footerRowRange = {
+        startRow: startCell.rowIndex,
+        endRow: 0
+      };
+    } else {
+      startRow = startCell.rowIndex;
+      endRow = dataSource.length - 1;
+      footerRowRange = {
+        startRow: 0,
+        endRow: endCell.rowIndex
+      };
+    }
+  }
+
+  return {
+    startRow: startRow,
+    endRow: endRow,
+    footerRowRange: footerRowRange
+  };
+}
+
+function getCellRangeRow(startCell, endCell) {
+  if (isSameCell(startCell, endCell)) {
+    return {
+      startRow: startCell.rowIndex,
+      endRow: startCell.rowIndex
+    };
+  }
+
+  var isTopToBottom = startCell.rowIndex <= endCell.rowIndex;
+  var startRow = isTopToBottom ? startCell.rowIndex : startCell.rowIndex + startCell.rowSpan - 1;
+  var endRow = isTopToBottom ? endCell.rowIndex + endCell.rowSpan - 1 : endCell.rowIndex;
+  return {
+    startRow: startRow,
+    endRow: endRow
+  };
+}
+
+function isCellRangeSingleCell(rangeSelection) {
+  var startRow = rangeSelection.startRow,
+      endRow = rangeSelection.endRow,
+      columns = rangeSelection.columns,
+      footerRowRange = rangeSelection.footerRowRange;
+  var isBodySingleCell = !footerRowRange && startRow === endRow && columns.length === 1;
+  var isFooterSingleCell = startRow === -1 && footerRowRange.startRow === footerRowRange.endRow && columns.length === 1;
+  return isBodySingleCell || isFooterSingleCell;
+}
+
+function getRowIndex(startRow, endRow) {
+  var isReverse = startRow > endRow;
+  var startRowIndex = isReverse ? endRow : startRow;
+  var endRowIndex = isReverse ? startRow : endRow;
+  return {
+    startRowIndex: startRowIndex,
+    endRowIndex: endRowIndex
+  };
+}
+
+function getFooterRowIndex(footerRowRange) {
+  if (footerRowRange) {
+    return getRowIndex(footerRowRange.startRow, footerRowRange.endRow);
+  }
+
+  return {
+    startRowIndex: -1,
+    endRowIndex: -1
+  };
 }

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

@@ -76,6 +76,10 @@ function singleSelect() {
         return preCellProps;
       },
       render: function render(_, row, rowIndex) {
+        if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
+          return null;
+        }
+
         var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
 
         return /*#__PURE__*/_react.default.createElement(Radio, {

package/lib/table/pipeline/pipeline.d.ts

@@ -36,7 +36,7 @@ export declare class TablePipeline {
     private _tableProps;
     private _dataSource;
     private _columns;
-    private _footerDataSource;
+    private _footerDataSource?;
     static defaultIndents: TablePipelineIndentsConfig;
     readonly ctx: TablePipelineCtx;
     private readonly state;
@@ -88,6 +88,10 @@ export declare class TablePipeline {
     setFeatureOptions(optionKey: string, value: any): void;
     /** 获取 BaseTable 的 props，结果中包含 dataSource/columns/primaryKey/getRowProps 四个字段 */
     getProps(this: TablePipeline): TableProps;
+    /**
+     * 清除范围选中内容
+     */
+    clearRangeSelection(): void;
 }
 export declare function useTablePipeline(ctx?: Partial<TablePipelineCtx>): TablePipeline;
 export {};

package/lib/table/pipeline/pipeline.js

@@ -28,6 +28,8 @@ var _utils = require("../utils");
 
 var _autoFill = require("./features/autoFill");
 
+var _rangeSelection = require("./features/rangeSelection");
+
 /**
  * 表格数据处理流水线。TablePipeline 提供了表格数据处理过程中的一些上下方与工具方法，包括……
  *
@@ -292,19 +294,19 @@ var TablePipeline = /*#__PURE__*/function () {
 
       result.setTableDomHelper = function (domHelper) {
         _this2.ref.current.domHelper = domHelper;
-      }; // if (this.getFeatureOptions(rangeSelectionKey)) {
-      //   result.clearRangeSelectionStatus = () => {
-      //     const { rangeSelectedChange } = this.getFeatureOptions(rangeSelectionKey)
-      //     const rangeSelection = this.getStateAtKey(rangeSelectionKey)
-      //     if (rangeSelection) {
-      //       rangeSelectedChange?.(null)
-      //     }
-      //   }
-      // }
-
+      };
 
       return result;
     }
+    /**
+     * 清除范围选中内容
+     */
+
+  }, {
+    key: "clearRangeSelection",
+    value: function clearRangeSelection() {
+      this.setStateAtKey(_rangeSelection.rangeSelectionKey, null);
+    }
   }]);
   return TablePipeline;
 }();

package/package.json

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