@sheinx/hooks 3.10.2-beta.4 → 3.10.2-beta.5

package/cjs/components/use-table/use-table-layout.d.ts

@@ -5,14 +5,13 @@ export interface UseTableLayoutProps extends Pick<BaseTableProps<any>, 'data' |
     theadRef: React.RefObject<HTMLElement>;
     tbodyRef: React.RefObject<HTMLElement>;
     scrollRef: React.RefObject<HTMLElement>;
+    tableElRef?: React.RefObject<HTMLElement>;
     isRtl?: boolean;
     scrolling?: boolean;
 }
 declare const useTableLayout: (props: UseTableLayoutProps) => {
     isScrollX: boolean;
     isScrollY: boolean;
-    floatLeft: boolean;
-    floatRight: boolean;
     scrollBarWidth: number;
     colgroup: (string | number | undefined)[];
     func: {
@@ -21,11 +20,13 @@ declare const useTableLayout: (props: UseTableLayoutProps) => {
         resizeCol: (index: any) => void;
         dragCol: (index: number, deltaX: number) => void;
         checkFloat: () => void;
+        scheduleCheckFloat: () => void;
     };
     width: string | number | undefined;
     shouldLastColAuto: boolean | undefined;
     scrollWidth: number;
     resizeFlag: number;
+    registerFloatClass: (left: string, right: string) => void;
 };
 export default useTableLayout;
 //# sourceMappingURL=use-table-layout.d.ts.map

package/cjs/components/use-table/use-table-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-table-layout.d.ts","sourceRoot":"","sources":["use-table-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAKlE,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA0CrE,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,cAAc,CAAC,GAAG,CAAC,EACnB,MAAM,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,OAAO,CAC7E;IACD,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,UAAW,mBAAmB;;;;;;;;;;;yBAiDX,MAAM,UAAU,MAAM;;;;;;;CAwS5D,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"use-table-layout.d.ts","sourceRoot":"","sources":["use-table-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAK3E,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA0CrE,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,cAAc,CAAC,GAAG,CAAC,EACnB,MAAM,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,OAAO,CAC7E;IACD,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,UAAW,mBAAmB;;;;;;;;;yBA8DX,MAAM,UAAU,MAAM;;;;;;;;+BA+TZ,MAAM,SAAS,MAAM;CAgBrE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/cjs/components/use-table/use-table-layout.js

@@ -72,6 +72,18 @@ var useTableLayout = function useTableLayout(props) {
     scrollRef = props.scrollRef;
   var preColumns = (0, _usePrevious.default)(props.columns);
   var preData = (0, _usePrevious.default)(props.data);
+
+  // 按需启用 floatLeft/floatRight：只有存在对应方向的固定列时才跟踪状态
+  var hasFixedLeft = (0, _react.useMemo)(function () {
+    return props.columns.some(function (col) {
+      return col.fixed === 'left';
+    });
+  }, [props.columns]);
+  var hasFixedRight = (0, _react.useMemo)(function () {
+    return props.columns.some(function (col) {
+      return col.fixed === 'right';
+    });
+  }, [props.columns]);
   var _useRef = (0, _react.useRef)({
       checkNum: 0,
       cachedWidth: null,
@@ -91,36 +103,33 @@ var useTableLayout = function useTableLayout(props) {
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     isScrollY = _React$useState6[0],
     setIsScrollY = _React$useState6[1];
-  var _React$useState7 = _react.default.useState(false),
+  // floatLeft/floatRight 改用 ref 跟踪，通过 DOM classList 直接切换，避免 setState 触发整棵树 re-render
+  var floatLeftRef = (0, _react.useRef)(false);
+  var floatRightRef = (0, _react.useRef)(false);
+  var floatClassRef = (0, _react.useRef)(null);
+  var checkFloatRafRef = (0, _react.useRef)(0);
+  var _React$useState7 = _react.default.useState(0),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
-    floatLeft = _React$useState8[0],
-    setFloatLeft = _React$useState8[1];
-  var _React$useState9 = _react.default.useState(false),
+    resizeFlag = _React$useState8[0],
+    setResizeFlag = _React$useState8[1];
+  var _React$useState9 = _react.default.useState(0),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
-    floatRight = _React$useState10[0],
-    setFloatRight = _React$useState10[1];
+    scrollBarWidth = _React$useState10[0],
+    setScrollBarWidth = _React$useState10[1];
   var _React$useState11 = _react.default.useState(0),
     _React$useState12 = _slicedToArray(_React$useState11, 2),
-    resizeFlag = _React$useState12[0],
-    setResizeFlag = _React$useState12[1];
-  var _React$useState13 = _react.default.useState(0),
-    _React$useState14 = _slicedToArray(_React$useState13, 2),
-    scrollBarWidth = _React$useState14[0],
-    setScrollBarWidth = _React$useState14[1];
-  var _React$useState15 = _react.default.useState(0),
-    _React$useState16 = _slicedToArray(_React$useState15, 2),
-    scrollWidth = _React$useState16[0],
-    setScrollWidth = _React$useState16[1];
-  var _React$useState17 = _react.default.useState(props.columns.map(function (v) {
+    scrollWidth = _React$useState12[0],
+    setScrollWidth = _React$useState12[1];
+  var _React$useState13 = _react.default.useState(props.columns.map(function (v) {
       return v.width;
     })),
-    _React$useState18 = _slicedToArray(_React$useState17, 2),
-    colgroup = _React$useState18[0],
-    setColgroup = _React$useState18[1];
-  var _React$useState19 = _react.default.useState(true),
-    _React$useState20 = _slicedToArray(_React$useState19, 2),
-    adjust = _React$useState20[0],
-    setAdjust = _React$useState20[1];
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    colgroup = _React$useState14[0],
+    setColgroup = _React$useState14[1];
+  var _React$useState15 = _react.default.useState(true),
+    _React$useState16 = _slicedToArray(_React$useState15, 2),
+    adjust = _React$useState16[0],
+    setAdjust = _React$useState16[1];
 
   // 检查滚动状态
   var checkScroll = (0, _usePersistFn.default)(function () {
@@ -327,6 +336,7 @@ var useTableLayout = function useTableLayout(props) {
     changeColGroup(newCols, false);
   });
   var checkFloat = (0, _usePersistFn.default)(function () {
+    var _props$tableElRef;
     var scrollEl = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
     if (!scrollEl || !(scrollEl !== null && scrollEl !== void 0 && scrollEl.offsetParent)) return;
     var max = scrollEl.scrollWidth - scrollEl.clientWidth;
@@ -335,11 +345,36 @@ var useTableLayout = function useTableLayout(props) {
     if (props.isRtl) {
       left = left * -1;
     }
-    var l = left > min;
-    // 缩放比例小于1时， 会出现小数， 导致判断错误
-    var r = max - left > 1;
-    if (l !== floatLeft) setFloatLeft(l);
-    if (r !== floatRight) setFloatRight(r);
+
+    // 直接操作 DOM classList，不触发 React re-render
+    var classes = floatClassRef.current;
+    var el = (_props$tableElRef = props.tableElRef) === null || _props$tableElRef === void 0 ? void 0 : _props$tableElRef.current;
+    if (!classes || !el) return;
+    if (hasFixedLeft) {
+      var l = left > min;
+      if (l !== floatLeftRef.current) {
+        floatLeftRef.current = l;
+        el.classList.toggle(classes.left, l);
+      }
+    }
+    if (hasFixedRight) {
+      // 缩放比例小于1时，会出现小数，导致判断错误
+      var r = max - left > 1;
+      if (r !== floatRightRef.current) {
+        floatRightRef.current = r;
+        el.classList.toggle(classes.right, r);
+      }
+    }
+  });
+
+  // rAF 节流版：高频滚动路径使用，一帧最多执行一次 checkFloat
+  var scheduleCheckFloat = (0, _usePersistFn.default)(function () {
+    if (!hasFixedLeft && !hasFixedRight) return;
+    if (checkFloatRafRef.current) return;
+    checkFloatRafRef.current = requestAnimationFrame(function () {
+      checkFloatRafRef.current = 0;
+      checkFloat();
+    });
   });
   var syncScrollWidth = (0, _usePersistFn.default)(function () {
     if (!scrollRef.current) return;
@@ -362,8 +397,18 @@ var useTableLayout = function useTableLayout(props) {
     resetColGroup: resetColGroup,
     resizeCol: resizeCol,
     dragCol: dragCol,
-    checkFloat: checkFloat
+    checkFloat: checkFloat,
+    scheduleCheckFloat: scheduleCheckFloat
   });
+
+  // 组件卸载时清理 rAF
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (checkFloatRafRef.current) {
+        cancelAnimationFrame(checkFloatRafRef.current);
+      }
+    };
+  }, []);
   (0, _react.useEffect)(function () {
     if (!colgroup) return;
     // columns 增加或者减少列， 或者宽度发生变化且和colgroup的宽度不一致时
@@ -441,18 +486,25 @@ var useTableLayout = function useTableLayout(props) {
   } else {
     tableWidth = undefined;
   }
+
+  // 注册 float class name，由 table.tsx 初始化时调用
+  var registerFloatClass = (0, _usePersistFn.default)(function (left, right) {
+    floatClassRef.current = {
+      left: left,
+      right: right
+    };
+  });
   return {
     isScrollX: !!isScrollX,
     isScrollY: !!isScrollY,
-    floatLeft: floatLeft,
-    floatRight: floatRight,
     scrollBarWidth: scrollBarWidth,
     colgroup: colgroup ? colgroup : [],
     func: func,
     width: tableWidth,
     shouldLastColAuto: props.columnResizable && !adjust,
     scrollWidth: scrollWidth,
-    resizeFlag: resizeFlag
+    resizeFlag: resizeFlag,
+    registerFloatClass: registerFloatClass
   };
 };
 var _default = exports.default = useTableLayout;

package/esm/components/use-table/use-table-layout.d.ts

@@ -5,14 +5,13 @@ export interface UseTableLayoutProps extends Pick<BaseTableProps<any>, 'data' |
     theadRef: React.RefObject<HTMLElement>;
     tbodyRef: React.RefObject<HTMLElement>;
     scrollRef: React.RefObject<HTMLElement>;
+    tableElRef?: React.RefObject<HTMLElement>;
     isRtl?: boolean;
     scrolling?: boolean;
 }
 declare const useTableLayout: (props: UseTableLayoutProps) => {
     isScrollX: boolean;
     isScrollY: boolean;
-    floatLeft: boolean;
-    floatRight: boolean;
     scrollBarWidth: number;
     colgroup: (string | number | undefined)[];
     func: {
@@ -21,11 +20,13 @@ declare const useTableLayout: (props: UseTableLayoutProps) => {
         resizeCol: (index: any) => void;
         dragCol: (index: number, deltaX: number) => void;
         checkFloat: () => void;
+        scheduleCheckFloat: () => void;
     };
     width: string | number | undefined;
     shouldLastColAuto: boolean | undefined;
     scrollWidth: number;
     resizeFlag: number;
+    registerFloatClass: (left: string, right: string) => void;
 };
 export default useTableLayout;
 //# sourceMappingURL=use-table-layout.d.ts.map

package/esm/components/use-table/use-table-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-table-layout.d.ts","sourceRoot":"","sources":["use-table-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAKlE,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA0CrE,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,cAAc,CAAC,GAAG,CAAC,EACnB,MAAM,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,OAAO,CAC7E;IACD,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,UAAW,mBAAmB;;;;;;;;;;;yBAiDX,MAAM,UAAU,MAAM;;;;;;;CAwS5D,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"use-table-layout.d.ts","sourceRoot":"","sources":["use-table-layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAK3E,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA0CrE,MAAM,WAAW,mBACf,SAAQ,IAAI,CACV,cAAc,CAAC,GAAG,CAAC,EACnB,MAAM,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,OAAO,CAC7E;IACD,OAAO,EAAE,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACvC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,UAAW,mBAAmB;;;;;;;;;yBA8DX,MAAM,UAAU,MAAM;;;;;;;;+BA+TZ,MAAM,SAAS,MAAM;CAgBrE,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/esm/components/use-table/use-table-layout.js

@@ -14,7 +14,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useEffect, useRef, useLayoutEffect } from 'react';
+import React, { useEffect, useMemo, useRef, useLayoutEffect } from 'react';
 import useLatestObj from "../../common/use-latest-obj";
 import usePersistFn from "../../common/use-persist-fn";
 import usePrevious from "../../common/use-previous";
@@ -63,6 +63,18 @@ var useTableLayout = function useTableLayout(props) {
     scrollRef = props.scrollRef;
   var preColumns = usePrevious(props.columns);
   var preData = usePrevious(props.data);
+
+  // 按需启用 floatLeft/floatRight：只有存在对应方向的固定列时才跟踪状态
+  var hasFixedLeft = useMemo(function () {
+    return props.columns.some(function (col) {
+      return col.fixed === 'left';
+    });
+  }, [props.columns]);
+  var hasFixedRight = useMemo(function () {
+    return props.columns.some(function (col) {
+      return col.fixed === 'right';
+    });
+  }, [props.columns]);
   var _useRef = useRef({
       checkNum: 0,
       cachedWidth: null,
@@ -82,36 +94,33 @@ var useTableLayout = function useTableLayout(props) {
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     isScrollY = _React$useState6[0],
     setIsScrollY = _React$useState6[1];
-  var _React$useState7 = React.useState(false),
+  // floatLeft/floatRight 改用 ref 跟踪，通过 DOM classList 直接切换，避免 setState 触发整棵树 re-render
+  var floatLeftRef = useRef(false);
+  var floatRightRef = useRef(false);
+  var floatClassRef = useRef(null);
+  var checkFloatRafRef = useRef(0);
+  var _React$useState7 = React.useState(0),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
-    floatLeft = _React$useState8[0],
-    setFloatLeft = _React$useState8[1];
-  var _React$useState9 = React.useState(false),
+    resizeFlag = _React$useState8[0],
+    setResizeFlag = _React$useState8[1];
+  var _React$useState9 = React.useState(0),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
-    floatRight = _React$useState10[0],
-    setFloatRight = _React$useState10[1];
+    scrollBarWidth = _React$useState10[0],
+    setScrollBarWidth = _React$useState10[1];
   var _React$useState11 = React.useState(0),
     _React$useState12 = _slicedToArray(_React$useState11, 2),
-    resizeFlag = _React$useState12[0],
-    setResizeFlag = _React$useState12[1];
-  var _React$useState13 = React.useState(0),
-    _React$useState14 = _slicedToArray(_React$useState13, 2),
-    scrollBarWidth = _React$useState14[0],
-    setScrollBarWidth = _React$useState14[1];
-  var _React$useState15 = React.useState(0),
-    _React$useState16 = _slicedToArray(_React$useState15, 2),
-    scrollWidth = _React$useState16[0],
-    setScrollWidth = _React$useState16[1];
-  var _React$useState17 = React.useState(props.columns.map(function (v) {
+    scrollWidth = _React$useState12[0],
+    setScrollWidth = _React$useState12[1];
+  var _React$useState13 = React.useState(props.columns.map(function (v) {
       return v.width;
     })),
-    _React$useState18 = _slicedToArray(_React$useState17, 2),
-    colgroup = _React$useState18[0],
-    setColgroup = _React$useState18[1];
-  var _React$useState19 = React.useState(true),
-    _React$useState20 = _slicedToArray(_React$useState19, 2),
-    adjust = _React$useState20[0],
-    setAdjust = _React$useState20[1];
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    colgroup = _React$useState14[0],
+    setColgroup = _React$useState14[1];
+  var _React$useState15 = React.useState(true),
+    _React$useState16 = _slicedToArray(_React$useState15, 2),
+    adjust = _React$useState16[0],
+    setAdjust = _React$useState16[1];
 
   // 检查滚动状态
   var checkScroll = usePersistFn(function () {
@@ -318,6 +327,7 @@ var useTableLayout = function useTableLayout(props) {
     changeColGroup(newCols, false);
   });
   var checkFloat = usePersistFn(function () {
+    var _props$tableElRef;
     var scrollEl = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
     if (!scrollEl || !(scrollEl !== null && scrollEl !== void 0 && scrollEl.offsetParent)) return;
     var max = scrollEl.scrollWidth - scrollEl.clientWidth;
@@ -326,11 +336,36 @@ var useTableLayout = function useTableLayout(props) {
     if (props.isRtl) {
       left = left * -1;
     }
-    var l = left > min;
-    // 缩放比例小于1时， 会出现小数， 导致判断错误
-    var r = max - left > 1;
-    if (l !== floatLeft) setFloatLeft(l);
-    if (r !== floatRight) setFloatRight(r);
+
+    // 直接操作 DOM classList，不触发 React re-render
+    var classes = floatClassRef.current;
+    var el = (_props$tableElRef = props.tableElRef) === null || _props$tableElRef === void 0 ? void 0 : _props$tableElRef.current;
+    if (!classes || !el) return;
+    if (hasFixedLeft) {
+      var l = left > min;
+      if (l !== floatLeftRef.current) {
+        floatLeftRef.current = l;
+        el.classList.toggle(classes.left, l);
+      }
+    }
+    if (hasFixedRight) {
+      // 缩放比例小于1时，会出现小数，导致判断错误
+      var r = max - left > 1;
+      if (r !== floatRightRef.current) {
+        floatRightRef.current = r;
+        el.classList.toggle(classes.right, r);
+      }
+    }
+  });
+
+  // rAF 节流版：高频滚动路径使用，一帧最多执行一次 checkFloat
+  var scheduleCheckFloat = usePersistFn(function () {
+    if (!hasFixedLeft && !hasFixedRight) return;
+    if (checkFloatRafRef.current) return;
+    checkFloatRafRef.current = requestAnimationFrame(function () {
+      checkFloatRafRef.current = 0;
+      checkFloat();
+    });
   });
   var syncScrollWidth = usePersistFn(function () {
     if (!scrollRef.current) return;
@@ -353,8 +388,18 @@ var useTableLayout = function useTableLayout(props) {
     resetColGroup: resetColGroup,
     resizeCol: resizeCol,
     dragCol: dragCol,
-    checkFloat: checkFloat
+    checkFloat: checkFloat,
+    scheduleCheckFloat: scheduleCheckFloat
   });
+
+  // 组件卸载时清理 rAF
+  useEffect(function () {
+    return function () {
+      if (checkFloatRafRef.current) {
+        cancelAnimationFrame(checkFloatRafRef.current);
+      }
+    };
+  }, []);
   useEffect(function () {
     if (!colgroup) return;
     // columns 增加或者减少列， 或者宽度发生变化且和colgroup的宽度不一致时
@@ -432,18 +477,25 @@ var useTableLayout = function useTableLayout(props) {
   } else {
     tableWidth = undefined;
   }
+
+  // 注册 float class name，由 table.tsx 初始化时调用
+  var registerFloatClass = usePersistFn(function (left, right) {
+    floatClassRef.current = {
+      left: left,
+      right: right
+    };
+  });
   return {
     isScrollX: !!isScrollX,
     isScrollY: !!isScrollY,
-    floatLeft: floatLeft,
-    floatRight: floatRight,
     scrollBarWidth: scrollBarWidth,
     colgroup: colgroup ? colgroup : [],
     func: func,
     width: tableWidth,
     shouldLastColAuto: props.columnResizable && !adjust,
     scrollWidth: scrollWidth,
-    resizeFlag: resizeFlag
+    resizeFlag: resizeFlag,
+    registerFloatClass: registerFloatClass
   };
 };
 export default useTableLayout;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sheinx/hooks",
-  "version": "3.10.2-beta.4",
+  "version": "3.10.2-beta.5",
   "description": "",
   "keywords": [],
   "license": "MIT",