@kdcloudjs/table 1.1.4 → 1.1.5-canary.1

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

@@ -54,7 +54,8 @@ function filter() {
         keepDataSource = opts.keepDataSource,
         mode = opts.mode,
         filterIcon = opts.filterIcon,
-        stopClickEventPropagation = opts.stopClickEventPropagation;
+        stopClickEventPropagation = opts.stopClickEventPropagation,
+        hideFilterPopupHeader = opts.hideFilterPopupHeader;
     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' ? (0, _slice.default)(inputFilters).call(inputFilters, 0, 1) : inputFilters;
     var inputFiltersMap = new _map.default((0, _map2.default)(inputFilters).call(inputFilters, function (filterItem) {
@@ -65,7 +66,7 @@ function filter() {
       return (0, _map2.default)(columns).call(columns, dfs);
 
       function dfs(col) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
 
         var result = (0, _extends2.default)({}, col);
         var filterable = col.code && ((_a = col.features) === null || _a === void 0 ? void 0 : _a.filterable);
@@ -104,18 +105,18 @@ function filter() {
           };
 
           var filterPanel = (_d = col.features) === null || _d === void 0 ? void 0 : _d.filterPanel;
-          result.title = (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)((0, _concat.default)(_context2 = []).call(_context2, (_e = result.title) !== null && _e !== void 0 ? _e : [_internals.internals.safeRenderHeader((0, _extends2.default)((0, _extends2.default)({}, col), {
-            title: null
-          }))])), [/*#__PURE__*/_react.default.createElement(_filter2.Filter, {
+          var colFilterIcon = (_f = (_e = col.features) === null || _e === void 0 ? void 0 : _e.filterIcon) !== null && _f !== void 0 ? _f : filterIcon;
+          result.title = (0, _concat.default)(_context = []).call(_context, (0, _toConsumableArray2.default)((0, _concat.default)(_context2 = []).call(_context2, (_g = result.title) !== null && _g !== void 0 ? _g : [_internals.internals.safeRenderHeader((0, _extends2.default)({}, col))])), [/*#__PURE__*/_react.default.createElement(_filter2.Filter, {
             key: "filter",
             FilterPanelContent: filterPanel,
-            filterIcon: filterIcon,
+            filterIcon: colFilterIcon,
             filterModel: inputFiltersMap.get(col.code),
             setFilterModel: handleFilterChanged,
             setFilter: setFilter,
             isFilterActive: filterActive,
             className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.tableFilterTrigger, true), (0, _defineProperty2.default)(_cx, "active", filterActive), _cx)),
-            stopClickEventPropagation: stopClickEventPropagation
+            stopClickEventPropagation: stopClickEventPropagation,
+            hideFilterPopupHeader: hideFilterPopupHeader
           })]); // result.headerCellProps = mergeCellProps(col.headerCellProps, {
           //   style: {
           //     paddingRight: '18px'
@@ -157,8 +158,8 @@ function filter() {
         return [item.key, (0, _extends2.default)({}, 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);
@@ -172,24 +173,41 @@ 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 = (0, _filter.default)(defaultFilterOptionsMap.get('contain'));
-          } // 不符合过滤条件,退出循环
+          }
 
-
-          return !comparisonFn((0, _filter.default)(filterItem), filterItem)(_internals.internals.safeGetValue(columnsMap.get(key), record, rowIndex), record);
+          return comparisonFn((0, _filter.default)(filterItem), filterItem)(_internals.internals.safeGetValue(columnsMap.get(key), record, -1), record);
         });
       }
 
-      return dataSource.reduce(function (pre, record, rowIndex) {
-        if (isMatchedFilterCondition(record, rowIndex)) {
-          return (0, _concat.default)(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 (0, _filter.default)(_context6 = (0, _map2.default)(rows).call(rows, function (row) {
+      var currentMatched = matchFn(row);
+
+      if ((0, _utils.isLeafNode)(row)) {
+        return (parentMatched || currentMatched) && (0, _extends2.default)({}, row);
+      }
+
+      var children = row.children;
+      var rowAfterFilterChildren = (0, _extends2.default)((0, _extends2.default)({}, row), {
+        children: dfs(children, parentMatched || currentMatched)
+      });
+      var matchedByChildren = !(0, _utils.isLeafNode)(rowAfterFilterChildren);
+      return (parentMatched || currentMatched || matchedByChildren) && rowAfterFilterChildren;
+    })).call(_context6, Boolean);
+  }
 }

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

@@ -41,7 +41,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var TableHeaderCellResize = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _styledComponents.default)(TableHeaderCellResize)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &:after {\n    height: 100%;\n    top: 0;\n  }\n"])));
 

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

@@ -33,6 +33,8 @@ var _util = require("./util");
 
 var _styles = require("../../../base/styles");
 
+var _keyCode = _interopRequireDefault(require("../../../utils/keyCode"));
+
 var _templateObject;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -58,6 +60,8 @@ function DefaultFilterContent(_ref) {
       innerValue = _React$useState4[0],
       setInnerValue = _React$useState4[1];
 
+  var inputRef = (0, _react.useRef)();
+
   var handleClick = _react.default.useCallback(function (option) {
     setSelectedValue(option.key);
   }, []);
@@ -75,10 +79,26 @@ function DefaultFilterContent(_ref) {
     });
   };
 
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.keyCode === _keyCode.default.ENTER) {
+      confirm();
+    }
+  };
+
   (0, _react.useEffect)(function () {
     setSelectedValue((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain');
     setInnerValue((filterModel === null || filterModel === void 0 ? void 0 : (0, _filter.default)(filterModel)) || '');
   }, [filterModel]);
+  (0, _react.useEffect)(function () {
+    // 兼容设置焦点后发生滚动
+    setTimeout(function () {
+      var _a;
+
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({
+        preventScroll: true
+      });
+    });
+  }, []);
   return /*#__PURE__*/_react.default.createElement(DefaultFilterContentStyle, null, /*#__PURE__*/_react.default.createElement("div", {
     className: 'filter-option-list'
   }, /*#__PURE__*/_react.default.createElement("ul", null, (0, _map.default)(_util.DEFAULT_FILTER_OPTIONS).call(_util.DEFAULT_FILTER_OPTIONS, function (option, index) {
@@ -100,7 +120,9 @@ function DefaultFilterContent(_ref) {
     value: innerValue,
     onChange: function onChange(e) {
       setInnerValue(e.target.value);
-    }
+    },
+    onKeyDown: handleKeyDown,
+    ref: inputRef
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: 'filter-footer'
   }, /*#__PURE__*/_react.default.createElement("button", {

package/lib/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/lib/table/pipeline/features/filter/DefaultFilterIcon.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = DefaultFilterIcon;
+
+var _react = _interopRequireDefault(require("react"));
+
+function DefaultFilterIcon(_ref) {
+  var width = _ref.width,
+      height = _ref.height;
+  return /*#__PURE__*/_react.default.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.default.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/lib/table/pipeline/features/filter/Filter.d.ts

@@ -6,12 +6,13 @@ 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;
+    hideFilterPopupHeader?: boolean;
 }
-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, hideFilterPopupHeader }: FilterProps): JSX.Element;
 export default Filter;

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

@@ -25,17 +25,21 @@ var _reactDom = require("react-dom");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _styles = require("../../../base/styles");
 
 var _FilterPanel = _interopRequireDefault(require("./FilterPanel"));
 
 var _DefaultFilterContent = _interopRequireDefault(require("./DefaultFilterContent"));
 
+var _DefaultFilterIcon = _interopRequireDefault(require("./DefaultFilterIcon"));
+
 var _utils = require("../../../utils");
 
 var _utils2 = require("../../../base/utils");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _keyCode = _interopRequireDefault(require("../../../utils/keyCode"));
 
 var _templateObject;
 
@@ -43,24 +47,22 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var HEADER_ICON_OFFSET_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
 
-var FilterIconSpanStyle = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // position: absolute;\n  // right: 4px;\n  // cursor: pointer;\n  // transform: translateY(-50%);\n  // top: 50%;\n  // height: 12px; \n"])));
+var FilterIconSpanStyle = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  // position: absolute;\n  // right: 4px;\n  // cursor: pointer;\n  // transform: translateY(-50%);\n  // top: 50%;\n  // height: 12px; \n  > .", " {\n    display: flex\n  }\n"])), _styles.Classes.filterIcon);
 
 function Panel(_ref) {
   var ele = _ref.ele,
       filterIcon = _ref.filterIcon,
       hidePanel = _ref.hidePanel,
-      renderPanelContent = _ref.renderPanelContent;
+      renderPanelContent = _ref.renderPanelContent,
+      hideFilterPopupHeader = _ref.hideFilterPopupHeader;
 
   var filterPanelRef = _react.default.useRef(null);
 
-  var _React$useState = _react.default.useState((0, _utils.calculatePopupRelative)(ele, document.body, {
-    x: HEADER_ICON_OFFSET_X,
-    y: HEADER_ICON_OFFSET_Y
-  })),
+  var _React$useState = _react.default.useState((0, _utils.calculatePopupRelative)(ele, document.body, _getPanelOffset(ele, hideFilterPopupHeader))),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       position = _React$useState2[0],
       setPosition = _React$useState2[1];
@@ -71,10 +73,7 @@ function Panel(_ref) {
   };
 
   var handleFilterPanelResize = function handleFilterPanelResize(resize) {
-    setPosition((0, _utils.calculatePopupRelative)(ele, document.body, {
-      x: HEADER_ICON_OFFSET_X,
-      y: HEADER_ICON_OFFSET_Y
-    }));
+    setPosition((0, _utils.calculatePopupRelative)(ele, document.body, _getPanelOffset(ele, hideFilterPopupHeader)));
   };
 
   (0, _react.useEffect)(function () {
@@ -89,7 +88,8 @@ function Panel(_ref) {
     style: style,
     onClose: hidePanel,
     position: position,
-    filterIcon: filterIcon
+    filterIcon: filterIcon,
+    hideFilterPopupHeader: hideFilterPopupHeader
   }, renderPanelContent()));
 }
 
@@ -106,7 +106,8 @@ function Filter(_ref2) {
       setFilterModel = _ref2.setFilterModel,
       filterModel = _ref2.filterModel,
       isFilterActive = _ref2.isFilterActive,
-      stopClickEventPropagation = _ref2.stopClickEventPropagation;
+      stopClickEventPropagation = _ref2.stopClickEventPropagation,
+      hideFilterPopupHeader = _ref2.hideFilterPopupHeader;
 
   var _React$useState3 = _react.default.useState(false),
       _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
@@ -115,14 +116,12 @@ function Filter(_ref2) {
 
   var iconRef = _react.default.useRef(null);
 
+  var iconWrapRef = _react.default.useRef();
+
   var hidePanel = function hidePanel() {
     return setShowPanel(false);
   };
 
-  var handleMouseDown = function handleMouseDown(e) {
-    e.stopPropagation(); // 阻止触发拖拽
-  };
-
   var renderPanelContent = function renderPanelContent() {
     if (FilterPanelContent) {
       return /*#__PURE__*/_react.default.createElement(FilterPanelContent, {
@@ -142,6 +141,12 @@ function Filter(_ref2) {
   };
 
   var handleIconClick = function handleIconClick(e) {
+    // 只有当icon区域点击会触发面板展开
+    // 防止 createPortal 区域的点击触发该事件
+    if (!e.currentTarget.contains(e.target)) {
+      return;
+    }
+
     if (stopClickEventPropagation) {
       e.stopPropagation();
     }
@@ -149,32 +154,49 @@ function Filter(_ref2) {
     setShowPanel(true);
   };
 
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.currentTarget.contains(e.target) && e.keyCode === _keyCode.default.ESC) {
+      setShowPanel(false);
+    }
+  };
+
   var iconClassName = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, className, true), (0, _defineProperty2.default)(_cx, 'filter-panel-open', showPanel), _cx));
+  var displayFilterIcon = typeof filterIcon === 'function' ? filterIcon(isFilterActive) : filterIcon;
   return /*#__PURE__*/_react.default.createElement(FilterIconSpanStyle, {
     style: style,
     className: iconClassName,
-    onMouseDown: handleMouseDown,
-    ref: iconRef
+    onClick: handleIconClick,
+    onKeyDown: handleKeyDown,
+    ref: iconWrapRef,
+    tabIndex: -1
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _styles.Classes.filterIcon,
-    onClick: handleIconClick
-  }, filterIcon || /*#__PURE__*/_react.default.createElement("svg", {
+    ref: iconRef,
+    className: _styles.Classes.filterIcon
+  }, displayFilterIcon || /*#__PURE__*/_react.default.createElement(_DefaultFilterIcon.default, {
     width: size,
-    height: size,
-    viewBox: "64 64 896 896",
-    focusable: "false",
-    "data-icon": "filter",
-    fill: "currentColor",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
-  }))), showPanel && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(Panel, {
-    ele: iconRef.current,
-    filterIcon: filterIcon,
+    height: size
+  })), showPanel && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(Panel, {
+    ele: hideFilterPopupHeader ? iconWrapRef.current : iconRef.current,
+    filterIcon: displayFilterIcon,
     hidePanel: hidePanel,
-    renderPanelContent: renderPanelContent
+    renderPanelContent: renderPanelContent,
+    hideFilterPopupHeader: hideFilterPopupHeader
   }), document.body));
 }
 
+function _getPanelOffset(ele, hideFilterPopupHeader) {
+  if (hideFilterPopupHeader) {
+    return {
+      x: 0,
+      y: 0 - ele.offsetHeight
+    };
+  }
+
+  return {
+    x: HEADER_ICON_OFFSET_X,
+    y: HEADER_ICON_OFFSET_Y
+  };
+}
+
 var _default = Filter;
 exports.default = _default;

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

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

@@ -25,13 +25,19 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _utils = require("../../../utils/");
 
+var _DefaultFilterIcon = _interopRequireDefault(require("./DefaultFilterIcon"));
+
+var _styles = require("../../../base/styles");
+
+var _keyCode = _interopRequireDefault(require("../../../utils/keyCode"));
+
 var _templateObject;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var FilterPanelStyle = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  max-height: 450px;\n  min-width: 160px;\n  border-radius: 2px;\n  background-color: #fff;\n  box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n  cursor: default;\n\n  .popup-header {\n    display: flex;\n    background-color: #ebedf1;\n\n    .popup-header-icon {\n      color:#666;\n      background-color: #fff;\n      padding: 6px 16px 6px 16px;\n      display: inline-block;\n      border-right: 1px solid transparent;\n      border-left: 1px solid transparent;\n      border-top: 1px solid transparent;\n      border-top-right-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  }\n\n  .popup-body {\n    display: flex;\n  }\n"])));
+var FilterPanelStyle = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  max-height: 450px;\n  min-width: 160px;\n  border-radius: 2px;\n  background-color: #fff;\n  box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n  cursor: default;\n\n  .", " {\n    display: flex;\n    background-color: #ebedf1;\n\n    .", " {\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  .", " {\n    display: flex;\n  }\n"])), _styles.Classes.popupHeader, _styles.Classes.filterIcon, _styles.Classes.popupBody);
 
 var useWindowEvents = function useWindowEvents(func, evens) {
   _react.default.useEffect(function () {
@@ -51,7 +57,8 @@ function FilterPanel(_ref) {
       children = _ref.children,
       position = _ref.position,
       filterIcon = _ref.filterIcon,
-      onClose = _ref.onClose;
+      onClose = _ref.onClose,
+      hideFilterPopupHeader = _ref.hideFilterPopupHeader;
 
   var _useState = (0, _react.useState)(position),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -73,32 +80,47 @@ function FilterPanel(_ref) {
     setPerfectPosition((0, _utils.keepWithinBounds)(document.body, ref.current, position.x, position.y, true));
     setVisible(true);
   }, [position]);
+  var hasPopupMouseEvent = (0, _react.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']);
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.currentTarget.contains(e.target) && e.keyCode === _keyCode.default.ESC) {
+      onClose();
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement(FilterPanelStyle, {
+    className: _styles.Classes.popup,
     style: (0, _extends2.default)((0, _extends2.default)({}, style), {
       left: visible ? perfectPosition.x : 0,
       top: visible ? perfectPosition.y : 0,
       opacity: visible ? 1 : 0
     }),
-    ref: ref
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'popup-header'
+    onMouseDown: handleMouseEvent,
+    onMouseUp: handleMouseEvent,
+    onKeyDown: handleKeyDown,
+    ref: ref,
+    tabIndex: -1
+  }, !hideFilterPopupHeader ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _styles.Classes.popupHeader
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: 'popup-header-icon'
-  }, filterIcon || /*#__PURE__*/_react.default.createElement("svg", {
-    width: 14,
-    height: 14,
-    viewBox: "64 64 896 896",
-    focusable: "false",
-    "data-icon": "filter",
-    fill: "currentColor",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
-  })))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "popup-body"
+    className: _styles.Classes.filterIcon
+  }, filterIcon || /*#__PURE__*/_react.default.createElement(_DefaultFilterIcon.default, {
+    width: 12,
+    height: 12
+  }))) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _styles.Classes.popupBody
   }, children));
 }
 

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

@@ -22,7 +22,7 @@ var DEFAULT_FILTER_OPTIONS = [{
         data = data + '';
       }
 
-      return (0, _includes.default)(data).call(data, value);
+      return (0, _includes.default)(data).call(data, value[0]);
     };
   }
 }, {
@@ -38,7 +38,7 @@ var DEFAULT_FILTER_OPTIONS = [{
         data = data + '';
       }
 
-      return !(0, _includes.default)(data).call(data, value);
+      return !(0, _includes.default)(data).call(data, value[0]);
     };
   }
 }, {
@@ -46,7 +46,7 @@ var DEFAULT_FILTER_OPTIONS = [{
   key: 'equal',
   filter: function filter(value) {
     return function (data) {
-      return value !== data;
+      return value[0] === data;
     };
   }
 }, {
@@ -54,7 +54,7 @@ var DEFAULT_FILTER_OPTIONS = [{
   key: 'notEqual',
   filter: function filter(value) {
     return function (data) {
-      return value !== data;
+      return value[0] !== data;
     };
   }
 }, {

package/lib/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/lib/table/pipeline/features/footerDataSource.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.footerDataSource = footerDataSource;
+exports.footerRowMetaSymbol = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _symbol = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/symbol"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var footerRowMetaSymbol = (0, _symbol.default)('footer-row');
+exports.footerRowMetaSymbol = footerRowMetaSymbol;
+
+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((0, _map.default)(footerDataSource).call(footerDataSource, function (row) {
+        return (0, _extends3.default)((0, _defineProperty2.default)({}, footerRowMetaKey, true), row);
+      }));
+    } else {
+      console.warn('调用 pipeline.use(features.footerDataSource()) 前请先设置页脚数据源，设置方法有：pipeline.use(features.footerDataSource({dataSource:any[]})) 或者 pipeline.footerDataSource(any[])');
+    }
+
+    return pipeline;
+  };
+}

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

@@ -16,3 +16,5 @@ 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';
+export { colGroupExtendable, colGroupExtendOption } from './colGroupExtendable';