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

package/es/table/base/BlankComponent.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface BlankProps {
+    height: number;
+    className?: string;
+}
+export interface BlankRef {
+    updateHeight: (newHeight: number) => void;
+}
+export declare const TopBlank: React.MemoExoticComponent<React.ForwardRefExoticComponent<BlankProps & React.RefAttributes<BlankRef>>>;
+export declare const BottomBlank: React.MemoExoticComponent<React.ForwardRefExoticComponent<BlankProps & React.RefAttributes<BlankRef>>>;
+export {};

package/es/table/base/BlankComponent.js

@@ -0,0 +1,61 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import React, { useState, useImperativeHandle, forwardRef, memo } from 'react';
+import cx from 'classnames';
+import { Classes } from './styles';
+var TopBlankComponent = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var initialHeight = _ref.height;
+  var _useState = useState(initialHeight),
+    _useState2 = _slicedToArray(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
+  useImperativeHandle(ref, function () {
+    return {
+      updateHeight: function updateHeight(newHeight) {
+        if (height !== newHeight) {
+          setHeight(newHeight);
+        }
+      }
+    };
+  }, [height]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: height
+    }
+  });
+});
+TopBlankComponent.displayName = 'TopBlank';
+var BottomBlankComponent = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var initialHeight = _ref2.height,
+    className = _ref2.className;
+  var _useState3 = useState(initialHeight),
+    _useState4 = _slicedToArray(_useState3, 2),
+    height = _useState4[0],
+    setHeight = _useState4[1];
+  useImperativeHandle(ref, function () {
+    return {
+      updateHeight: function updateHeight(newHeight) {
+        if (height !== newHeight) {
+          setHeight(newHeight);
+        }
+      }
+    };
+  }, [height]);
+  if (height <= 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    key: "bottom-blank",
+    className: cx(Classes.virtualBlank, 'bottom', className),
+    style: {
+      height: height
+    }
+  });
+});
+BottomBlankComponent.displayName = 'BottomBlank';
+// 使用 memo 优化，只有当 height 或 className 改变时才重新渲染
+export var TopBlank = /*#__PURE__*/memo(TopBlankComponent, function (prevProps, nextProps) {
+  return prevProps.height === nextProps.height && prevProps.className === nextProps.className;
+});
+export var BottomBlank = /*#__PURE__*/memo(BottomBlankComponent, function (prevProps, nextProps) {
+  return prevProps.height === nextProps.height && prevProps.className === nextProps.className;
+});

package/es/table/base/helpers/FastScrollManager.d.ts

@@ -0,0 +1,96 @@
+/**
+ * 快速滚动管理器
+ * 抽取 BaseTable 中的快速滚动相关逻辑
+ */
+export interface FastScrollConfig {
+    /** 预渲染缓冲区大小，用于快速滚动判断 */
+    overscanSize?: number;
+    /** 快速滚动速度阈值 (像素/毫秒) */
+    velocityThreshold?: number;
+    /** 快速滚动距离倍数阈值 */
+    distanceMultiplier?: number;
+    /** 快速滚动结束等待时间 (毫秒) - 高速滚动 */
+    fastScrollEndDelayHigh?: number;
+    /** 快速滚动结束等待时间 (毫秒) - 普通滚动 */
+    fastScrollEndDelayNormal?: number;
+    /** 高速滚动速度阈值 (像素/毫秒) */
+    highVelocityThreshold?: number;
+}
+export interface FastScrollState {
+    lastScrollTime: number;
+    scrollVelocity: number;
+    lastOffsetY: number;
+}
+export interface ScrollEventData {
+    offsetY: number;
+    maxRenderHeight: number;
+    maxRenderWidth: number;
+}
+export interface VerticalRenderRange {
+    topIndex: number;
+    bottomIndex: number;
+    topBlank: number;
+    bottomBlank: number;
+}
+export interface FastScrollCallbacks {
+    onFastScrollStart: (renderData: {
+        offsetY: number;
+        maxRenderHeight: number;
+        maxRenderWidth: number;
+        verticalRenderRange: VerticalRenderRange;
+    }) => void;
+    onFastScrollEnd: (scrollData: ScrollEventData) => void;
+    getCurrentRenderRange: (offsetY: number, maxRenderHeight: number, dataLength: number) => VerticalRenderRange;
+}
+export declare class FastScrollManager {
+    private state;
+    private isFastScrolling;
+    private fastScrollEndTimer?;
+    private config;
+    private callbacks;
+    constructor(callbacks: FastScrollCallbacks, config?: FastScrollConfig);
+    /**
+     * 检测是否接近底部（剩余滚动距离少于两屏）
+     */
+    private isNearBottom;
+    /**
+     * 处理滚动事件 - 检测和处理快速滚动
+     */
+    handleScrollEvent(sizeAndOffset: ScrollEventData, currentState: {
+        offsetY: number;
+        maxRenderHeight: number;
+        maxRenderWidth: number;
+    }, dataLength: number, totalScrollHeight: number): void;
+    /**
+     * 开始快速滚动
+     */
+    private startFastScrolling;
+    /**
+     * 重置快速滚动结束定时器
+     */
+    private resetFastScrollEndTimer;
+    /**
+     * 结束快速滚动
+     */
+    private endFastScrolling;
+    /**
+     * 清理资源
+     */
+    cleanup(): void;
+    /**
+     * 获取当前是否处于快速滚动状态
+     */
+    getIsFastScrolling(): boolean;
+    /**
+     * 获取当前滚动速度
+     */
+    getScrollVelocity(): number;
+    /**
+     * 清理资源
+     */
+    destroy(): void;
+    /**
+     * 获取当前配置
+     */
+    getConfig(): Readonly<Required<FastScrollConfig>>;
+}

package/es/table/base/helpers/FastScrollManager.js

@@ -0,0 +1,167 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
+import _createClass from "@babel/runtime-corejs3/helpers/createClass";
+/**
+ * 快速滚动管理器
+ * 抽取 BaseTable 中的快速滚动相关逻辑
+ */
+export var FastScrollManager = /*#__PURE__*/function () {
+  function FastScrollManager(callbacks) {
+    var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _classCallCheck(this, FastScrollManager);
+    // 快速滚动状态
+    this.state = {
+      lastScrollTime: 0,
+      scrollVelocity: 0,
+      lastOffsetY: 0
+    };
+    // 快速滚动标志 - 作为私有属性立即更新
+    this.isFastScrolling = false;
+    this.callbacks = callbacks;
+    // 合并默认配置
+    this.config = _extends({
+      overscanSize: 100,
+      velocityThreshold: 3,
+      distanceMultiplier: 3,
+      fastScrollEndDelayHigh: 200,
+      fastScrollEndDelayNormal: 150,
+      highVelocityThreshold: 5
+    }, config);
+  }
+  /**
+   * 检测是否接近底部（剩余滚动距离少于两屏）
+   */
+  _createClass(FastScrollManager, [{
+    key: "isNearBottom",
+    value: function isNearBottom(currentScrollTop, maxRenderHeight, totalScrollHeight) {
+      var remainingScrollDistance = totalScrollHeight - currentScrollTop - maxRenderHeight;
+      return remainingScrollDistance < maxRenderHeight;
+    }
+    /**
+     * 处理滚动事件 - 检测和处理快速滚动
+     */
+  }, {
+    key: "handleScrollEvent",
+    value: function handleScrollEvent(sizeAndOffset, currentState, dataLength, totalScrollHeight) {
+      var currentTime = performance.now();
+      var deltaY = Math.abs(sizeAndOffset.offsetY - this.state.lastOffsetY);
+      var deltaTime = currentTime - this.state.lastScrollTime;
+      // 计算滚动速度 (像素/毫秒)
+      this.state.scrollVelocity = deltaTime > 0 ? deltaY / deltaTime : 0;
+      // 检测是否接近底部
+      var isNearBottom = this.isNearBottom(sizeAndOffset.offsetY, sizeAndOffset.maxRenderHeight, totalScrollHeight);
+      // 如果正在快速滚动但接近底部，提前结束快速滚动
+      if (this.isFastScrolling && isNearBottom) {
+        this.endFastScrolling(sizeAndOffset);
+        return; // 让正常渲染逻辑接管
+      }
+      // 快速滚动判断条件：
+      // 1. 滚动距离超过阈值 && 滚动速度超过阈值
+      // 2. 当前未在快速滚动状态
+      // 3. 未接近底部边界
+      var isSignificantChange = deltaY > this.config.overscanSize * this.config.distanceMultiplier;
+      var isHighVelocity = this.state.scrollVelocity > this.config.velocityThreshold;
+      var shouldStartFastScroll = (isSignificantChange || isHighVelocity) && !this.isFastScrolling && !isNearBottom; // 接近底部时不启动快速滚动
+      if (shouldStartFastScroll) {
+        this.startFastScrolling(currentState, dataLength);
+      }
+      // 重置快速滚动结束定时器
+      if (this.isFastScrolling) {
+        this.resetFastScrollEndTimer(sizeAndOffset);
+      }
+      // 更新记录
+      this.state.lastOffsetY = sizeAndOffset.offsetY;
+      this.state.lastScrollTime = currentTime;
+    }
+    /**
+     * 开始快速滚动
+     */
+  }, {
+    key: "startFastScrolling",
+    value: function startFastScrolling(currentState, dataLength) {
+      this.isFastScrolling = true;
+      // 获取当前渲染范围作为缓存
+      var currentVerticalRange = this.callbacks.getCurrentRenderRange(currentState.offsetY, currentState.maxRenderHeight, dataLength);
+      // 通知外部开始快速滚动
+      this.callbacks.onFastScrollStart({
+        offsetY: currentState.offsetY,
+        maxRenderHeight: currentState.maxRenderHeight,
+        maxRenderWidth: currentState.maxRenderWidth,
+        verticalRenderRange: currentVerticalRange
+      });
+    }
+    /**
+     * 重置快速滚动结束定时器
+     */
+  }, {
+    key: "resetFastScrollEndTimer",
+    value: function resetFastScrollEndTimer(sizeAndOffset) {
+      var _this = this;
+      if (this.fastScrollEndTimer) {
+        clearTimeout(this.fastScrollEndTimer);
+      }
+      var waitTime = this.state.scrollVelocity > this.config.highVelocityThreshold ? this.config.fastScrollEndDelayHigh : this.config.fastScrollEndDelayNormal;
+      this.fastScrollEndTimer = window.setTimeout(function () {
+        _this.endFastScrolling(sizeAndOffset);
+      }, waitTime);
+    }
+    /**
+     * 结束快速滚动
+     */
+  }, {
+    key: "endFastScrolling",
+    value: function endFastScrolling(sizeAndOffset) {
+      this.isFastScrolling = false;
+      this.fastScrollEndTimer = undefined;
+      // 通知外部结束快速滚动
+      this.callbacks.onFastScrollEnd(sizeAndOffset);
+    }
+    /**
+     * 清理资源
+     */
+  }, {
+    key: "cleanup",
+    value: function cleanup() {
+      if (this.fastScrollEndTimer) {
+        clearTimeout(this.fastScrollEndTimer);
+      }
+    }
+    /**
+     * 获取当前是否处于快速滚动状态
+     */
+  }, {
+    key: "getIsFastScrolling",
+    value: function getIsFastScrolling() {
+      return this.isFastScrolling;
+    }
+    /**
+     * 获取当前滚动速度
+     */
+  }, {
+    key: "getScrollVelocity",
+    value: function getScrollVelocity() {
+      return this.state.scrollVelocity;
+    }
+    /**
+     * 清理资源
+     */
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (this.fastScrollEndTimer) {
+        clearTimeout(this.fastScrollEndTimer);
+        this.fastScrollEndTimer = undefined;
+      }
+      this.isFastScrolling = false;
+    }
+    /**
+     * 获取当前配置
+     */
+  }, {
+    key: "getConfig",
+    value: function getConfig() {
+      return _extends({}, this.config);
+    }
+  }]);
+  return FastScrollManager;
+}();

package/es/table/base/table.d.ts

@@ -23,6 +23,8 @@ export interface BaseTableProps {
     };
     /** 虚拟滚动开启情况下，表格中每一行的预估高度 */
     estimatedRowHeight?: number;
+    /** 性能差浏览器和处理器，性能差则启动快速滚动优化，默认为 false */
+    isLowPerformance?: boolean;
     /** @deprecated 表格头部是否置顶，默认为 true。请使用 isStickyHeader 代替 */
     isStickyHead?: boolean;
     /** 表格头部是否置顶，默认为 true */
@@ -107,6 +109,13 @@ export interface BaseTableState {
     offsetX: number;
     /** 横向虚拟滚动 最大渲染尺寸 */
     maxRenderWidth: number;
+    /** 快速滚动时保留的上一次渲染数据 */
+    previousRenderData?: {
+        offsetY: number;
+        maxRenderHeight: number;
+        maxRenderWidth: number;
+        verticalRenderRange: VerticalRenderRange;
+    };
 }
 export declare class BaseTable extends React.Component<BaseTableProps, BaseTableState> {
     static defaultProps: {
@@ -120,6 +129,7 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
         stickyScrollHeight: string;
         useVirtual: string;
         estimatedRowHeight: number;
+        isLowPerformance: boolean;
         isLoading: boolean;
         components: {};
         getTableProps: typeof noop;
@@ -137,6 +147,9 @@ export declare class BaseTable extends React.Component<BaseTableProps, BaseTable
     private hasScrollY;
     private resizeObserver?;
     private offsetY;
+    private fastScrollManager;
+    private topBlankRef;
+    private bottomBlankRef;
     /** @deprecated BaseTable.getDoms() 已经过时，请勿调用 */
     getDoms(): TableDOMHelper;
     constructor(props: Readonly<BaseTableProps>);