@kdcloudjs/table 1.1.0 → 1.1.2

package/lib/table/base/table.js

@@ -143,6 +143,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     _this.rootSubscription = new _rxjs.Subscription();
     _this.hasScrollY = false;
     _this.resizeSubject = new _rxjs.Subject();
+    _this.offsetY = 0;
 
     _this.getRowNodeListByEvent = function (e) {
       var nodeList = null;
@@ -208,6 +209,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           className: (0, _classnames.default)(tableBodyClassName, 'empty')
         }, /*#__PURE__*/_react.default.createElement("div", {
           className: _styles.Classes.virtual,
+          tabIndex: -1,
           style: virtualStyle
         }, /*#__PURE__*/_react.default.createElement(_empty.EmptyHtmlTable, {
           descriptors: info.visible,
@@ -222,6 +224,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           bottomBlank = _info$verticalRenderR.bottomBlank,
           topBlank = _info$verticalRenderR.topBlank,
           bottomIndex = _info$verticalRenderR.bottomIndex;
+      var stickyRightOffset = _this.hasScrollY ? _this.getScrollBarWidth() : 0;
       var renderBody = (0, _renderTemplates.default)('body');
 
       if (typeof renderBody === 'function') {
@@ -230,7 +233,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
             onMouseEnter: _this.handleRowMouseEnter,
             onMouseLeave: _this.handleRowMouseLeave
           },
-          hasScrollY: _this.hasScrollY
+          stickyRightOffset: stickyRightOffset
         });
       }
 
@@ -238,6 +241,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         className: tableBodyClassName
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: _styles.Classes.virtual,
+        tabIndex: -1,
         style: virtualStyle
       }, topBlank > 0 && /*#__PURE__*/_react.default.createElement("div", {
         key: "top-blank",
@@ -250,7 +254,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         getRowProps: getRowProps,
         primaryKey: primaryKey,
         data: (0, _slice.default)(dataSource).call(dataSource, topIndex, bottomIndex),
-        hasScrollY: _this.hasScrollY,
+        stickyRightOffset: stickyRightOffset,
         horizontalRenderInfo: info,
         verticalRenderInfo: {
           first: 0,
@@ -312,7 +316,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       var innerTableWidth = tableBodyHtmlTable.offsetWidth;
       var artTableWidth = artTable.offsetWidth;
       var stickyScrollHeightProp = this.props.stickyScrollHeight;
-      var stickyScrollHeight = stickyScrollHeightProp === 'auto' ? (0, _utils.getScrollbarSize)().height : stickyScrollHeightProp; // stickyScroll.style.marginTop = `-${stickyScrollHeight + 1}px`
+      var stickyScrollHeight = stickyScrollHeightProp === 'auto' ? this.getScrollBarWidth() : stickyScrollHeightProp; // stickyScroll.style.marginTop = `-${stickyScrollHeight + 1}px`
       // 设置滚动条高度
 
       stickyScroll.style.height = "".concat(stickyScrollHeight, "px");
@@ -377,7 +381,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: _styles.Classes.verticalScrollPlaceholder,
         style: this.hasScrollY ? {
-          width: (0, _utils.getScrollbarSize)().width
+          width: this.getScrollBarWidth()
         } : undefined
       }));
     }
@@ -484,7 +488,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react.default.createElement("div", {
         className: _styles.Classes.verticalScrollPlaceholder,
         style: this.hasScrollY ? {
-          width: (0, _utils.getScrollbarSize)().width,
+          width: this.getScrollBarWidth(),
           visibility: 'initial'
         } : undefined
       }));
@@ -529,6 +533,11 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         className: _styles.Classes.stickyScrollItem
       }));
     }
+  }, {
+    key: "getScrollBarWidth",
+    value: function getScrollBarWidth() {
+      return this.props.scrollbarWidth || (0, _utils.getScrollbarSize)().width;
+    }
   }, {
     key: "render",
     value: function render() {
@@ -701,6 +710,47 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       })).subscribe(function (sizeAndOffset) {
         _this2.setState(sizeAndOffset);
       }));
+      this.rootSubscription.add(richVisibleRects$.pipe(op.map(function (_ref7) {
+        var clipRect = _ref7.clipRect,
+            offsetY = _ref7.offsetY;
+        return {
+          maxRenderHeight: clipRect.bottom - clipRect.top,
+          maxRenderWidth: clipRect.right - clipRect.left,
+          offsetY: offsetY
+        };
+      }), op.distinctUntilChanged(function (x, y) {
+        return x.offsetY - y.offsetY === 0;
+      }), // 计算得到当前行索引对应的数据块，blocks改成数组的形式，兼容快速拖动可视区域出现两个数据块的情况
+      op.map(function (sizeAndOffset) {
+        var _a;
+
+        var offsetY = sizeAndOffset.offsetY,
+            maxRenderHeight = sizeAndOffset.maxRenderHeight;
+        var scrollDirection = offsetY - _this2.offsetY >= 0 ? 'down' : 'up';
+        _this2.offsetY = offsetY;
+        var rowCount = _this2.props.dataSource.length;
+
+        var vertical = _this2.rowHeightManager.getRenderRange(offsetY, maxRenderHeight, rowCount);
+
+        var topIndex = vertical.topIndex,
+            bottomIndex = vertical.bottomIndex;
+        var blockSize = ((_a = _this2.props.scrollLoad) === null || _a === void 0 ? void 0 : _a.blockSize) || 200;
+        var topBlockStartIndex = Math.floor(Math.max(topIndex - 1, 0) / blockSize) * blockSize;
+        var bottomBlockStartIndex = Math.floor((bottomIndex + 1) / blockSize) * blockSize;
+        return scrollDirection === 'down' ? [topBlockStartIndex, bottomBlockStartIndex] : [bottomBlockStartIndex, topBlockStartIndex];
+      }), op.distinctUntilChanged(function (x, y) {
+        return x[0] === y[0] && x[1] === y[1];
+      }), op.switchMap(function (startIndexs) {
+        var event$ = (0, _rxjs.from)(startIndexs);
+        return event$.pipe(op.map(function (startIndex) {
+          return startIndex;
+        }));
+      }), // 过滤掉重复掉值
+      op.distinctUntilChanged()).subscribe(function (startIndex) {
+        var _a;
+
+        (_a = _this2.props.scrollLoad) === null || _a === void 0 ? void 0 : _a.callback(startIndex);
+      }));
     }
   }, {
     key: "componentWillUnmount",

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

@@ -60,8 +60,8 @@ function FilterPanel(_ref) {
 
   var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      opaque = _useState4[0],
-      setOpaque = _useState4[1];
+      visible = _useState4[0],
+      setVisible = _useState4[1];
 
   var ref = _react.default.useRef(null);
 
@@ -71,16 +71,16 @@ function FilterPanel(_ref) {
 
   (0, _react.useEffect)(function () {
     setPerfectPosition((0, _utils.keepWithinBounds)(document.body, ref.current, position.x, position.y, true));
-    setOpaque(true);
+    setVisible(true);
   }, [position]);
   useWindowEvents(function (e) {
     return !isContainPanel(e) && onClose();
   }, ['mousedown']);
   return /*#__PURE__*/_react.default.createElement(FilterPanelStyle, {
     style: (0, _extends2.default)((0, _extends2.default)({}, style), {
-      left: perfectPosition.x,
-      top: perfectPosition.y,
-      opacity: opaque ? 1 : 0
+      left: visible ? perfectPosition.x : 0,
+      top: visible ? perfectPosition.y : 0,
+      opacity: visible ? 1 : 0
     }),
     ref: ref
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -153,6 +153,8 @@ function rangeSelection(opts) {
     };
 
     var onKeyDown = function onKeyDown(e) {
+      if (!(0, _utils.isElementInEventPath)(tableBody, e.nativeEvent)) return;
+
       if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
         var rowLen = pipeline.getDataSource().length;
 

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

@@ -1,12 +1,12 @@
 import React from 'react';
 /** elementUtil html元素用的工具函数 */
-export declare function getEventPath(event: MouseEvent | React.MouseEvent<HTMLTableElement, MouseEvent>): any;
+export declare function getEventPath(event: MouseEvent | React.MouseEvent<HTMLTableElement, MouseEvent> | KeyboardEvent): any;
 /**
  * 获取点击事件是否发生在元素内部
  * @param ele
  * @param event
  */
-export declare function isElementInEventPath(ele?: HTMLElement, event?: MouseEvent): boolean;
+export declare function isElementInEventPath(ele?: HTMLElement, event?: MouseEvent | KeyboardEvent): boolean;
 /**
  * 根据点击路径获取对应元素
  * @param path

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kdcloudjs/table",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "金蝶 react table 组件",
   "title": "table",
   "keywords": [