shineout 3.10.2-beta.3 → 3.10.2-beta.5

package/cjs/index.js

@@ -545,5 +545,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.10.2-beta.3'
+  version: '3.10.2-beta.5'
 };

package/dist/shineout.js

@@ -13735,7 +13735,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.10.2-beta.3');
+/* harmony default export */ var version = ('3.10.2-beta.5');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -67541,6 +67541,18 @@ var useTableLayout = function useTableLayout(props) {
     scrollRef = props.scrollRef;
   var preColumns = use_previous(props.columns);
   var preData = use_previous(props.data);
+
+  // 按需启用 floatLeft/floatRight：只有存在对应方向的固定列时才跟踪状态
+  var hasFixedLeft = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
+    return props.columns.some(function (col) {
+      return col.fixed === 'left';
+    });
+  }, [props.columns]);
+  var hasFixedRight = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
+    return props.columns.some(function (col) {
+      return col.fixed === 'right';
+    });
+  }, [props.columns]);
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
       checkNum: 0,
       cachedWidth: null,
@@ -67560,36 +67572,33 @@ var useTableLayout = function useTableLayout(props) {
     _React$useState6 = slicedToArray_default()(_React$useState5, 2),
     isScrollY = _React$useState6[0],
     setIsScrollY = _React$useState6[1];
-  var _React$useState7 = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useState(false),
+  // floatLeft/floatRight 改用 ref 跟踪，通过 DOM classList 直接切换，避免 setState 触发整棵树 re-render
+  var floatLeftRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
+  var floatRightRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
+  var floatClassRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  var checkFloatRafRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(0);
+  var _React$useState7 = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useState(0),
     _React$useState8 = slicedToArray_default()(_React$useState7, 2),
-    floatLeft = _React$useState8[0],
-    setFloatLeft = _React$useState8[1];
-  var _React$useState9 = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useState(false),
+    resizeFlag = _React$useState8[0],
+    setResizeFlag = _React$useState8[1];
+  var _React$useState9 = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useState(0),
     _React$useState10 = slicedToArray_default()(_React$useState9, 2),
-    floatRight = _React$useState10[0],
-    setFloatRight = _React$useState10[1];
+    scrollBarWidth = _React$useState10[0],
+    setScrollBarWidth = _React$useState10[1];
   var _React$useState11 = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useState(0),
     _React$useState12 = slicedToArray_default()(_React$useState11, 2),
-    resizeFlag = _React$useState12[0],
-    setResizeFlag = _React$useState12[1];
-  var _React$useState13 = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useState(0),
-    _React$useState14 = slicedToArray_default()(_React$useState13, 2),
-    scrollBarWidth = _React$useState14[0],
-    setScrollBarWidth = _React$useState14[1];
-  var _React$useState15 = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useState(0),
-    _React$useState16 = slicedToArray_default()(_React$useState15, 2),
-    scrollWidth = _React$useState16[0],
-    setScrollWidth = _React$useState16[1];
-  var _React$useState17 = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useState(props.columns.map(function (v) {
+    scrollWidth = _React$useState12[0],
+    setScrollWidth = _React$useState12[1];
+  var _React$useState13 = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useState(props.columns.map(function (v) {
       return v.width;
     })),
-    _React$useState18 = slicedToArray_default()(_React$useState17, 2),
-    colgroup = _React$useState18[0],
-    setColgroup = _React$useState18[1];
-  var _React$useState19 = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useState(true),
-    _React$useState20 = slicedToArray_default()(_React$useState19, 2),
-    adjust = _React$useState20[0],
-    setAdjust = _React$useState20[1];
+    _React$useState14 = slicedToArray_default()(_React$useState13, 2),
+    colgroup = _React$useState14[0],
+    setColgroup = _React$useState14[1];
+  var _React$useState15 = external_root_React_commonjs2_react_commonjs_react_amd_react_default().useState(true),
+    _React$useState16 = slicedToArray_default()(_React$useState15, 2),
+    adjust = _React$useState16[0],
+    setAdjust = _React$useState16[1];
 
   // 检查滚动状态
   var checkScroll = use_persist_fn(function () {
@@ -67796,6 +67805,7 @@ var useTableLayout = function useTableLayout(props) {
     changeColGroup(newCols, false);
   });
   var checkFloat = use_persist_fn(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;
@@ -67804,11 +67814,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 = use_persist_fn(function () {
+    if (!hasFixedLeft && !hasFixedRight) return;
+    if (checkFloatRafRef.current) return;
+    checkFloatRafRef.current = requestAnimationFrame(function () {
+      checkFloatRafRef.current = 0;
+      checkFloat();
+    });
   });
   var syncScrollWidth = use_persist_fn(function () {
     if (!scrollRef.current) return;
@@ -67831,8 +67866,18 @@ var useTableLayout = function useTableLayout(props) {
     resetColGroup: resetColGroup,
     resizeCol: resizeCol,
     dragCol: dragCol,
-    checkFloat: checkFloat
+    checkFloat: checkFloat,
+    scheduleCheckFloat: scheduleCheckFloat
   });
+
+  // 组件卸载时清理 rAF
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    return function () {
+      if (checkFloatRafRef.current) {
+        cancelAnimationFrame(checkFloatRafRef.current);
+      }
+    };
+  }, []);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (!colgroup) return;
     // columns 增加或者减少列， 或者宽度发生变化且和colgroup的宽度不一致时
@@ -67910,18 +67955,25 @@ var useTableLayout = function useTableLayout(props) {
   } else {
     tableWidth = undefined;
   }
+
+  // 注册 float class name，由 table.tsx 初始化时调用
+  var registerFloatClass = use_persist_fn(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
   };
 };
 /* harmony default export */ var use_table_layout = (useTableLayout);
@@ -70681,6 +70733,7 @@ function Table(props) {
       theadRef: theadRef,
       tbodyRef: tbodyRef,
       scrollRef: scrollRef,
+      tableElRef: tableRef,
       columns: columns,
       data: props.data,
       dataChangeResize: !!props.dataChangeResize,
@@ -70694,13 +70747,15 @@ function Table(props) {
     colgroup = _useTableLayout.colgroup,
     isScrollY = _useTableLayout.isScrollY,
     isScrollX = _useTableLayout.isScrollX,
-    floatLeft = _useTableLayout.floatLeft,
-    floatRight = _useTableLayout.floatRight,
     width = _useTableLayout.width,
     shouldLastColAuto = _useTableLayout.shouldLastColAuto,
     scrollBarWidth = _useTableLayout.scrollBarWidth,
     scrollWidth = _useTableLayout.scrollWidth,
-    resizeFlag = _useTableLayout.resizeFlag;
+    resizeFlag = _useTableLayout.resizeFlag,
+    registerFloatClass = _useTableLayout.registerFloatClass;
+
+  // 注册 floatLeft/floatRight 的 CSS class 名，供 checkFloat 直接操作 DOM
+  registerFloatClass(tableClasses.floatLeft, tableClasses.floatRight);
   var _useTableFilter = use_table_filter({
       keygen: props.keygen,
       data: props.data,
@@ -70851,7 +70906,7 @@ function Table(props) {
   var handleBodyScroll = usePersistFn(function (e) {
     var target = e.currentTarget;
     if (!target) return;
-    layoutFunc.checkFloat();
+    layoutFunc.scheduleCheckFloat();
     if (isVirtualColumnEnabled) columnInfo.handleScroll({
       scrollLeft: target.scrollLeft
     });
@@ -70878,7 +70933,7 @@ function Table(props) {
   var handleVirtualScroll = usePersistFn(function (info) {
     virtualInfo.handleScroll(info);
     if (isVirtualColumnEnabled) columnInfo.handleScroll(info);
-    layoutFunc.checkFloat();
+    layoutFunc.scheduleCheckFloat();
     if (headMirrorScrollRef.current) {
       headMirrorScrollRef.current.scrollLeft = info.scrollLeft;
     }
@@ -71268,6 +71323,7 @@ function Table(props) {
   };
 
   // handle head and  foot scroll
+  // 使用 passive: true 监听 wheel，不调用 preventDefault，避免阻塞合成器线程（优化 INP）
   var handleHeaderWheel = usePersistFn(function (e) {
     var _theadRef$current2;
     var scrollEl = scrollRef.current;
@@ -71278,7 +71334,6 @@ function Table(props) {
     if (scrollLeft === scrollEl.scrollLeft) {
       return;
     }
-    e.preventDefault();
     var left = Math.min(Math.max(scrollLeft, 0), max);
     scrollEl.scrollLeft = left;
     theadRef.current.parentElement.scrollLeft = left;
@@ -71290,10 +71345,10 @@ function Table(props) {
     syncHeaderScroll(((_scrollRef$current10 = scrollRef.current) === null || _scrollRef$current10 === void 0 ? void 0 : _scrollRef$current10.scrollLeft) || 0);
   }, [isScrollX, props.sticky, $empty]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
-    // 绑定 wheel 事件
+    // 绑定 wheel 事件（passive: true 不阻塞合成器线程）
     if (props.sticky && theadRef.current && theadRef.current.parentElement) {
       theadRef.current.parentElement.addEventListener('wheel', handleHeaderWheel, {
-        passive: false
+        passive: true
       });
     }
     return function () {
@@ -71360,7 +71415,7 @@ function Table(props) {
   });
   return /*#__PURE__*/(0,jsx_runtime.jsxs)(jsx_runtime.Fragment, {
     children: [/*#__PURE__*/(0,jsx_runtime.jsx)("div", objectSpread2_default()(objectSpread2_default()({
-      className: classnames_default()(tableWrapperClass, defineProperty_default()(defineProperty_default()(defineProperty_default()({}, tableClasses.sticky, props.sticky), tableClasses.floatLeft, floatLeft), tableClasses.floatRight, floatRight)),
+      className: classnames_default()(tableWrapperClass, defineProperty_default()({}, tableClasses.sticky, props.sticky)),
       style: tableWrapperStyle
     }, selection.getTableProps()), {}, {
       ref: tableRef,
@@ -80080,7 +80135,7 @@ var watermark_interface = __webpack_require__(6640);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.10.2-beta.3'
+  version: '3.10.2-beta.5'
 });
 }();
 /******/ 	return __webpack_exports__;