@kdcloudjs/table 1.0.1 → 1.0.4

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

@@ -1,38 +1,86 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";
 
 var _templateObject;
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
 import { Classes } from '../../../base/styles';
 import FilterPanel from './FilterPanel';
 import DefaultFilterContent from './DefaultFilterContent';
 import { calculatePopupRelative } from '../../../utils';
-var HEADER_ICON_OFFSET_Y = 6 + 1; //padding-top + border
+import { addResizeObserver } from '../../../base/utils';
+import cx from 'classnames';
+var HEADER_ICON_OFFSET_Y = 6 + 1; // padding-top + border
 
-var HEADER_ICON_OFFSET_X = 16 + 1; //padding-left+ border
+var HEADER_ICON_OFFSET_X = 16 + 1; // padding-left+ border
 
-var FilterIconSpanStyle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 4px;\n  cursor: pointer;\n  transform: translateY(-50%);\n  top: 50%;\n  height: 12px; \n"])));
+var FilterIconSpanStyle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // position: absolute;\n  // right: 4px;\n  // cursor: pointer;\n  // transform: translateY(-50%);\n  // top: 50%;\n  // height: 12px; \n"])));
 
-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,
+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.useRef(null);
 
-  var _React$useState = React.useState(false),
+  var _React$useState = React.useState(calculatePopupRelative(ele, document.body, {
+    x: HEADER_ICON_OFFSET_X,
+    y: HEADER_ICON_OFFSET_Y
+  })),
       _React$useState2 = _slicedToArray(_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(calculatePopupRelative(ele, document.body, {
+      x: HEADER_ICON_OFFSET_X,
+      y: HEADER_ICON_OFFSET_Y
+    }));
+  };
+
+  useEffect(function () {
+    var resizeObserver = addResizeObserver(filterPanelRef.current.children[0], handleFilterPanelResize);
+    return function () {
+      resizeObserver && resizeObserver.disconnect();
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: filterPanelRef
+  }, /*#__PURE__*/React.createElement(FilterPanel, {
+    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.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      showPanel = _React$useState4[0],
+      setShowPanel = _React$useState4[1];
 
   var iconRef = React.useRef(null);
 
@@ -62,23 +110,6 @@ function Filter(_ref) {
     }
   };
 
-  var renderPanel = function renderPanel(ele) {
-    var position = calculatePopupRelative(ele, document.body, {
-      x: HEADER_ICON_OFFSET_X,
-      y: HEADER_ICON_OFFSET_Y
-    });
-    var style = {
-      position: 'absolute',
-      zIndex: 1050
-    };
-    return /*#__PURE__*/React.createElement(FilterPanel, {
-      style: style,
-      onClose: hidePanel,
-      position: position,
-      filterIcon: filterIcon
-    }, renderPanelContent());
-  };
-
   var handleIconClick = function handleIconClick(e) {
     if (stopClickEventPropagation) {
       e.stopPropagation();
@@ -87,9 +118,10 @@ function Filter(_ref) {
     setShowPanel(true);
   };
 
+  var iconClassName = cx((_cx = {}, _defineProperty(_cx, className, true), _defineProperty(_cx, 'filter-panel-open', showPanel), _cx));
   return /*#__PURE__*/React.createElement(FilterIconSpanStyle, {
     style: style,
-    className: className,
+    className: iconClassName,
     onMouseDown: handleMouseDown,
     ref: iconRef
   }, /*#__PURE__*/React.createElement("span", {
@@ -105,7 +137,12 @@ function Filter(_ref) {
     "aria-hidden": "true"
   }, /*#__PURE__*/React.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__*/createPortal(renderPanel(iconRef.current), document.body));
+  }))), showPanel && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Panel, {
+    ele: iconRef.current,
+    filterIcon: filterIcon,
+    hidePanel: hidePanel,
+    renderPanelContent: renderPanelContent
+  }), document.body));
 }
 
 export default Filter;

package/es/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/es/table/pipeline/features/index.js

@@ -13,4 +13,5 @@ export { treeSelect } from './treeSelect';
 export { columnDrag } from './columnDrag';
 export { columnResize } from './columnResizeWidth';
 export { contextMenu } from './contextMenu';
-export { filter } from './columnFilter';
+export { filter } from './columnFilter';
+export { rangeSelection } from './rangeSelection';

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

@@ -9,8 +9,6 @@ import { mergeCellProps } from '../../utils';
 export function multiSelect() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function multiSelectStep(pipeline) {
-    var _context;
-
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
 
     var stateKey = 'multiSelect';
@@ -54,94 +52,102 @@ export function multiSelect() {
         allKeys.push(rowKey);
       }
     });
-    var set = new _Set(value);
-    var isAllChecked = allKeys.length > 0 && allKeys.every(function (key) {
-      return set.has(key);
-    });
-    var isAnyChecked = allKeys.some(function (key) {
-      return set.has(key);
-    });
-    var defaultCheckboxColumnTitle = /*#__PURE__*/React.createElement(Checkbox, {
-      checked: isAllChecked,
-      indeterminate: !isAllChecked && isAnyChecked,
-      onChange: function onChange(_) {
-        if (isAllChecked) {
-          _onChange(arrayUtils.diff(value, allKeys), '', allKeys, 'uncheck-all');
-        } else {
-          _onChange(arrayUtils.merge(value, allKeys), '', allKeys, 'check-all');
-        }
-      }
-    });
+    var set = new _Set(value); // todo: 暂使用hidden隐藏选择列 后续增加配置
 
-    var checkboxColumn = _extends(_extends({
-      name: '是否选中',
-      title: defaultCheckboxColumnTitle,
-      width: 50,
-      align: 'center'
-    }, opts.checkboxColumn), {
-      getCellProps: function getCellProps(value, row, rowIndex) {
-        var _a, _b;
-
-        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);
-
-        if (fullKeySet.has(rowKey) && clickArea === 'cell') {
-          var prevChecked = set.has(rowKey);
-          var disabled = isDisabled(row, rowIndex);
-          checkboxCellProps = {
-            style: {
-              cursor: disabled ? 'not-allowed' : 'pointer'
-            },
-            onClick: disabled ? undefined : function (e) {
-              if (opts.stopClickEventPropagation) {
-                e.stopPropagation();
-              }
+    var hiddenSelectColumn = opts.checkboxColumn && opts.checkboxColumn.hidden === true;
 
-              onCheckboxChange(prevChecked, rowKey, e.shiftKey);
-            }
-          };
+    if (!hiddenSelectColumn) {
+      var _context;
+
+      var isAllChecked = allKeys.length > 0 && allKeys.every(function (key) {
+        return set.has(key);
+      });
+      var isAnyChecked = allKeys.some(function (key) {
+        return set.has(key);
+      });
+      var defaultCheckboxColumnTitle = /*#__PURE__*/React.createElement(Checkbox, {
+        checked: isAllChecked,
+        indeterminate: !isAllChecked && isAnyChecked,
+        onChange: function onChange(_) {
+          if (isAllChecked) {
+            _onChange(arrayUtils.diff(value, allKeys), '', allKeys, 'uncheck-all');
+          } else {
+            _onChange(arrayUtils.merge(value, allKeys), '', allKeys, 'check-all');
+          }
         }
+      });
 
-        return mergeCellProps(preCellProps, checkboxCellProps);
-      },
-      render: function render(_, row, rowIndex) {
-        var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
-        var checked = set.has(key);
-        return /*#__PURE__*/React.createElement(Checkbox, {
-          checked: checked,
-          disabled: isDisabled(row, rowIndex),
-          onChange: clickArea === 'checkbox' ? function (arg1, arg2) {
-            var _a; // 这里要同时兼容 antd 和 fusion 的用法
-            // fusion: arg2?.nativeEvent
-            // antd: arg1.nativeEvent
-
-
-            var nativeEvent = (_a = arg2 === null || arg2 === void 0 ? void 0 : arg2.nativeEvent) !== null && _a !== void 0 ? _a : arg1.nativeEvent;
-
-            if (nativeEvent) {
-              if (opts.stopClickEventPropagation) {
-                nativeEvent.stopPropagation();
+      var checkboxColumn = _extends(_extends({
+        name: '是否选中',
+        title: defaultCheckboxColumnTitle,
+        width: 50,
+        align: 'center'
+      }, opts.checkboxColumn), {
+        getCellProps: function getCellProps(value, row, rowIndex) {
+          var _a, _b;
+
+          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);
+
+          if (fullKeySet.has(rowKey) && clickArea === 'cell') {
+            var prevChecked = set.has(rowKey);
+            var disabled = isDisabled(row, rowIndex);
+            checkboxCellProps = {
+              style: {
+                cursor: disabled ? 'not-allowed' : 'pointer'
+              },
+              onClick: disabled ? undefined : function (e) {
+                if (opts.stopClickEventPropagation) {
+                  e.stopPropagation();
+                }
+
+                onCheckboxChange(prevChecked, rowKey, e.shiftKey);
+              }
+            };
+          }
+
+          return mergeCellProps(preCellProps, checkboxCellProps);
+        },
+        render: function render(_, row, rowIndex) {
+          var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
+          var checked = set.has(key);
+          return /*#__PURE__*/React.createElement(Checkbox, {
+            checked: checked,
+            disabled: isDisabled(row, rowIndex),
+            onChange: clickArea === 'checkbox' ? function (arg1, arg2) {
+              var _a; // 这里要同时兼容 antd 和 fusion 的用法
+              // fusion: arg2?.nativeEvent
+              // antd: arg1.nativeEvent
+
+
+              var nativeEvent = (_a = arg2 === null || arg2 === void 0 ? void 0 : arg2.nativeEvent) !== null && _a !== void 0 ? _a : arg1.nativeEvent;
+
+              if (nativeEvent) {
+                if (opts.stopClickEventPropagation) {
+                  nativeEvent.stopPropagation();
+                }
+
+                onCheckboxChange(checked, key, nativeEvent.shiftKey);
               }
+            } : undefined
+          });
+        }
+      });
 
-              onCheckboxChange(checked, key, nativeEvent.shiftKey);
-            }
-          } : undefined
-        });
-      }
-    });
+      var nextColumns = _sliceInstanceProperty(_context = pipeline.getColumns()).call(_context);
 
-    var nextColumns = _sliceInstanceProperty(_context = pipeline.getColumns()).call(_context);
+      var checkboxPlacement = (_l = opts.checkboxPlacement) !== null && _l !== void 0 ? _l : 'start';
 
-    var checkboxPlacement = (_l = opts.checkboxPlacement) !== null && _l !== void 0 ? _l : 'start';
+      if (checkboxPlacement === 'start') {
+        nextColumns.unshift(checkboxColumn);
+      } else {
+        nextColumns.push(checkboxColumn);
+      }
 
-    if (checkboxPlacement === 'start') {
-      nextColumns.unshift(checkboxColumn);
-    } else {
-      nextColumns.push(checkboxColumn);
+      pipeline.columns(nextColumns);
     }
 
-    pipeline.columns(nextColumns);
     pipeline.appendRowPropsGetter(function (row, rowIndex) {
       var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
 

package/es/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/es/table/pipeline/features/rangeSelection.js

@@ -0,0 +1,231 @@
+import _typeof from "@babel/runtime-corejs3/helpers/typeof";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import { mergeCellProps, makeRecursiveMapper, isElementInEventPath, collectNodes } from '../../utils';
+import { findByTree } from '../../utils/others';
+import { fromEvent } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
+import { Classes } from '../../base/styles';
+import cx from 'classnames';
+export var rangeSelectionKey = 'rangeSelection';
+export var lastClickCell = 'lastClickCell';
+export 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 || !isElementInEventPath(tableBody, mouseDownEvent.nativeEvent)) return; // mouseDownEvent.preventDefault()
+      // shift + 点击选中
+
+      shiftKeySelect(mouseDownEvent);
+      var target = mouseDownEvent.target;
+      var startDragCell = getTargetCell(target, columns);
+      var mousemove$ = fromEvent(window, 'mousemove');
+      var mouseup$ = 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(map(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
+        };
+      }), 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(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 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 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 = cx((_cx = {}, _defineProperty(_cx, Classes.tableCellRangeSelected, match), _defineProperty(_cx, Classes.tableCellRangeTop, rowIndex === startIndex), _defineProperty(_cx, Classes.tableCellRangeLeft, col.code === startCol.code && match), _defineProperty(_cx, Classes.tableCellRangeBottom, rowIndex === endIndex), _defineProperty(_cx, Classes.tableCellRangeRight, col.code === endCol.code && match), _cx));
+          return 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 = 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 (_typeof(_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 = collectNodes(columns, 'leaf-only');
+
+  var startIndex = _findIndexInstanceProperty(flatColumns).call(flatColumns, function (col) {
+    return col.code === startCell.code;
+  });
+
+  var endIndex = _findIndexInstanceProperty(flatColumns).call(flatColumns, function (col) {
+    return col.code === endCell.code;
+  });
+
+  if (startIndex < endIndex) {
+    return _sliceInstanceProperty(flatColumns).call(flatColumns, startIndex, endIndex + 1);
+  } else {
+    return _sliceInstanceProperty(flatColumns).call(flatColumns, endIndex, startIndex + 1);
+  }
+}