@kdcloudjs/table 1.1.5-canary.2 → 1.1.5-canary.4

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

@@ -1,6 +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/es/table/pipeline/features/colGroupExtendable.js

@@ -60,11 +60,13 @@ export var colGroupExtendable = function colGroupExtendable() {
       var addIcon = function addIcon(col) {
         var result = _extends({}, col);
 
+        var curColState = curState[col.code];
+        var displaycolExtendIcon = typeof opts.extendIcon === 'function' ? opts.extendIcon(curColState) : opts.extendIcon;
         var addIconNode = /*#__PURE__*/React.createElement(React.Fragment, null, internals.safeRenderHeader(_extends({}, col)), /*#__PURE__*/React.createElement(ExtendIconStyle, {
           onClick: function onClick() {
             toggle(col);
           }
-        }, /*#__PURE__*/React.createElement(ExpandIcon, {
+        }, displaycolExtendIcon || /*#__PURE__*/React.createElement(ExpandIcon, {
           style: {
             userSelect: 'none',
             marginLeft: 2,
@@ -73,8 +75,8 @@ export var colGroupExtendable = function colGroupExtendable() {
             verticalAlign: 'middle'
           },
           className: cx(_defineProperty({}, Classes.tableExtendIcon, true)),
-          size: 16,
-          isExtend: curState[col.code]
+          size: 14,
+          isExtend: curColState
         })));
         result.title = addIconNode;
         return result;

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

@@ -16,7 +16,11 @@ export interface FilterFeatureOptions {
     filterIcon?: ReactNode | ((filtered: boolean) => ReactNode);
     /** 是否对触发弹出过滤面板 的 click 事件调用 event.stopPropagation() */
     stopClickEventPropagation?: boolean;
-    /** 是否隐藏过滤弹出菜单header区域 */
+    /** 是否对按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

@@ -29,7 +29,9 @@ export function filter() {
         mode = opts.mode,
         filterIcon = opts.filterIcon,
         stopClickEventPropagation = opts.stopClickEventPropagation,
-        hideFilterPopupHeader = opts.hideFilterPopupHeader;
+        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) {
@@ -93,7 +95,9 @@ export function filter() {
             isFilterActive: filterActive,
             className: cx((_cx = {}, _defineProperty(_cx, Classes.tableFilterTrigger, true), _defineProperty(_cx, "active", filterActive), _cx)),
             stopClickEventPropagation: stopClickEventPropagation,
-            hideFilterPopupHeader: hideFilterPopupHeader
+            stopESCKeyDownEventPropagation: stopESCKeyDownEventPropagation,
+            hideFilterPopupHeader: hideFilterPopupHeader,
+            getPopupParent: getPopupParent
           })]); // result.headerCellProps = mergeCellProps(col.headerCellProps, {
           //   style: {
           //     paddingRight: '18px'

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

@@ -12,7 +12,9 @@ interface FilterProps {
     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, hideFilterPopupHeader }: 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

@@ -26,10 +26,11 @@ function Panel(_ref) {
       filterIcon = _ref.filterIcon,
       hidePanel = _ref.hidePanel,
       renderPanelContent = _ref.renderPanelContent,
-      hideFilterPopupHeader = _ref.hideFilterPopupHeader;
+      hideFilterPopupHeader = _ref.hideFilterPopupHeader,
+      popupParent = _ref.popupParent;
   var filterPanelRef = React.useRef(null);
 
-  var _React$useState = React.useState(calculatePopupRelative(ele, document.body, _getPanelOffset(ele, hideFilterPopupHeader))),
+  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,7 +41,7 @@ function Panel(_ref) {
   };
 
   var handleFilterPanelResize = function handleFilterPanelResize(resize) {
-    setPosition(calculatePopupRelative(ele, document.body, _getPanelOffset(ele, hideFilterPopupHeader)));
+    setPosition(calculatePopupRelative(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader)));
   };
 
   useEffect(function () {
@@ -74,7 +75,9 @@ function Filter(_ref2) {
       filterModel = _ref2.filterModel,
       isFilterActive = _ref2.isFilterActive,
       stopClickEventPropagation = _ref2.stopClickEventPropagation,
-      hideFilterPopupHeader = _ref2.hideFilterPopupHeader;
+      stopESCKeyDownEventPropagation = _ref2.stopESCKeyDownEventPropagation,
+      hideFilterPopupHeader = _ref2.hideFilterPopupHeader,
+      getPopupParent = _ref2.getPopupParent;
 
   var _React$useState3 = React.useState(false),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
@@ -109,25 +112,30 @@ function Filter(_ref2) {
   var handleIconClick = function handleIconClick(e) {
     // 只有当icon区域点击会触发面板展开
     // 防止 createPortal 区域的点击触发该事件
-    if (!e.currentTarget.contains(e.target)) {
-      return;
+    if (e.currentTarget.contains(e.target)) {
+      setShowPanel(true);
     }
 
     if (stopClickEventPropagation) {
       e.stopPropagation();
     }
-
-    setShowPanel(true);
   };
 
   var handleKeyDown = function handleKeyDown(e) {
-    if (e.currentTarget.contains(e.target) && e.keyCode === KeyCode.ESC) {
-      setShowPanel(false);
+    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,
@@ -146,8 +154,9 @@ function Filter(_ref2) {
     filterIcon: displayFilterIcon,
     hidePanel: hidePanel,
     renderPanelContent: renderPanelContent,
-    hideFilterPopupHeader: hideFilterPopupHeader
-  }), document.body));
+    hideFilterPopupHeader: hideFilterPopupHeader,
+    popupParent: popupParent
+  }), popupParent));
 }
 
 function _getPanelOffset(ele, hideFilterPopupHeader) {

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

@@ -1,6 +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

@@ -77,12 +77,14 @@ var colGroupExtendable = function colGroupExtendable() {
 
       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);
           }
-        }, /*#__PURE__*/_react.default.createElement(ExpandIcon, {
+        }, displaycolExtendIcon || /*#__PURE__*/_react.default.createElement(ExpandIcon, {
           style: {
             userSelect: 'none',
             marginLeft: 2,
@@ -91,8 +93,8 @@ var colGroupExtendable = function colGroupExtendable() {
             verticalAlign: 'middle'
           },
           className: (0, _classnames.default)((0, _defineProperty2.default)({}, _styles.Classes.tableExtendIcon, true)),
-          size: 16,
-          isExtend: curState[col.code]
+          size: 14,
+          isExtend: curColState
         })));
 
         result.title = addIconNode;

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

@@ -16,7 +16,11 @@ export interface FilterFeatureOptions {
     filterIcon?: ReactNode | ((filtered: boolean) => ReactNode);
     /** 是否对触发弹出过滤面板 的 click 事件调用 event.stopPropagation() */
     stopClickEventPropagation?: boolean;
-    /** 是否隐藏过滤弹出菜单header区域 */
+    /** 是否对按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

@@ -55,7 +55,9 @@ function filter() {
         mode = opts.mode,
         filterIcon = opts.filterIcon,
         stopClickEventPropagation = opts.stopClickEventPropagation,
-        hideFilterPopupHeader = opts.hideFilterPopupHeader;
+        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) {
@@ -116,7 +118,9 @@ function filter() {
             isFilterActive: filterActive,
             className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.tableFilterTrigger, true), (0, _defineProperty2.default)(_cx, "active", filterActive), _cx)),
             stopClickEventPropagation: stopClickEventPropagation,
-            hideFilterPopupHeader: hideFilterPopupHeader
+            stopESCKeyDownEventPropagation: stopESCKeyDownEventPropagation,
+            hideFilterPopupHeader: hideFilterPopupHeader,
+            getPopupParent: getPopupParent
           })]); // result.headerCellProps = mergeCellProps(col.headerCellProps, {
           //   style: {
           //     paddingRight: '18px'

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

@@ -12,7 +12,9 @@ interface FilterProps {
     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, hideFilterPopupHeader }: 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/lib/table/pipeline/features/filter/Filter.js

@@ -58,11 +58,12 @@ function Panel(_ref) {
       filterIcon = _ref.filterIcon,
       hidePanel = _ref.hidePanel,
       renderPanelContent = _ref.renderPanelContent,
-      hideFilterPopupHeader = _ref.hideFilterPopupHeader;
+      hideFilterPopupHeader = _ref.hideFilterPopupHeader,
+      popupParent = _ref.popupParent;
 
   var filterPanelRef = _react.default.useRef(null);
 
-  var _React$useState = _react.default.useState((0, _utils.calculatePopupRelative)(ele, document.body, _getPanelOffset(ele, hideFilterPopupHeader))),
+  var _React$useState = _react.default.useState((0, _utils.calculatePopupRelative)(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader))),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       position = _React$useState2[0],
       setPosition = _React$useState2[1];
@@ -73,7 +74,7 @@ function Panel(_ref) {
   };
 
   var handleFilterPanelResize = function handleFilterPanelResize(resize) {
-    setPosition((0, _utils.calculatePopupRelative)(ele, document.body, _getPanelOffset(ele, hideFilterPopupHeader)));
+    setPosition((0, _utils.calculatePopupRelative)(ele, popupParent, _getPanelOffset(ele, hideFilterPopupHeader)));
   };
 
   (0, _react.useEffect)(function () {
@@ -107,7 +108,9 @@ function Filter(_ref2) {
       filterModel = _ref2.filterModel,
       isFilterActive = _ref2.isFilterActive,
       stopClickEventPropagation = _ref2.stopClickEventPropagation,
-      hideFilterPopupHeader = _ref2.hideFilterPopupHeader;
+      stopESCKeyDownEventPropagation = _ref2.stopESCKeyDownEventPropagation,
+      hideFilterPopupHeader = _ref2.hideFilterPopupHeader,
+      getPopupParent = _ref2.getPopupParent;
 
   var _React$useState3 = _react.default.useState(false),
       _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
@@ -143,25 +146,30 @@ function Filter(_ref2) {
   var handleIconClick = function handleIconClick(e) {
     // 只有当icon区域点击会触发面板展开
     // 防止 createPortal 区域的点击触发该事件
-    if (!e.currentTarget.contains(e.target)) {
-      return;
+    if (e.currentTarget.contains(e.target)) {
+      setShowPanel(true);
     }
 
     if (stopClickEventPropagation) {
       e.stopPropagation();
     }
-
-    setShowPanel(true);
   };
 
   var handleKeyDown = function handleKeyDown(e) {
-    if (e.currentTarget.contains(e.target) && e.keyCode === _keyCode.default.ESC) {
-      setShowPanel(false);
+    if (e.keyCode === _keyCode.default.ESC) {
+      if (e.currentTarget.contains(e.target)) {
+        setShowPanel(false);
+      }
+
+      if (stopESCKeyDownEventPropagation) {
+        e.stopPropagation();
+      }
     }
   };
 
   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;
+  var popupParent = (getPopupParent === null || getPopupParent === void 0 ? void 0 : getPopupParent(iconWrapRef.current)) || document.body;
   return /*#__PURE__*/_react.default.createElement(FilterIconSpanStyle, {
     style: style,
     className: iconClassName,
@@ -180,8 +188,9 @@ function Filter(_ref2) {
     filterIcon: displayFilterIcon,
     hidePanel: hidePanel,
     renderPanelContent: renderPanelContent,
-    hideFilterPopupHeader: hideFilterPopupHeader
-  }), document.body));
+    hideFilterPopupHeader: hideFilterPopupHeader,
+    popupParent: popupParent
+  }), popupParent));
 }
 
 function _getPanelOffset(ele, hideFilterPopupHeader) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/table",
-  "version": "1.1.5-canary.2",
+  "version": "1.1.5-canary.4",
   "description": "金蝶 react table 组件",
   "title": "table",
   "keywords": [