@kdcloudjs/table 1.1.3 → 1.1.4-canary.1

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

@@ -6,11 +6,12 @@ var _templateObject;
 
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import cx from 'classnames';
 import { DEFAULT_FILTER_OPTIONS } from './util';
 import { Classes, ButtonCSS } from '../../../base/styles';
+import KeyCode from '../../../utils/keyCode';
 var DefaultFilterContentStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n  border-radius: 2px;\n  width: 100%;\n\n  ", "\n  .filter-option-list {\n    display: flex;\n    flex-direction: column;\n    margin-top: 8px;\n    ul {\n      margin: 0;\n      padding: 0;\n      li {\n        display: flex;\n        position: relative;\n        flex-shrink: 0;\n        height: 32px;\n        align-items: center;\n        border-radius: 2px;\n        font-size: 12px;\n        color: var(--color);\n        padding: 0 12px;\n        overflow: hidden;\n        cursor: pointer;\n        &:hover{\n          background-color: var(--primary-color-level1);\n        }\n      }\n      li.active{\n        background-color: var(--primary-color-level1);\n      }\n    }\n  }\n\n  .filter-search {\n    display: flex;\n    padding: 6px 12px;\n\n    .filter-search-inner {\n      width: 100%;\n      font-size: 12px;\n      color: #333333;\n      height: 28px;\n      line-height: 28px;\n      padding: 0 8px;\n      outline: none;\n      background-color: #FAFAFA;\n      border-radius: 2px;\n      border: 1px solid var(--strong-border-color);\n      &:hover{\n        border-color: var(--primary-color)\n      } \n      &:focus{\n        border-color: var(--primary-color)\n      }  \n    }\n  }\n\n  .filter-footer {\n    display: flex;\n    flex-direction: row;\n    padding: 8px 12px;\n    justify-content: space-between;\n\n    .filter-btn {\n      text-align: center;\n      font-size: 12px;\n      width: 60px;\n      height: 24px;\n      line-height: 24px;\n    }\n    \n  }\n"])), ButtonCSS);
 
 function DefaultFilterContent(_ref) {
@@ -30,6 +31,7 @@ function DefaultFilterContent(_ref) {
       innerValue = _React$useState4[0],
       setInnerValue = _React$useState4[1];
 
+  var inputRef = useRef();
   var handleClick = React.useCallback(function (option) {
     setSelectedValue(option.key);
   }, []);
@@ -47,10 +49,26 @@ function DefaultFilterContent(_ref) {
     });
   };
 
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.keyCode === KeyCode.ENTER) {
+      confirm();
+    }
+  };
+
   useEffect(function () {
     setSelectedValue((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain');
     setInnerValue((filterModel === null || filterModel === void 0 ? void 0 : _filterInstanceProperty(filterModel)) || '');
   }, [filterModel]);
+  useEffect(function () {
+    // 兼容设置焦点后发生滚动
+    setTimeout(function () {
+      var _a;
+
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({
+        preventScroll: true
+      });
+    });
+  }, []);
   return /*#__PURE__*/React.createElement(DefaultFilterContentStyle, null, /*#__PURE__*/React.createElement("div", {
     className: 'filter-option-list'
   }, /*#__PURE__*/React.createElement("ul", null, _mapInstanceProperty(DEFAULT_FILTER_OPTIONS).call(DEFAULT_FILTER_OPTIONS, function (option, index) {
@@ -72,7 +90,9 @@ function DefaultFilterContent(_ref) {
     value: innerValue,
     onChange: function onChange(e) {
       setInnerValue(e.target.value);
-    }
+    },
+    onKeyDown: handleKeyDown,
+    ref: inputRef
   })), /*#__PURE__*/React.createElement("div", {
     className: 'filter-footer'
   }, /*#__PURE__*/React.createElement("button", {

package/es/table/pipeline/features/filter/DefaultFilterIcon.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function DefaultFilterIcon({ width, height }: {
+    width: string | number;
+    height: string | number;
+}): JSX.Element;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+export default function DefaultFilterIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: width,
+    height: height,
+    style: {
+      verticalAlign: 'middle'
+    },
+    viewBox: "0 0 1024 1024",
+    focusable: "false",
+    "data-icon": "filter",
+    fill: "currentColor",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M891.448889 159.573333L626.460444 460.231111v443.221333c0 32.881778-25.429333 63.658667-55.864888 63.658667l-170.268445-172.942222V456.419556L132.266667 159.857778A59.619556 59.619556 0 0 1 173.511111 56.888889h676.977778c32.995556 0 59.733333 26.680889 59.733333 59.562667 0 17.066667-7.224889 32.312889-18.773333 43.121777z"
+  }));
+}

package/es/table/pipeline/features/filter/Filter.d.ts

@@ -6,7 +6,7 @@ interface FilterProps {
     size?: number;
     isFilterActive: boolean;
     FilterPanelContent?: FilterPanelType;
-    filterIcon?: ReactNode;
+    filterIcon?: ReactNode | ((filtered: boolean) => ReactNode);
     setFilterModel: DefaultFilterPanelProps['setFilterModel'];
     filterModel: DefaultFilterPanelProps['filterModel'];
     setFilter: CustomeFilterPanelProps['setFilter'];

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

@@ -10,10 +10,11 @@ import styled from 'styled-components';
 import { Classes } from '../../../base/styles';
 import FilterPanel from './FilterPanel';
 import DefaultFilterContent from './DefaultFilterContent';
+import DefaultFilterIcon from './DefaultFilterIcon';
 import { calculatePopupRelative } from '../../../utils';
 import { addResizeObserver } from '../../../base/utils';
 import cx from 'classnames';
-var HEADER_ICON_OFFSET_Y = 6 + 1; // padding-top + border
+var HEADER_ICON_OFFSET_Y = 8 + 1; // padding-top + border
 
 var HEADER_ICON_OFFSET_X = 16 + 1; // padding-left+ border
 
@@ -88,10 +89,6 @@ function Filter(_ref2) {
     return setShowPanel(false);
   };
 
-  var handleMouseDown = function handleMouseDown(e) {
-    e.stopPropagation(); // 阻止触发拖拽
-  };
-
   var renderPanelContent = function renderPanelContent() {
     if (FilterPanelContent) {
       return /*#__PURE__*/React.createElement(FilterPanelContent, {
@@ -111,6 +108,12 @@ function Filter(_ref2) {
   };
 
   var handleIconClick = function handleIconClick(e) {
+    // 只有当icon区域点击会触发面板展开
+    // 防止 createPortal 区域的点击触发该事件
+    if (!e.currentTarget.contains(e.target)) {
+      return;
+    }
+
     if (stopClickEventPropagation) {
       e.stopPropagation();
     }
@@ -119,27 +122,20 @@ function Filter(_ref2) {
   };
 
   var iconClassName = cx((_cx = {}, _defineProperty(_cx, className, true), _defineProperty(_cx, 'filter-panel-open', showPanel), _cx));
+  var displayFilterIcon = typeof filterIcon === 'function' ? filterIcon(isFilterActive) : filterIcon;
   return /*#__PURE__*/React.createElement(FilterIconSpanStyle, {
     style: style,
     className: iconClassName,
-    onMouseDown: handleMouseDown,
-    ref: iconRef
-  }, /*#__PURE__*/React.createElement("span", {
-    className: Classes.filterIcon,
     onClick: handleIconClick
-  }, filterIcon || /*#__PURE__*/React.createElement("svg", {
+  }, /*#__PURE__*/React.createElement("span", {
+    ref: iconRef,
+    className: Classes.filterIcon
+  }, displayFilterIcon || /*#__PURE__*/React.createElement(DefaultFilterIcon, {
     width: size,
-    height: size,
-    viewBox: "64 64 896 896",
-    focusable: "false",
-    "data-icon": "filter",
-    fill: "currentColor",
-    "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( /*#__PURE__*/React.createElement(Panel, {
+    height: size
+  })), showPanel && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Panel, {
     ele: iconRef.current,
-    filterIcon: filterIcon,
+    filterIcon: displayFilterIcon,
     hidePanel: hidePanel,
     renderPanelContent: renderPanelContent
   }), document.body));

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

@@ -4,10 +4,11 @@ import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplat
 
 var _templateObject;
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import styled from 'styled-components';
 import { isElementInEventPath, keepWithinBounds } from '../../../utils/';
-var FilterPanelStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])));
+import DefaultFilterIcon from './DefaultFilterIcon';
+var FilterPanelStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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      display: flex;\n      color:#666;\n      background-color: #fff;\n      padding: 8px 16px 8px 16px;\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) {
   React.useEffect(function () {
@@ -49,31 +50,36 @@ function FilterPanel(_ref) {
     setPerfectPosition(keepWithinBounds(document.body, ref.current, position.x, position.y, true));
     setVisible(true);
   }, [position]);
+  var hasPopupMouseEvent = useRef(false);
+
+  var handleMouseEvent = function handleMouseEvent() {
+    // 当弹出的过滤面板内部发生鼠标按下、抬起事件时，标记当前事件，并在click捕获期清除标记，用来确定鼠标按下、抬起发生在过滤面板内部
+    // 利用了React.createPortal冒泡是根据React Tree的特性：
+    // https://jwwnz.medium.com/react-portals-and-event-bubbling-8df3e35ca3f1
+    hasPopupMouseEvent.current = true;
+  };
+
   useWindowEvents(function (e) {
-    return !isContainPanel(e) && onClose();
-  }, ['mousedown']);
+    !isContainPanel(e) && !hasPopupMouseEvent.current && onClose();
+    hasPopupMouseEvent.current = false;
+  }, ['click']);
   return /*#__PURE__*/React.createElement(FilterPanelStyle, {
     style: _extends(_extends({}, style), {
       left: visible ? perfectPosition.x : 0,
       top: visible ? perfectPosition.y : 0,
       opacity: visible ? 1 : 0
     }),
+    onMouseDown: handleMouseEvent,
+    onMouseUp: handleMouseEvent,
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: 'popup-header'
   }, /*#__PURE__*/React.createElement("span", {
     className: 'popup-header-icon'
-  }, filterIcon || /*#__PURE__*/React.createElement("svg", {
-    width: 14,
-    height: 14,
-    viewBox: "64 64 896 896",
-    focusable: "false",
-    "data-icon": "filter",
-    fill: "currentColor",
-    "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"
-  })))), /*#__PURE__*/React.createElement("div", {
+  }, filterIcon || /*#__PURE__*/React.createElement(DefaultFilterIcon, {
+    width: 12,
+    height: 12
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "popup-body"
   }, children));
 }

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

@@ -12,7 +12,7 @@ var DEFAULT_FILTER_OPTIONS = [{
         data = data + '';
       }
 
-      return _includesInstanceProperty(data).call(data, value);
+      return _includesInstanceProperty(data).call(data, value[0]);
     };
   }
 }, {
@@ -28,7 +28,7 @@ var DEFAULT_FILTER_OPTIONS = [{
         data = data + '';
       }
 
-      return !_includesInstanceProperty(data).call(data, value);
+      return !_includesInstanceProperty(data).call(data, value[0]);
     };
   }
 }, {
@@ -36,7 +36,7 @@ var DEFAULT_FILTER_OPTIONS = [{
   key: 'equal',
   filter: function filter(value) {
     return function (data) {
-      return value !== data;
+      return value[0] === data;
     };
   }
 }, {
@@ -44,7 +44,7 @@ var DEFAULT_FILTER_OPTIONS = [{
   key: 'notEqual',
   filter: function filter(value) {
     return function (data) {
-      return value !== data;
+      return value[0] !== data;
     };
   }
 }, {

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

@@ -0,0 +1,9 @@
+import { TablePipeline } from '../pipeline';
+export interface FooterDataSourceFeatureOptions {
+    /** 指定表格页脚每一行元信息的记录字段 */
+    footerRowMetaKey?: string | symbol;
+    /** 表格页脚数据源 */
+    dataSource?: any[];
+}
+export declare const footerRowMetaSymbol: unique symbol;
+export declare function footerDataSource(opts?: FooterDataSourceFeatureOptions): (pipeline: TablePipeline) => TablePipeline;

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

@@ -0,0 +1,25 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+export var footerRowMetaSymbol = _Symbol('footer-row');
+export 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(_mapInstanceProperty(footerDataSource).call(footerDataSource, function (row) {
+        return _extends(_defineProperty({}, footerRowMetaKey, true), row);
+      }));
+    } else {
+      console.warn('调用 pipeline.use(features.footerDataSource()) 前请先设置页脚数据源，设置方法有：pipeline.use(features.footerDataSource({dataSource:any[]})) 或者 pipeline.footerDataSource(any[])');
+    }
+
+    return pipeline;
+  };
+}

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

@@ -15,4 +15,5 @@ export { columnResize } from './columnResizeWidth';
 export { contextMenu } from './contextMenu';
 export { filter } from './columnFilter';
 export { rangeSelection } from './rangeSelection';
-export { mergeCellHover } from './mergeCellHover';
+export { mergeCellHover } from './mergeCellHover';
+export { footerDataSource, footerRowMetaSymbol } from './footerDataSource';

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

@@ -5,7 +5,7 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 import React from 'react';
 import { internals } from '../../internals';
 import { always, arrayUtils } from '../../utils/others';
-import { mergeCellProps } from '../../utils';
+import { collectNodes, mergeCellProps } from '../../utils';
 export function multiSelect() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function multiSelectStep(pipeline) {
@@ -44,7 +44,8 @@ export function multiSelect() {
     /** 所有有效的 keys（disable 状态为 false） */
 
     var allKeys = [];
-    dataSource.forEach(function (row, rowIndex) {
+    var flatDataSource = collectNodes(dataSource);
+    flatDataSource.forEach(function (row, rowIndex) {
       var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
       fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
 
@@ -110,6 +111,10 @@ export function multiSelect() {
           return mergeCellProps(preCellProps, checkboxCellProps);
         },
         render: function render(_, row, rowIndex) {
+          if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
+            return null;
+          }
+
           var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
           var checked = set.has(key);
           return /*#__PURE__*/React.createElement(Checkbox, {

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

@@ -10,40 +10,42 @@ import { map, takeUntil } from 'rxjs/operators';
 import { Classes } from '../../base/styles';
 import cx from 'classnames';
 export var rangeSelectionKey = 'rangeSelection';
-export var lastClickCell = 'lastClickCell';
+export var lastClickCellKey = 'lastClickCell';
 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;
 
     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);
     };
@@ -54,23 +56,23 @@ export 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 || !isElementInEventPath(tableBody, mouseDownEvent.nativeEvent)) return; // mouseDownEvent.preventDefault()
+      if (mouseDownEvent.button !== 0 || !(isElementInEventPath(tableBody, mouseDownEvent.nativeEvent) || isElementInEventPath(tableFooter, mouseDownEvent.nativeEvent))) return; // mouseDownEvent.preventDefault()
       // shift + 点击选中
 
       shiftKeySelect(mouseDownEvent);
@@ -126,10 +128,11 @@ export function rangeSelection(opts) {
     };
 
     var onKeyDown = function onKeyDown(e) {
-      if (!isElementInEventPath(tableBody, e.nativeEvent)) return;
+      if (!(isElementInEventPath(tableBody, e.nativeEvent) || 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();
@@ -137,7 +140,11 @@ export 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
           });
         }
       }
@@ -146,7 +153,8 @@ export function rangeSelection(opts) {
     pipeline.addTableProps({
       onMouseDown: onMouseDown,
       onKeyDown: onKeyDown,
-      tabIndex: -1
+      tabIndex: -1,
+      className: cx([Classes.rangeSelection])
     }); // todo: 后面可以把mousedown放到一个流里面
 
     return pipeline.mapColumns(makeRecursiveMapper(function (col) {
@@ -162,15 +170,29 @@ export 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 = 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));
+          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));
           return mergeCellProps(prevCellProps, {
             className: className
           });
@@ -196,7 +218,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)
           }
         };
       }();
@@ -211,7 +234,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(Classes.artTable)) {
+    if (target.classList.contains(Classes.tableFooter)) {
+      return true;
+    }
+
+    target = target.parentElement;
+  }
+
+  return false;
 }
 
 function getRangeColumns(startCell, endCell, columns) {
@@ -230,4 +265,97 @@ function getRangeColumns(startCell, endCell, columns) {
   } else {
     return _sliceInstanceProperty(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/es/table/pipeline/features/singleSelect.js

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