@kdcloudjs/table 1.0.1 → 1.0.2

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

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import { makeRecursiveMapper, mergeCellProps, collectNodes } from '../../utils';
+import { makeRecursiveMapper, mergeCellProps, collectNodes, isLeafNode } from '../../utils';
 import { FILL_COLUMN_CODE } from './autoFill';
 var stateKey = 'columnDrag';
 
@@ -23,16 +23,16 @@ export function columnDrag() {
         cloumnsSortData = _pipeline$getStateAtK.cloumnsSortData,
         cloumnsTranslateData = _pipeline$getStateAtK.cloumnsTranslateData;
 
-    var columns = pipeline.getColumns();
-
-    if (cloumnsSortData) {
-      columns = sortColumns(columns, cloumnsSortData);
-    }
+    var columns = pipeline.getColumns(); // if (cloumnsSortData) {
+    //   columns = sortColumns(columns, cloumnsSortData)
+    // }
 
     pipeline.columns(_filterInstanceProperty(columns).call(columns, function (column) {
       return column;
     }));
-    return pipeline.mapColumns(makeRecursiveMapper(function (col) {
+    return pipeline.mapColumns(makeRecursiveMapper(function (col, recursiveFlatMapInfo) {
+      var path = recursiveFlatMapInfo.path,
+          isLeaf = recursiveFlatMapInfo.isLeaf;
       var style = cloumnsTranslateData ? {
         transition: '.3s',
         transform: "translate3d(".concat(cloumnsTranslateData[col.code], "px, 0px, 0px)")
@@ -48,7 +48,7 @@ export function columnDrag() {
           });
         },
         headerCellProps: mergeCellProps(col.headerCellProps, {
-          onMouseDown: function onMouseDown(e) {
+          onMouseDown: !isLeaf || path.length > 1 ? undefined : function (e) {
             if (e.button !== 0) {
               return;
             } // const cx = e.clientX
@@ -81,6 +81,7 @@ export function columnDrag() {
             var rect = e.currentTarget.parentElement.getClientRects()[0];
             var startX = rect.left;
             var moveData = [];
+            var allColumns = collectNodes(columns);
 
             function handleMouseMove(e) {
               if (e.clientX - startX < 20) {
@@ -90,21 +91,7 @@ export function columnDrag() {
               }
 
               document.body.style.userSelect = 'none';
-              currentTarget.style.cursor = 'move'; // 计算平移位置
-
-              var replaceIndex = 0;
-              var totalWitdth = columns[replaceIndex].width;
-
-              while (totalWitdth < e.clientX - startX && replaceIndex < columns.length - 1) {
-                replaceIndex++;
-                totalWitdth += columns[replaceIndex].width;
-              } // 重置位置信息
-
-
-              cloumnsTranslateData = {};
-              columns.forEach(function (item) {
-                cloumnsTranslateData[item.code] = 0;
-              }); // 循环计算每一个的位置
+              currentTarget.style.cursor = 'move'; // 循环计算每一个的位置
               // if (startIndex !== replaceIndex) {
               //   const optionColumn = columns[startIndex]
               //   const move = startIndex > replaceIndex ? 1 : -1
@@ -126,11 +113,24 @@ export function columnDrag() {
               //   }
               //   index++
               // }
-              // 需要取最新startIndex, 不能直接用makeRecursiveMapper提供的startIndex（因为map时还没添加选择列、充满列等后面use添加的列）
+              // 重置位置信息
+
+              cloumnsTranslateData = {};
+              allColumns.forEach(function (item) {
+                cloumnsTranslateData[item.code] = 0;
+              }); // 计算平移位置
+
+              var replaceIndex = 0;
+              var totalWitdth = getColumnWidth(columns[replaceIndex]);
+
+              while (totalWitdth < e.clientX - startX && replaceIndex < columns.length - 1) {
+                replaceIndex++;
+                totalWitdth += getColumnWidth(columns[replaceIndex]);
+              } // 需要取最新startIndex, 不能直接用makeRecursiveMapper提供的startIndex（因为map时还没添加选择列、充满列等后面use添加的列）
+
 
               var startIndex;
-              var leafColumns = collectNodes(collectNodes(columns, 'leaf-only'));
-              leafColumns.forEach(function (column, index) {
+              columns.forEach(function (column, index) {
                 if (column.code === col.code) {
                   startIndex = index;
                 }
@@ -141,11 +141,25 @@ export function columnDrag() {
               if (startIndex > replaceIndex) {
                 // 左移
                 while (index < startIndex) {
-                  var code = columns[index].code;
-
-                  if (code && code !== FILL_COLUMN_CODE && !columns[index].lock) {
+                  var _columns$index = columns[index],
+                      code = _columns$index.code,
+                      lock = _columns$index.lock,
+                      width = _columns$index.width,
+                      children = _columns$index.children;
+
+                  if (enableMove({
+                    code: code,
+                    lock: lock
+                  })) {
                     cloumnsTranslateData[code] += optionColumn.width;
-                    cloumnsTranslateData[optionColumn.code] -= columns[index].width;
+
+                    if (isLeafNode(columns[index])) {
+                      cloumnsTranslateData[optionColumn.code] -= width;
+                    } else {
+                      cloumnsTranslateData[optionColumn.code] -= getColumnWidth(columns[index]);
+                      moveAllChildren(children, cloumnsTranslateData, optionColumn.width);
+                    }
+
                     columnMoved = true;
                   }
 
@@ -154,17 +168,30 @@ export function columnDrag() {
               } else if (startIndex < replaceIndex) {
                 // 右移
                 while (startIndex < index) {
-                  var _code = columns[index].code;
-
-                  if (_code && _code !== FILL_COLUMN_CODE && !columns[index].lock) {
+                  var _columns$index2 = columns[index],
+                      _code = _columns$index2.code,
+                      _lock = _columns$index2.lock,
+                      _width = _columns$index2.width,
+                      _children = _columns$index2.children;
+
+                  if (enableMove({
+                    code: _code,
+                    lock: _lock
+                  })) {
                     cloumnsTranslateData[_code] -= optionColumn.width;
-                    cloumnsTranslateData[optionColumn.code] += columns[index].width;
+
+                    if (isLeafNode(columns[index])) {
+                      cloumnsTranslateData[optionColumn.code] += _width;
+                    } else {
+                      cloumnsTranslateData[optionColumn.code] += getColumnWidth(columns[index]);
+                      moveAllChildren(_children, cloumnsTranslateData, optionColumn.width, true);
+                    }
+
                     columnMoved = true;
                   }
 
                   index--;
                 }
-              } else {// 不动或者移动回原位
               }
 
               window.requestAnimationFrame(function () {
@@ -200,9 +227,14 @@ export function columnDrag() {
                 if (startIndex > replaceIndex) {
                   // 左移
                   while (index < startIndex) {
-                    var code = columns[index].code;
-
-                    if (code && code !== FILL_COLUMN_CODE && !columns[index].lock) {
+                    var _columns$index3 = columns[index],
+                        code = _columns$index3.code,
+                        lock = _columns$index3.lock;
+
+                    if (enableMove({
+                      code: code,
+                      lock: lock
+                    })) {
                       cloumnsSortData[code] += 1;
                       cloumnsSortData[optionColumn.code] -= 1;
                       columnMoved = true;
@@ -213,9 +245,14 @@ export function columnDrag() {
                 } else if (startIndex < replaceIndex) {
                   // 右移
                   while (index > startIndex) {
-                    var _code2 = columns[index].code;
-
-                    if (_code2 && _code2 !== FILL_COLUMN_CODE && !columns[index].lock) {
+                    var _columns$index4 = columns[index],
+                        _code2 = _columns$index4.code,
+                        _lock2 = _columns$index4.lock;
+
+                    if (enableMove({
+                      code: _code2,
+                      lock: _lock2
+                    })) {
                       cloumnsSortData[_code2] -= 1;
                       cloumnsSortData[optionColumn.code] += 1;
                       columnMoved = true;
@@ -262,4 +299,35 @@ export function columnDrag() {
       });
     }));
   };
+}
+
+function enableMove(_ref2) {
+  var lock = _ref2.lock,
+      code = _ref2.code;
+  return code && code !== FILL_COLUMN_CODE && !lock;
+}
+
+function getColumnWidth(col) {
+  if (col.children) {
+    return col.children.reduce(function (acc, col) {
+      return acc + getColumnWidth(col);
+    }, 0);
+  }
+
+  return col.width;
+}
+
+function moveAllChildren(cols, cloumnsTranslateData, width, isMinus) {
+  cols.forEach(function (col) {
+    var _a;
+
+    var code = col.code,
+        children = col.children;
+    var movedWidth = (_a = cloumnsTranslateData[code]) !== null && _a !== void 0 ? _a : 0;
+    cloumnsTranslateData[code] = movedWidth + (isMinus ? -width : width);
+
+    if (!isLeafNode(col)) {
+      moveAllChildren(children, cloumnsTranslateData, width);
+    }
+  });
 }

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

@@ -8,11 +8,10 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _valuesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/values";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import React from 'react';
 import cx from 'classnames';
 import { internals } from '../../internals';
-import { isLeafNode, mergeCellProps, collectNodes } from '../../utils';
+import { isLeafNode, collectNodes } from '../../utils';
 import { Filter, DEFAULT_FILTER_OPTIONS } from './filter';
 import { Classes } from '../../base/styles';
 var stateKey = 'filter';
@@ -94,12 +93,11 @@ export function filter() {
             isFilterActive: filterActive,
             className: cx((_cx = {}, _defineProperty(_cx, Classes.tableFilterTrigger, true), _defineProperty(_cx, "active", filterActive), _cx)),
             stopClickEventPropagation: stopClickEventPropagation
-          })]);
-          result.headerCellProps = mergeCellProps(col.headerCellProps, {
-            style: {
-              paddingRight: '18px'
-            }
-          });
+          })]); // result.headerCellProps = mergeCellProps(col.headerCellProps, {
+          //   style: {
+          //     paddingRight: '18px'
+          //   }
+          // })
         }
 
         if (!isLeafNode(col)) {
@@ -157,7 +155,7 @@ export function filter() {
         });
       }
 
-      return _reduceInstanceProperty(dataSource).call(dataSource, function (pre, record) {
+      return dataSource.reduce(function (pre, record) {
         if (isMatchedFilterCondition(record)) {
           return _concatInstanceProperty(pre).call(pre, [record]);
         }

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

@@ -1,3 +1,5 @@
+import React from 'react';
+import { ArtColumn } from '../../interfaces';
 import { TablePipeline } from '../pipeline';
 interface ColumnSize {
     [key: string]: number;
@@ -14,6 +16,7 @@ export interface ColumnResizeOptions {
     fallbackSize?: number;
     /** 列的最大宽度，默认为 1000 */
     maxSize?: number;
+    doubleClickCallback?(e: React.MouseEvent<HTMLSpanElement>, col: ArtColumn): void;
     onChangeSize?(nextSize: ColumnSize): void;
     afterChangeSize?(nextSize: ColumnSize, changedColumnSize: ChangedColumnSize[]): void;
 }

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

@@ -3,7 +3,6 @@ import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplat
 
 var _templateObject, _templateObject2;
 
-import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import React from 'react';
@@ -74,6 +73,10 @@ export function columnResize() {
       });
     };
 
+    var handleDoubleClick = function handleDoubleClick(e, col) {
+      opts === null || opts === void 0 ? void 0 : opts.doubleClickCallback(e, col);
+    };
+
     var handleMouseDown = function handleMouseDown(e, col) {
       window.addEventListener('selectstart', disableSelect);
       var changedColumnSize = {};
@@ -92,12 +95,10 @@ export function columnResize() {
 
         if ((children === null || children === void 0 ? void 0 : children.length) > 0) {
           var leafChildColumns = collectNodes(children, 'leaf-only');
-
-          var childrenWidthSum = _reduceInstanceProperty(leafChildColumns).call(leafChildColumns, function (sum, _ref2) {
+          var childrenWidthSum = leafChildColumns.reduce(function (sum, _ref2) {
             var code = _ref2.code;
             return sum + columnSize[code];
           }, 0);
-
           leafChildColumns.forEach(function (_ref3, index) {
             var code = _ref3.code;
             var startSize = columnSize[code];
@@ -155,11 +156,17 @@ export function columnResize() {
         width: (_a = columnSize[code]) !== null && _a !== void 0 ? _a : width,
         title: /*#__PURE__*/React.createElement(React.Fragment, null, prevTitle, (features === null || features === void 0 ? void 0 : features.resizeable) !== false && (isGroup ? /*#__PURE__*/React.createElement(TableHeaderGroupCellResize, {
           className: Classes.tableHeaderCellResize,
+          onDoubleClick: function onDoubleClick(e) {
+            return handleDoubleClick(e, col);
+          },
           onMouseDown: function onMouseDown(e) {
             return handleMouseDown(e, col);
           }
         }) : /*#__PURE__*/React.createElement(TableHeaderCellResize, {
           className: Classes.tableHeaderCellResize,
+          onDoubleClick: function onDoubleClick(e) {
+            return handleDoubleClick(e, col);
+          },
           onMouseDown: function onMouseDown(e) {
             return handleMouseDown(e, col);
           }

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

@@ -1,13 +1,16 @@
+import _createClass from "@babel/runtime-corejs3/helpers/createClass";
 import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useRef, useEffect } from 'react';
 import ReactDOM from 'react-dom';
+import cx from 'classnames';
 import { ContextMenuStyleWrap } from '../../common-views';
 import { copyDataToClipboard, executeOnTempElement, console, getEventPath, isElementInEventPath, getTargetEleInEventPath } from '../../utils';
 import { findByTree } from '../../utils/others';
 import { internals } from '../../internals';
-import { MenuClasses } from '../../base/styles';
+import { Classes, MenuClasses } from '../../base/styles';
 var stateKey = 'contextMenu';
 export function contextMenu() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -45,6 +48,10 @@ export function contextMenu() {
     };
 
     var onContextMenu = function onContextMenu(e) {
+      if (suppressShowContextMenu(e)) {
+        return;
+      }
+
       e.preventDefault();
       showContextMenu(e);
     };
@@ -53,7 +60,7 @@ export function contextMenu() {
       onContextMenu: onContextMenu
     });
 
-    var getContextMenuOptions = function getContextMenuOptions(record, column, value) {
+    var getContextMenuOptions = function getContextMenuOptions(record, column, value, event) {
       var defaultMenuOptions = [];
 
       if (column) {
@@ -64,7 +71,8 @@ export function contextMenu() {
         var params = {
           record: record,
           column: column,
-          value: value
+          value: value,
+          event: event
         };
         return opts.getContextMenuItems(params);
       }
@@ -95,10 +103,10 @@ export function contextMenu() {
 
       var record = dataSource[rowIndex];
       var column = code !== undefined && findByTree(pipeline.getColumns(), function (item, index) {
-        return item.code === code ? index : -1;
+        return item.code === code;
       });
       var value = column && record && internals.safeGetValue(column, record, rowIndex);
-      var options = getContextMenuOptions(record, column, value);
+      var options = getContextMenuOptions(record, column, value, e);
 
       if (options.length === 0) {
         console.warn('context menu options is empty');
@@ -180,6 +188,7 @@ function Menu(props) {
       }),
       name: item.name,
       action: item.action,
+      disabled: item.disabled,
       hideContextMenu: hideContextMenu
     });
   })));
@@ -193,6 +202,10 @@ function MenuItem(props) {
   var itemRef = useRef();
 
   var handleClick = function handleClick() {
+    if (disabled) {
+      return;
+    }
+
     hideContextMenu();
     typeof action === 'function' && action();
   };
@@ -224,7 +237,7 @@ function MenuItem(props) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: MenuClasses.menuOption,
+    className: cx(MenuClasses.menuOption, _defineProperty({}, MenuClasses.menuOptionDisable, disabled)),
     ref: itemRef,
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
@@ -234,7 +247,7 @@ function MenuItem(props) {
   }, name));
 }
 
-var MenuHelper = function MenuHelper() {
+var MenuHelper = /*#__PURE__*/_createClass(function MenuHelper() {
   var _this = this;
 
   _classCallCheck(this, MenuHelper);
@@ -247,7 +260,7 @@ var MenuHelper = function MenuHelper() {
     _this.hidePopup && _this.hidePopup();
     _this.hidePopup = null;
   };
-};
+});
 /** 是否点击是外部 start */
 
 
@@ -331,13 +344,13 @@ function keepWithinBounds(popupParent, ePopup, x, y) {
     var minWidth = Math.min(ePopupRect.width, 120);
     ePopup.style.minWidth = minWidth + 'px';
     var maxX = parentWidth - minWidth;
-    x = Math.min(Math.max(x, 0), Math.abs(maxX)); //目前位置，最大支持的位置
+    x = Math.min(Math.max(x, 0), Math.abs(maxX)); // 目前位置，最大支持的位置
   }
 
   if (y) {
     var minHeight = Math.min(ePopupRect.height, 180);
     var maxY = parentHeight - minHeight;
-    y = Math.min(Math.max(y, 0), Math.abs(maxY)); //目前位置，最大支持的位置
+    y = Math.min(Math.max(y, 0), Math.abs(maxY)); // 目前位置，最大支持的位置
   }
 
   return {
@@ -358,6 +371,25 @@ function getRowEleForEvent(event, dataSource) {
   return getRowEleInEventPath(getEventPath(event));
 }
 /** 获得点击的元素 end */
+// 禁止弹出右键菜单
+
+
+function suppressShowContextMenu(e) {
+  var path = getEventPath(e.nativeEvent);
+  var pointIndex = 0;
+
+  while (pointIndex < path.length) {
+    var ele = path[pointIndex];
+
+    if (ele.classList.contains(Classes.tableBody) || ele.classList.contains(Classes.tableFooter)) {
+      return false;
+    }
+
+    pointIndex++;
+  }
+
+  return true;
+} // 默认选项
 
 
 function getCopyItem(v) {

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/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;