@kdcloudjs/table 1.2.2-canary.10 → 1.2.2-canary.11-hotfix.0

package/es/table/base/table.js

@@ -7,17 +7,17 @@ import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
 import _createClass from "@babel/runtime-corejs3/helpers/createClass";
+import _inherits from "@babel/runtime-corejs3/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime-corejs3/helpers/inherits";
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof _Symbol && _getIteratorMethod(r) || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { var _context2; if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = _sliceInstanceProperty(_context2 = {}.toString.call(r)).call(_context2, 8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? _Array$from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { var _context2; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context2 = Object.prototype.toString.call(o)).call(_context2, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _flatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/flat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? _Reflect$construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import cx from 'classnames';
 import React from 'react';
 import { BehaviorSubject, combineLatest, noop, Subscription, Subject, from } from 'rxjs';
@@ -28,6 +28,7 @@ import TableHeader from './header';
 import { getRichVisibleRectsStream } from './helpers/getRichVisibleRectsStream';
 import { getFullRenderRange, makeRowHeightManager } from './helpers/rowHeightManager';
 import { TableDOMHelper } from './helpers/TableDOMUtils';
+import { FastScrollManager } from './helpers/FastScrollManager';
 import { HtmlTable } from './html-table';
 import Loading from './loading';
 import { Classes, LOCK_SHADOW_PADDING, StyledArtTableWrapper } from './styles';
@@ -35,6 +36,7 @@ import GlobalStyleComponent from './globalStyleComponent';
 import { addResizeObserver, getScrollbarSize, OVERSCAN_SIZE, shallowEqual, STYLED_REF_PROP, sum, syncScrollLeft, throttledWindowResize$, getTableScrollFooterDOM, getTableScrollHeaderDOM, cssPolifill } from './utils';
 import { console, browserType, isStickyUIDegrade } from '../utils';
 import getTableRenderTemplate from './renderTemplates';
+import { TopBlank, BottomBlank } from './BlankComponent';
 var propsDotEmptyContentDeprecatedWarned = false;
 function warnPropsDotEmptyContentIsDeprecated() {
   if (!propsDotEmptyContentDeprecatedWarned) {
@@ -43,14 +45,19 @@ function warnPropsDotEmptyContentIsDeprecated() {
   }
 }
 export var BaseTable = /*#__PURE__*/function (_React$Component) {
+  _inherits(BaseTable, _React$Component);
+  var _super = _createSuper(BaseTable);
   function BaseTable(props) {
     var _this;
     _classCallCheck(this, BaseTable);
-    _this = _callSuper(this, BaseTable, [props]);
+    _this = _super.call(this, props);
     _this.rowHeightManager = makeRowHeightManager(_this.props.dataSource.length, _this.props.estimatedRowHeight);
     _this.artTableWrapperRef = /*#__PURE__*/React.createRef();
     _this.hasScrollY = false;
     _this.offsetY = 0;
+    // Blank组件的引用，用于快速滚动时直接更新
+    _this.topBlankRef = /*#__PURE__*/React.createRef();
+    _this.bottomBlankRef = /*#__PURE__*/React.createRef();
     _this.handleRowMouseEnter = function (e) {
       var nodeList = _this.domHelper.getRowNodeListByEvent(e);
       nodeList && nodeList.forEach(function (node) {
@@ -70,8 +77,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         getRowProps = _this$props.getRowProps,
         primaryKey = _this$props.primaryKey,
         isLoading = _this$props.isLoading,
-        emptyCellHeight = _this$props.emptyCellHeight,
-        footerDataSource = _this$props.footerDataSource;
+        emptyCellHeight = _this$props.emptyCellHeight;
       var tableBodyClassName = cx(Classes.tableBody, Classes.horizontalScrollContainer);
       // 低版本Edge浏览器下也会出现双滚动条，这里设置overflow: 'hidden'，先去掉edge的方向键控制滚动条的功能
       var virtualStyle = browserType.isIE || browserType.isEdge ? {
@@ -121,13 +127,10 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         className: Classes.virtual,
         tabIndex: -1,
         style: virtualStyle
-      }, topBlank > 0 && (/*#__PURE__*/React.createElement("div", {
-        key: "top-blank",
-        className: cx(Classes.virtualBlank, 'top'),
-        style: {
-          height: topBlank
-        }
-      })), /*#__PURE__*/React.createElement(HtmlTable, {
+      }, /*#__PURE__*/React.createElement(TopBlank, {
+        ref: _this.topBlankRef,
+        height: topBlank
+      }), /*#__PURE__*/React.createElement(HtmlTable, {
         tbodyHtmlTag: "tbody",
         getRowProps: getRowProps,
         primaryKey: primaryKey,
@@ -139,13 +142,10 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
           limit: bottomIndex,
           last: dataSource.length - 1
         }
-      }), bottomBlank > 0 && (/*#__PURE__*/React.createElement("div", {
-        key: "bottom-blank",
-        className: cx(Classes.virtualBlank, 'bottom'),
-        style: {
-          height: bottomBlank
-        }
-      }))));
+      }), /*#__PURE__*/React.createElement(BottomBlank, {
+        ref: _this.bottomBlankRef,
+        height: bottomBlank
+      })));
     };
     _this.state = {
       hasScroll: true,
@@ -159,11 +159,30 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       maxRenderHeight: 600,
       maxRenderWidth: 800
     };
+    // 初始化快速滚动管理器
+    var fastScrollCallbacks = {
+      onFastScrollStart: function onFastScrollStart(renderData) {
+        _this.setState({
+          previousRenderData: renderData
+        });
+      },
+      onFastScrollEnd: function onFastScrollEnd(scrollData) {
+        _this.setState({
+          previousRenderData: undefined,
+          offsetY: scrollData.offsetY,
+          maxRenderHeight: scrollData.maxRenderHeight,
+          maxRenderWidth: scrollData.maxRenderWidth
+        });
+      },
+      getCurrentRenderRange: function getCurrentRenderRange(offsetY, maxRenderHeight, dataLength) {
+        return _this.rowHeightManager.getRenderRange(offsetY, maxRenderHeight, dataLength);
+      }
+    };
+    _this.fastScrollManager = new FastScrollManager(fastScrollCallbacks);
     return _this;
   }
   /** @deprecated BaseTable.getDoms() 已经过时，请勿调用 */
-  _inherits(BaseTable, _React$Component);
-  return _createClass(BaseTable, [{
+  _createClass(BaseTable, [{
     key: "getDoms",
     value: function getDoms() {
       console.warn('[kd-table] BaseTable.getDoms() 已经过时');
@@ -305,11 +324,18 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getVerticalRenderRange",
     value: function getVerticalRenderRange(useVirtual) {
-      var dataSource = this.props.dataSource;
+      var _this$props4 = this.props,
+        dataSource = _this$props4.dataSource,
+        isLowPerformance = _this$props4.isLowPerformance;
       var _this$state = this.state,
         offsetY = _this$state.offsetY,
-        maxRenderHeight = _this$state.maxRenderHeight;
+        maxRenderHeight = _this$state.maxRenderHeight,
+        previousRenderData = _this$state.previousRenderData;
       var rowCount = dataSource.length;
+      // 只有在启用快速滚动时才使用 FastScrollManager 的判断
+      if (isLowPerformance && this.fastScrollManager.getIsFastScrolling() && (previousRenderData === null || previousRenderData === void 0 ? void 0 : previousRenderData.verticalRenderRange)) {
+        return previousRenderData.verticalRenderRange;
+      }
       if (useVirtual.vertical) {
         return this.rowHeightManager.getRenderRange(offsetY, maxRenderHeight, rowCount);
       } else {
@@ -320,12 +346,12 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
     key: "renderTableFooter",
     value: function renderTableFooter(info) {
       // console.log('render footer')
-      var _this$props4 = this.props,
-        _this$props4$footerDa = _this$props4.footerDataSource,
-        footerDataSource = _this$props4$footerDa === void 0 ? [] : _this$props4$footerDa,
-        getRowProps = _this$props4.getRowProps,
-        primaryKey = _this$props4.primaryKey,
-        stickyBottom = _this$props4.stickyBottom;
+      var _this$props5 = this.props,
+        _this$props5$footerDa = _this$props5.footerDataSource,
+        footerDataSource = _this$props5$footerDa === void 0 ? [] : _this$props5$footerDa,
+        getRowProps = _this$props5.getRowProps,
+        primaryKey = _this$props5.primaryKey,
+        stickyBottom = _this$props5.stickyBottom;
       var stickyRightOffset = this.hasScrollY ? this.getScrollBarWidth() : 0;
       var renderFooter = getTableRenderTemplate('footer');
       if (typeof renderFooter === 'function') {
@@ -390,9 +416,9 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
     key: "renderStickyScroll",
     value: function renderStickyScroll(info) {
       // console.log('render stickyscroll')
-      var _this$props5 = this.props,
-        hasStickyScroll = _this$props5.hasStickyScroll,
-        stickyBottom = _this$props5.stickyBottom;
+      var _this$props6 = this.props,
+        hasStickyScroll = _this$props6.hasStickyScroll,
+        stickyBottom = _this$props6.stickyBottom;
       var hasScroll = this.state.hasScroll;
       var isScroll = hasStickyScroll && hasScroll;
       var stickyScrollContainerStyle = this.getStickyScrollContainerStyle();
@@ -429,9 +455,9 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getStickyScrollContainerStyle",
     value: function getStickyScrollContainerStyle() {
-      var _this$props6 = this.props,
-        hasStickyScroll = _this$props6.hasStickyScroll,
-        stickyScrollHeight = _this$props6.stickyScrollHeight;
+      var _this$props7 = this.props,
+        hasStickyScroll = _this$props7.hasStickyScroll,
+        stickyScrollHeight = _this$props7.stickyScrollHeight;
       var hasScroll = this.state.hasScroll;
       var isScroll = hasStickyScroll && hasScroll;
       var height = stickyScrollHeight === 'auto' ? this.getScrollBarWidth() : stickyScrollHeight;
@@ -445,24 +471,25 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
+      var _cx;
       // console.log('render table')
       var info = calculateRenderInfo(this);
       this.lastInfo = info;
-      var _this$props7 = this.props,
-        dataSource = _this$props7.dataSource,
-        className = _this$props7.className,
-        style = _this$props7.style,
-        hasHeader = _this$props7.hasHeader,
-        useOuterBorder = _this$props7.useOuterBorder,
-        isStickyHead = _this$props7.isStickyHead,
-        isStickyHeader = _this$props7.isStickyHeader,
-        isStickyFooter = _this$props7.isStickyFooter,
-        isLoading = _this$props7.isLoading,
-        getTableProps = _this$props7.getTableProps,
-        footerDataSource = _this$props7.footerDataSource,
-        components = _this$props7.components,
-        bordered = _this$props7.bordered;
-      var artTableWrapperClassName = cx(Classes.artTableWrapper, _defineProperty(_defineProperty(_defineProperty({
+      var _this$props8 = this.props,
+        dataSource = _this$props8.dataSource,
+        className = _this$props8.className,
+        style = _this$props8.style,
+        hasHeader = _this$props8.hasHeader,
+        useOuterBorder = _this$props8.useOuterBorder,
+        isStickyHead = _this$props8.isStickyHead,
+        isStickyHeader = _this$props8.isStickyHeader,
+        isStickyFooter = _this$props8.isStickyFooter,
+        isLoading = _this$props8.isLoading,
+        getTableProps = _this$props8.getTableProps,
+        footerDataSource = _this$props8.footerDataSource,
+        components = _this$props8.components,
+        bordered = _this$props8.bordered;
+      var artTableWrapperClassName = cx(Classes.artTableWrapper, (_cx = {
         'use-outer-border': useOuterBorder,
         empty: dataSource.length === 0,
         lock: info.hasLockColumn,
@@ -470,7 +497,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         'sticky-header': isStickyHeader !== null && isStickyHeader !== void 0 ? isStickyHeader : isStickyHead,
         'has-footer': footerDataSource.length > 0,
         'sticky-footer': isStickyFooter
-      }, Classes.artTableBordered, bordered), 'ie-polyfill-wrapper', browserType.isIE), 'sticky-polyfill-wrapper', isStickyUIDegrade()), className);
+      }, _defineProperty(_cx, Classes.artTableBordered, bordered), _defineProperty(_cx, 'ie-polyfill-wrapper', browserType.isIE), _defineProperty(_cx, 'sticky-polyfill-wrapper', isStickyUIDegrade()), _cx), className);
       var artTableWrapperProps = _defineProperty({
         className: artTableWrapperClassName,
         style: style
@@ -495,10 +522,10 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       this.initSubscriptions();
       this.didMountOrUpdate();
       // console.log('did mount end')
-      var _this$props8 = this.props,
-        cssVariables = _this$props8.cssVariables,
-        enableCSSVariables = _this$props8.enableCSSVariables,
-        bordered = _this$props8.bordered;
+      var _this$props9 = this.props,
+        cssVariables = _this$props9.cssVariables,
+        enableCSSVariables = _this$props9.enableCSSVariables,
+        bordered = _this$props9.bordered;
       cssPolifill({
         variables: cssVariables || {},
         enableCSSVariables: enableCSSVariables,
@@ -513,10 +540,10 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       var _a;
       // console.log('did update start')
-      var _this$props9 = this.props,
-        cssVariables = _this$props9.cssVariables,
-        enableCSSVariables = _this$props9.enableCSSVariables,
-        bordered = _this$props9.bordered;
+      var _this$props10 = this.props,
+        cssVariables = _this$props10.cssVariables,
+        enableCSSVariables = _this$props10.enableCSSVariables,
+        bordered = _this$props10.bordered;
       if (!shallowEqual(prevProps === null || prevProps === void 0 ? void 0 : prevProps.cssVariables, (_a = this.props) === null || _a === void 0 ? void 0 : _a.cssVariables)) {
         cssPolifill({
           variables: cssVariables || {},
@@ -532,10 +559,13 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "didMountOrUpdate",
     value: function didMountOrUpdate(prevProps, prevState) {
-      this.syncHorizontalScrollFromTableBody();
-      this.updateStickyScroll();
-      this.adjustNeedRenderLock();
-      this.updateRowHeightManager();
+      var _this2 = this;
+      window.requestAnimationFrame(function () {
+        _this2.syncHorizontalScrollFromTableBody();
+        _this2.updateStickyScroll();
+        _this2.adjustNeedRenderLock();
+        _this2.updateRowHeightManager();
+      });
       this.updateScrollLeftWhenLayoutChanged(prevProps, prevState);
     }
   }, {
@@ -557,25 +587,25 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "initSubscriptions",
     value: function initSubscriptions() {
-      var _this2 = this;
+      var _this3 = this;
       var _this$domHelper2 = this.domHelper,
         virtual = _this$domHelper2.virtual,
         stickyScroll = _this$domHelper2.stickyScroll;
       this.rootSubscription.add(throttledWindowResize$.subscribe(function () {
-        _this2.updateStickyScroll();
-        _this2.adjustNeedRenderLock();
+        _this3.updateStickyScroll();
+        _this3.adjustNeedRenderLock();
       }));
       this.resizeSubject.pipe(op.debounceTime(100)).subscribe(function () {
         var _a, _b;
-        (_b = (_a = _this2.props).setTableWidth) === null || _b === void 0 ? void 0 : _b.call(_a, _this2.domHelper.tableBody.clientWidth);
+        (_b = (_a = _this3.props).setTableWidth) === null || _b === void 0 ? void 0 : _b.call(_a, _this3.domHelper.tableBody.clientWidth);
       });
       var handleTableWrapperResize = function handleTableWrapperResize() {
-        _this2.resizeSubject.next();
+        _this3.resizeSubject.next();
       };
       this.resizeObserver = addResizeObserver(this.domHelper.artTableWrapper, handleTableWrapperResize);
       // 滚动同步
       this.rootSubscription.add(syncScrollLeft([getTableScrollHeaderDOM(this.domHelper), virtual, getTableScrollFooterDOM(this.domHelper), stickyScroll], function (scrollLeft) {
-        _this2.syncHorizontalScroll(scrollLeft);
+        _this3.syncHorizontalScroll(scrollLeft);
       }));
       var richVisibleRects$ = getRichVisibleRectsStream(this.domHelper.virtual, this.props$.pipe(op.skip(1), op.mapTo('structure-may-change')), this.props.virtualDebugLabel).pipe(op.shareReplay());
       // 每当可见部分发生变化的时候，调整 loading icon 的未知（如果 loading icon 存在的话）
@@ -589,7 +619,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       }))]).subscribe(function (_ref3) {
         var _ref4 = _slicedToArray(_ref3, 1),
           clipRect = _ref4[0];
-        var loadingIndicator = _this2.domHelper.getLoadingIndicator();
+        var loadingIndicator = _this3.domHelper.getLoadingIndicator();
         if (!loadingIndicator) {
           return;
         }
@@ -600,9 +630,9 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       }));
       // 每当可见部分发生变化的时候，如果开启了虚拟滚动，则重新触发 render
       this.rootSubscription.add(richVisibleRects$.pipe(op.filter(function () {
-        var _this2$lastInfo$useVi = _this2.lastInfo.useVirtual,
-          horizontal = _this2$lastInfo$useVi.horizontal,
-          vertical = _this2$lastInfo$useVi.vertical;
+        var _this3$lastInfo$useVi = _this3.lastInfo.useVirtual,
+          horizontal = _this3$lastInfo$useVi.horizontal,
+          vertical = _this3$lastInfo$useVi.vertical;
         return horizontal || vertical;
       }), op.map(function (_ref5) {
         var clipRect = _ref5.clipRect,
@@ -619,8 +649,29 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         }
         // 因为 overscan 的存在，滚动较小的距离时不需要触发组件重渲染
         return Math.abs(x.maxRenderWidth - y.maxRenderWidth) < OVERSCAN_SIZE / 2 && Math.abs(x.maxRenderHeight - y.maxRenderHeight) < OVERSCAN_SIZE / 2 && Math.abs(x.offsetY - y.offsetY) < OVERSCAN_SIZE / 2;
+      }),
+      // 快速滚动检测和处理
+      op.tap(function (sizeAndOffset) {
+        // 只有在启用快速滚动时才使用 FastScrollManager 处理滚动事件
+        if (_this3.props.isLowPerformance) {
+          _this3.fastScrollManager.handleScrollEvent(sizeAndOffset, {
+            offsetY: _this3.state.offsetY,
+            maxRenderHeight: _this3.state.maxRenderHeight,
+            maxRenderWidth: _this3.state.maxRenderWidth
+          }, _this3.props.dataSource.length, _this3.domHelper.virtual.scrollHeight);
+        }
       })).subscribe(function (sizeAndOffset) {
-        _this2.setState(sizeAndOffset);
+        var _a, _b;
+        // 正常滚动时也需要实时更新 blank 高度，确保缓慢滚动时的视觉连续性
+        var currentRange = _this3.rowHeightManager.getRenderRange(sizeAndOffset.offsetY, sizeAndOffset.maxRenderHeight, _this3.props.dataSource.length);
+        // 直接更新 DOM，避免等待下次渲染
+        (_a = _this3.topBlankRef.current) === null || _a === void 0 ? void 0 : _a.updateHeight(currentRange.topBlank);
+        (_b = _this3.bottomBlankRef.current) === null || _b === void 0 ? void 0 : _b.updateHeight(currentRange.bottomBlank);
+        // 只有在启用快速滚动时才检查快速滚动状态
+        if (_this3.props.isLowPerformance && _this3.fastScrollManager.getIsFastScrolling()) {
+          return;
+        }
+        _this3.setState(sizeAndOffset);
       }));
       this.rootSubscription.add(richVisibleRects$.pipe(op.map(function (_ref6) {
         var clipRect = _ref6.clipRect,
@@ -638,13 +689,13 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
         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 scrollDirection = offsetY - _this3.offsetY >= 0 ? 'down' : 'up';
+        _this3.offsetY = offsetY;
+        var rowCount = _this3.props.dataSource.length;
+        var vertical = _this3.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 blockSize = ((_a = _this3.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];
@@ -659,7 +710,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       // 过滤掉重复掉值
       op.distinctUntilChanged()).subscribe(function (startIndex) {
         var _a;
-        (_a = _this2.props.scrollLoad) === null || _a === void 0 ? void 0 : _a.callback(startIndex);
+        (_a = _this3.props.scrollLoad) === null || _a === void 0 ? void 0 : _a.callback(startIndex);
       }));
     }
   }, {
@@ -669,6 +720,10 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
       this.rootSubscription.unsubscribe();
       this.resizeSubject.unsubscribe();
+      // 只有在启用快速滚动时才清理快速滚动管理器
+      if (this.props.isLowPerformance) {
+        this.fastScrollManager.cleanup();
+      }
     }
     /** 更新 DOM 节点的引用，方便其他方法直接操作 DOM */
   }, {
@@ -750,6 +805,7 @@ export var BaseTable = /*#__PURE__*/function (_React$Component) {
       }
     }
   }]);
+  return BaseTable;
 }(React.Component);
 BaseTable.defaultProps = {
   hasHeader: true,
@@ -762,6 +818,7 @@ BaseTable.defaultProps = {
   stickyScrollHeight: 'auto',
   useVirtual: 'auto',
   estimatedRowHeight: 48,
+  isLowPerformance: false,
   isLoading: false,
   components: {},
   getTableProps: noop,

package/es/table/base/utils.js

@@ -4,9 +4,9 @@ import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
 import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
 import _typeof from "@babel/runtime-corejs3/helpers/typeof";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof _Symbol && _getIteratorMethod(r) || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { var _context; if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = _sliceInstanceProperty(_context = {}.toString.call(r)).call(_context, 8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? _Array$from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { var _context; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context = Object.prototype.toString.call(o)).call(_context, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _Object$is from "@babel/runtime-corejs3/core-js-stable/object/is";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";

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

@@ -216,6 +216,7 @@ export function columnDrag() {
                 e.stopPropagation(); // 存在移动就阻止冒泡
                 currentTarget.addEventListener('click', stopClickPropagation); // 阻止列头点击事件，防止拖动后触发列头过滤事件
               }
+
               window.requestAnimationFrame(function () {
                 // 取消阻止列头点击事件
                 currentTarget.removeEventListener('click', stopClickPropagation);

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

@@ -45,6 +45,7 @@ export function filter() {
         var filterable = col.code && ((_a = col.features) === null || _a === void 0 ? void 0 : _a.filterable);
         var filterActive = !!(filterable && (inputFiltersMap === null || inputFiltersMap === void 0 ? void 0 : inputFiltersMap.get(col.code)));
         if (filterable) {
+          var _cx;
           var handleFilterChanged = function handleFilterChanged(filterItem) {
             var nextFiltersMap = new _Map(inputFiltersMap);
             var currentFilter = _extends({
@@ -79,7 +80,7 @@ export function filter() {
             setFilterModel: handleFilterChanged,
             setFilter: setFilter,
             isFilterActive: filterActive,
-            className: cx(_defineProperty(_defineProperty({}, Classes.tableFilterTrigger, true), "active", filterActive)),
+            className: cx((_cx = {}, _defineProperty(_cx, Classes.tableFilterTrigger, true), _defineProperty(_cx, "active", filterActive), _cx)),
             stopClickEventPropagation: stopClickEventPropagation,
             stopESCKeyDownEventPropagation: stopESCKeyDownEventPropagation,
             hideFilterPopupHeader: hideFilterPopupHeader,
@@ -98,6 +99,7 @@ export function filter() {
           //   }
           // })
         }
+
         if (!isLeafNode(col)) {
           var _context3;
           result.children = _mapInstanceProperty(_context3 = col.children).call(_context3, dfs);

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

@@ -143,7 +143,7 @@ export function columnResize() {
         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, {
+        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,
           onDoubleClick: function onDoubleClick(e) {
             return handleDoubleClick(e, col);
@@ -159,7 +159,7 @@ export function columnResize() {
           onMouseDown: function onMouseDown(e) {
             return handleMouseDown(e, col);
           }
-        })))),
+        }))),
         headerCellProps: mergeCellProps(col.headerCellProps, {
           className: 'resizeable'
         })

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

@@ -23,24 +23,24 @@ export function contextMenu() {
       popupParent.appendChild(ePopupDiv);
       var popupHidden = false;
       var eventList = ['mousedown', 'contextmenu'];
-      var _hidePopup2 = function hidePopup(event) {
+      var hidePopup = function hidePopup(event) {
         if (isEventFromCurrentPopup(event, ePopupDiv) || popupHidden) {
           return;
         }
         popupHidden = true;
         popupParent.removeChild(ePopupDiv);
         eventList.forEach(function (eventType) {
-          window.removeEventListener(eventType, _hidePopup2, true);
+          window.removeEventListener(eventType, hidePopup, true);
         });
       };
       ReactDOM.render(menu, ePopupDiv, function () {
         setTimeout(function () {
           eventList.forEach(function (eventType) {
-            window.addEventListener(eventType, _hidePopup2, true);
+            window.addEventListener(eventType, hidePopup, true);
           });
         }, 0);
       });
-      return _hidePopup2;
+      return hidePopup;
     };
     var onContextMenu = function onContextMenu(e) {
       if (canShowContextMenu(e, pipeline)) {
@@ -284,10 +284,12 @@ function keepWithinBounds(popupParent, ePopup, x, y) {
     var maxX = parentWidth - minWidth;
     x = Math.min(Math.max(x, 0), Math.abs(maxX)); // 目前位置，最大支持的位置
   }
+
   if (y) {
     var maxY = parentHeight - ePopupRect.height;
     y = Math.min(Math.max(y, 0), Math.abs(maxY)); // 目前位置，最大支持的位置
   }
+
   return {
     x: x,
     y: y

package/es/table/pipeline/features/featureApi/RowDragApi.js

@@ -10,7 +10,7 @@ var RowDragApi = /*#__PURE__*/function () {
     this.rowDropZones = [];
     this.dragStatus = 'finished';
   }
-  return _createClass(RowDragApi, [{
+  _createClass(RowDragApi, [{
     key: "getRowDropZoneParams",
     value: function getRowDropZoneParams() {
       return this.rowDropZoneParams;
@@ -62,5 +62,6 @@ var RowDragApi = /*#__PURE__*/function () {
       return this.dragStatus;
     }
   }]);
+  return RowDragApi;
 }();
 export { RowDragApi as default };

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

@@ -12,6 +12,7 @@ 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) {
+  var _cx2;
   var setFilterModel = _ref.setFilterModel,
     filterModel = _ref.filterModel,
     hidePanel = _ref.hidePanel,
@@ -74,7 +75,7 @@ function DefaultFilterContent(_ref) {
         }
       }, (_a = localeText[option.key]) !== null && _a !== void 0 ? _a : option.title)
     );
-  }))), selectedValue !== 'notIsNull' && selectedValue !== 'isNull' && (/*#__PURE__*/React.createElement("div", {
+  }))), selectedValue !== 'notIsNull' && selectedValue !== 'isNull' && /*#__PURE__*/React.createElement("div", {
     className: 'filter-search'
   }, /*#__PURE__*/React.createElement("input", {
     className: 'filter-search-inner',
@@ -84,7 +85,7 @@ function DefaultFilterContent(_ref) {
     },
     onKeyDown: handleKeyDown,
     ref: inputRef
-  }))), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: 'filter-footer'
   }, /*#__PURE__*/React.createElement("button", {
     className: cx(_defineProperty({
@@ -92,9 +93,9 @@ function DefaultFilterContent(_ref) {
     }, Classes.button, true)),
     onClick: reset
   }, (_a = localeText.resetFilter) !== null && _a !== void 0 ? _a : '重置'), /*#__PURE__*/React.createElement("button", {
-    className: cx(_defineProperty(_defineProperty({
+    className: cx((_cx2 = {
       'filter-btn': true
-    }, Classes.button, true), Classes.buttonPrimary, true)),
+    }, _defineProperty(_cx2, Classes.button, true), _defineProperty(_cx2, Classes.buttonPrimary, true), _cx2)),
     onClick: confirm
   }, (_b = localeText.confirmFilter) !== null && _b !== void 0 ? _b : '确定')));
 }