shineout 3.10.3-beta.4 → 3.10.3-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.3-beta.4'
+  version: '3.10.3-beta.5'
 };

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.4');
+/* harmony default export */ var version = ('3.10.3-beta.5');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -46691,7 +46691,8 @@ var useListSelectMultiple = function useListSelectMultiple(props) {
 
   // TODO: Object.values(props) 作为 deps 是反模式，value/prediction 等变化都会使 datum 引用失效。
   // 精确依赖应为 [props.data]（方法均为 usePersistFn，引用稳定）。
-  // 待 Tbody/Tr 加 React.memo 后一起改，届时 datum 引用稳定才能真正减少 re-render。
+  // 注意：Table 开启 rowMemo 时 Tbody 会做 memo，非受控勾选时 Table 的 props 不变，
+  // 行的勾选状态只能靠 datum 引用变化刷新。收窄 deps 前需要先给 Tbody 提供其他刷新依据（如 value）。
   var func = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
     return {
       add: add,
@@ -58315,7 +58316,8 @@ var useListSelect = function useListSelect(props) {
   });
 
   // TODO: Object.values(props) 作为 deps 是反模式。精确依赖应为 [datum, multiple]。
-  // 待 Tbody/Tr 加 React.memo 后一起改。
+  // 注意：Table 开启 rowMemo 时 Tbody 会做 memo，非受控勾选时行的勾选状态只能靠 result 引用变化刷新，
+  // 收窄 deps 前需要先给 Tbody 提供其他刷新依据（见 use-list-select-multiple）。
   var result = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
     if (!multiple) {
       return objectSpread2_default()(objectSpread2_default()({}, datum), {}, {
@@ -70048,6 +70050,65 @@ function Td(props) {
     children: renderContent(props.col, props.data)
   }, col.key);
 }
+;// CONCATENATED MODULE: ../base/src/table/fixed-style.ts
+
+
+var fixed_style_toNum = toNum;
+
+// 表体固定列的 sticky 偏移以 CSS 变量的形式写在 tbody 所在的 table 上，单元格只引用变量。
+// 列宽测量、横向滚动状态变化时只需更新 table 的 style，单元格的 style 不变，行无需重渲染。
+// 每个 Table 都会在自己的 table 上重新声明变量，嵌套表格不会继承到外层的值。
+// position: sticky 必须内联：样式中 `table td { position: relative }` 的优先级高于 cellFixedRight 类名。
+// 未出现横向滚动时偏移为 auto，sticky 不会吸附，效果与原先不输出固定样式一致。
+var getLeftVar = function getLeftVar(index) {
+  return "--soui-table-fixed-left-".concat(index);
+};
+// right 偏移取决于单元格的结束列（index + colSpan），按结束列声明
+var getRightVar = function getRightVar(end) {
+  return "--soui-table-fixed-right-".concat(end);
+};
+var cellStyleCache = new Map();
+var getCellFixedStyle = function getCellFixedStyle(fixed, index, colSpan, columnCount, isRtl) {
+  if (fixed !== 'left' && fixed !== 'right') return undefined;
+  var end = Math.min(index + (colSpan || 1), columnCount);
+  var varName = fixed === 'left' ? getLeftVar(index) : getRightVar(end);
+  var key = "".concat(varName, "-").concat(isRtl ? 'rtl' : 'ltr');
+  var style = cellStyleCache.get(key);
+  if (!style) {
+    var side = fixed === 'left' !== isRtl ? 'left' : 'right';
+    style = defineProperty_default()({
+      position: 'sticky'
+    }, side, "var(".concat(varName, ")"));
+    cellStyleCache.set(key, style);
+  }
+  return style;
+};
+var getFixedVarsStyle = function getFixedVarsStyle(columns, colgroup, isScrollX) {
+  var rightStart = -1;
+  var leftIndexes = [];
+  columns.forEach(function (col) {
+    if (col.fixed === 'left') leftIndexes.push(col.index);
+    if (col.fixed === 'right' && (rightStart === -1 || col.index < rightStart)) {
+      rightStart = col.index;
+    }
+  });
+  if (!leftIndexes.length && rightStart === -1) return undefined;
+  var style = {};
+  var sum = function sum(start, end) {
+    return colgroup.slice(start, end).reduce(function (a, b) {
+      return a + fixed_style_toNum(b);
+    }, 0);
+  };
+  leftIndexes.forEach(function (index) {
+    style[getLeftVar(index)] = isScrollX ? "".concat(sum(0, index), "px") : 'auto';
+  });
+  if (rightStart > -1) {
+    for (var end = rightStart + 1; end <= columns.length; end++) {
+      style[getRightVar(end)] = isScrollX ? "".concat(sum(end, colgroup.length), "px") : 'auto';
+    }
+  }
+  return style;
+};
 ;// CONCATENATED MODULE: ../base/src/table/tr.tsx
 
 
@@ -70067,8 +70128,6 @@ function Td(props) {
 
 
 
-
-var tr_toNum = toNum;
 var Tr = function Tr(props) {
   var _props$rowClassName;
   var treeFunc = props.treeFunc,
@@ -70078,29 +70137,9 @@ var Tr = function Tr(props) {
   var expandRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var config = useConfig();
   var isRtl = config.direction === 'rtl';
-  var getFixedStyle = function getFixedStyle(fixed, index, colSpan) {
-    if (!props.isScrollX) return;
-    if (fixed === 'left') {
-      var left = props.colgroup.slice(0, index).reduce(function (a, b) {
-        return tr_toNum(a) + tr_toNum(b);
-      }, 0);
-      return defineProperty_default()({
-        position: 'sticky'
-      }, isRtl ? 'right' : 'left', left);
-    }
-    if (fixed === 'right') {
-      var right = props.colgroup.slice(index + colSpan).reduce(function (a, b) {
-        return tr_toNum(a) + tr_toNum(b);
-      }, 0);
-      return defineProperty_default()({
-        position: 'sticky'
-      }, isRtl ? 'left' : 'right', right);
-    }
-    return undefined;
-  };
   var getTdStyle = function getTdStyle(column, colSpan) {
-    var index = column.index;
-    var fixedStyle = getFixedStyle(column.fixed, index, colSpan);
+    // 固定列偏移引用 table 上的 CSS 变量，列宽/横向滚动状态变化时行无需重渲染
+    var fixedStyle = getCellFixedStyle(column.fixed, column.index, colSpan, props.columns.length, isRtl);
     if (!fixedStyle && !column.style) return;
     return objectSpread2_default()(objectSpread2_default()({}, column.style), fixedStyle);
   };
@@ -70140,40 +70179,23 @@ var Tr = function Tr(props) {
     _useState2 = slicedToArray_default()(_useState, 2),
     isExpandLoading = _useState2[0],
     setIsExpandLoading = _useState2[1];
-  var innerExpandClick = usePersistFn( /*#__PURE__*/function () {
-    var _ref3 = asyncToGenerator_default()( /*#__PURE__*/regeneratorRuntime_default()().mark(function _callee(showLoader) {
-      return regeneratorRuntime_default()().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (!(showLoader && props.loader && typeof props.loader === 'function')) {
-              _context.next = 11;
-              break;
-            }
-            setIsExpandLoading(true);
-            _context.prev = 2;
-            _context.next = 5;
-            return props.loader(props.rawData, props.rowIndex);
-          case 5:
-            treeFunc.handleTreeExpand(props.rawData, props.rowIndex);
-          case 6:
-            _context.prev = 6;
-            setIsExpandLoading(false);
-            return _context.finish(6);
-          case 9:
-            _context.next = 12;
-            break;
-          case 11:
-            treeFunc.handleTreeExpand(props.rawData, props.rowIndex);
-          case 12:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[2,, 6, 9]]);
-    }));
-    return function (_x) {
-      return _ref3.apply(this, arguments);
-    };
-  }());
+
+  // 不使用 async 函数：编译产物会在每次渲染时为每一行创建 regenerator 状态机，大数据量下开销可观
+  var innerExpandClick = usePersistFn(function (showLoader) {
+    var loader = props.loader;
+    if (showLoader && loader && typeof loader === 'function') {
+      setIsExpandLoading(true);
+      // new Promise 包裹：loader 同步抛错或返回非 Promise 时，与原 await 写法行为一致
+      return new Promise(function (resolve) {
+        resolve(loader(props.rawData, props.rowIndex));
+      }).then(function () {
+        treeFunc.handleTreeExpand(props.rawData, props.rowIndex);
+      }).finally(function () {
+        setIsExpandLoading(false);
+      });
+    }
+    treeFunc.handleTreeExpand(props.rawData, props.rowIndex);
+  });
   var renderTreeExpand = function renderTreeExpand(content) {
     var treeIndent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 22;
     var level = props.treeExpandLevel.get(props.originKey) || 0;
@@ -70515,7 +70537,19 @@ var isTrPropsEqual = function isTrPropsEqual(prev, next) {
 
 
 
-/* harmony default export */ var tbody = (function (props) {
+var hasExpandColumn = function hasExpandColumn(props) {
+  return !!props.expandHideCol || (props.columns || []).some(function (col) {
+    return col.type === 'expand' || col.type === 'row-expand';
+  });
+};
+
+// bodyScrollWidth / resizeFlag 在行内只用于虚拟列表上报行高；
+// 展开行渲染时会读取容器宽度下发给嵌套表格，有展开列时也需要随之重渲染。
+// 其余场景不再下发，Table 布局状态变化时 Tbody / Tr 都可以跳过渲染
+var needLayoutProps = function needLayoutProps(props) {
+  return !!props.virtual || hasExpandColumn(props);
+};
+var Tbody = function Tbody(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,
@@ -70524,6 +70558,7 @@ var isTrPropsEqual = function isTrPropsEqual(prev, next) {
     currentColIndex = props.currentColIndex,
     _props$hover = props.hover,
     hover = _props$hover === void 0 ? true : _props$hover;
+  var passLayout = needLayoutProps(props);
   var _useTableExpand = use_table_expand({
       columns: props.columns,
       expandKeys: props.expandKeys,
@@ -70572,11 +70607,9 @@ var isTrPropsEqual = function isTrPropsEqual(prev, next) {
       originKey: originKey,
       row: rowData[index],
       columns: columns,
-      isScrollX: props.isScrollX,
       jssStyle: props.jssStyle,
       tableClasses: tableClasses,
       preventClasses: preventClasses,
-      colgroup: props.colgroup,
       rowClassName: props.rowClassName,
       rawData: item,
       rowIndex: rowIndex,
@@ -70605,9 +70638,9 @@ var isTrPropsEqual = function isTrPropsEqual(prev, next) {
       onRowClick: props.onRowClick,
       rowEvents: props.rowEvents,
       disabled: props.datum.disabledCheck(item),
-      bodyScrollWidth: props.bodyScrollWidth,
+      bodyScrollWidth: passLayout ? props.bodyScrollWidth : undefined,
       scrollRef: props.scrollRef,
-      resizeFlag: props.resizeFlag,
+      resizeFlag: passLayout ? props.resizeFlag : undefined,
       treeCheckAll: props.treeCheckAll,
       onCellClick: props.onCellClick,
       virtual: props.virtual,
@@ -70625,17 +70658,32 @@ var isTrPropsEqual = function isTrPropsEqual(prev, next) {
       return renderRow(item, index);
     })
   });
-  if (props.virtual === 'lazy') {
-    return useComponentMemo(function () {
-      return $tbody;
-    }, [currentRowIndex, currentColIndex, props.data], function (prev, next) {
-      return prev.some(function (_, index) {
-        return !shallow_equal_shallowEqual(prev === null || prev === void 0 ? void 0 : prev[index], next === null || next === void 0 ? void 0 : next[index]);
-      }) || !props.scrolling;
-    });
-  }
-  return $tbody;
-});
+
+  // 未传 shouldUpdate 时直接返回最新结果，非 lazy 模式下行为与不做缓存一致
+  return useComponentMemo(function () {
+    return $tbody;
+  }, [currentRowIndex, currentColIndex, props.data], props.virtual === 'lazy' ? function (prev, next) {
+    return prev.some(function (_, index) {
+      return !shallow_equal_shallowEqual(prev === null || prev === void 0 ? void 0 : prev[index], next === null || next === void 0 ? void 0 : next[index]);
+    }) || !props.scrolling;
+  } : undefined);
+};
+
+// 语义化样式每次渲染都会生成新对象，按内容比较
+var SEM_STYLE_KEYS = ['bodyRowSemStyle', 'bodyCellSemStyle'];
+var LAYOUT_KEYS = ['bodyScrollWidth', 'resizeFlag'];
+
+// 仅在开启 rowMemo 时生效，未开启时始终返回 false，行为与不做 memo 完全一致。
+// rowMemo 下 Tbody 的 props 不变时，下发给每一行的 props 也不变，行本来就会被 Tr 的 memo 跳过；
+// 在 Tbody 这层直接跳过，省去 Table 自身布局状态（列宽测量、横向滚动、滚动阴影等）变化时逐行生成元素和比较 props 的开销
+var isTbodyPropsEqual = function isTbodyPropsEqual(prev, next) {
+  if (!prev.rowMemo || !next.rowMemo) return false;
+  var skip = needLayoutProps(next) ? SEM_STYLE_KEYS : [].concat(SEM_STYLE_KEYS, LAYOUT_KEYS);
+  return shallow_equal_shallowEqual(prev, next, {
+    skip: skip
+  }) && shallow_equal_shallowEqual(prev.bodyRowSemStyle, next.bodyRowSemStyle) && shallow_equal_shallowEqual(prev.bodyCellSemStyle, next.bodyCellSemStyle);
+};
+/* harmony default export */ var tbody = (/*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().memo(Tbody, isTbodyPropsEqual));
 ;// CONCATENATED MODULE: ../base/src/table/tfoot.tsx
 
 
@@ -70776,6 +70824,7 @@ var table_excluded = ["data"];
 
 
 
+
 
 var table_devUseWarning = devUseWarning;
 var table_emptyArr = [];
@@ -71132,6 +71181,10 @@ function Table(props) {
       tableLayout: 'fixed'
     };
   }, [width]);
+  // 表体所在的 table 额外声明固定列偏移的 CSS 变量，单元格只引用变量
+  var bodyTableStyle = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(function () {
+    return objectSpread2_default()(objectSpread2_default()({}, tableStyle), getFixedVarsStyle(columns, colgroup, isScrollX));
+  }, [tableStyle, columns, colgroup, isScrollX]);
   var renderTable = function renderTable() {
     var _props$summary, _sticky$top, _props$data2;
     var Group = /*#__PURE__*/(0,jsx_runtime.jsx)(table_colgroup, {
@@ -71149,8 +71202,6 @@ function Table(props) {
       data: treeData,
       treeExpandLevel: treeExpandLevel,
       treeFunc: treeFunc,
-      colgroup: colgroup,
-      isScrollX: isScrollX,
       expandHideCol: expandHideCol,
       keygen: props.keygen,
       rowClassName: props.rowClassName,
@@ -71358,7 +71409,7 @@ function Table(props) {
               },
               children: $headTable
             }), !!((_props$data3 = props.data) !== null && _props$data3 !== void 0 && _props$data3.length) && /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
-              style: objectSpread2_default()(objectSpread2_default()({}, tableStyle), {}, {
+              style: objectSpread2_default()(objectSpread2_default()({}, bodyTableStyle), {}, {
                 transform: virtualInfo.translateStyle
               }),
               ref: tbodyRef,
@@ -71388,7 +71439,7 @@ function Table(props) {
             className: tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.bodyWrapper,
             onScroll: handleBodyScroll,
             children: /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
-              style: tableStyle,
+              style: bodyTableStyle,
               ref: tbodyRef,
               children: [Group, /*#__PURE__*/(0,jsx_runtime.jsx)(tbody, objectSpread2_default()({}, bodyCommonProps)), showFoot && /*#__PURE__*/(0,jsx_runtime.jsx)(tfoot, objectSpread2_default()({}, footCommonProps))]
             })
@@ -71419,7 +71470,7 @@ function Table(props) {
           tableRef: tableRef,
           setFakeVirtual: scrollAble ? undefined : setFakeVirtual,
           children: [!props.hideHeader && !props.sticky && $headTable, !!((_props$data5 = props.data) !== null && _props$data5 !== void 0 && _props$data5.length) && /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
-            style: objectSpread2_default()(objectSpread2_default()({}, tableStyle), {}, {
+            style: objectSpread2_default()(objectSpread2_default()({}, bodyTableStyle), {}, {
               transform: virtualInfo.translateStyle
             }),
             ref: tbodyRef,
@@ -71450,7 +71501,7 @@ function Table(props) {
         className: tableClasses === null || tableClasses === void 0 ? void 0 : tableClasses.bodyWrapper,
         onScroll: handleBodyScroll,
         children: /*#__PURE__*/(0,jsx_runtime.jsxs)("table", {
-          style: objectSpread2_default()({}, tableStyle),
+          style: bodyTableStyle,
           ref: tbodyRef,
           children: [Group, !props.hideHeader && /*#__PURE__*/(0,jsx_runtime.jsx)(thead, objectSpread2_default()({}, headCommonProps)), bodyCommonProps.data.length === 0 ? /*#__PURE__*/(0,jsx_runtime.jsx)(TbodyEmpty, {
             columns: columns,
@@ -80292,7 +80343,7 @@ var watermark_interface = __webpack_require__(6640);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.10.3-beta.4'
+  version: '3.10.3-beta.5'
 });
 }();
 /******/ 	return __webpack_exports__;