@kdcloudjs/table 1.1.4-canary.2 → 1.1.4

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

@@ -6,12 +6,11 @@ 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, useRef } from 'react';
+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';
-import KeyCode from '../../../utils/keyCode';
 var DefaultFilterContentStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  background-color: #ffffff;\n  border-radius: 2px;\n  width: 100%;\n\n  ", "\n  .filter-option-list {\n    display: flex;\n    flex-direction: column;\n    margin-top: 8px;\n    ul {\n      margin: 0;\n      padding: 0;\n      li {\n        display: flex;\n        position: relative;\n        flex-shrink: 0;\n        height: 32px;\n        align-items: center;\n        border-radius: 2px;\n        font-size: 12px;\n        color: var(--color);\n        padding: 0 12px;\n        overflow: hidden;\n        cursor: pointer;\n        &:hover{\n          background-color: var(--primary-color-level1);\n        }\n      }\n      li.active{\n        background-color: var(--primary-color-level1);\n      }\n    }\n  }\n\n  .filter-search {\n    display: flex;\n    padding: 6px 12px;\n\n    .filter-search-inner {\n      width: 100%;\n      font-size: 12px;\n      color: #333333;\n      height: 28px;\n      line-height: 28px;\n      padding: 0 8px;\n      outline: none;\n      background-color: #FAFAFA;\n      border-radius: 2px;\n      border: 1px solid var(--strong-border-color);\n      &:hover{\n        border-color: var(--primary-color)\n      } \n      &:focus{\n        border-color: var(--primary-color)\n      }  \n    }\n  }\n\n  .filter-footer {\n    display: flex;\n    flex-direction: row;\n    padding: 8px 12px;\n    justify-content: space-between;\n\n    .filter-btn {\n      text-align: center;\n      font-size: 12px;\n      width: 60px;\n      height: 24px;\n      line-height: 24px;\n    }\n    \n  }\n"])), ButtonCSS);
 
 function DefaultFilterContent(_ref) {
@@ -31,7 +30,6 @@ function DefaultFilterContent(_ref) {
       innerValue = _React$useState4[0],
       setInnerValue = _React$useState4[1];
 
-  var inputRef = useRef();
   var handleClick = React.useCallback(function (option) {
     setSelectedValue(option.key);
   }, []);
@@ -49,26 +47,10 @@ function DefaultFilterContent(_ref) {
     });
   };
 
-  var handleKeyDown = function handleKeyDown(e) {
-    if (e.keyCode === KeyCode.ENTER) {
-      confirm();
-    }
-  };
-
   useEffect(function () {
     setSelectedValue((filterModel === null || filterModel === void 0 ? void 0 : filterModel.filterCondition) || 'contain');
     setInnerValue((filterModel === null || filterModel === void 0 ? void 0 : _filterInstanceProperty(filterModel)) || '');
   }, [filterModel]);
-  useEffect(function () {
-    // 兼容设置焦点后发生滚动
-    setTimeout(function () {
-      var _a;
-
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({
-        preventScroll: true
-      });
-    });
-  }, []);
   return /*#__PURE__*/React.createElement(DefaultFilterContentStyle, null, /*#__PURE__*/React.createElement("div", {
     className: 'filter-option-list'
   }, /*#__PURE__*/React.createElement("ul", null, _mapInstanceProperty(DEFAULT_FILTER_OPTIONS).call(DEFAULT_FILTER_OPTIONS, function (option, index) {
@@ -90,9 +72,7 @@ function DefaultFilterContent(_ref) {
     value: innerValue,
     onChange: function onChange(e) {
       setInnerValue(e.target.value);
-    },
-    onKeyDown: handleKeyDown,
-    ref: inputRef
+    }
   })), /*#__PURE__*/React.createElement("div", {
     className: 'filter-footer'
   }, /*#__PURE__*/React.createElement("button", {

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

@@ -6,13 +6,12 @@ interface FilterProps {
     size?: number;
     isFilterActive: boolean;
     FilterPanelContent?: FilterPanelType;
-    filterIcon?: ReactNode | ((filtered: boolean) => ReactNode);
+    filterIcon?: 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, hideFilterPopupHeader }: FilterProps): JSX.Element;
+declare function Filter({ size, style, className, FilterPanelContent, filterIcon, setFilter, setFilterModel, filterModel, isFilterActive, stopClickEventPropagation }: FilterProps): JSX.Element;
 export default Filter;

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

@@ -10,25 +10,26 @@ import styled from 'styled-components';
 import { Classes } from '../../../base/styles';
 import FilterPanel from './FilterPanel';
 import DefaultFilterContent from './DefaultFilterContent';
-import DefaultFilterIcon from './DefaultFilterIcon';
 import { calculatePopupRelative } from '../../../utils';
 import { addResizeObserver } from '../../../base/utils';
 import cx from 'classnames';
-var HEADER_ICON_OFFSET_Y = 8 + 1; // padding-top + border
+var HEADER_ICON_OFFSET_Y = 6 + 1; // padding-top + border
 
 var HEADER_ICON_OFFSET_X = 16 + 1; // padding-left+ border
 
-var FilterIconSpanStyle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // position: absolute;\n  // right: 4px;\n  // cursor: pointer;\n  // transform: translateY(-50%);\n  // top: 50%;\n  // height: 12px; \n  > .", " {\n    display: flex\n  }\n"])), Classes.filterIcon);
+var FilterIconSpanStyle = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // position: absolute;\n  // right: 4px;\n  // cursor: pointer;\n  // transform: translateY(-50%);\n  // top: 50%;\n  // height: 12px; \n"])));
 
 function Panel(_ref) {
   var ele = _ref.ele,
       filterIcon = _ref.filterIcon,
       hidePanel = _ref.hidePanel,
-      renderPanelContent = _ref.renderPanelContent,
-      hideFilterPopupHeader = _ref.hideFilterPopupHeader;
+      renderPanelContent = _ref.renderPanelContent;
   var filterPanelRef = React.useRef(null);
 
-  var _React$useState = React.useState(calculatePopupRelative(ele, document.body, _getPanelOffset(ele, hideFilterPopupHeader))),
+  var _React$useState = React.useState(calculatePopupRelative(ele, document.body, {
+    x: HEADER_ICON_OFFSET_X,
+    y: HEADER_ICON_OFFSET_Y
+  })),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       position = _React$useState2[0],
       setPosition = _React$useState2[1];
@@ -39,7 +40,10 @@ function Panel(_ref) {
   };
 
   var handleFilterPanelResize = function handleFilterPanelResize(resize) {
-    setPosition(calculatePopupRelative(ele, document.body, _getPanelOffset(ele, hideFilterPopupHeader)));
+    setPosition(calculatePopupRelative(ele, document.body, {
+      x: HEADER_ICON_OFFSET_X,
+      y: HEADER_ICON_OFFSET_Y
+    }));
   };
 
   useEffect(function () {
@@ -54,8 +58,7 @@ function Panel(_ref) {
     style: style,
     onClose: hidePanel,
     position: position,
-    filterIcon: filterIcon,
-    hideFilterPopupHeader: hideFilterPopupHeader
+    filterIcon: filterIcon
   }, renderPanelContent()));
 }
 
@@ -72,8 +75,7 @@ function Filter(_ref2) {
       setFilterModel = _ref2.setFilterModel,
       filterModel = _ref2.filterModel,
       isFilterActive = _ref2.isFilterActive,
-      stopClickEventPropagation = _ref2.stopClickEventPropagation,
-      hideFilterPopupHeader = _ref2.hideFilterPopupHeader;
+      stopClickEventPropagation = _ref2.stopClickEventPropagation;
 
   var _React$useState3 = React.useState(false),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
@@ -81,12 +83,15 @@ function Filter(_ref2) {
       setShowPanel = _React$useState4[1];
 
   var iconRef = React.useRef(null);
-  var iconWrapRef = React.useRef();
 
   var hidePanel = function hidePanel() {
     return setShowPanel(false);
   };
 
+  var handleMouseDown = function handleMouseDown(e) {
+    e.stopPropagation(); // 阻止触发拖拽
+  };
+
   var renderPanelContent = function renderPanelContent() {
     if (FilterPanelContent) {
       return /*#__PURE__*/React.createElement(FilterPanelContent, {
@@ -106,12 +111,6 @@ function Filter(_ref2) {
   };
 
   var handleIconClick = function handleIconClick(e) {
-    // 只有当icon区域点击会触发面板展开
-    // 防止 createPortal 区域的点击触发该事件
-    if (!e.currentTarget.contains(e.target)) {
-      return;
-    }
-
     if (stopClickEventPropagation) {
       e.stopPropagation();
     }
@@ -120,39 +119,30 @@ function Filter(_ref2) {
   };
 
   var iconClassName = cx((_cx = {}, _defineProperty(_cx, className, true), _defineProperty(_cx, 'filter-panel-open', showPanel), _cx));
-  var displayFilterIcon = typeof filterIcon === 'function' ? filterIcon(isFilterActive) : filterIcon;
   return /*#__PURE__*/React.createElement(FilterIconSpanStyle, {
     style: style,
     className: iconClassName,
-    onClick: handleIconClick,
-    ref: iconWrapRef
+    onMouseDown: handleMouseDown,
+    ref: iconRef
   }, /*#__PURE__*/React.createElement("span", {
-    ref: iconRef,
-    className: Classes.filterIcon
-  }, displayFilterIcon || /*#__PURE__*/React.createElement(DefaultFilterIcon, {
+    className: Classes.filterIcon,
+    onClick: handleIconClick
+  }, filterIcon || /*#__PURE__*/React.createElement("svg", {
     width: size,
-    height: size
-  })), showPanel && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Panel, {
-    ele: hideFilterPopupHeader ? iconWrapRef.current : iconRef.current,
-    filterIcon: displayFilterIcon,
+    height: size,
+    viewBox: "64 64 896 896",
+    focusable: "false",
+    "data-icon": "filter",
+    fill: "currentColor",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
+  }))), showPanel && /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Panel, {
+    ele: iconRef.current,
+    filterIcon: filterIcon,
     hidePanel: hidePanel,
-    renderPanelContent: renderPanelContent,
-    hideFilterPopupHeader: hideFilterPopupHeader
+    renderPanelContent: renderPanelContent
   }), 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
-  };
-}
-
 export default Filter;

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

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

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

@@ -4,12 +4,10 @@ import _taggedTemplateLiteral from "@babel/runtime-corejs3/helpers/taggedTemplat
 
 var _templateObject;
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { isElementInEventPath, keepWithinBounds } from '../../../utils/';
-import DefaultFilterIcon from './DefaultFilterIcon';
-import { Classes } from '../../../base/styles';
-var FilterPanelStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), Classes.popupHeader, Classes.filterIcon, Classes.popupBody);
+var FilterPanelStyle = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 useWindowEvents = function useWindowEvents(func, evens) {
   React.useEffect(function () {
@@ -29,8 +27,7 @@ function FilterPanel(_ref) {
       children = _ref.children,
       position = _ref.position,
       filterIcon = _ref.filterIcon,
-      onClose = _ref.onClose,
-      hideFilterPopupHeader = _ref.hideFilterPopupHeader;
+      onClose = _ref.onClose;
 
   var _useState = useState(position),
       _useState2 = _slicedToArray(_useState, 2),
@@ -52,38 +49,32 @@ function FilterPanel(_ref) {
     setPerfectPosition(keepWithinBounds(document.body, ref.current, position.x, position.y, true));
     setVisible(true);
   }, [position]);
-  var hasPopupMouseEvent = 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) {
-    !isContainPanel(e) && !hasPopupMouseEvent.current && onClose();
-    hasPopupMouseEvent.current = false;
-  }, ['click']);
+    return !isContainPanel(e) && onClose();
+  }, ['mousedown']);
   return /*#__PURE__*/React.createElement(FilterPanelStyle, {
-    className: Classes.popup,
     style: _extends(_extends({}, style), {
       left: visible ? perfectPosition.x : 0,
       top: visible ? perfectPosition.y : 0,
       opacity: visible ? 1 : 0
     }),
-    onMouseDown: handleMouseEvent,
-    onMouseUp: handleMouseEvent,
     ref: ref
-  }, !hideFilterPopupHeader ? /*#__PURE__*/React.createElement("div", {
-    className: Classes.popupHeader
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'popup-header'
   }, /*#__PURE__*/React.createElement("span", {
-    className: Classes.filterIcon
-  }, filterIcon || /*#__PURE__*/React.createElement(DefaultFilterIcon, {
-    width: 12,
-    height: 12
-  }))) : null, /*#__PURE__*/React.createElement("div", {
-    className: Classes.popupBody
+    className: 'popup-header-icon'
+  }, filterIcon || /*#__PURE__*/React.createElement("svg", {
+    width: 14,
+    height: 14,
+    viewBox: "64 64 896 896",
+    focusable: "false",
+    "data-icon": "filter",
+    fill: "currentColor",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "popup-body"
   }, children));
 }
 

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

@@ -12,7 +12,7 @@ var DEFAULT_FILTER_OPTIONS = [{
         data = data + '';
       }
 
-      return _includesInstanceProperty(data).call(data, value[0]);
+      return _includesInstanceProperty(data).call(data, value);
     };
   }
 }, {
@@ -28,7 +28,7 @@ var DEFAULT_FILTER_OPTIONS = [{
         data = data + '';
       }
 
-      return !_includesInstanceProperty(data).call(data, value[0]);
+      return !_includesInstanceProperty(data).call(data, value);
     };
   }
 }, {
@@ -36,7 +36,7 @@ var DEFAULT_FILTER_OPTIONS = [{
   key: 'equal',
   filter: function filter(value) {
     return function (data) {
-      return value[0] === data;
+      return value !== data;
     };
   }
 }, {
@@ -44,7 +44,7 @@ var DEFAULT_FILTER_OPTIONS = [{
   key: 'notEqual',
   filter: function filter(value) {
     return function (data) {
-      return value[0] !== data;
+      return value !== data;
     };
   }
 }, {

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

@@ -16,4 +16,3 @@ 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';

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

@@ -15,5 +15,4 @@ export { columnResize } from './columnResizeWidth';
 export { contextMenu } from './contextMenu';
 export { filter } from './columnFilter';
 export { rangeSelection } from './rangeSelection';
-export { mergeCellHover } from './mergeCellHover';
-export { footerDataSource, footerRowMetaSymbol } from './footerDataSource';
+export { mergeCellHover } from './mergeCellHover';

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

@@ -5,7 +5,7 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 import React from 'react';
 import { internals } from '../../internals';
 import { always, arrayUtils } from '../../utils/others';
-import { collectNodes, mergeCellProps } from '../../utils';
+import { mergeCellProps } from '../../utils';
 export function multiSelect() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function multiSelectStep(pipeline) {
@@ -44,8 +44,7 @@ export function multiSelect() {
     /** 所有有效的 keys（disable 状态为 false） */
 
     var allKeys = [];
-    var flatDataSource = collectNodes(dataSource);
-    flatDataSource.forEach(function (row, rowIndex) {
+    dataSource.forEach(function (row, rowIndex) {
       var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
       fullKeySet.add(rowKey); // 在 allKeys 中排除被禁用的 key
 
@@ -111,10 +110,6 @@ export function multiSelect() {
           return mergeCellProps(preCellProps, checkboxCellProps);
         },
         render: function render(_, row, rowIndex) {
-          if (row[pipeline.getFeatureOptions('footerRowMetaKey')]) {
-            return null;
-          }
-
           var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
           var checked = set.has(key);
           return /*#__PURE__*/React.createElement(Checkbox, {

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

@@ -6,5 +6,5 @@ export interface RangeSelectionFeatureOptions {
     preventkDefaultOfKeyDownEvent?: boolean;
 }
 export declare const rangeSelectionKey = "rangeSelection";
-export declare const lastClickCellKey = "lastClickCell";
+export declare const lastClickCell = "lastClickCell";
 export declare function rangeSelection(opts: RangeSelectionFeatureOptions): (pipeline: TablePipeline) => TablePipeline;