@kdcloudjs/table 1.0.1 → 1.0.2

package/lib/table/pipeline/features/filter/Filter.js

@@ -1,5 +1,11 @@
 "use strict";
 
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -7,11 +13,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactDom = require("react-dom");
 
@@ -25,31 +33,85 @@ var _DefaultFilterContent = _interopRequireDefault(require("./DefaultFilterConte
 
 var _utils = require("../../../utils");
 
+var _utils2 = require("../../../base/utils");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _templateObject;
 
-var HEADER_ICON_OFFSET_Y = 6 + 1; //padding-top + border
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var HEADER_ICON_OFFSET_X = 16 + 1; //padding-left+ border
+var HEADER_ICON_OFFSET_Y = 6 + 1; // padding-top + border
 
-var FilterIconSpanStyle = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 4px;\n  cursor: pointer;\n  transform: translateY(-50%);\n  top: 50%;\n  height: 12px; \n"])));
+var HEADER_ICON_OFFSET_X = 16 + 1; // padding-left+ border
 
-function Filter(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 12 : _ref$size,
-      style = _ref.style,
-      className = _ref.className,
-      FilterPanelContent = _ref.FilterPanelContent,
+var FilterIconSpanStyle = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // position: absolute;\n  // right: 4px;\n  // cursor: pointer;\n  // transform: translateY(-50%);\n  // top: 50%;\n  // height: 12px; \n"])));
+
+function Panel(_ref) {
+  var ele = _ref.ele,
       filterIcon = _ref.filterIcon,
-      setFilter = _ref.setFilter,
-      setFilterModel = _ref.setFilterModel,
-      filterModel = _ref.filterModel,
-      isFilterActive = _ref.isFilterActive,
-      stopClickEventPropagation = _ref.stopClickEventPropagation;
+      hidePanel = _ref.hidePanel,
+      renderPanelContent = _ref.renderPanelContent;
+
+  var filterPanelRef = _react.default.useRef(null);
 
-  var _React$useState = _react.default.useState(false),
+  var _React$useState = _react.default.useState((0, _utils.calculatePopupRelative)(ele, document.body, {
+    x: HEADER_ICON_OFFSET_X,
+    y: HEADER_ICON_OFFSET_Y
+  })),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      showPanel = _React$useState2[0],
-      setShowPanel = _React$useState2[1];
+      position = _React$useState2[0],
+      setPosition = _React$useState2[1];
+
+  var style = {
+    position: 'absolute',
+    zIndex: 1050
+  };
+
+  var handleFilterPanelResize = function handleFilterPanelResize(resize) {
+    setPosition((0, _utils.calculatePopupRelative)(ele, document.body, {
+      x: HEADER_ICON_OFFSET_X,
+      y: HEADER_ICON_OFFSET_Y
+    }));
+  };
+
+  (0, _react.useEffect)(function () {
+    var resizeObserver = (0, _utils2.addResizeObserver)(filterPanelRef.current.children[0], handleFilterPanelResize);
+    return function () {
+      resizeObserver && resizeObserver.disconnect();
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: filterPanelRef
+  }, /*#__PURE__*/_react.default.createElement(_FilterPanel.default, {
+    style: style,
+    onClose: hidePanel,
+    position: position,
+    filterIcon: filterIcon
+  }, renderPanelContent()));
+}
+
+function Filter(_ref2) {
+  var _cx;
+
+  var _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 12 : _ref2$size,
+      style = _ref2.style,
+      className = _ref2.className,
+      FilterPanelContent = _ref2.FilterPanelContent,
+      filterIcon = _ref2.filterIcon,
+      setFilter = _ref2.setFilter,
+      setFilterModel = _ref2.setFilterModel,
+      filterModel = _ref2.filterModel,
+      isFilterActive = _ref2.isFilterActive,
+      stopClickEventPropagation = _ref2.stopClickEventPropagation;
+
+  var _React$useState3 = _react.default.useState(false),
+      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+      showPanel = _React$useState4[0],
+      setShowPanel = _React$useState4[1];
 
   var iconRef = _react.default.useRef(null);
 
@@ -79,23 +141,6 @@ function Filter(_ref) {
     }
   };
 
-  var renderPanel = function renderPanel(ele) {
-    var position = (0, _utils.calculatePopupRelative)(ele, document.body, {
-      x: HEADER_ICON_OFFSET_X,
-      y: HEADER_ICON_OFFSET_Y
-    });
-    var style = {
-      position: 'absolute',
-      zIndex: 1050
-    };
-    return /*#__PURE__*/_react.default.createElement(_FilterPanel.default, {
-      style: style,
-      onClose: hidePanel,
-      position: position,
-      filterIcon: filterIcon
-    }, renderPanelContent());
-  };
-
   var handleIconClick = function handleIconClick(e) {
     if (stopClickEventPropagation) {
       e.stopPropagation();
@@ -104,9 +149,10 @@ function Filter(_ref) {
     setShowPanel(true);
   };
 
+  var iconClassName = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, className, true), (0, _defineProperty2.default)(_cx, 'filter-panel-open', showPanel), _cx));
   return /*#__PURE__*/_react.default.createElement(FilterIconSpanStyle, {
     style: style,
-    className: className,
+    className: iconClassName,
     onMouseDown: handleMouseDown,
     ref: iconRef
   }, /*#__PURE__*/_react.default.createElement("span", {
@@ -122,7 +168,12 @@ function Filter(_ref) {
     "aria-hidden": "true"
   }, /*#__PURE__*/_react.default.createElement("path", {
     d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
-  }))), showPanel && /*#__PURE__*/(0, _reactDom.createPortal)(renderPanel(iconRef.current), document.body));
+  }))), showPanel && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(Panel, {
+    ele: iconRef.current,
+    filterIcon: filterIcon,
+    hidePanel: hidePanel,
+    renderPanelContent: renderPanelContent
+  }), document.body));
 }
 
 var _default = Filter;

package/lib/table/pipeline/features/filter/FilterPanel.js

@@ -1,8 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
 
-var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -23,6 +27,10 @@ var _utils = require("../../../utils/");
 
 var _templateObject;
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var FilterPanelStyle = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  max-height: 450px;\n  min-width: 160px;\n  border-radius: 2px;\n  background-color: #fff;\n  box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n  cursor: default;\n\n  .popup-header {\n    display: flex;\n    background-color: #ebedf1;\n\n    .popup-header-icon {\n      color:#666;\n      background-color: #fff;\n      padding: 6px 16px 6px 16px;\n      display: inline-block;\n      border-right: 1px solid transparent;\n      border-left: 1px solid transparent;\n      border-top: 1px solid transparent;\n      border-top-right-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  }\n\n  .popup-body {\n    display: flex;\n  }\n"])));
 
 var useWindowEvents = function useWindowEvents(func, evens) {

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

@@ -5,10 +5,10 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "FilterPanel", {
+Object.defineProperty(exports, "DEFAULT_FILTER_OPTIONS", {
   enumerable: true,
   get: function get() {
-    return _FilterPanel.default;
+    return _util.DEFAULT_FILTER_OPTIONS;
   }
 });
 Object.defineProperty(exports, "DefaultFilterContent", {
@@ -23,10 +23,10 @@ Object.defineProperty(exports, "Filter", {
     return _Filter.default;
   }
 });
-Object.defineProperty(exports, "DEFAULT_FILTER_OPTIONS", {
+Object.defineProperty(exports, "FilterPanel", {
   enumerable: true,
   get: function get() {
-    return _util.DEFAULT_FILTER_OPTIONS;
+    return _FilterPanel.default;
   }
 });
 

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

@@ -14,3 +14,4 @@ export { columnDrag, ColumnDragOptions } from './columnDrag';
 export { columnResize, ColumnResizeOptions } from './columnResizeWidth';
 export { contextMenu, ContextMenuFeatureOptions } from './contextMenu';
 export { filter, FilterFeatureOptions } from './columnFilter';
+export { rangeSelection, RangeSelectionFeatureOptions } from './rangeSelection';

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

@@ -2,6 +2,8 @@
 
 var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 
+var _sortInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/sort");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,6 +19,12 @@ Object.defineProperty(exports, "buildTree", {
     return _buildTree.buildTree;
   }
 });
+Object.defineProperty(exports, "columnDrag", {
+  enumerable: true,
+  get: function get() {
+    return _columnDrag.columnDrag;
+  }
+});
 Object.defineProperty(exports, "columnHover", {
   enumerable: true,
   get: function get() {
@@ -29,82 +37,82 @@ Object.defineProperty(exports, "columnRangeHover", {
     return _columnRangeHover.columnRangeHover;
   }
 });
-Object.defineProperty(exports, "multiSelect", {
+Object.defineProperty(exports, "columnResize", {
   enumerable: true,
   get: function get() {
-    return _multiSelect.multiSelect;
+    return _columnResizeWidth.columnResize;
   }
 });
-Object.defineProperty(exports, "rowDetail", {
+Object.defineProperty(exports, "contextMenu", {
   enumerable: true,
   get: function get() {
-    return _rowDetail.rowDetail;
+    return _contextMenu.contextMenu;
   }
 });
-Object.defineProperty(exports, "rowGrouping", {
+Object.defineProperty(exports, "filter", {
   enumerable: true,
   get: function get() {
-    return _rowGrouping.rowGrouping;
+    return _filterInstanceProperty(_columnFilter);
   }
 });
-Object.defineProperty(exports, "singleSelect", {
+Object.defineProperty(exports, "multiSelect", {
   enumerable: true,
   get: function get() {
-    return _singleSelect.singleSelect;
+    return _multiSelect.multiSelect;
   }
 });
-Object.defineProperty(exports, "sort", {
+Object.defineProperty(exports, "rangeSelection", {
   enumerable: true,
   get: function get() {
-    return _sort.sort;
+    return _rangeSelection.rangeSelection;
   }
 });
-Object.defineProperty(exports, "tips", {
+Object.defineProperty(exports, "rowDetail", {
   enumerable: true,
   get: function get() {
-    return _tips.tips;
+    return _rowDetail.rowDetail;
   }
 });
-Object.defineProperty(exports, "treeMode", {
+Object.defineProperty(exports, "rowGrouping", {
   enumerable: true,
   get: function get() {
-    return _treeMode.treeMode;
+    return _rowGrouping.rowGrouping;
   }
 });
-Object.defineProperty(exports, "treeMetaSymbol", {
+Object.defineProperty(exports, "singleSelect", {
   enumerable: true,
   get: function get() {
-    return _treeMode.treeMetaSymbol;
+    return _singleSelect.singleSelect;
   }
 });
-Object.defineProperty(exports, "treeSelect", {
+Object.defineProperty(exports, "sort", {
   enumerable: true,
   get: function get() {
-    return _treeSelect.treeSelect;
+    return _sortInstanceProperty(_sort);
   }
 });
-Object.defineProperty(exports, "columnDrag", {
+Object.defineProperty(exports, "tips", {
   enumerable: true,
   get: function get() {
-    return _columnDrag.columnDrag;
+    return _tips.tips;
   }
 });
-Object.defineProperty(exports, "columnResize", {
+Object.defineProperty(exports, "treeMetaSymbol", {
   enumerable: true,
   get: function get() {
-    return _columnResizeWidth.columnResize;
+    return _treeMode.treeMetaSymbol;
   }
 });
-Object.defineProperty(exports, "contextMenu", {
+Object.defineProperty(exports, "treeMode", {
   enumerable: true,
   get: function get() {
-    return _contextMenu.contextMenu;
+    return _treeMode.treeMode;
   }
 });
-Object.defineProperty(exports, "filter", {
+Object.defineProperty(exports, "treeSelect", {
   enumerable: true,
   get: function get() {
-    return _filterInstanceProperty(_columnFilter);
+    return _treeSelect.treeSelect;
   }
 });
 
@@ -138,4 +146,6 @@ var _columnResizeWidth = require("./columnResizeWidth");
 
 var _contextMenu = require("./contextMenu");
 
-var _columnFilter = require("./columnFilter");
+var _columnFilter = require("./columnFilter");
+
+var _rangeSelection = require("./rangeSelection");

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

@@ -0,0 +1,10 @@
+import { TablePipeline } from '../pipeline';
+export interface RangeSelectionFeatureOptions {
+    /** 范围选中回调函数 */
+    rangeSelectedChange?(params: any): void;
+    /** 是否阻止keydown的默认行为 */
+    preventkDefaultOfKeyDownEvent?: boolean;
+}
+export declare const rangeSelectionKey = "rangeSelection";
+export declare const lastClickCell = "lastClickCell";
+export declare function rangeSelection(opts: RangeSelectionFeatureOptions): (pipeline: TablePipeline) => TablePipeline;

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

@@ -0,0 +1,256 @@
+"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.lastClickCell = void 0;
+exports.rangeSelection = rangeSelection;
+exports.rangeSelectionKey = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+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 _utils = require("../../utils");
+
+var _others = require("../../utils/others");
+
+var _rxjs = require("rxjs");
+
+var _operators = require("rxjs/operators");
+
+var _styles = require("../../base/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var rangeSelectionKey = 'rangeSelection';
+exports.rangeSelectionKey = rangeSelectionKey;
+var lastClickCell = 'lastClickCell';
+exports.lastClickCell = lastClickCell;
+
+function rangeSelection(opts) {
+  return function step(pipeline) {
+    var SCROLL_SIZE = 30;
+    var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
+
+    if (!tableBody) {
+      return pipeline;
+    }
+
+    var columns = pipeline.getColumns();
+
+    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;
+      var rangeColumns = getRangeColumns(startDragCell, draggingCell, columns);
+      var isTopToBottom = startDragCell.rowIndex <= draggingCell.rowIndex;
+      var rangeSelection = {
+        startRow: isTopToBottom ? startDragCell.rowIndex : startDragCell.rowIndex + startDragCell.rowSpan - 1,
+        endRow: isTopToBottom ? draggingCell.rowIndex + draggingCell.rowSpan - 1 : draggingCell.rowIndex,
+        columns: rangeColumns,
+        startColumn: startDragCell.column
+      };
+      rangeSelectedChange(rangeSelection);
+    };
+
+    var shiftKeySelect = function shiftKeySelect(event) {
+      var target = event.target;
+      var clickCell = getTargetCell(target, columns);
+
+      if (clickCell) {
+        if (event.shiftKey) {
+          var _lastClickCell = pipeline.getStateAtKey(lastClickCell);
+
+          if (_lastClickCell) {
+            setRangeSelection(_lastClickCell, clickCell);
+          } else {
+            // 第一次进来就按住shift键，这时候要记住点击的单元格
+            pipeline.setStateAtKey(lastClickCell, clickCell);
+          }
+        } else {
+          pipeline.setStateAtKey(lastClickCell, clickCell);
+          rangeSelectedChange(null);
+        }
+      }
+    };
+
+    var onMouseDown = function onMouseDown(mouseDownEvent) {
+      if (mouseDownEvent.button !== 0 || !(0, _utils.isElementInEventPath)(tableBody, mouseDownEvent.nativeEvent)) return; // mouseDownEvent.preventDefault()
+      // shift + 点击选中
+
+      shiftKeySelect(mouseDownEvent);
+      var target = mouseDownEvent.target;
+      var startDragCell = getTargetCell(target, columns);
+      var mousemove$ = (0, _rxjs.fromEvent)(window, 'mousemove');
+      var mouseup$ = (0, _rxjs.fromEvent)(window, 'mouseup');
+      var tableBodyClientRect = tableBody.getBoundingClientRect();
+
+      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_SIZE >= left + width) {
+          pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_SIZE;
+        }
+
+        if (clientX - SCROLL_SIZE <= left) {
+          pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_SIZE;
+        }
+
+        if (clientY + SCROLL_SIZE >= top + height) {
+          pipeline.ref.current.domHelper.tableBody.scrollTop += SCROLL_SIZE;
+        }
+
+        if (clientY + SCROLL_SIZE <= top) {
+          pipeline.ref.current.domHelper.tableBody.scrollTop -= SCROLL_SIZE;
+        }
+      };
+
+      var rangeSelected$ = mousemove$.pipe((0, _mapInstanceProperty(_operators))(function (mouseMoveEvent) {
+        var target = mouseMoveEvent.target || mouseMoveEvent.srcElement;
+        var draggingCell = getTargetCell(target, columns);
+        var client = {
+          clientX: mouseMoveEvent.clientX,
+          clientY: mouseMoveEvent.clientY
+        };
+        updateScrollPosition(client);
+        return {
+          startDragCell: startDragCell,
+          draggingCell: draggingCell
+        };
+      }), (0, _operators.takeUntil)(mouseup$));
+      rangeSelected$.subscribe(function (_ref) {
+        var startDragCell = _ref.startDragCell,
+            draggingCell = _ref.draggingCell;
+        setRangeSelection(startDragCell, draggingCell);
+      });
+    };
+
+    var onKeyDown = function onKeyDown(e) {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+        var rowLen = pipeline.getDataSource().length;
+
+        if (columns.length && rowLen) {
+          opts.preventkDefaultOfKeyDownEvent !== false && e.preventDefault();
+          rangeSelectedChange({
+            startRow: 0,
+            endRow: rowLen - 1,
+            columns: columns,
+            startColumn: columns[0]
+          });
+        }
+      }
+    };
+
+    pipeline.addTableProps({
+      onMouseDown: onMouseDown,
+      onKeyDown: onKeyDown,
+      tabIndex: -1
+    }); // todo: 后面可以把mousedown放到一个流里面
+
+    return pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col) {
+      var _context;
+
+      var rangeSelection = pipeline.getStateAtKey(rangeSelectionKey);
+      if (!rangeSelection || (0, _findIndex.default)(_context = rangeSelection.columns).call(_context, function (selectedCol) {
+        return selectedCol.code === col.code;
+      }) === -1) return col;
+      var prevGetCellProps = col.getCellProps;
+      return (0, _extends2.default)((0, _extends2.default)({}, col), {
+        getCellProps: function getCellProps(value, record, rowIndex) {
+          var _cx;
+
+          var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
+          var startRow = rangeSelection.startRow,
+              endRow = rangeSelection.endRow,
+              columns = rangeSelection.columns;
+          var startIndex = startRow < endRow ? startRow : endRow;
+          var endIndex = startRow < endRow ? endRow : startRow;
+          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));
+          return (0, _utils.mergeCellProps)(prevCellProps, {
+            className: className
+          });
+        }
+      });
+    }));
+  };
+}
+
+function getTargetCell(target, columns) {
+  while (target) {
+    if (target.getAttribute('data-role') === 'table-cell') {
+      var _ret = function () {
+        var columnCode = target.getAttribute('data-code');
+        var column = (0, _others.findByTree)(columns, function (item, index) {
+          return item.code === columnCode;
+        });
+        if (!column) return {
+          v: null
+        };
+        return {
+          v: {
+            rowIndex: parseInt(target.getAttribute('data-rowindex')),
+            rowSpan: parseInt(target.getAttribute('rowspan') || 1),
+            code: columnCode,
+            column: column
+          }
+        };
+      }();
+
+      if ((0, _typeof2.default)(_ret) === "object") return _ret.v;
+    }
+
+    target = target.parentElement;
+  }
+
+  return null;
+}
+
+function isSameCell(cell1, cell2) {
+  return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code;
+}
+
+function getRangeColumns(startCell, endCell, columns) {
+  var flatColumns = (0, _utils.collectNodes)(columns, 'leaf-only');
+  var startIndex = (0, _findIndex.default)(flatColumns).call(flatColumns, function (col) {
+    return col.code === startCell.code;
+  });
+  var endIndex = (0, _findIndex.default)(flatColumns).call(flatColumns, function (col) {
+    return col.code === endCell.code;
+  });
+
+  if (startIndex < endIndex) {
+    return (0, _slice.default)(flatColumns).call(flatColumns, startIndex, endIndex + 1);
+  } else {
+    return (0, _slice.default)(flatColumns).call(flatColumns, endIndex, startIndex + 1);
+  }
+}