@kdcloudjs/table 1.1.4 → 1.1.5-canary.10

package/lib/table/base/utils.js

@@ -23,6 +23,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.addResizeObserver = exports.STYLED_VERSION = exports.STYLED_REF_PROP = exports.OVERSCAN_SIZE = exports.AUTO_VIRTUAL_THRESHOLD = void 0;
 exports.composeRowPropsGetter = composeRowPropsGetter;
+exports.cssPolifill = void 0;
 exports.getScrollbarSize = getScrollbarSize;
 exports.getTableScrollFooterDOM = getTableScrollFooterDOM;
 exports.getTableScrollHeaderDOM = getTableScrollHeaderDOM;
@@ -49,10 +50,16 @@ var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-po
 
 var styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _cssVarsPonyfill = _interopRequireDefault(require("css-vars-ponyfill"));
+
 var _mergeCellProps = _interopRequireDefault(require("../utils/mergeCellProps"));
 
 var _utils = require("../utils");
 
+var _styles = require("./styles");
+
+var _element = require("../utils/element");
+
 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 || _typeof3(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; }
@@ -190,7 +197,12 @@ function syncScrollLeft(elements, callback) {
           return;
         }
 
-        var scrollLeft = ele.scrollLeft;
+        var scrollLeft = ele.scrollLeft; // 某一元素当滚动条消失时会触发scroll事件（scrolLeft重置为0），不同步其他其他元素的scrollLeft
+
+        if (scrollLeft === 0 && !(0, _element.hasScroll)(ele)) {
+          return;
+        }
+
         publishScrollLeft(ele, scrollLeft);
         callback(scrollLeft);
       };
@@ -268,4 +280,33 @@ function getTableScrollHeaderDOM(domHelper) {
 
 function getTableScrollFooterDOM(domHelper) {
   return _utils.browserType.isIE ? domHelper.tableFooterMain : domHelper.tableFooter;
-}
+}
+
+var cssPolifill = function cssPolifill(_ref) {
+  var variables = _ref.variables,
+      enableCSSVariables = _ref.enableCSSVariables,
+      bordered = _ref.bordered;
+
+  if (enableCSSVariables === false) {
+    return;
+  }
+
+  var conditionCSSVariables = {}; // 默认情况下存在td、th无左右边框，开启`bordered`属性后才开启，否则隐藏这两种属性
+
+  if (!bordered) {
+    conditionCSSVariables['--cell-border-vertical'] = 'none';
+    conditionCSSVariables['--header-cell-border-vertical'] = 'none';
+  }
+
+  (0, _cssVarsPonyfill.default)({
+    // exclude: 'link[href*="semantic-ui"]',
+    // onlyLegacy: false,
+    // rootElement: rootElement,
+    include: 'style[data-styled]',
+    variables: (0, _extends2.default)({}, _styles.defaultCSSVariables, variables, conditionCSSVariables),
+    watch: true,
+    silent: true
+  });
+};
+
+exports.cssPolifill = cssPolifill;

package/lib/table/common-views.js

@@ -85,6 +85,6 @@ var icons = {
 };
 exports.icons = icons;
 
-var ContextMenuStyleWrap = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  &.", "{\n    border: 1px solid #e9ecf1;\n    border-radius: 2px;\n    background-color: #Fff;\n    box-shadow: 0px 0px 5px 0px rgb(154 154 154 / 50%);\n    cursor: default;\n    font-size: 13px;\n    position:absolute;\n    z-index: 1050;\n    width:120px;\n  }\n\n  .", "{\n    width:100%;\n    display: table;\n  }\n\n  .", " .", "{\n    display: table-row;\n    color: #666666;\n  }\n\n  .", " .", "{\n    background-color: #f5f5f5;\n  }\n\n  .", " .", " .", "{\n    display: table-cell;\n    padding: 5px 8px;\n  }\n  .", " .", ".", "{\n    opacity: .5;\n  }\n\n"])), _styles.MenuClasses.menu, _styles.MenuClasses.menuList, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOptionActive, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuOptionText, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuOptionDisable);
+var ContextMenuStyleWrap = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  &.", "{\n    border: 1px solid #e9ecf1;\n    border-radius: 2px;\n    background-color: #Fff;\n    box-shadow: 0px 0px 5px 0px rgb(154 154 154 / 50%);\n    cursor: default;\n    font-size: 12px;\n    position:absolute;\n    z-index: 1050;\n    max-width: 600px;\n    padding: 8px 0;\n  }\n\n  .", "{\n    width:100%;\n    display: table;\n  }\n\n  .", " .", "{\n    display: table-row;\n    color: #212121;\n  }\n\n  .", " .", "{\n    background-color: var(--hover-bgcolor);\n  }\n\n  .", " .", " .", "{\n    display: table-cell;\n    padding: 8px 12px;\n    max-width: 576px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    line-height: 16px;\n  }\n  .", " .", ".", "{\n    opacity: .5;\n  }\n\n"])), _styles.MenuClasses.menu, _styles.MenuClasses.menuList, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOptionActive, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuOptionText, _styles.MenuClasses.menuList, _styles.MenuClasses.menuOption, _styles.MenuClasses.menuOptionDisable);
 
 exports.ContextMenuStyleWrap = ContextMenuStyleWrap;

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

@@ -0,0 +1,8 @@
+import { TablePipeline } from "../pipeline";
+import { ReactNode } from 'react';
+export interface colGroupExtendOption {
+    onChangeExtendStatus?({}: any, {}: any): void;
+    extendStatus?: {};
+    extendIcon?: ReactNode | ((extendStatus: boolean) => ReactNode);
+}
+export declare const colGroupExtendable: (opts?: colGroupExtendOption) => (pipeline: TablePipeline) => TablePipeline;

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

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.colGroupExtendable = void 0;
+
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _internals = require("../../internals");
+
+var _utils = require("../../utils");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("../../base/styles");
+
+var _templateObject;
+
+var ExtendIconStyle = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-size:12px;\n  margin-left:4px;\n"])));
+
+var stateKey = 'colExtend';
+
+var ExpandIcon = function ExpandIcon(_ref) {
+  var style = _ref.style,
+      className = _ref.className,
+      size = _ref.size,
+      isExtend = _ref.isExtend;
+  return isExtend ? /*#__PURE__*/_react.default.createElement("svg", {
+    className: className,
+    width: size,
+    height: size,
+    style: style,
+    viewBox: "96 96 896 896"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M678.347087 178.347087C690.550972 166.143203 690.550972 146.356797 678.347087 134.152913C666.143203 121.949029 646.356797 121.949029 634.152913 134.152913L290.402913 477.902913C278.199029 490.106797 278.199029 509.893203 290.402913 522.097087L634.152913 865.847087C646.356797 878.050972 666.143203 878.050972 678.347087 865.847087C690.550972 853.643203 690.550972 833.856797 678.347087 821.652913L356.694175 500L678.347087 178.347087z"
+  })) : /*#__PURE__*/_react.default.createElement("svg", {
+    className: className,
+    width: size,
+    height: size,
+    style: style,
+    viewBox: "96 96 896 896"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M321.652913 178.347087C309.449029 166.143203 309.449029 146.356797 321.652913 134.152913C333.856797 121.949029 353.643203 121.949029 365.847088 134.152913L709.597087 477.902913C721.800972 490.106797 721.800972 509.893203 709.597087 522.097087L365.847088 865.847087C353.643203 878.050972 333.856797 878.050972 321.652913 865.847087C309.449029 853.643203 309.449029 833.856797 321.652913 821.652913L643.305825 500L321.652913 178.347087z"
+  }));
+};
+
+var colGroupExtendable = function colGroupExtendable() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function (pipeline) {
+    var _a, _b;
+
+    var columns = pipeline.getColumns();
+    var curState = (_b = (_a = opts.extendStatus) !== null && _a !== void 0 ? _a : pipeline.getStateAtKey(stateKey)) !== null && _b !== void 0 ? _b : {};
+
+    var processColumns = function processColumns(columns) {
+      // 当组合列可伸缩，且处于收缩状态时，只渲染一个子列，其他不渲染
+      var toggle = function toggle(col) {
+        // 对应的 col 进行状态切换
+        var changedValue = (0, _defineProperty2.default)({}, col.code, !curState[col.code]);
+        curState[col.code] = !curState[col.code];
+        pipeline.setStateAtKey(stateKey, (0, _extends2.default)({}, curState));
+        (opts === null || opts === void 0 ? void 0 : opts.onChangeExtendStatus) && opts.onChangeExtendStatus(curState, changedValue);
+      };
+
+      var addIcon = function addIcon(col) {
+        var result = (0, _extends2.default)({}, col);
+        var curColState = curState[col.code];
+        var displaycolExtendIcon = typeof opts.extendIcon === 'function' ? opts.extendIcon(curColState) : opts.extendIcon;
+
+        var addIconNode = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _internals.internals.safeRenderHeader((0, _extends2.default)({}, col)), /*#__PURE__*/_react.default.createElement(ExtendIconStyle, {
+          onClick: function onClick() {
+            toggle(col);
+          }
+        }, displaycolExtendIcon || /*#__PURE__*/_react.default.createElement(ExpandIcon, {
+          style: {
+            userSelect: 'none',
+            marginLeft: 2,
+            flexShrink: 0,
+            cursor: "pointer",
+            verticalAlign: 'middle'
+          },
+          className: (0, _classnames.default)((0, _defineProperty2.default)({}, _styles.Classes.tableExtendIcon, true)),
+          size: 14,
+          isExtend: curColState
+        })));
+
+        result.title = addIconNode;
+        return result;
+      };
+
+      return (0, _utils.makeRecursiveMapper)(function (col) {
+        var _a;
+
+        var _ref2 = (col === null || col === void 0 ? void 0 : col.features) || {},
+            showExtendIcon = _ref2.showExtendIcon;
+
+        if (showExtendIcon === true && ((_a = col.children) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+          var _context;
+
+          col = addIcon(col);
+          curState[col.code] === false && (0, _splice.default)(_context = col.children).call(_context, 1, col.children.length);
+        }
+
+        return col;
+      })(columns);
+    };
+
+    pipeline.columns(processColumns(columns));
+    return pipeline;
+  };
+};
+
+exports.colGroupExtendable = colGroupExtendable;

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

@@ -79,7 +79,7 @@ function columnDrag() {
         },
         headerCellProps: (0, _utils.mergeCellProps)(col.headerCellProps, {
           onMouseDown: !isLeaf || path.length > 1 ? undefined : function (e) {
-            if (e.button !== 0) {
+            if (e.button !== 0 || !e.currentTarget.contains(e.target)) {
               return;
             }
 
@@ -255,13 +255,14 @@ function columnDrag() {
             }
 
             function handleMouseUp(e) {
-              e.stopPropagation();
               document.body.removeEventListener('mousemove', handleMouseMove);
               document.body.removeEventListener('mouseup', handleMouseUp);
-              window.removeEventListener('selectstart', disableSelect); // 阻止列头点击事件，防止拖动后触发列头过滤事件
+              window.removeEventListener('selectstart', disableSelect);
 
               if (_isMoveWhenClicking(mouseDownClientX, mouseDownClientY, e.clientX, e.clientY)) {
-                currentTarget.addEventListener('click', stopClickPropagation);
+                e.stopPropagation(); // 存在移动就阻止冒泡
+
+                currentTarget.addEventListener('click', stopClickPropagation); // 阻止列头点击事件，防止拖动后触发列头过滤事件
               }
 
               window.requestAnimationFrame(function () {

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

@@ -54,7 +54,10 @@ 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' ? (0, _slice.default)(inputFilters).call(inputFilters, 0, 1) : inputFilters;
     var inputFiltersMap = new _map.default((0, _map2.default)(inputFilters).call(inputFilters, function (filterItem) {
@@ -65,7 +68,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 +107,20 @@ 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,
+            stopESCKeyDownEventPropagation: stopESCKeyDownEventPropagation,
+            hideFilterPopupHeader: hideFilterPopupHeader,
+            getPopupParent: getPopupParent
           })]); // result.headerCellProps = mergeCellProps(col.headerCellProps, {
           //   style: {
           //     paddingRight: '18px'
@@ -157,8 +162,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 +177,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/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/lib/table/pipeline/features/contextMenu.js

@@ -43,12 +43,11 @@ 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 stateKey = 'contextMenu';
-
 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) {
@@ -82,13 +81,11 @@ 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({
@@ -162,7 +159,8 @@ function contextMenu() {
         options: options,
         hideContextMenu: hideContextMenu,
         position: position,
-        getPopupParent: getPopupParent
+        getPopupParent: getPopupParent,
+        className: menuClassName
       });
 
       var _hidePopup = addPopup(menu);
@@ -195,7 +193,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,
@@ -216,7 +215,7 @@ function Menu(props) {
     }
   }, [position]);
   return /*#__PURE__*/_react.default.createElement(_commonViews.ContextMenuStyleWrap, {
-    className: _styles.MenuClasses.menu,
+    className: (0, _classnames.default)(_styles.MenuClasses.menu, className),
     ref: menuRef,
     style: {
       left: position.x,
@@ -232,6 +231,7 @@ function Menu(props) {
       }),
       name: item.name,
       action: item.action,
+      className: item.className,
       disabled: item.disabled,
       hideContextMenu: hideContextMenu
     });
@@ -241,6 +241,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 = (0, _react.useRef)();
@@ -281,7 +282,7 @@ function MenuItem(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_styles.MenuClasses.menuOption, (0, _defineProperty2.default)({}, _styles.MenuClasses.menuOptionDisable, disabled)),
+    className: (0, _classnames.default)(_styles.MenuClasses.menuOption, className, (0, _defineProperty2.default)({}, _styles.MenuClasses.menuOptionDisable, disabled)),
     ref: itemRef,
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
@@ -424,24 +425,12 @@ function isElementInsideTheFooter(ele) {
   }
 
   return false;
-} // 禁止弹出右键菜单
-
-
-function suppressShowContextMenu(e) {
-  var path = (0, _utils.getEventPath)(e.nativeEvent);
-  var pointIndex = 0;
-
-  while (pointIndex < path.length) {
-    var ele = path[pointIndex];
-
-    if (ele.classList.contains(_styles.Classes.tableBody) || ele.classList.contains(_styles.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/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); }
@@ -53,11 +55,13 @@ function DefaultFilterContent(_ref) {
       selectedValue = _React$useState2[0],
       setSelectedValue = _React$useState2[1];
 
-  var _React$useState3 = _react.default.useState((filterModel === null || filterModel === void 0 ? void 0 : (0, _filter.default)(filterModel)) || ''),
+  var _React$useState3 = _react.default.useState((filterModel === null || filterModel === void 0 ? void 0 : (0, _filter.default)(filterModel)) || []),
       _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
       innerValue = _React$useState4[0],
       setInnerValue = _React$useState4[1];
 
+  var inputRef = (0, _react.useRef)();
+
   var handleClick = _react.default.useCallback(function (option) {
     setSelectedValue(option.key);
   }, []);
@@ -70,15 +74,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.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)) || '');
+    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) {
@@ -97,10 +117,12 @@ function DefaultFilterContent(_ref) {
     className: 'filter-search'
   }, /*#__PURE__*/_react.default.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.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,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;