shineout 3.10.3-beta.2 → 3.10.3-beta.3

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.3-beta.2'
+  version: '3.10.3-beta.3'
 };

package/dist/shineout.js

@@ -13736,7 +13736,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.3-beta.2');
+/* harmony default export */ var version = ('3.10.3-beta.3');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -67345,6 +67345,13 @@ function useScrollbarWidth() {
 
 
 
+
+// 逐列浅比较：业务常见写法 columns.map(c => ({ ...c })) 每次都会产生新对象，但内容（含 render 引用）不变
+var isColumnsShallowEqual = function isColumnsShallowEqual(a, b) {
+  return a.length === b.length && a.every(function (c, i) {
+    return shallow_equal(c, b[i]);
+  });
+};
 var getHideExpandCol = function getHideExpandCol() {
   var cols = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var expandCol = cols.find(function (col) {
@@ -67380,6 +67387,8 @@ var useColumns = function useColumns(props) {
   var _useRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)({
       cachedColumns: null,
       oldColumns: null,
+      oldShowCheckbox: undefined,
+      columnsSnapshot: null,
       groupLevel: 0,
       expandHideCol: null
     }),
@@ -67391,6 +67400,11 @@ var useColumns = function useColumns(props) {
     if (columnsA === context.oldColumns) {
       return context.cachedColumns;
     }
+    if (props.reuseEqualColumns && context.columnsSnapshot && context.cachedColumns && context.oldShowCheckbox === props.showCheckbox && isColumnsShallowEqual(columnsA, context.columnsSnapshot)) {
+      context.oldColumns = columnsA;
+      return context.cachedColumns;
+    }
+    context.oldShowCheckbox = props.showCheckbox;
     context.expandHideCol = getHideExpandCol(columnsA);
     var columns = columnsA.filter(function (c) {
       return typeof_default()(c) === 'object';
@@ -67426,6 +67440,10 @@ var useColumns = function useColumns(props) {
       });
     });
     context.oldColumns = columnsA;
+    // 与快照比较而非与旧数组比较：列对象被原地修改时旧数组里也是同一个对象，比较不出差异
+    context.columnsSnapshot = props.reuseEqualColumns ? columnsA.map(function (c) {
+      return c && typeof_default()(c) === 'object' ? objectSpread2_default()({}, c) : c;
+    }) : null;
     return context.cachedColumns;
   });
   var columns = getColumns(propsColumns) || [];
@@ -70044,10 +70062,10 @@ function Td(props) {
 
 var tr_toNum = toNum;
 var Tr = function Tr(props) {
-  var _props$jssStyle, _props$jssStyle$table, _jssStyle$input, _jssStyle$select, _jssStyle$datePicker, _jssStyle$treeSelect, _jssStyle$switch, _jssStyle$checkbox, _jssStyle$radio, _jssStyle$cascader, _props$rowClassName;
+  var _props$rowClassName;
   var treeFunc = props.treeFunc,
-    jssStyle = props.jssStyle;
-  var tableClasses = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 || (_props$jssStyle$table = _props$jssStyle.table) === null || _props$jssStyle$table === void 0 ? void 0 : _props$jssStyle$table.call(_props$jssStyle);
+    tableClasses = props.tableClasses,
+    preventClasses = props.preventClasses;
   var trRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var expandRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var config = useConfig();
@@ -70094,9 +70112,14 @@ var Tr = function Tr(props) {
     }
   });
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(setVirtualRowHeight, [props.expanded, props.rowIndex, props.bodyScrollWidth, props.resizeFlag]);
+
+  // 行高只在虚拟列表下需要上报（setRowHeight 仅由虚拟列表传入），
+  // 非虚拟场景（sticky-only / 普通表格）不再为每一行创建 ResizeObserver，
+  // 避免数据切换时批量 observe/disconnect 以及 RO 首次回调带来的布局读取（计入 INP presentation delay）
+  var shouldObserveRowHeight = !!props.setRowHeight && !props.strictRowHeight;
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     // 祖先元素不可见时（display: none）
-    if (props.strictRowHeight || !trRef.current || !trRef.current.offsetParent) return;
+    if (!shouldObserveRowHeight || !trRef.current || !trRef.current.offsetParent) return;
     var cancelObserver = addResizeObserver(trRef.current, setVirtualRowHeight, {
       direction: 'y',
       lazy: true
@@ -70104,7 +70127,7 @@ var Tr = function Tr(props) {
     return function () {
       cancelObserver();
     };
-  }, []);
+  }, [shouldObserveRowHeight]);
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState2 = slicedToArray_default()(_useState, 2),
     isExpandLoading = _useState2[0],
@@ -70352,7 +70375,6 @@ var Tr = function Tr(props) {
       }
     }
   };
-  var preventClasses = [jssStyle === null || jssStyle === void 0 || (_jssStyle$input = jssStyle.input) === null || _jssStyle$input === void 0 ? void 0 : _jssStyle$input.call(jssStyle).wrapper, jssStyle === null || jssStyle === void 0 || (_jssStyle$select = jssStyle.select) === null || _jssStyle$select === void 0 ? void 0 : _jssStyle$select.call(jssStyle).wrapper, jssStyle === null || jssStyle === void 0 || (_jssStyle$datePicker = jssStyle.datePicker) === null || _jssStyle$datePicker === void 0 ? void 0 : _jssStyle$datePicker.call(jssStyle).wrapper, jssStyle === null || jssStyle === void 0 || (_jssStyle$treeSelect = jssStyle.treeSelect) === null || _jssStyle$treeSelect === void 0 ? void 0 : _jssStyle$treeSelect.call(jssStyle).wrapper, jssStyle === null || jssStyle === void 0 || (_jssStyle$switch = jssStyle.switch) === null || _jssStyle$switch === void 0 ? void 0 : _jssStyle$switch.call(jssStyle).wrapper, jssStyle === null || jssStyle === void 0 || (_jssStyle$checkbox = jssStyle.checkbox) === null || _jssStyle$checkbox === void 0 ? void 0 : _jssStyle$checkbox.call(jssStyle).wrapper, jssStyle === null || jssStyle === void 0 || (_jssStyle$radio = jssStyle.radio) === null || _jssStyle$radio === void 0 ? void 0 : _jssStyle$radio.call(jssStyle).wrapper, jssStyle === null || jssStyle === void 0 || (_jssStyle$cascader = jssStyle.cascader) === null || _jssStyle$cascader === void 0 ? void 0 : _jssStyle$cascader.call(jssStyle).wrapper];
   var isNotExpandableElement = function isNotExpandableElement(el) {
     var tagName = el.tagName;
     if (tagName === 'TD' || tagName === 'TR') return false;
@@ -70445,13 +70467,48 @@ var Tr = function Tr(props) {
     })), renderExpand()]
   });
 };
-/* harmony default export */ var tr = (Tr);
+
+// 行级 memo（rowMemo）比较时跳过的 props：
+// - datum / treeFunc / handleCellHover / handleExpandClick：内部方法均为 usePersistFn，引用变化不影响渲染结果
+//   （选中、禁用、展开状态已经以 isSelect / disabled / expanded / treeExpandLevel 的形式单独下发）
+// - row / hoverIndex / 语义化样式：引用每次都可能变化，下面按内容单独比较
+// - treeExpandLevel：随 data 每次重建，非树形表格不会读取；树形表格下单独按引用比较
+var MEMO_SKIP_KEYS = ['datum', 'treeFunc', 'handleCellHover', 'handleExpandClick', 'row', 'hoverIndex', 'bodyRowSemStyle', 'bodyCellSemStyle', 'treeExpandLevel'];
+
+// rowData 在 data 变化时会整体重算（如懒加载追加数据），按单元格内容比较，避免未变化的行被连带重渲染
+var isSameRowCells = function isSameRowCells(prev, next) {
+  if (prev === next) return true;
+  if (prev.length !== next.length) return false;
+  return prev.every(function (cell, i) {
+    var nextCell = next[i];
+    if (!cell || !nextCell) return cell === nextCell;
+    return cell.data === nextCell.data && cell.colSpan === nextCell.colSpan && cell.rowSpan === nextCell.rowSpan;
+  });
+};
+var isSameHover = function isSameHover(prev, next) {
+  if (prev.hoverIndex === next.hoverIndex || !next.hover) return true;
+  // 存在跨行单元格时 hover 态取决于后续行，保守处理为需要更新
+  if (next.row.some(function (cell) {
+    return cell && cell.rowSpan > 1;
+  })) return false;
+  return prev.hoverIndex.has(prev.rowIndex) === next.hoverIndex.has(next.rowIndex);
+};
+
+// 未开启 rowMemo 时始终返回 false，行为与不做 memo 完全一致
+var isTrPropsEqual = function isTrPropsEqual(prev, next) {
+  if (!prev.rowMemo || !next.rowMemo) return false;
+  return shallow_equal_shallowEqual(prev, next, {
+    skip: MEMO_SKIP_KEYS
+  }) && (!next.treeColumnsName || prev.treeExpandLevel === next.treeExpandLevel) && isSameRowCells(prev.row, next.row) && isSameHover(prev, next) && shallow_equal_shallowEqual(prev.bodyRowSemStyle, next.bodyRowSemStyle) && shallow_equal_shallowEqual(prev.bodyCellSemStyle, next.bodyCellSemStyle);
+};
+/* harmony default export */ var tr = (/*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().memo(Tr, isTrPropsEqual));
 ;// CONCATENATED MODULE: ../base/src/table/tbody.tsx
 
 
 
 
 /* harmony default export */ var tbody = (function (props) {
+  var _jssStyle$table, _jssStyle$input, _jssStyle$select, _jssStyle$datePicker, _jssStyle$treeSelect, _jssStyle$switch, _jssStyle$checkbox, _jssStyle$radio, _jssStyle$cascader;
   var _props$columns = props.columns,
     columns = _props$columns === void 0 ? [] : _props$columns,
     _props$currentRowInde = props.currentRowIndex,
@@ -70481,6 +70538,23 @@ var Tr = function Tr(props) {
   var expandCol = props.expandHideCol || columns.find(function (col) {
     return col.type === 'expand' || col.type === 'row-expand';
   });
+
+  // 样式 hook 在 Tbody 统一调用一次再下发给 Tr，
+  // 避免每一行都执行 9 次 react-jss useStyles（每次都带 useLayoutEffect/useEffect），行数多时开销明显
+  var jssStyle = props.jssStyle;
+  var tableClasses = jssStyle === null || jssStyle === void 0 || (_jssStyle$table = jssStyle.table) === null || _jssStyle$table === void 0 ? void 0 : _jssStyle$table.call(jssStyle);
+  var inputWrapper = jssStyle === null || jssStyle === void 0 || (_jssStyle$input = jssStyle.input) === null || _jssStyle$input === void 0 ? void 0 : _jssStyle$input.call(jssStyle).wrapper;
+  var selectWrapper = jssStyle === null || jssStyle === void 0 || (_jssStyle$select = jssStyle.select) === null || _jssStyle$select === void 0 ? void 0 : _jssStyle$select.call(jssStyle).wrapper;
+  var datePickerWrapper = jssStyle === null || jssStyle === void 0 || (_jssStyle$datePicker = jssStyle.datePicker) === null || _jssStyle$datePicker === void 0 ? void 0 : _jssStyle$datePicker.call(jssStyle).wrapper;
+  var treeSelectWrapper = jssStyle === null || jssStyle === void 0 || (_jssStyle$treeSelect = jssStyle.treeSelect) === null || _jssStyle$treeSelect === void 0 ? void 0 : _jssStyle$treeSelect.call(jssStyle).wrapper;
+  var switchWrapper = jssStyle === null || jssStyle === void 0 || (_jssStyle$switch = jssStyle.switch) === null || _jssStyle$switch === void 0 ? void 0 : _jssStyle$switch.call(jssStyle).wrapper;
+  var checkboxWrapper = jssStyle === null || jssStyle === void 0 || (_jssStyle$checkbox = jssStyle.checkbox) === null || _jssStyle$checkbox === void 0 ? void 0 : _jssStyle$checkbox.call(jssStyle).wrapper;
+  var radioWrapper = jssStyle === null || jssStyle === void 0 || (_jssStyle$radio = jssStyle.radio) === null || _jssStyle$radio === void 0 ? void 0 : _jssStyle$radio.call(jssStyle).wrapper;
+  var cascaderWrapper = jssStyle === null || jssStyle === void 0 || (_jssStyle$cascader = jssStyle.cascader) === null || _jssStyle$cascader === void 0 ? void 0 : _jssStyle$cascader.call(jssStyle).wrapper;
+  // 行点击时用于判断点击目标是否为表单控件（不触发 onRowClick / 行展开）
+  var preventClasses = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
+    return [inputWrapper, selectWrapper, datePickerWrapper, treeSelectWrapper, switchWrapper, checkboxWrapper, radioWrapper, cascaderWrapper];
+  }, [inputWrapper, selectWrapper, datePickerWrapper, treeSelectWrapper, switchWrapper, checkboxWrapper, radioWrapper, cascaderWrapper]);
   var renderRow = function renderRow(item, index) {
     var _props$rowEvents;
     var rowIndex = index + currentRowIndex;
@@ -70492,6 +70566,8 @@ var Tr = function Tr(props) {
       columns: columns,
       isScrollX: props.isScrollX,
       jssStyle: props.jssStyle,
+      tableClasses: tableClasses,
+      preventClasses: preventClasses,
       colgroup: props.colgroup,
       rowClassName: props.rowClassName,
       rawData: item,
@@ -70529,6 +70605,7 @@ var Tr = function Tr(props) {
       virtual: props.virtual,
       scrolling: props.scrolling,
       strictRowHeight: props.strictRowHeight,
+      rowMemo: props.rowMemo,
       bodyRowSemClass: props.bodyRowSemClass,
       bodyRowSemStyle: props.bodyRowSemStyle,
       bodyCellSemClass: props.bodyCellSemClass,
@@ -70694,9 +70771,6 @@ var table_excluded = ["data"];
 
 var table_devUseWarning = devUseWarning;
 var table_emptyArr = [];
-var emptyRef = {
-  current: null
-};
 function Table(props) {
   var _props$jssStyle, _props$jssStyle$table, _columns$find;
   var _props$verticalAlign = props.verticalAlign,
@@ -70773,13 +70847,6 @@ function Table(props) {
     setScrollAble(isScrollAble);
   }, [virtual]);
 
-  // TODO: 没用的tbodyHeight，有空移除了
-  // 虚拟列表高度另外计算
-  var _useResize = useResize({
-      targetRef: virtual ? emptyRef : tbodyRef
-    }),
-    tbodyHeight = _useResize.height;
-
   // default height
   var defaultHeight = virtual && !props.height && !props.virtualScrollContainer ? '100%' : props.height;
   var selection = use_table_select({
@@ -70797,7 +70864,8 @@ function Table(props) {
       data: props.data,
       virtualColumn: props.virtualColumn,
       scrollRef: scrollRef,
-      showCheckbox: typeof props.onRowSelect === 'function'
+      showCheckbox: typeof props.onRowSelect === 'function',
+      reuseEqualColumns: !!props.rowMemo
     }),
     columns = _useTableColumns.columns,
     expandHideCol = _useTableColumns.expandHideCol,
@@ -71095,6 +71163,7 @@ function Table(props) {
       treeCheckAll: props.treeCheckAll,
       onCellClick: props.onCellClick,
       strictRowHeight: props.strictRowHeight,
+      rowMemo: props.rowMemo,
       scrollRef: scrollRef,
       bodyRowSemClass: semClass('bodyRow'),
       bodyRowSemStyle: semStyle('bodyRow'),
@@ -71329,8 +71398,11 @@ function Table(props) {
             flex: 1
           },
           wrapperRef: scrollRef,
-          scrollWidth: width || 1,
-          scrollHeight: virtual ? virtualInfo.scrollHeight : tbodyHeight,
+          scrollWidth: width || 1
+          // 非虚拟时只有空数据会走到 Scroll，此时 isEmpty 会把 paddingTop 置 0，scrollHeight 不生效；
+          // 原先这里对 tbody 做 useResize 监听，tbody 尺寸变化后会额外触发整表重渲染，已移除
+          ,
+          scrollHeight: virtual ? virtualInfo.scrollHeight : 0,
           onScroll: handleVirtualScroll,
           defaultHeight: context.emptyHeight,
           isScrollY: isScrollY,
@@ -80212,7 +80284,7 @@ var watermark_interface = __webpack_require__(6640);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.10.3-beta.2'
+  version: '3.10.3-beta.3'
 });
 }();
 /******/ 	return __webpack_exports__;