@kdcloudjs/table 1.2.2-canary.12 → 1.2.2-canary.14

package/lib/table/base/table.js

@@ -34,6 +34,7 @@ var _header = _interopRequireDefault(require("./header"));
 var _getRichVisibleRectsStream = require("./helpers/getRichVisibleRectsStream");
 var _rowHeightManager = require("./helpers/rowHeightManager");
 var _TableDOMUtils = require("./helpers/TableDOMUtils");
+var _FastScrollManager = require("./helpers/FastScrollManager");
 var _htmlTable = require("./html-table");
 var _loading = _interopRequireDefault(require("./loading"));
 var _styles = require("./styles");
@@ -41,6 +42,7 @@ var _globalStyleComponent = _interopRequireDefault(require("./globalStyleCompone
 var _utils = require("./utils");
 var _utils2 = require("../utils");
 var _renderTemplates = _interopRequireDefault(require("./renderTemplates"));
+var _BlankComponent = require("./BlankComponent");
 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; }
 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; } } }; }
@@ -66,6 +68,9 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
     _this.artTableWrapperRef = /*#__PURE__*/_react.default.createRef();
     _this.hasScrollY = false;
     _this.offsetY = 0;
+    // Blank组件的引用，用于快速滚动时直接更新
+    _this.topBlankRef = /*#__PURE__*/_react.default.createRef();
+    _this.bottomBlankRef = /*#__PURE__*/_react.default.createRef();
     _this.handleRowMouseEnter = function (e) {
       var nodeList = _this.domHelper.getRowNodeListByEvent(e);
       nodeList && nodeList.forEach(function (node) {
@@ -85,8 +90,7 @@ 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 = (0, _classnames.default)(_styles.Classes.tableBody, _styles.Classes.horizontalScrollContainer);
       // 低版本Edge浏览器下也会出现双滚动条，这里设置overflow: 'hidden'，先去掉edge的方向键控制滚动条的功能
       var virtualStyle = _utils2.browserType.isIE || _utils2.browserType.isEdge ? {
@@ -136,12 +140,9 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         className: _styles.Classes.virtual,
         tabIndex: -1,
         style: virtualStyle
-      }, topBlank > 0 && /*#__PURE__*/_react.default.createElement("div", {
-        key: "top-blank",
-        className: (0, _classnames.default)(_styles.Classes.virtualBlank, 'top'),
-        style: {
-          height: topBlank
-        }
+      }, /*#__PURE__*/_react.default.createElement(_BlankComponent.TopBlank, {
+        ref: _this.topBlankRef,
+        height: topBlank
       }), /*#__PURE__*/_react.default.createElement(_htmlTable.HtmlTable, {
         tbodyHtmlTag: "tbody",
         getRowProps: getRowProps,
@@ -154,12 +155,9 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
           limit: bottomIndex,
           last: dataSource.length - 1
         }
-      }), bottomBlank > 0 && /*#__PURE__*/_react.default.createElement("div", {
-        key: "bottom-blank",
-        className: (0, _classnames.default)(_styles.Classes.virtualBlank, 'bottom'),
-        style: {
-          height: bottomBlank
-        }
+      }), /*#__PURE__*/_react.default.createElement(_BlankComponent.BottomBlank, {
+        ref: _this.bottomBlankRef,
+        height: bottomBlank
       })));
     };
     _this.state = {
@@ -174,6 +172,26 @@ 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.FastScrollManager(fastScrollCallbacks);
     return _this;
   }
   /** @deprecated BaseTable.getDoms() 已经过时，请勿调用 */
@@ -295,7 +313,6 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "syncHorizontalScroll",
     value: function syncHorizontalScroll(x) {
-      var direction = this.props.direction;
       var _x = Math.abs(x);
       this.updateOffsetX(_x);
       var flat = (0, _flat.default)(this.lastInfo);
@@ -323,11 +340,18 @@ 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 {
@@ -338,12 +362,12 @@ 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 = (0, _renderTemplates.default)('footer');
       if (typeof renderFooter === 'function') {
@@ -405,9 +429,9 @@ 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();
@@ -444,9 +468,9 @@ 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;
@@ -464,21 +488,21 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       // console.log('render table')
       var info = (0, _calculations.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,
-        direction = _this$props7.direction;
+      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,
+        direction = _this$props8.direction;
       info.direction = direction;
       var artTableWrapperClassName = (0, _classnames.default)(_styles.Classes.artTableWrapper, (_cx = {
         'use-outer-border': useOuterBorder,
@@ -519,10 +543,10 @@ 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;
       (0, _utils.cssPolifill)({
         variables: cssVariables || {},
         enableCSSVariables: enableCSSVariables,
@@ -537,10 +561,10 @@ 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 (!(0, _utils.shallowEqual)(prevProps === null || prevProps === void 0 ? void 0 : prevProps.cssVariables, (_a = this.props) === null || _a === void 0 ? void 0 : _a.cssVariables)) {
         (0, _utils.cssPolifill)({
           variables: cssVariables || {},
@@ -556,10 +580,13 @@ 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);
     }
   }, {
@@ -581,25 +608,25 @@ 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(_utils.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 = (0, _utils.addResizeObserver)(this.domHelper.artTableWrapper, handleTableWrapperResize);
       // 滚动同步
       this.rootSubscription.add((0, _utils.syncScrollLeft)([(0, _utils.getTableScrollHeaderDOM)(this.domHelper), virtual, (0, _utils.getTableScrollFooterDOM)(this.domHelper), stickyScroll], function (scrollLeft) {
-        _this2.syncHorizontalScroll(scrollLeft);
+        _this3.syncHorizontalScroll(scrollLeft);
       }));
       var richVisibleRects$ = (0, _getRichVisibleRectsStream.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 存在的话）
@@ -613,7 +640,7 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
       }))]).subscribe(function (_ref3) {
         var _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
           clipRect = _ref4[0];
-        var loadingIndicator = _this2.domHelper.getLoadingIndicator();
+        var loadingIndicator = _this3.domHelper.getLoadingIndicator();
         if (!loadingIndicator) {
           return;
         }
@@ -624,9 +651,9 @@ 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,
@@ -643,8 +670,29 @@ var BaseTable = /*#__PURE__*/function (_React$Component) {
         }
         // 因为 overscan 的存在，滚动较小的距离时不需要触发组件重渲染
         return Math.abs(x.maxRenderWidth - y.maxRenderWidth) < _utils.OVERSCAN_SIZE / 2 && Math.abs(x.maxRenderHeight - y.maxRenderHeight) < _utils.OVERSCAN_SIZE / 2 && Math.abs(x.offsetY - y.offsetY) < _utils.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,
@@ -662,13 +710,13 @@ 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];
@@ -683,7 +731,7 @@ 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);
       }));
     }
   }, {
@@ -693,6 +741,10 @@ 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 */
   }, {
@@ -788,6 +840,7 @@ BaseTable.defaultProps = {
   stickyScrollHeight: 'auto',
   useVirtual: 'auto',
   estimatedRowHeight: 48,
+  isLowPerformance: false,
   isLoading: false,
   components: {},
   getTableProps: _rxjs.noop,