@kdcloudjs/table 1.1.3-canary.9 → 1.1.4-canary.1

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

@@ -31,6 +31,8 @@ var _FilterPanel = _interopRequireDefault(require("./FilterPanel"));
 
 var _DefaultFilterContent = _interopRequireDefault(require("./DefaultFilterContent"));
 
+var _DefaultFilterIcon = _interopRequireDefault(require("./DefaultFilterIcon"));
+
 var _utils = require("../../../utils");
 
 var _utils2 = require("../../../base/utils");
@@ -43,7 +45,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 HEADER_ICON_OFFSET_Y = 6 + 1; // padding-top + border
+var HEADER_ICON_OFFSET_Y = 8 + 1; // padding-top + border
 
 var HEADER_ICON_OFFSET_X = 16 + 1; // padding-left+ border
 
@@ -119,10 +121,6 @@ function Filter(_ref2) {
     return setShowPanel(false);
   };
 
-  var handleMouseDown = function handleMouseDown(e) {
-    e.stopPropagation(); // 阻止触发拖拽
-  };
-
   var renderPanelContent = function renderPanelContent() {
     if (FilterPanelContent) {
       return /*#__PURE__*/_react.default.createElement(FilterPanelContent, {
@@ -142,6 +140,12 @@ function Filter(_ref2) {
   };
 
   var handleIconClick = function handleIconClick(e) {
+    // 只有当icon区域点击会触发面板展开
+    // 防止 createPortal 区域的点击触发该事件
+    if (!e.currentTarget.contains(e.target)) {
+      return;
+    }
+
     if (stopClickEventPropagation) {
       e.stopPropagation();
     }
@@ -150,27 +154,20 @@ function Filter(_ref2) {
   };
 
   var iconClassName = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, className, true), (0, _defineProperty2.default)(_cx, 'filter-panel-open', showPanel), _cx));
+  var displayFilterIcon = typeof filterIcon === 'function' ? filterIcon(isFilterActive) : filterIcon;
   return /*#__PURE__*/_react.default.createElement(FilterIconSpanStyle, {
     style: style,
     className: iconClassName,
-    onMouseDown: handleMouseDown,
-    ref: iconRef
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _styles.Classes.filterIcon,
     onClick: handleIconClick
-  }, filterIcon || /*#__PURE__*/_react.default.createElement("svg", {
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    ref: iconRef,
+    className: _styles.Classes.filterIcon
+  }, displayFilterIcon || /*#__PURE__*/_react.default.createElement(_DefaultFilterIcon.default, {
     width: size,
-    height: size,
-    viewBox: "64 64 896 896",
-    focusable: "false",
-    "data-icon": "filter",
-    fill: "currentColor",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
-  }))), showPanel && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(Panel, {
+    height: size
+  })), showPanel && /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(Panel, {
     ele: iconRef.current,
-    filterIcon: filterIcon,
+    filterIcon: displayFilterIcon,
     hidePanel: hidePanel,
     renderPanelContent: renderPanelContent
   }), document.body));

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

@@ -25,13 +25,15 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _utils = require("../../../utils/");
 
+var _DefaultFilterIcon = _interopRequireDefault(require("./DefaultFilterIcon"));
+
 var _templateObject;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var FilterPanelStyle = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  max-height: 450px;\n  min-width: 160px;\n  border-radius: 2px;\n  background-color: #fff;\n  box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n  cursor: default;\n\n  .popup-header {\n    display: flex;\n    background-color: #ebedf1;\n\n    .popup-header-icon {\n      color:#666;\n      background-color: #fff;\n      padding: 6px 16px 6px 16px;\n      display: inline-block;\n      border-right: 1px solid transparent;\n      border-left: 1px solid transparent;\n      border-top: 1px solid transparent;\n      border-top-right-radius: 2px;\n      border-top-left-radius: 2px;\n    }\n  }\n\n  .popup-body {\n    display: flex;\n  }\n"])));
+var FilterPanelStyle = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  max-height: 450px;\n  min-width: 160px;\n  border-radius: 2px;\n  background-color: #fff;\n  box-shadow: 0 0 5px 0 rgba(154,154,154,.5);\n  cursor: default;\n\n  .popup-header {\n    display: flex;\n    background-color: #ebedf1;\n\n    .popup-header-icon {\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  .popup-body {\n    display: flex;\n  }\n"])));
 
 var useWindowEvents = function useWindowEvents(func, evens) {
   _react.default.useEffect(function () {
@@ -73,31 +75,36 @@ function FilterPanel(_ref) {
     setPerfectPosition((0, _utils.keepWithinBounds)(document.body, ref.current, position.x, position.y, true));
     setVisible(true);
   }, [position]);
+  var hasPopupMouseEvent = (0, _react.useRef)(false);
+
+  var handleMouseEvent = function handleMouseEvent() {
+    // 当弹出的过滤面板内部发生鼠标按下、抬起事件时，标记当前事件，并在click捕获期清除标记，用来确定鼠标按下、抬起发生在过滤面板内部
+    // 利用了React.createPortal冒泡是根据React Tree的特性：
+    // https://jwwnz.medium.com/react-portals-and-event-bubbling-8df3e35ca3f1
+    hasPopupMouseEvent.current = true;
+  };
+
   useWindowEvents(function (e) {
-    return !isContainPanel(e) && onClose();
-  }, ['mousedown']);
+    !isContainPanel(e) && !hasPopupMouseEvent.current && onClose();
+    hasPopupMouseEvent.current = false;
+  }, ['click']);
   return /*#__PURE__*/_react.default.createElement(FilterPanelStyle, {
     style: (0, _extends2.default)((0, _extends2.default)({}, style), {
       left: visible ? perfectPosition.x : 0,
       top: visible ? perfectPosition.y : 0,
       opacity: visible ? 1 : 0
     }),
+    onMouseDown: handleMouseEvent,
+    onMouseUp: handleMouseEvent,
     ref: ref
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'popup-header'
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: 'popup-header-icon'
-  }, filterIcon || /*#__PURE__*/_react.default.createElement("svg", {
-    width: 14,
-    height: 14,
-    viewBox: "64 64 896 896",
-    focusable: "false",
-    "data-icon": "filter",
-    fill: "currentColor",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3\n              31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5\n              48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
-  })))), /*#__PURE__*/_react.default.createElement("div", {
+  }, filterIcon || /*#__PURE__*/_react.default.createElement(_DefaultFilterIcon.default, {
+    width: 12,
+    height: 12
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     className: "popup-body"
   }, children));
 }

package/lib/table/pipeline/pipeline.js

@@ -288,7 +288,7 @@ var TablePipeline = /*#__PURE__*/function () {
         var preTableWidth = _this2.getStateAtKey(_autoFill.tableWidthKey);
 
         if (preTableWidth !== tableWidth) {
-          _this2.setStateAtKey(_autoFill.tableWidthKey, tableWidth);
+          tableWidth && _this2.setStateAtKey(_autoFill.tableWidthKey, tableWidth);
         }
       };
 

package/lib/table/utils/keyCode.d.ts

@@ -0,0 +1,4 @@
+declare const KeyCode: {
+    ENTER: number;
+};
+export default KeyCode;

package/lib/table/utils/keyCode.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var KeyCode = {
+  ENTER: 13
+};
+var _default = KeyCode;
+exports.default = _default;

package/lib/table/utils/mergeCellProps.js

@@ -17,13 +17,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 function composeEventHandler(handler1, handler2) {
   return function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
     // 先执行原有的事件回调函数
-    handler1(args);
-    handler2(args); // 事件回调函数没有返回值，故这里不进行 return
+    handler1.apply(void 0, arguments);
+    handler2.apply(void 0, arguments); // 事件回调函数没有返回值，故这里不进行 return
   };
 }
 /** 合并两个 cellProps（单元格属性）对象，返回一个合并后的全新对象。

package/package.json

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