@kdcloudjs/table 1.1.6 → 1.2.0-canary.10

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

@@ -6,6 +6,9 @@ import React from 'react';
 import { internals } from '../../internals';
 import { always, arrayUtils } from '../../utils/others';
 import { collectNodes, mergeCellProps } from '../../utils';
+var fullRowsSetKey = 'fullRowsSetKey';
+var allEnableKeys = 'allEnableKeys';
+var selectValueSetKey = 'selectValueSetKey';
 export function multiSelect() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function multiSelectStep(pipeline) {
@@ -36,10 +39,9 @@ export function multiSelect() {
         action: action
       });
     };
-
-    var dataSource = pipeline.getDataSource();
     /** dataSource 中包含的所有 keys */
 
+
     var fullKeySet = new _Set();
     /** 所有有效的 keys（disable 状态为 false） */
 
@@ -48,7 +50,7 @@ export function multiSelect() {
     var isAllChecked = set.size !== 0; // 当前不存在选中则默认为false
 
     var isAnyChecked = false;
-    var flatDataSource = collectNodes(dataSource);
+    var flatDataSource = collectNodes(pipeline.getDataSource());
     flatDataSource.forEach(function (row, rowIndex) {
       var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
       fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
@@ -76,6 +78,8 @@ export function multiSelect() {
         checked: isAllChecked,
         indeterminate: !isAllChecked && isAnyChecked,
         onChange: function onChange(_) {
+          var allKeys = pipeline.getFeatureOptions(allEnableKeys);
+
           if (isAllChecked) {
             _onChange(arrayUtils.diff(value, allKeys), '', allKeys, 'uncheck-all');
           } else {
@@ -96,9 +100,11 @@ export function multiSelect() {
           var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
           var checkboxCellProps = {};
           var preCellProps = (_b = (_a = opts.checkboxColumn) === null || _a === void 0 ? void 0 : _a.getCellProps) === null || _b === void 0 ? void 0 : _b.call(_a, value, row, rowIndex);
+          var fullRowsSet = pipeline.getFeatureOptions(fullRowsSetKey) || new _Set();
+          var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _Set();
 
-          if (fullKeySet.has(rowKey) && clickArea === 'cell') {
-            var prevChecked = set.has(rowKey);
+          if (fullRowsSet.has(rowKey) && clickArea === 'cell') {
+            var prevChecked = selectValueSet.has(rowKey);
             var disabled = isDisabled(row, rowIndex);
             checkboxCellProps = {
               style: {
@@ -122,7 +128,8 @@ export function multiSelect() {
           }
 
           var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
-          var checked = set.has(key);
+          var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _Set();
+          var checked = selectValueSet.has(key);
           return /*#__PURE__*/React.createElement(Checkbox, {
             checked: checked,
             disabled: isDisabled(row, rowIndex),
@@ -161,8 +168,9 @@ export function multiSelect() {
 
     pipeline.appendRowPropsGetter(function (row, rowIndex) {
       var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
+      var fullRowsSet = pipeline.getFeatureOptions(fullRowsSetKey) || new _Set();
 
-      if (!fullKeySet.has(rowKey)) {
+      if (!fullRowsSet.has(rowKey)) {
         // rowKey 不在 fullKeySet 中说明这一行是在 multiSelect 之后才生成的，multiSelect 不对之后生成的行进行处理
         return;
       }
@@ -170,7 +178,8 @@ export function multiSelect() {
       var style = {};
       var className;
       var onClick;
-      var checked = set.has(rowKey);
+      var selectValueSet = pipeline.getFeatureOptions(selectValueSetKey) || new _Set();
+      var checked = selectValueSet.has(rowKey);
 
       if (opts.highlightRowWhenSelected && checked) {
         className = 'highlight';
@@ -197,22 +206,32 @@ export function multiSelect() {
         style: style,
         onClick: onClick
       };
-    });
+    }); // 只保留一份到pipeline， 避免行数据过多时内容被握住
+
+    pipeline.setFeatureOptions(fullRowsSetKey, fullKeySet);
+    pipeline.setFeatureOptions(allEnableKeys, allKeys);
+    pipeline.setFeatureOptions(selectValueSetKey, set);
+    fullKeySet = null;
+    allKeys = null;
+    set = null;
     return pipeline;
 
     function onCheckboxChange(prevChecked, key, batch) {
       var batchKeys = [key];
 
       if (batch && lastKey) {
-        var lastIdx = allKeys.indexOf(lastKey);
-        var cntIdx = allKeys.indexOf(key);
+        var _allKeys = pipeline.getFeatureOptions(allEnableKeys);
+
+        var lastIdx = _allKeys.indexOf(lastKey);
+
+        var cntIdx = _allKeys.indexOf(key);
 
         var _ref = lastIdx < cntIdx ? [lastIdx, cntIdx] : [cntIdx, lastIdx],
             _ref2 = _slicedToArray(_ref, 2),
             start = _ref2[0],
             end = _ref2[1];
 
-        batchKeys = _sliceInstanceProperty(allKeys).call(allKeys, start, end + 1);
+        batchKeys = _sliceInstanceProperty(_allKeys).call(_allKeys, start, end + 1);
       }
 
       if (prevChecked) {

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

@@ -1,10 +1,31 @@
 import { TablePipeline } from '../pipeline';
+import { ArtColumn } from '../../interfaces';
 export interface RangeSelectionFeatureOptions {
     /** 范围选中回调函数 */
-    rangeSelectedChange?(params: any): void;
+    rangeSelectedChange?(cellRanges: CellRange[], isFinished: boolean): void;
     /** 是否阻止keydown的默认行为 */
     preventkDefaultOfKeyDownEvent?: boolean;
+    /** 是否禁止多范围框选 */
+    suppressMultiRangeSelection?: boolean;
+}
+interface FooterRowRange {
+    startRow: number;
+    endRow: number;
+}
+interface CellRange {
+    startRow: number;
+    endRow: number;
+    columns: ArtColumn[];
+    startColumn: ArtColumn;
+    footerRowRange: FooterRowRange | null;
 }
 export declare const rangeSelectionKey = "rangeSelection";
 export declare const lastClickCellKey = "lastClickCell";
 export declare function rangeSelection(opts: RangeSelectionFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
+/**
+ * 获取框选范围唯一标识
+ * @param {*} cellRange
+ * @returns
+ */
+export declare function getCellRangeId(cellRange: CellRange): string;
+export {};

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

@@ -1,6 +1,8 @@
-import _typeof from "@babel/runtime-corejs3/helpers/typeof";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _typeof from "@babel/runtime-corejs3/helpers/typeof";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
@@ -12,9 +14,10 @@ import { Classes } from '../../base/styles';
 import cx from 'classnames';
 export var rangeSelectionKey = 'rangeSelection';
 export var lastClickCellKey = 'lastClickCell';
+var startSelectedCellRangesKey = 'startSelectedCellRanges';
+var SCROLL_OFFSET = 30;
 export 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;
     var artTable = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.artTable;
@@ -26,14 +29,18 @@ export function rangeSelection(opts) {
     var columns = pipeline.getColumns();
     var dataSource = pipeline.getDataSource();
 
-    var rangeSelectedChange = function rangeSelectedChange(rangeSelection) {
+    var rangeSelectedChange = function rangeSelectedChange(rangeSelection, isFinished) {
       var _a;
 
+      if (isFinished) {
+        pipeline.setFeatureOptions(startSelectedCellRangesKey, rangeSelection);
+      }
+
       pipeline.setStateAtKey(rangeSelectionKey, rangeSelection);
-      (_a = opts === null || opts === void 0 ? void 0 : opts.rangeSelectedChange) === null || _a === void 0 ? void 0 : _a.call(opts, rangeSelection);
+      (_a = opts === null || opts === void 0 ? void 0 : opts.rangeSelectedChange) === null || _a === void 0 ? void 0 : _a.call(opts, rangeSelection, isFinished);
     };
 
-    var setRangeSelection = function setRangeSelection(startDragCell, draggingCell) {
+    var setRangeSelection = function setRangeSelection(startDragCell, draggingCell, isFinished) {
       if (!startDragCell || !draggingCell) return;
       var rangeColumns = getRangeColumns(startDragCell, draggingCell, columns);
 
@@ -42,21 +49,31 @@ export function rangeSelection(opts) {
           endRow = _getRangeSelectionRow.endRow,
           footerRowRange = _getRangeSelectionRow.footerRowRange;
 
-      var rangeSelection = {
+      var cellRange = {
         startRow: startRow,
         endRow: endRow,
         columns: rangeColumns,
         startColumn: startDragCell.column,
         footerRowRange: footerRowRange
       };
+      var cellRanges = pipeline.getFeatureOptions(startSelectedCellRangesKey) ? _toConsumableArray(pipeline.getFeatureOptions(startSelectedCellRangesKey)) : [];
+
+      if (isCellRangeSingleCell([cellRange])) {
+        var singleCellRangeId = getCellRangeId(cellRange);
+        cellRanges = _filterInstanceProperty(cellRanges).call(cellRanges, function (item) {
+          return getCellRangeId(item) !== singleCellRangeId;
+        });
+      }
+
+      cellRanges.push(cellRange);
 
-      if (isCellRangeSingleCell(rangeSelection)) {
+      if (isCellRangeSingleCell(cellRanges)) {
         artTable.classList.remove(cx(Classes.rangeSelection));
       } else {
         artTable.classList.add(cx(Classes.rangeSelection));
       }
 
-      rangeSelectedChange(rangeSelection);
+      rangeSelectedChange(cellRanges, isFinished);
     };
 
     var shiftKeySelect = function shiftKeySelect(event) {
@@ -64,76 +81,110 @@ export function rangeSelection(opts) {
       var clickCell = getTargetCell(target, columns);
 
       if (clickCell) {
-        if (event.shiftKey) {
-          var _lastClickCell = pipeline.getFeatureOptions(lastClickCellKey);
-
-          if (_lastClickCell) {
-            setRangeSelection(_lastClickCell, clickCell);
-          } else {
-            // 第一次进来就按住shift键，这时候要记住点击的单元格
-            pipeline.setFeatureOptions(lastClickCellKey, clickCell);
-          }
+        var _lastClickCell = pipeline.getFeatureOptions(lastClickCellKey);
+
+        if (_lastClickCell) {
+          setRangeSelection(_lastClickCell, clickCell, true);
         } else {
+          // 第一次进来就按住shift键，这时候要记住点击的单元格
           pipeline.setFeatureOptions(lastClickCellKey, clickCell);
-          setRangeSelection(clickCell, clickCell);
         }
       }
     };
 
-    var onMouseDown = function onMouseDown(mouseDownEvent) {
-      if (mouseDownEvent.button !== 0 || !(isElementInEventPath(tableBody, mouseDownEvent.nativeEvent) || isElementInEventPath(tableFooter, mouseDownEvent.nativeEvent))) return; // mouseDownEvent.preventDefault()
-      // shift + 点击选中
-
-      shiftKeySelect(mouseDownEvent);
-      if (mouseDownEvent.shiftKey) return;
-      var target = mouseDownEvent.target;
-      var startDragCell = getTargetCell(target, columns);
-      var mousemove$ = fromEvent(window, 'mousemove');
-      var mouseup$ = fromEvent(window, 'mouseup');
+    var updateScrollPosition = function updateScrollPosition(client) {
+      var clientX = client.clientX,
+          clientY = client.clientY;
       var tableBodyClientRect = tableBody.getBoundingClientRect();
+      var left = tableBodyClientRect.left,
+          top = tableBodyClientRect.top,
+          height = tableBodyClientRect.height,
+          width = tableBodyClientRect.width;
 
-      var updateScrollPosition = function updateScrollPosition(client) {
-        var clientX = client.clientX,
-            clientY = client.clientY;
-        var left = tableBodyClientRect.left,
-            top = tableBodyClientRect.top,
-            height = tableBodyClientRect.height,
-            width = tableBodyClientRect.width;
+      if (clientX + SCROLL_OFFSET >= left + width) {
+        pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_OFFSET;
+      }
 
-        if (clientX + SCROLL_SIZE >= left + width) {
-          pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_SIZE;
-        }
+      if (clientX - SCROLL_OFFSET <= left) {
+        pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_OFFSET;
+      }
 
-        if (clientX - SCROLL_SIZE <= left) {
-          pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_SIZE;
-        }
+      if (clientY + SCROLL_OFFSET >= top + height) {
+        pipeline.ref.current.domHelper.tableBody.scrollTop += SCROLL_OFFSET;
+      }
 
-        if (clientY + SCROLL_SIZE >= top + height) {
-          pipeline.ref.current.domHelper.tableBody.scrollTop += SCROLL_SIZE;
-        }
+      if (clientY + SCROLL_OFFSET <= top) {
+        pipeline.ref.current.domHelper.tableBody.scrollTop -= SCROLL_OFFSET;
+      }
+    };
 
-        if (clientY + SCROLL_SIZE <= top) {
-          pipeline.ref.current.domHelper.tableBody.scrollTop -= SCROLL_SIZE;
-        }
-      };
+    var setStartSelectedCellRanges = function setStartSelectedCellRanges(isCtrlKey, isShiftKey) {
+      if (opts === null || opts === void 0 ? void 0 : opts.suppressMultiRangeSelection) {
+        pipeline.setFeatureOptions(startSelectedCellRangesKey, []);
+        return;
+      } // ctrl 和shift 同时按时，优先生效shift
+      // 没有点击ctrl 或者shift时，每次点击开始时都清空选中范围
+
+
+      if (!isCtrlKey && !isShiftKey) {
+        pipeline.setFeatureOptions(startSelectedCellRangesKey, []);
+      } // shift 点击框选，要保留之前的选中结果。最新的框选范围覆盖最后一次的框选范围
+
+
+      if (isShiftKey) {
+        var _startDragCellRanges = pipeline.getFeatureOptions(startSelectedCellRangesKey) ? _toConsumableArray(pipeline.getFeatureOptions(startSelectedCellRangesKey)) : [];
 
+        _startDragCellRanges.pop();
+
+        pipeline.setFeatureOptions(startSelectedCellRangesKey, _startDragCellRanges);
+      }
+    };
+
+    var onMouseDown = function onMouseDown(mouseDownEvent) {
+      if (mouseDownEvent.button !== 0 || !(isElementInEventPath(tableBody, mouseDownEvent.nativeEvent) || isElementInEventPath(tableFooter, mouseDownEvent.nativeEvent))) return; // mouseDownEvent.preventDefault()
+
+      var isCtrlKey = mouseDownEvent.ctrlKey || mouseDownEvent.metaKey;
+      var isShiftKey = mouseDownEvent.shiftKey;
+      var target = mouseDownEvent.target; // 每次点击时先确认初始生效的框选范围
+
+      setStartSelectedCellRanges(isCtrlKey, isShiftKey);
+
+      if (isShiftKey) {
+        shiftKeySelect(mouseDownEvent);
+        return;
+      }
+
+      var startDragCell = getTargetCell(target, columns);
+      pipeline.setFeatureOptions(lastClickCellKey, startDragCell);
+      var draggingCell = startDragCell;
+      var mousemove$ = fromEvent(window, 'mousemove');
+      var mouseup$ = fromEvent(window, 'mouseup');
       var rangeSelected$ = mousemove$.pipe(map(function (mouseMoveEvent) {
         var target = mouseMoveEvent.target || mouseMoveEvent.srcElement;
-        var draggingCell = getTargetCell(target, columns);
+        draggingCell = getTargetCell(target, columns);
         var client = {
           clientX: mouseMoveEvent.clientX,
           clientY: mouseMoveEvent.clientY
         };
-        updateScrollPosition(client);
+
+        if (!(draggingCell === null || draggingCell === void 0 ? void 0 : draggingCell.isFooterCell)) {
+          updateScrollPosition(client);
+        }
+
         return {
           startDragCell: startDragCell,
           draggingCell: draggingCell
         };
       }), takeUntil(mouseup$));
-      rangeSelected$.subscribe(function (_ref) {
-        var startDragCell = _ref.startDragCell,
-            draggingCell = _ref.draggingCell;
-        setRangeSelection(startDragCell, draggingCell);
+      rangeSelected$.subscribe({
+        next: function next(_ref) {
+          var startDragCell = _ref.startDragCell,
+              draggingCell = _ref.draggingCell;
+          setRangeSelection(startDragCell, draggingCell, false);
+        },
+        complete: function complete() {
+          setRangeSelection(startDragCell, draggingCell, true);
+        }
       });
     };
 
@@ -147,7 +198,7 @@ export function rangeSelection(opts) {
         if (columns.length && rowLen && !getElementEditable(e.target)) {
           opts.preventkDefaultOfKeyDownEvent !== false && e.preventDefault();
           artTable.classList.add(cx(Classes.rangeSelection));
-          rangeSelectedChange({
+          rangeSelectedChange([{
             startRow: 0,
             endRow: rowLen - 1,
             columns: collectNodes(columns, 'leaf-only'),
@@ -156,7 +207,7 @@ export function rangeSelection(opts) {
               startRow: 0,
               endRow: footerDataSource.length - 1
             } : null
-          });
+          }], true);
         }
       }
     };
@@ -169,41 +220,21 @@ export function rangeSelection(opts) {
     }); // todo: 后面可以把mousedown放到一个流里面
 
     return pipeline.mapColumns(makeRecursiveMapper(function (col) {
-      var _context;
-
-      var rangeSelection = pipeline.getStateAtKey(rangeSelectionKey);
-      if (!rangeSelection || _findIndexInstanceProperty(_context = rangeSelection.columns).call(_context, function (selectedCol) {
-        return selectedCol.code === col.code;
-      }) === -1) return col;
+      var cellRanges = pipeline.getStateAtKey(rangeSelectionKey) || [];
       var prevGetCellProps = col.getCellProps;
       return _extends(_extends({}, col), {
         getCellProps: function getCellProps(value, record, rowIndex) {
-          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,
-              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 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 = cx((_cx = {}, _defineProperty(_cx, Classes.tableCellRangeSingleCell, matchSingleCell), _defineProperty(_cx, Classes.tableCellRangeSelected, showCellRangeStyle), _defineProperty(_cx, Classes.tableCellRangeTop, showCellRangeStyle && (isInFooter ? startRowIndex !== -1 ? false : rowIndex === footerStartRowIndex : rowIndex === startRowIndex)), _defineProperty(_cx, Classes.tableCellRangeLeft, showCellRangeStyle && col.code === startCol.code), _defineProperty(_cx, Classes.tableCellRangeBottom, showCellRangeStyle && (isInFooter ? rowIndex === footerEndRowIndex : footerRowRange ? false : rowIndex === endRowIndex)), _defineProperty(_cx, Classes.tableCellRangeRight, showCellRangeStyle && col.code === endCol.code), _cx));
+          var isFooterCell = record[pipeline.getFeatureOptions('footerRowMetaKey')];
+          if (!cellRanges.some(function (cellRange) {
+            return isCellInRange(cellRange, rowIndex, col, isFooterCell);
+          })) return prevCellProps;
+          var className = getCellRangesClassName(cellRanges, {
+            isFooterCell: isFooterCell,
+            rowIndex: rowIndex,
+            col: col,
+            record: record
+          });
           return mergeCellProps(prevCellProps, {
             className: className
           });
@@ -230,7 +261,7 @@ function getTargetCell(target, columns) {
             rowSpan: parseInt(target.getAttribute('rowspan') || 1),
             code: columnCode,
             column: column,
-            isInFooter: isEleInFooter(target)
+            isFooterCell: isEleInFooter(target)
           }
         };
       }();
@@ -245,7 +276,7 @@ function getTargetCell(target, columns) {
 }
 
 function isSameCell(cell1, cell2) {
-  return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code && cell1.isInFooter === cell2.isInFooter;
+  return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code && cell1.isFooterCell === cell2.isFooterCell;
 }
 
 function isEleInFooter(target) {
@@ -288,10 +319,10 @@ function getRangeSelectionRowInfo(startCell, endCell, dataSource) {
       _endRow = _getCellRangeRow.endRow; // 两个单元格都在表体
 
 
-  if (!startCell.isInFooter && !endCell.isInFooter) {
+  if (!startCell.isFooterCell && !endCell.isFooterCell) {
     startRow = _startRow;
     endRow = _endRow;
-  } else if (startCell.isInFooter && endCell.isInFooter) {
+  } else if (startCell.isFooterCell && endCell.isFooterCell) {
     // 两个单元格都在表底
     footerRowRange = {
       startRow: _startRow,
@@ -299,7 +330,7 @@ function getRangeSelectionRowInfo(startCell, endCell, dataSource) {
     };
   } else {
     // 一个单元格在表体，一个在表底
-    if (startCell.isInFooter) {
+    if (startCell.isFooterCell) {
       startRow = dataSource.length - 1;
       endRow = endCell.rowIndex;
       footerRowRange = {
@@ -322,6 +353,13 @@ function getRangeSelectionRowInfo(startCell, endCell, dataSource) {
     footerRowRange: footerRowRange
   };
 }
+/**
+ * 获取框选范围的起始结束行
+ * @param startCell 起始单元格
+ * @param endCell 结束单元格
+ * @returns
+ */
+
 
 function getCellRangeRow(startCell, endCell) {
   if (isSameCell(startCell, endCell)) {
@@ -339,12 +377,20 @@ function getCellRangeRow(startCell, endCell) {
     endRow: endRow
   };
 }
-
-function isCellRangeSingleCell(rangeSelection) {
-  var startRow = rangeSelection.startRow,
-      endRow = rangeSelection.endRow,
-      columns = rangeSelection.columns,
-      footerRowRange = rangeSelection.footerRowRange;
+/**
+ * 框选范围是否只包含单个单元格
+ * @param cellRanges
+ * @returns
+ */
+
+
+function isCellRangeSingleCell(cellRanges) {
+  if (cellRanges.length !== 1) return false;
+  var _cellRanges$ = cellRanges[0],
+      startRow = _cellRanges$.startRow,
+      endRow = _cellRanges$.endRow,
+      columns = _cellRanges$.columns,
+      footerRowRange = _cellRanges$.footerRowRange;
   var isBodySingleCell = !footerRowRange && startRow === endRow && columns.length === 1;
   var isFooterSingleCell = startRow === -1 && footerRowRange.startRow === footerRowRange.endRow && columns.length === 1;
   return isBodySingleCell || isFooterSingleCell;
@@ -372,12 +418,140 @@ function getFooterRowIndex(footerRowRange) {
 }
 
 function getElementEditable(target) {
-  var _context2;
+  var _context;
 
   if (!target) return;
 
-  if (_includesInstanceProperty(_context2 = ['input', 'textarea']).call(_context2, target.tagName.toLowerCase())) {
+  if (_includesInstanceProperty(_context = ['input', 'textarea']).call(_context, target.tagName.toLowerCase())) {
     if (target.type === 'checkbox') return;
     return !target.disabled && !target.readOnly;
   }
+}
+/**
+ * 判断单元格是否在框选范围内
+ * @param cellRange
+ * @param rowIndex
+ * @param col
+ * @param isFooterCell
+ * @returns
+ */
+
+
+function isCellInRange(cellRange, rowIndex, col, isFooterCell) {
+  var startRow = cellRange.startRow,
+      endRow = cellRange.endRow,
+      columns = cellRange.columns,
+      footerRowRange = cellRange.footerRowRange;
+  var isColInRanges = _findIndexInstanceProperty(columns).call(columns, function (item) {
+    return item.code === col.code;
+  }) !== -1;
+  if (!isColInRanges) return false;
+
+  var _getRowIndex = getRowIndex(startRow, endRow),
+      startRowIndex = _getRowIndex.startRowIndex,
+      endRowIndex = _getRowIndex.endRowIndex;
+
+  var _getFooterRowIndex = getFooterRowIndex(footerRowRange),
+      footerStartRowIndex = _getFooterRowIndex.startRowIndex,
+      footerEndRowIndex = _getFooterRowIndex.endRowIndex;
+
+  var bodyMatch = !isFooterCell && rowIndex >= startRowIndex && rowIndex <= endRowIndex;
+  var footerMatch = isFooterCell && footerRowRange && rowIndex >= footerStartRowIndex && rowIndex <= footerEndRowIndex;
+  var isRowInRange = footerMatch || bodyMatch;
+  return isRowInRange;
+}
+/**
+ * 获取框选范围唯一标识
+ * @param {*} cellRange
+ * @returns
+ */
+
+
+export function getCellRangeId(cellRange) {
+  var startRow = cellRange.startRow,
+      endRow = cellRange.endRow,
+      footerRowRange = cellRange.footerRowRange,
+      columns = cellRange.columns;
+
+  var _getRowIndex2 = getRowIndex(startRow, endRow),
+      startRowIndex = _getRowIndex2.startRowIndex,
+      endRowIndex = _getRowIndex2.endRowIndex;
+
+  var _getFooterRowIndex2 = getFooterRowIndex(footerRowRange),
+      footerStartRowIndex = _getFooterRowIndex2.startRowIndex,
+      footerEndRowIndex = _getFooterRowIndex2.endRowIndex;
+
+  var firstColId = columns[0].code;
+  var endColId = columns[columns.length - 1].code;
+  return startRowIndex + '_' + endRowIndex + '_' + footerStartRowIndex + '_' + footerEndRowIndex + '_' + firstColId + '_' + endColId;
+}
+/**
+ * 获取框选范围中单元格的样式
+ * @param cellRanges
+ * @param param1
+ * @returns
+ */
+
+function getCellRangesClassName(cellRanges, _ref2) {
+  var _cx;
+
+  var isFooterCell = _ref2.isFooterCell,
+      rowIndex = _ref2.rowIndex,
+      col = _ref2.col,
+      record = _ref2.record;
+
+  var _getMatchBorderStyle = getMatchBorderStyle(cellRanges, {
+    isFooterCell: isFooterCell,
+    rowIndex: rowIndex,
+    col: col,
+    record: record
+  }),
+      matchCellRangeTop = _getMatchBorderStyle.matchCellRangeTop,
+      matchCellRangeLeft = _getMatchBorderStyle.matchCellRangeLeft,
+      matchCellRangeBottom = _getMatchBorderStyle.matchCellRangeBottom,
+      matchCellRangeRight = _getMatchBorderStyle.matchCellRangeRight;
+
+  var isSingleCell = isCellRangeSingleCell(cellRanges);
+  var className = cx((_cx = {}, _defineProperty(_cx, Classes.tableCellRangeSingleCell, isSingleCell), _defineProperty(_cx, Classes.tableCellRangeSelected, !isSingleCell), _defineProperty(_cx, Classes.tableCellRangeTop, !isSingleCell && matchCellRangeTop), _defineProperty(_cx, Classes.tableCellRangeLeft, !isSingleCell && matchCellRangeLeft), _defineProperty(_cx, Classes.tableCellRangeBottom, !isSingleCell && matchCellRangeBottom), _defineProperty(_cx, Classes.tableCellRangeRight, !isSingleCell && matchCellRangeRight), _cx));
+  return className;
+}
+
+function getMatchBorderStyle(cellRanges, _ref3) {
+  var isFooterCell = _ref3.isFooterCell,
+      rowIndex = _ref3.rowIndex,
+      col = _ref3.col,
+      record = _ref3.record;
+  return cellRanges.reduce(function (obj, cellRange) {
+    if (!isCellInRange(cellRange, rowIndex, col, isFooterCell)) return obj;
+    var startRow = cellRange.startRow,
+        endRow = cellRange.endRow,
+        columns = cellRange.columns,
+        footerRowRange = cellRange.footerRowRange;
+
+    var _getRowIndex3 = getRowIndex(startRow, endRow),
+        startRowIndex = _getRowIndex3.startRowIndex,
+        endRowIndex = _getRowIndex3.endRowIndex;
+
+    var _getFooterRowIndex3 = getFooterRowIndex(footerRowRange),
+        footerStartRowIndex = _getFooterRowIndex3.startRowIndex,
+        footerEndRowIndex = _getFooterRowIndex3.endRowIndex;
+
+    var startCol = columns[0];
+    var endCol = columns[columns.length - 1];
+    var matchCellRangeTop = isFooterCell ? startRowIndex !== -1 ? false : rowIndex === footerStartRowIndex : rowIndex === startRowIndex;
+    var matchCellRangeLeft = col.code === startCol.code;
+    var matchCellRangeBottom = isFooterCell ? rowIndex === footerEndRowIndex : footerRowRange ? false : rowIndex === endRowIndex;
+    var matchCellRangeRight = col.code === endCol.code; // 如果样式已经匹配上了，就不需要再取计算的样式
+
+    obj.matchCellRangeTop = obj.matchCellRangeTop || matchCellRangeTop;
+    obj.matchCellRangeLeft = obj.matchCellRangeLeft || matchCellRangeLeft;
+    obj.matchCellRangeBottom = obj.matchCellRangeBottom || matchCellRangeBottom;
+    obj.matchCellRangeRight = obj.matchCellRangeRight || matchCellRangeRight;
+    return obj;
+  }, {
+    matchCellRangeTop: false,
+    matchCellRangeLeft: false,
+    matchCellRangeBottom: false,
+    matchCellRangeRight: false
+  });
 }