@kdcloudjs/table 1.1.4 → 1.1.5-canary.10

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

@@ -12,9 +12,15 @@ export interface FilterFeatureOptions {
     keepDataSource?: boolean;
     /** 过滤模式。单列过滤 single，多列过滤 multiple，默认为多选 */
     mode?: 'single' | 'multiple';
-    /**过滤图标 */
-    filterIcon?: ReactNode;
+    /** 过滤图标 */
+    filterIcon?: ReactNode | ((filtered: boolean) => ReactNode);
     /** 是否对触发弹出过滤面板 的 click 事件调用 event.stopPropagation() */
     stopClickEventPropagation?: boolean;
+    /** 是否对按ESC键时关闭面板的 keydown 事件调用 event.stopPropagation() */
+    stopESCKeyDownEventPropagation?: boolean;
+    /** 是否隐藏过滤面板的header区域 */
+    hideFilterPopupHeader?: boolean;
+    /** 指定过滤面板渲染的父节点 */
+    getPopupParent?: (triggerElement: HTMLElement) => HTMLElement;
 }
 export declare function filter(opts?: FilterFeatureOptions): (pipeline: TablePipeline) => TablePipeline;

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

@@ -28,7 +28,10 @@ export function filter() {
         keepDataSource = opts.keepDataSource,
         mode = opts.mode,
         filterIcon = opts.filterIcon,
-        stopClickEventPropagation = opts.stopClickEventPropagation;
+        stopClickEventPropagation = opts.stopClickEventPropagation,
+        stopESCKeyDownEventPropagation = opts.stopESCKeyDownEventPropagation,
+        hideFilterPopupHeader = opts.hideFilterPopupHeader,
+        getPopupParent = opts.getPopupParent;
     var inputFilters = (_b = (_a = filters !== null && filters !== void 0 ? filters : pipeline.getStateAtKey(stateKey)) !== null && _a !== void 0 ? _a : defaultFilters) !== null && _b !== void 0 ? _b : [];
     inputFilters = mode === 'single' ? _sliceInstanceProperty(inputFilters).call(inputFilters, 0, 1) : inputFilters;
     var inputFiltersMap = new _Map(_mapInstanceProperty(inputFilters).call(inputFilters, function (filterItem) {
@@ -39,7 +42,7 @@ export function filter() {
       return _mapInstanceProperty(columns).call(columns, dfs);
 
       function dfs(col) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
 
         var result = _extends({}, col);
 
@@ -81,18 +84,20 @@ export function filter() {
           };
 
           var filterPanel = (_d = col.features) === null || _d === void 0 ? void 0 : _d.filterPanel;
-          result.title = _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(_concatInstanceProperty(_context2 = []).call(_context2, (_e = result.title) !== null && _e !== void 0 ? _e : [internals.safeRenderHeader(_extends(_extends({}, col), {
-            title: null
-          }))])), [/*#__PURE__*/React.createElement(Filter, {
+          var colFilterIcon = (_f = (_e = col.features) === null || _e === void 0 ? void 0 : _e.filterIcon) !== null && _f !== void 0 ? _f : filterIcon;
+          result.title = _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(_concatInstanceProperty(_context2 = []).call(_context2, (_g = result.title) !== null && _g !== void 0 ? _g : [internals.safeRenderHeader(_extends({}, col))])), [/*#__PURE__*/React.createElement(Filter, {
             key: "filter",
             FilterPanelContent: filterPanel,
-            filterIcon: filterIcon,
+            filterIcon: colFilterIcon,
             filterModel: inputFiltersMap.get(col.code),
             setFilterModel: handleFilterChanged,
             setFilter: setFilter,
             isFilterActive: filterActive,
             className: cx((_cx = {}, _defineProperty(_cx, Classes.tableFilterTrigger, true), _defineProperty(_cx, "active", filterActive), _cx)),
-            stopClickEventPropagation: stopClickEventPropagation
+            stopClickEventPropagation: stopClickEventPropagation,
+            stopESCKeyDownEventPropagation: stopESCKeyDownEventPropagation,
+            hideFilterPopupHeader: hideFilterPopupHeader,
+            getPopupParent: getPopupParent
           })]); // result.headerCellProps = mergeCellProps(col.headerCellProps, {
           //   style: {
           //     paddingRight: '18px'
@@ -134,8 +139,8 @@ export function filter() {
         return [item.key, _extends({}, item)];
       }));
 
-      function isMatchedFilterCondition(record, rowIndex) {
-        return !filtersKeys.some(function (key) {
+      function isMatchedFilterCondition(record) {
+        return filtersKeys.every(function (key) {
           var _a, _b;
 
           var filterItem = inputFiltersMap.get(key);
@@ -149,24 +154,43 @@ export function filter() {
           } else {
             console.warn("\u5217[".concat(key, "]\u672A\u914D\u7F6E\u7B5B\u9009\u51FD\u6570\uFF0C\u8BF7\u8BBE\u7F6E column.features.filterable \u6765\u4F5C\u4E3A\u8BE5\u5217\u7684\u7B5B\u9009\u51FD\u6570, \u76EE\u524D\u4F7F\u7528\u9ED8\u8BA4\u5305\u542B\u7B5B\u9009\u51FD\u6570"));
             comparisonFn = _filterInstanceProperty(defaultFilterOptionsMap.get('contain'));
-          } // 不符合过滤条件,退出循环
+          }
 
-
-          return !comparisonFn(_filterInstanceProperty(filterItem), filterItem)(internals.safeGetValue(columnsMap.get(key), record, rowIndex), record);
+          return comparisonFn(_filterInstanceProperty(filterItem), filterItem)(internals.safeGetValue(columnsMap.get(key), record, -1), record);
         });
       }
 
-      return dataSource.reduce(function (pre, record, rowIndex) {
-        if (isMatchedFilterCondition(record, rowIndex)) {
-          return _concatInstanceProperty(pre).call(pre, [record]);
-        }
-
-        return pre;
-      }, []);
+      return layeredFilter(dataSource, isMatchedFilterCondition);
     }
 
     pipeline.dataSource(processDataSource(dataSource));
     pipeline.columns(processColumns(columns));
     return pipeline;
   };
+}
+
+function layeredFilter(array, matchFn) {
+  return dfs(array);
+
+  function dfs(rows) {
+    var _context6;
+
+    var parentMatched = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return _filterInstanceProperty(_context6 = _mapInstanceProperty(rows).call(rows, function (row) {
+      var currentMatched = matchFn(row);
+
+      if (isLeafNode(row)) {
+        return (parentMatched || currentMatched) && _extends({}, row);
+      }
+
+      var children = row.children;
+
+      var rowAfterFilterChildren = _extends(_extends({}, row), {
+        children: dfs(children, parentMatched || currentMatched)
+      });
+
+      var matchedByChildren = !isLeafNode(rowAfterFilterChildren);
+      return (parentMatched || currentMatched || matchedByChildren) && rowAfterFilterChildren;
+    })).call(_context6, Boolean);
+  }
 }

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

@@ -12,7 +12,7 @@ import * as op from 'rxjs/operators';
 import { mergeCellProps, collectNodes, makeRecursiveMapper, isGroupColumn } from '../../utils';
 import { internals } from '../../internals';
 import { Classes } from '../../base/styles';
-var TableHeaderCellResize = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: -5px;\n  height: 100%;\n  width: 10px;\n  cursor: ew-resize;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  z-index:1;\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    display: block;\n    left: calc(50% - 1px);\n    width: 1px;\n    height: calc(100% - 14px);\n    top: 7px;\n    background-color: var(--border-color);\n  }\n"])));
+var TableHeaderCellResize = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: -5px;\n  height: 100%;\n  width: 10px;\n  cursor: ew-resize;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  z-index:1;\n\n  &:after {\n    content: \"\";\n    position: absolute;\n    display: block;\n    left: calc(50% - 1px);\n    width: 1px;\n    height: calc(100% - 14px);\n    top: 7px;\n  }\n"])));
 var TableHeaderGroupCellResize = styled(TableHeaderCellResize)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:after {\n    height: 100%;\n    top: 0;\n  }\n"])));
 
 function clamp(min, x, max) {

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

@@ -1,14 +1,18 @@
 import { TablePipeline } from '../pipeline';
 interface ContextMenuItem {
+    key?: string;
     name: string;
-    action: () => {};
+    action: () => void;
     disabled?: boolean;
+    className?: string;
 }
 export interface ContextMenuFeatureOptions {
     /** 获得自定义菜单 */
     getContextMenuItems?: (params: any) => ContextMenuItem[];
     /** 弹出框的父容器 */
     popupParent?: HTMLElement;
+    /** 右键菜单className */
+    menuClassName?: string;
 }
 export declare function contextMenu(opts?: ContextMenuFeatureOptions): (pipeline: TablePipeline) => TablePipeline;
 export {};

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

@@ -10,12 +10,12 @@ import { ContextMenuStyleWrap } from '../../common-views';
 import { copyDataToClipboard, executeOnTempElement, console, getEventPath, isElementInEventPath, getTargetEleInEventPath } from '../../utils';
 import { findByTree } from '../../utils/others';
 import { internals } from '../../internals';
-import { Classes, MenuClasses } from '../../base/styles';
-var stateKey = 'contextMenu';
+import { MenuClasses } from '../../base/styles';
 export function contextMenu() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function step(pipeline) {
     var popupParent = opts.popupParent || document.body;
+    var menuClassName = opts.menuClassName;
     var menuHelper = new MenuHelper();
 
     var addPopup = function addPopup(menu) {
@@ -48,13 +48,11 @@ export function contextMenu() {
     };
 
     var onContextMenu = function onContextMenu(e) {
-      if (suppressShowContextMenu(e)) {
-        return;
+      if (canShowContextMenu(e, pipeline)) {
+        e.preventDefault();
+        e.stopPropagation();
+        showContextMenu(e);
       }
-
-      e.preventDefault();
-      e.stopPropagation();
-      showContextMenu(e);
     };
 
     pipeline.addTableProps({
@@ -124,7 +122,8 @@ export function contextMenu() {
         options: options,
         hideContextMenu: hideContextMenu,
         position: position,
-        getPopupParent: getPopupParent
+        getPopupParent: getPopupParent,
+        className: menuClassName
       });
 
       var _hidePopup = addPopup(menu);
@@ -157,7 +156,8 @@ function getMenuItemKey(_ref) {
 }
 
 function Menu(props) {
-  var _props$options = props.options,
+  var className = props.className,
+      _props$options = props.options,
       options = _props$options === void 0 ? [] : _props$options,
       hideContextMenu = props.hideContextMenu,
       position = props.position,
@@ -178,7 +178,7 @@ function Menu(props) {
     }
   }, [position]);
   return /*#__PURE__*/React.createElement(ContextMenuStyleWrap, {
-    className: MenuClasses.menu,
+    className: cx(MenuClasses.menu, className),
     ref: menuRef,
     style: {
       left: position.x,
@@ -194,6 +194,7 @@ function Menu(props) {
       }),
       name: item.name,
       action: item.action,
+      className: item.className,
       disabled: item.disabled,
       hideContextMenu: hideContextMenu
     });
@@ -203,6 +204,7 @@ function Menu(props) {
 function MenuItem(props) {
   var name = props.name,
       action = props.action,
+      className = props.className,
       disabled = props.disabled,
       hideContextMenu = props.hideContextMenu;
   var itemRef = useRef();
@@ -243,7 +245,7 @@ function MenuItem(props) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: cx(MenuClasses.menuOption, _defineProperty({}, MenuClasses.menuOptionDisable, disabled)),
+    className: cx(MenuClasses.menuOption, className, _defineProperty({}, MenuClasses.menuOptionDisable, disabled)),
     ref: itemRef,
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
@@ -387,24 +389,12 @@ function isElementInsideTheFooter(ele) {
   }
 
   return false;
-} // 禁止弹出右键菜单
-
-
-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++;
-  }
+function canShowContextMenu(e, pipeline) {
+  var _a, _b;
 
-  return true;
+  return ((_a = pipeline.ref.current.domHelper) === null || _a === void 0 ? void 0 : _a.tableBody.contains(e.target)) || ((_b = pipeline.ref.current.domHelper) === null || _b === void 0 ? void 0 : _b.tableFooter.contains(e.target));
 } // 默认选项
 
 

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) {
@@ -25,11 +26,12 @@ function DefaultFilterContent(_ref) {
       selectedValue = _React$useState2[0],
       setSelectedValue = _React$useState2[1];
 
-  var _React$useState3 = React.useState((filterModel === null || filterModel === void 0 ? void 0 : _filterInstanceProperty(filterModel)) || ''),
+  var _React$useState3 = React.useState((filterModel === null || filterModel === void 0 ? void 0 : _filterInstanceProperty(filterModel)) || []),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       innerValue = _React$useState4[0],
       setInnerValue = _React$useState4[1];
 
+  var inputRef = useRef();
   var handleClick = React.useCallback(function (option) {
     setSelectedValue(option.key);
   }, []);
@@ -42,15 +44,31 @@ function DefaultFilterContent(_ref) {
   var confirm = function confirm() {
     hidePanel();
     setFilterModel({
-      filter: [innerValue],
+      filter: innerValue,
       filterCondition: selectedValue
     });
   };
 
+  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)) || '');
+    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) {
@@ -69,10 +87,12 @@ function DefaultFilterContent(_ref) {
     className: 'filter-search'
   }, /*#__PURE__*/React.createElement("input", {
     className: 'filter-search-inner',
-    value: innerValue,
+    value: innerValue[0],
     onChange: function onChange(e) {
-      setInnerValue(e.target.value);
-    }
+      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,12 +6,15 @@ interface FilterProps {
     size?: number;
     isFilterActive: boolean;
     FilterPanelContent?: FilterPanelType;
-    filterIcon?: ReactNode;
+    filterIcon?: ReactNode | ((filtered: boolean) => ReactNode);
     setFilterModel: DefaultFilterPanelProps['setFilterModel'];
     filterModel: DefaultFilterPanelProps['filterModel'];
     setFilter: CustomeFilterPanelProps['setFilter'];
     onClick?: (e: React.MouseEvent) => any;
     stopClickEventPropagation?: boolean;
+    stopESCKeyDownEventPropagation?: boolean;
+    hideFilterPopupHeader?: boolean;
+    getPopupParent?: (triggerElement: HTMLElement) => HTMLElement;
 }
-declare function Filter({ size, style, className, FilterPanelContent, filterIcon, setFilter, setFilterModel, filterModel, isFilterActive, stopClickEventPropagation }: FilterProps): JSX.Element;
+declare function Filter({ size, style, className, FilterPanelContent, filterIcon, setFilter, setFilterModel, filterModel, isFilterActive, stopClickEventPropagation, stopESCKeyDownEventPropagation, hideFilterPopupHeader, getPopupParent }: FilterProps): JSX.Element;
 export default Filter;

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

@@ -7,29 +7,30 @@ var _templateObject;
 import React, { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import styled from 'styled-components';
+import cx from 'classnames';
 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
+import KeyCode from '../../../utils/keyCode';
+var HEADER_ICON_OFFSET_Y = 8 + 1; // padding-top + 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  > .", " {\n    display: flex\n  }\n"])), Classes.filterIcon);
 
 function Panel(_ref) {
   var ele = _ref.ele,
       filterIcon = _ref.filterIcon,
       hidePanel = _ref.hidePanel,
-      renderPanelContent = _ref.renderPanelContent;
+      renderPanelContent = _ref.renderPanelContent,
+      hideFilterPopupHeader = _ref.hideFilterPopupHeader,
+      popupParent = _ref.popupParent;
   var filterPanelRef = React.useRef(null);
 
-  var _React$useState = React.useState(calculatePopupRelative(ele, document.body, {
-    x: HEADER_ICON_OFFSET_X,
-    y: HEADER_ICON_OFFSET_Y
-  })),
+  var _React$useState = React.useState(calculatePopupRelative(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader))),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       position = _React$useState2[0],
       setPosition = _React$useState2[1];
@@ -40,10 +41,7 @@ function Panel(_ref) {
   };
 
   var handleFilterPanelResize = function handleFilterPanelResize(resize) {
-    setPosition(calculatePopupRelative(ele, document.body, {
-      x: HEADER_ICON_OFFSET_X,
-      y: HEADER_ICON_OFFSET_Y
-    }));
+    setPosition(calculatePopupRelative(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader)));
   };
 
   useEffect(function () {
@@ -58,7 +56,8 @@ function Panel(_ref) {
     style: style,
     onClose: hidePanel,
     position: position,
-    filterIcon: filterIcon
+    filterIcon: filterIcon,
+    hideFilterPopupHeader: hideFilterPopupHeader
   }, renderPanelContent()));
 }
 
@@ -75,7 +74,10 @@ function Filter(_ref2) {
       setFilterModel = _ref2.setFilterModel,
       filterModel = _ref2.filterModel,
       isFilterActive = _ref2.isFilterActive,
-      stopClickEventPropagation = _ref2.stopClickEventPropagation;
+      stopClickEventPropagation = _ref2.stopClickEventPropagation,
+      stopESCKeyDownEventPropagation = _ref2.stopESCKeyDownEventPropagation,
+      hideFilterPopupHeader = _ref2.hideFilterPopupHeader,
+      getPopupParent = _ref2.getPopupParent;
 
   var _React$useState3 = React.useState(false),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
@@ -83,15 +85,12 @@ function Filter(_ref2) {
       setShowPanel = _React$useState4[1];
 
   var iconRef = React.useRef(null);
+  var iconWrapRef = React.useRef();
 
   var hidePanel = function hidePanel() {
     return setShowPanel(false);
   };
 
-  var handleMouseDown = function handleMouseDown(e) {
-    e.stopPropagation(); // 阻止触发拖拽
-  };
-
   var renderPanelContent = function renderPanelContent() {
     if (FilterPanelContent) {
       return /*#__PURE__*/React.createElement(FilterPanelContent, {
@@ -111,38 +110,67 @@ function Filter(_ref2) {
   };
 
   var handleIconClick = function handleIconClick(e) {
+    // 只有当icon区域点击会触发面板展开
+    // 防止 createPortal 区域的点击触发该事件
+    if (e.currentTarget.contains(e.target)) {
+      setShowPanel(true);
+    }
+
     if (stopClickEventPropagation) {
       e.stopPropagation();
     }
+  };
 
-    setShowPanel(true);
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.keyCode === KeyCode.ESC) {
+      if (e.currentTarget.contains(e.target)) {
+        setShowPanel(false);
+      }
+
+      if (stopESCKeyDownEventPropagation) {
+        e.stopPropagation();
+      }
+    }
   };
 
   var iconClassName = cx((_cx = {}, _defineProperty(_cx, className, true), _defineProperty(_cx, 'filter-panel-open', showPanel), _cx));
+  var displayFilterIcon = typeof filterIcon === 'function' ? filterIcon(isFilterActive) : filterIcon;
+  var popupParent = (getPopupParent === null || getPopupParent === void 0 ? void 0 : getPopupParent(iconWrapRef.current)) || document.body;
   return /*#__PURE__*/React.createElement(FilterIconSpanStyle, {
     style: style,
     className: iconClassName,
-    onMouseDown: handleMouseDown,
-    ref: iconRef
+    onClick: handleIconClick,
+    onKeyDown: handleKeyDown,
+    ref: iconWrapRef,
+    tabIndex: -1
   }, /*#__PURE__*/React.createElement("span", {
-    className: Classes.filterIcon,
-    onClick: handleIconClick
-  }, filterIcon || /*#__PURE__*/React.createElement("svg", {
+    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, {
-    ele: iconRef.current,
-    filterIcon: filterIcon,
+    height: size
+  })), showPanel && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Panel, {
+    ele: hideFilterPopupHeader ? iconWrapRef.current : iconRef.current,
+    filterIcon: displayFilterIcon,
     hidePanel: hidePanel,
-    renderPanelContent: renderPanelContent
-  }), document.body));
+    renderPanelContent: renderPanelContent,
+    hideFilterPopupHeader: hideFilterPopupHeader,
+    popupParent: popupParent
+  }), popupParent));
+}
+
+function _getPanelOffset(ele, hideFilterPopupHeader) {
+  if (hideFilterPopupHeader) {
+    return {
+      x: 0,
+      y: 0 - ele.offsetHeight
+    };
+  }
+
+  return {
+    x: HEADER_ICON_OFFSET_X,
+    y: HEADER_ICON_OFFSET_Y
+  };
 }
 
 export default Filter;

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

@@ -10,11 +10,12 @@ export interface FilterPanel {
     filterIcon: ReactNode;
     children?: ReactNode;
 }
-declare function FilterPanel({ style, children, position, filterIcon, onClose }: {
+declare function FilterPanel({ style, children, position, filterIcon, onClose, hideFilterPopupHeader }: {
     style: any;
     children: any;
     position: any;
     filterIcon: any;
     onClose: any;
+    hideFilterPopupHeader: any;
 }): JSX.Element;
 export default FilterPanel;