@kdcloudjs/table 1.0.0

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

@@ -0,0 +1,173 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import React from 'react';
+import styled from 'styled-components';
+import { fromEvent } from 'rxjs';
+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 TableHeaderGroupCellResize = styled(TableHeaderCellResize)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:after {\n    height: 100%;\n    top: 0;\n  }\n"])));
+
+function clamp(min, x, max) {
+  return Math.max(min, Math.min(max, x));
+}
+
+function disableSelect(event) {
+  event.preventDefault();
+}
+
+export function columnResize() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _a, _b, _c;
+
+  var stateKey = 'columnResize';
+  var minSize = (_a = opts.minSize) !== null && _a !== void 0 ? _a : 60;
+  var fallbackSize = (_b = opts.fallbackSize) !== null && _b !== void 0 ? _b : 150;
+  var maxSize = (_c = opts.maxSize) !== null && _c !== void 0 ? _c : 1000;
+  return function columnResizeFeature(pipeline) {
+    var _a, _b, _c;
+
+    var columnSize = (_b = (_a = opts.columnSize) !== null && _a !== void 0 ? _a : pipeline.getStateAtKey(stateKey)) !== null && _b !== void 0 ? _b : {};
+    var leafColumns = collectNodes(pipeline.getColumns(), 'leaf-only');
+    leafColumns.forEach(function (_ref) {
+      var code = _ref.code,
+          width = _ref.width;
+
+      if (columnSize[code] === undefined) {
+        if (typeof width === 'number') {
+          columnSize[code] = width;
+        } else {
+          columnSize[code] = fallbackSize;
+        }
+      }
+    }); // 初始化 || opts.columnSize发生变化（为了autofill时能取到最新值）
+
+    if (!pipeline.getStateAtKey(stateKey) || ((_c = pipeline.ref) === null || _c === void 0 ? void 0 : _c.current.lastOptColumnSize) !== opts.columnSize) {
+      pipeline.setStateAtKey(stateKey, columnSize);
+    }
+
+    if (pipeline.ref) {
+      pipeline.ref.current.lastOptColumnSize = opts.columnSize;
+    }
+
+    var onChangeSize = function onChangeSize(nextColumnSize) {
+      window.requestAnimationFrame(function () {
+        var _a;
+
+        pipeline.setStateAtKey(stateKey, nextColumnSize);
+        (_a = opts === null || opts === void 0 ? void 0 : opts.onChangeSize) === null || _a === void 0 ? void 0 : _a.call(opts, nextColumnSize);
+
+        if (opts.columnSize) {
+          if (pipeline.ref) {
+            pipeline.ref.current.lastOptColumnSize = nextColumnSize; // 这里记录由列宽拖拽导致的opts.columnSize变化,避免重复渲染
+          }
+        }
+      });
+    };
+
+    var handleMouseDown = function handleMouseDown(e, col) {
+      window.addEventListener('selectstart', disableSelect);
+      var changedColumnSize = {};
+      var startX = e.clientX;
+      var children = col.children,
+          code = col.code;
+      var recordColumnSize = columnSize;
+      e.stopPropagation();
+      var nextSize$ = fromEvent(window, 'mousemove').pipe(op.takeUntil(fromEvent(window, 'mouseup')), op.map(function (e) {
+        var movingX = e.clientX;
+
+        var nextColumnSize = _extends({}, columnSize);
+
+        var deltaSum = movingX - startX;
+        var deltaRemaining = deltaSum;
+
+        if ((children === null || children === void 0 ? void 0 : children.length) > 0) {
+          var leafChildColumns = collectNodes(children, 'leaf-only');
+
+          var childrenWidthSum = _reduceInstanceProperty(leafChildColumns).call(leafChildColumns, function (sum, _ref2) {
+            var code = _ref2.code;
+            return sum + columnSize[code];
+          }, 0);
+
+          leafChildColumns.forEach(function (_ref3, index) {
+            var code = _ref3.code;
+            var startSize = columnSize[code];
+            var currentDeltaWidth = Math.round(deltaSum * startSize / childrenWidthSum);
+
+            if (index < leafChildColumns.length - 1) {
+              nextColumnSize[code] = clamp(minSize, startSize + currentDeltaWidth, maxSize);
+              changedColumnSize[code] = nextColumnSize[code];
+              deltaRemaining -= currentDeltaWidth;
+            } else {
+              nextColumnSize[code] = clamp(minSize, startSize + deltaRemaining, maxSize);
+              changedColumnSize[code] = nextColumnSize[code];
+            }
+          });
+        } else {
+          var startSize = columnSize[code];
+          nextColumnSize[code] = clamp(minSize, startSize + deltaSum, maxSize);
+          changedColumnSize[code] = nextColumnSize[code];
+        }
+
+        recordColumnSize = nextColumnSize;
+        return nextColumnSize;
+      }));
+      nextSize$.subscribe({
+        next: onChangeSize,
+        complete: function complete() {
+          var _context;
+
+          var changedColumnSizes = _mapInstanceProperty(_context = _Object$keys(changedColumnSize)).call(_context, function (code) {
+            return {
+              code: code,
+              width: changedColumnSize[code]
+            };
+          });
+
+          window.requestAnimationFrame(function () {
+            var _a;
+
+            (_a = opts === null || opts === void 0 ? void 0 : opts.afterChangeSize) === null || _a === void 0 ? void 0 : _a.call(opts, recordColumnSize, changedColumnSizes);
+          });
+          window.removeEventListener('selectstart', disableSelect);
+        }
+      });
+    };
+
+    var isGroup = isGroupColumn(pipeline.getColumns());
+    return pipeline.mapColumns(makeRecursiveMapper(function (col) {
+      var _a;
+
+      var prevTitle = internals.safeRenderHeader(col);
+      var code = col.code,
+          features = col.features,
+          width = col.width;
+      return _extends(_extends({}, col), {
+        width: (_a = columnSize[code]) !== null && _a !== void 0 ? _a : width,
+        title: /*#__PURE__*/React.createElement(React.Fragment, null, prevTitle, (features === null || features === void 0 ? void 0 : features.resizeable) !== false && (isGroup ? /*#__PURE__*/React.createElement(TableHeaderGroupCellResize, {
+          className: Classes.tableHeaderCellResize,
+          onMouseDown: function onMouseDown(e) {
+            return handleMouseDown(e, col);
+          }
+        }) : /*#__PURE__*/React.createElement(TableHeaderCellResize, {
+          className: Classes.tableHeaderCellResize,
+          onMouseDown: function onMouseDown(e) {
+            return handleMouseDown(e, col);
+          }
+        }))),
+        headerCellProps: mergeCellProps(col.headerCellProps, {
+          className: 'resizeable'
+        })
+      });
+    }));
+  };
+}

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

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

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

@@ -0,0 +1,370 @@
+import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useRef, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+import { ContextMenuStyleWrap } from '../../common-views';
+import { copyDataToClipboard, executeOnTempElement, console, getEventPath, isElementInEventPath, getTargetEleInEventPath } from '../../utils';
+import { findByTree } from '../../utils/others';
+import { internals } from '../../internals';
+import { MenuClasses } from '../../base/styles';
+var stateKey = 'contextMenu';
+export function contextMenu() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return function step(pipeline) {
+    var popupParent = opts.popupParent || document.body;
+    var menuHelper = new MenuHelper();
+
+    var addPopup = function addPopup(menu) {
+      var ePopupDiv = document.createElement('div');
+      ePopupDiv.setAttribute('class', 'kd-table-popup');
+      popupParent.appendChild(ePopupDiv);
+      var popupHidden = false;
+      var eventList = ['mousedown', 'contextmenu'];
+
+      var hidePopup = function hidePopup(event) {
+        if (isEventFromCurrentPopup(event, ePopupDiv) || popupHidden) {
+          return;
+        }
+
+        popupHidden = true;
+        popupParent.removeChild(ePopupDiv);
+        eventList.forEach(function (eventType) {
+          window.removeEventListener(eventType, hidePopup, true);
+        });
+      };
+
+      ReactDOM.render(menu, ePopupDiv, function () {
+        setTimeout(function () {
+          eventList.forEach(function (eventType) {
+            window.addEventListener(eventType, hidePopup, true);
+          });
+        }, 0);
+      });
+      return hidePopup;
+    };
+
+    var onContextMenu = function onContextMenu(e) {
+      e.preventDefault();
+      showContextMenu(e);
+    };
+
+    pipeline.addTableProps({
+      onContextMenu: onContextMenu
+    });
+
+    var getContextMenuOptions = function getContextMenuOptions(record, column, value) {
+      var defaultMenuOptions = [];
+
+      if (column) {
+        defaultMenuOptions.push(getCopyItem(value));
+      }
+
+      if (opts.getContextMenuItems) {
+        var params = {
+          record: record,
+          column: column,
+          value: value
+        };
+        return opts.getContextMenuItems(params);
+      }
+
+      return defaultMenuOptions;
+    };
+
+    var hideContextMenu = function hideContextMenu() {
+      menuHelper.destroy();
+    };
+
+    var getPopupParent = function getPopupParent() {
+      return popupParent;
+    };
+
+    var showContextMenu = function showContextMenu(e) {
+      var dataSource = pipeline.getDataSource();
+      var cellEle = getCellEleForEvent(e);
+      var code;
+      var rowIndex;
+
+      if (cellEle) {
+        code = cellEle.getAttribute('data-code'), rowIndex = cellEle.getAttribute('data-rowindex');
+      } else {
+        var rowEle = getRowEleForEvent(e, dataSource);
+        rowIndex = rowEle === null || rowEle === void 0 ? void 0 : rowEle.getAttribute('data-rowindex');
+      }
+
+      var record = dataSource[rowIndex];
+      var column = code !== undefined && findByTree(pipeline.getColumns(), function (item, index) {
+        return item.code === code ? index : -1;
+      });
+      var value = column && record && internals.safeGetValue(column, record, rowIndex);
+      var options = getContextMenuOptions(record, column, value);
+
+      if (options.length === 0) {
+        console.warn('context menu options is empty');
+        return;
+      }
+
+      var position = positionForMenu(e, popupParent);
+      var menu = /*#__PURE__*/React.createElement(Menu, {
+        options: options,
+        hideContextMenu: hideContextMenu,
+        position: position,
+        getPopupParent: getPopupParent
+      });
+
+      var _hidePopup = addPopup(menu);
+
+      menuHelper.init(_hidePopup);
+    };
+
+    return pipeline;
+  };
+}
+
+function getMenuItemKey(_ref) {
+  var name = _ref.name,
+      index = _ref.index;
+
+  if (name) {
+    var _context;
+
+    var _key = 0;
+    name = name + '';
+
+    for (var i = 0; i < name.length; i++) {
+      _key += name.charCodeAt(name[i]);
+    }
+
+    return _concatInstanceProperty(_context = "".concat(_key, "_")).call(_context, index);
+  }
+
+  return index;
+}
+
+function Menu(props) {
+  var _props$options = props.options,
+      options = _props$options === void 0 ? [] : _props$options,
+      hideContextMenu = props.hideContextMenu,
+      position = props.position,
+      getPopupParent = props.getPopupParent;
+  var menuRef = useRef();
+  useEffect(function () {
+    if (menuRef.current) {
+      var popupParent = getPopupParent();
+      var x = position.x,
+          y = position.y;
+
+      var _keepWithinBounds = keepWithinBounds(popupParent, menuRef.current, x, y),
+          _x = _keepWithinBounds.x,
+          _y = _keepWithinBounds.y;
+
+      menuRef.current.style.left = _x + 'px';
+      menuRef.current.style.top = _y + 'px';
+    }
+  }, [position]);
+  return /*#__PURE__*/React.createElement(ContextMenuStyleWrap, {
+    className: MenuClasses.menu,
+    ref: menuRef,
+    style: {
+      left: position.x,
+      top: position.y
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: MenuClasses.menuList
+  }, _mapInstanceProperty(options).call(options, function (item, index) {
+    return /*#__PURE__*/React.createElement(MenuItem, {
+      key: item.key ? item.key : getMenuItemKey({
+        name: item.name,
+        index: index
+      }),
+      name: item.name,
+      action: item.action,
+      hideContextMenu: hideContextMenu
+    });
+  })));
+}
+
+function MenuItem(props) {
+  var name = props.name,
+      action = props.action,
+      disabled = props.disabled,
+      hideContextMenu = props.hideContextMenu;
+  var itemRef = useRef();
+
+  var handleClick = function handleClick() {
+    hideContextMenu();
+    typeof action === 'function' && action();
+  };
+
+  var handleMouseEnter = function handleMouseEnter(e) {
+    if (disabled) {
+      return;
+    }
+
+    var itemDom = itemRef.current;
+
+    if (itemDom) {
+      itemDom.classList.add(MenuClasses.menuOptionActive);
+    }
+  };
+
+  var handleMouseLeave = function handleMouseLeave(e) {
+    if (disabled) {
+      return;
+    }
+
+    var itemDom = itemRef.current;
+
+    if (itemDom) {
+      setTimeout(function () {
+        itemDom.classList.remove(MenuClasses.menuOptionActive);
+      }, 10);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: MenuClasses.menuOption,
+    ref: itemRef,
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/React.createElement("span", {
+    className: MenuClasses.menuOptionText
+  }, name));
+}
+
+var MenuHelper = function MenuHelper() {
+  var _this = this;
+
+  _classCallCheck(this, MenuHelper);
+
+  this.init = function (hidePopup) {
+    _this.hidePopup = hidePopup;
+  };
+
+  this.destroy = function () {
+    _this.hidePopup && _this.hidePopup();
+    _this.hidePopup = null;
+  };
+};
+/** 是否点击是外部 start */
+
+
+function isEventFromCurrentPopup(event, ele) {
+  if (!event || !ele) {
+    return false;
+  }
+
+  if (isElementInEventPath(ele, event)) {
+    return true;
+  }
+
+  return false;
+}
+
+function getCellEleInEventPath(path) {
+  return getTargetEleInEventPath(path, function (ele) {
+    return ele && ele.getAttribute('data-role') === 'table-cell';
+  });
+}
+
+function getRowEleInEventPath(path) {
+  return getTargetEleInEventPath(path, function (ele) {
+    return ele && ele.getAttribute('data-role') === 'table-row';
+  });
+}
+/** 是否点击是外部 end */
+
+/** 计算位置 start */
+
+
+function calculatePointerRelative(event, popupParent) {
+  var parentRect = popupParent.getBoundingClientRect();
+  var documentRect = document.documentElement.getBoundingClientRect();
+  return {
+    x: event.clientX - (popupParent === document.body ? documentRect.left : parentRect.left),
+    y: event.clientY - (popupParent === document.body ? documentRect.top : parentRect.top)
+  };
+}
+
+function positionForMenu(event, popupParent, params) {
+  var _calculatePointerRela = calculatePointerRelative(event, popupParent),
+      x = _calculatePointerRela.x,
+      y = _calculatePointerRela.y;
+
+  if (params) {
+    var offsetX = params.offsetX,
+        offsetY = params.offsetY;
+
+    if (offsetX) {
+      x -= offsetX;
+    }
+
+    if (offsetY) {
+      y -= offsetY;
+    }
+  }
+
+  return {
+    x: x,
+    y: y
+  };
+}
+
+function keepWithinBounds(popupParent, ePopup, x, y) {
+  var parentRect = popupParent.getBoundingClientRect();
+  var docElement = document.documentElement;
+  var documentRect = docElement.getBoundingClientRect();
+  var ePopupRect = ePopup.getBoundingClientRect();
+  var parentWidth = parentRect.width;
+  var parentHeight = parentRect.height;
+
+  if (popupParent === document.body) {
+    parentWidth = documentRect.width;
+    parentWidth -= Math.abs(documentRect.left - parentRect.left);
+    parentHeight = documentRect.height + docElement.scrollTop;
+    parentHeight -= Math.abs(documentRect.top - parentRect.top);
+  }
+
+  if (x) {
+    var minWidth = Math.min(ePopupRect.width, 120);
+    ePopup.style.minWidth = minWidth + 'px';
+    var maxX = parentWidth - minWidth;
+    x = Math.min(Math.max(x, 0), Math.abs(maxX)); //目前位置，最大支持的位置
+  }
+
+  if (y) {
+    var minHeight = Math.min(ePopupRect.height, 180);
+    var maxY = parentHeight - minHeight;
+    y = Math.min(Math.max(y, 0), Math.abs(maxY)); //目前位置，最大支持的位置
+  }
+
+  return {
+    x: x,
+    y: y
+  };
+}
+/** 计算位置 end */
+
+/** 获得点击的元素 start */
+
+
+function getCellEleForEvent(event) {
+  return getCellEleInEventPath(getEventPath(event));
+}
+
+function getRowEleForEvent(event, dataSource) {
+  return getRowEleInEventPath(getEventPath(event));
+}
+/** 获得点击的元素 end */
+
+
+function getCopyItem(v) {
+  return {
+    name: '复制',
+    action: function action() {
+      executeOnTempElement(copyDataToClipboard(v));
+    }
+  };
+}

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DefaultFilterPanelProps } from '../../../interfaces';
+declare function DefaultFilterContent({ setFilterModel, filterModel, hidePanel }: DefaultFilterPanelProps): JSX.Element;
+export default DefaultFilterContent;

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

@@ -0,0 +1,91 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import _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 styled from 'styled-components';
+import cx from 'classnames';
+import { DEFAULT_FILTER_OPTIONS } from './util';
+import { Classes, ButtonCSS } from '../../../base/styles';
+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) {
+  var _cx2;
+
+  var setFilterModel = _ref.setFilterModel,
+      filterModel = _ref.filterModel,
+      hidePanel = _ref.hidePanel;
+
+  var _React$useState = React.useState((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain'),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      selectedValue = _React$useState2[0],
+      setSelectedValue = _React$useState2[1];
+
+  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 handleClick = React.useCallback(function (option) {
+    setSelectedValue(option.key);
+  }, []);
+
+  var reset = function reset() {
+    hidePanel();
+    setFilterModel();
+  };
+
+  var confirm = function confirm() {
+    hidePanel();
+    setFilterModel({
+      filter: [innerValue],
+      filterCondition: selectedValue
+    });
+  };
+
+  useEffect(function () {
+    setSelectedValue((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain');
+    setInnerValue((filterModel === null || filterModel === void 0 ? void 0 : _filterInstanceProperty(filterModel)) || '');
+  }, [filterModel]);
+  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) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+      React.createElement("li", {
+        key: index,
+        className: option.key === selectedValue ? 'active' : '',
+        onClick: function onClick() {
+          return handleClick(option);
+        }
+      }, option.title)
+    );
+  }))), selectedValue !== 'notIsNull' && selectedValue !== 'isNull' && /*#__PURE__*/React.createElement("div", {
+    className: 'filter-search'
+  }, /*#__PURE__*/React.createElement("input", {
+    className: 'filter-search-inner',
+    value: innerValue,
+    onChange: function onChange(e) {
+      setInnerValue(e.target.value);
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: 'filter-footer'
+  }, /*#__PURE__*/React.createElement("button", {
+    className: cx(_defineProperty({
+      'filter-btn': true
+    }, Classes.button, true)),
+    onClick: reset
+  }, "\u91CD\u7F6E"), /*#__PURE__*/React.createElement("button", {
+    className: cx((_cx2 = {
+      'filter-btn': true
+    }, _defineProperty(_cx2, Classes.button, true), _defineProperty(_cx2, Classes.buttonPrimary, true), _cx2)),
+    onClick: confirm
+  }, "\u786E\u5B9A")));
+}
+
+export default DefaultFilterContent;

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

@@ -0,0 +1,17 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { FilterPanel as FilterPanelType, DefaultFilterPanelProps, CustomeFilterPanelProps } from '../../../interfaces';
+interface FilterProps {
+    style?: CSSProperties;
+    className?: string;
+    size?: number;
+    isFilterActive: boolean;
+    FilterPanelContent?: FilterPanelType;
+    filterIcon?: ReactNode;
+    setFilterModel: DefaultFilterPanelProps['setFilterModel'];
+    filterModel: DefaultFilterPanelProps['filterModel'];
+    setFilter: CustomeFilterPanelProps['setFilter'];
+    onClick?: (e: React.MouseEvent) => any;
+    stopClickEventPropagation?: boolean;
+}
+declare function Filter({ size, style, className, FilterPanelContent, filterIcon, setFilter, setFilterModel, filterModel, isFilterActive, stopClickEventPropagation }: FilterProps): JSX.Element;
+export default Filter;