@nokecy/qc-ui 1.1.40 → 1.1.42

package/dist/cjs/array-table/utils.d.ts

@@ -6,6 +6,31 @@ import { ObservableColumnSource } from './interface';
 declare const isColumnComponent: (schema: Schema) => boolean;
 declare const useArrayTableSources: () => ObservableColumnSource[];
 declare const useArrayTableActions: () => ObservableColumnSource[];
+/**
+ * 懒挂载单元格渲染器(可编辑列)。
+ *
+ * 已有行的可编辑格被 Editable 装饰器默认转成 readPretty 只读文本态(点击才进编辑),
+ * 但仍挂着完整 Formily 树——这是行多列多滚动卡的主因。本渲染器:
+ *  - 新增行(_isNew,保持编辑态需即时校验) 或 已被激活(点击/导航进过)的格 -> 挂 AgField 全树;
+ *  - 其余(存量行、没碰过) -> 只渲染廉价纯文本(复用 readOnlyFormatters),不挂 Formily 树。
+ *
+ * 激活态存放在 AG-Grid context.activeCells(Set),由 index.tsx 在点击/键盘导航时写入并 refreshCells。
+ * 「挂了不卸」:一旦激活保持挂载(直到行被虚拟化销毁),不做失焦退回,避开一堆边界。
+ *
+ * 校验安全:未碰过的存量格本就是 readPretty、本就不参与校验,不挂树校验语义零变化。@author nokecy
+ */
+declare const LazyAgField: (params: any) => React.JSX.Element;
+/**
+ * 反应式只读文本渲染器(列级 readPretty 在「可编辑表」里的展示列)。
+ *
+ * 只读纯文本快路径(valueFormatter)经 AG-Grid 缓存 params.value 取值,setValuesIn 程序化原地改值
+ * 不会刷新该格 → 自动带出的外码/描述等只读展示列空白。本渲染器 Observer 读可观察 record[dataKey],
+ * 保持 readPretty 纯文本观感(不挂 Formily 树、不可点编辑),但能跟随 setValuesIn 即时刷新。
+ *
+ * 仅用于「可编辑表的列级 readPretty 展示列」;「整表 readPretty」(明细/详情页,数据经 setValues 整体
+ * 加载,行引用整体替换→AG-Grid 自然刷新)仍走更廉价的静态 valueFormatter 快路径。@author nokecy
+ */
+declare const LazyReadOnlyText: (params: any) => React.JSX.Element;
 declare const buildArrayTableColumns: (dataSource: any[], field: ArrayField, sources: ObservableColumnSource[]) => AgGridReactProps['columnDefs'];
 declare const useAddition: () => React.JSX.Element | null;
-export { isColumnComponent, useArrayTableSources, useArrayTableActions, buildArrayTableColumns, useAddition };
+export { isColumnComponent, useArrayTableSources, useArrayTableActions, buildArrayTableColumns, useAddition, LazyAgField, LazyReadOnlyText };

package/dist/cjs/array-table/utils.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useArrayTableSources = exports.useArrayTableActions = exports.useAddition = exports.isColumnComponent = exports.buildArrayTableColumns = void 0;
+exports.useArrayTableSources = exports.useArrayTableActions = exports.useAddition = exports.isColumnComponent = exports.buildArrayTableColumns = exports.LazyReadOnlyText = exports.LazyAgField = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@formily/react");
 var _shared = require("@formily/shared");
@@ -154,8 +154,8 @@ var AgField = function AgField(_ref) {
  *
  * 校验安全:未碰过的存量格本就是 readPretty、本就不参与校验,不挂树校验语义零变化。@author nokecy
  */
-var LazyAgField = function LazyAgField(params) {
-  var _context$activeCells, _context$activeCells$;
+var LazyAgField = exports.LazyAgField = function LazyAgField(params) {
+  var _context$activeCells, _context$activeCells$, _fieldSchema$name;
   var value = params.value,
     record = params.data,
     dataSource = params.dataSource,
@@ -179,19 +179,64 @@ var LazyAgField = function LazyAgField(params) {
       node: node
     });
   }
-  var text = formatter ? formatter(value, {
-    columnProps: columnProps,
-    fieldSchema: fieldSchema
-  }) : value == null ? '' : String(value);
-  // 纯文本占满单元格,点击交给 AG-Grid onCellClicked 激活;样式尽量贴近 Editable 只读态避免点开跳动
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: "ag-array-table-lazy-text",
-    style: {
-      display: 'inline-block',
-      width: '100%',
-      cursor: 'text'
-    }
-  }, text);
+
+  // Observer 包裹纯文本:让未激活的廉价文本格反应式跟随内层 Formily 字段值。
+  // record 即 field.value[index] 的可观察对象;在 Observer 里按内层字段名直接读 record[dataKey]
+  // (而非 AG-Grid 渲染时快照的 params.value)建立依赖后,onFieldValueChange/setValuesIn 程序化原地
+  // 改值(行引用不变 → AG-Grid 不刷新该格、外层 observer 也不重渲)时,本格能自行重渲刷新——
+  // 免去调用方加 forceAgField 逃生阀。字段名缺失才回退 params.value。@author nokecy
+  var dataKey = (_fieldSchema$name = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.name) !== null && _fieldSchema$name !== void 0 ? _fieldSchema$name : colDef === null || colDef === void 0 ? void 0 : colDef.field;
+  return /*#__PURE__*/_react.default.createElement(_react2.Observer, null, function () {
+    var liveValue = dataKey != null && record ? record[dataKey] : value;
+    var text = formatter ? formatter(liveValue, {
+      columnProps: columnProps,
+      fieldSchema: fieldSchema
+    }) : liveValue == null ? '' : String(liveValue);
+    // 纯文本占满单元格,点击交给 AG-Grid onCellClicked 激活;样式尽量贴近 Editable 只读态避免点开跳动
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "ag-array-table-lazy-text",
+      style: {
+        display: 'inline-block',
+        width: '100%',
+        cursor: 'text'
+      }
+    }, text);
+  });
+};
+
+/**
+ * 反应式只读文本渲染器(列级 readPretty 在「可编辑表」里的展示列)。
+ *
+ * 只读纯文本快路径(valueFormatter)经 AG-Grid 缓存 params.value 取值,setValuesIn 程序化原地改值
+ * 不会刷新该格 → 自动带出的外码/描述等只读展示列空白。本渲染器 Observer 读可观察 record[dataKey],
+ * 保持 readPretty 纯文本观感(不挂 Formily 树、不可点编辑),但能跟随 setValuesIn 即时刷新。
+ *
+ * 仅用于「可编辑表的列级 readPretty 展示列」;「整表 readPretty」(明细/详情页,数据经 setValues 整体
+ * 加载,行引用整体替换→AG-Grid 自然刷新)仍走更廉价的静态 valueFormatter 快路径。@author nokecy
+ */
+var LazyReadOnlyText = exports.LazyReadOnlyText = function LazyReadOnlyText(params) {
+  var _fieldSchema$name2;
+  var value = params.value,
+    record = params.data,
+    colDef = params.colDef,
+    formatter = params.formatter,
+    columnProps = params.columnProps,
+    fieldSchema = params.fieldSchema;
+  var dataKey = (_fieldSchema$name2 = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.name) !== null && _fieldSchema$name2 !== void 0 ? _fieldSchema$name2 : colDef === null || colDef === void 0 ? void 0 : colDef.field;
+  return /*#__PURE__*/_react.default.createElement(_react2.Observer, null, function () {
+    var liveValue = dataKey != null && record ? record[dataKey] : value;
+    var text = formatter ? formatter(liveValue, {
+      columnProps: columnProps,
+      fieldSchema: fieldSchema
+    }) : liveValue == null ? '' : String(liveValue);
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "ag-array-table-readonly-text",
+      style: {
+        display: 'inline-block',
+        width: '100%'
+      }
+    }, text);
+  });
 };
 
 // 在 Column 的子 schema 里递归找到内层数据字段(可读 x-component / x-pattern / x-reactions / enum) @author nokecy
@@ -296,6 +341,21 @@ var buildArrayTableColumns = exports.buildArrayTableColumns = function buildArra
 
     // ① 只读纯文本
     if (readOnly && formatter) {
+      // 列级 readPretty 在「可编辑表」里是展示列(值可能被 setValuesIn 自动带出),静态 valueFormatter
+      // 读 AG-Grid 缓存值不刷新 → 反应式只读渲染。整表 readPretty(明细/详情页,数据 setValues 整体加载、
+      // 行引用整体替换、AG-Grid 自然刷新)仍走更廉价的静态 valueFormatter 快路径。@author nokecy
+      if (arrayPattern !== 'readPretty') {
+        return buf.concat(_objectSpread(_objectSpread(_objectSpread({}, base), valueGetter ? {
+          valueGetter: valueGetter
+        } : {}), {}, {
+          cellRenderer: LazyReadOnlyText,
+          cellRendererParams: {
+            formatter: formatter,
+            columnProps: columnProps,
+            fieldSchema: dataField
+          }
+        }));
+      }
       return buf.concat(_objectSpread(_objectSpread(_objectSpread({}, base), valueGetter ? {
         valueGetter: valueGetter
       } : {}), {}, {

package/dist/esm/array-table/utils.d.ts

@@ -6,6 +6,31 @@ import { ObservableColumnSource } from './interface';
 declare const isColumnComponent: (schema: Schema) => boolean;
 declare const useArrayTableSources: () => ObservableColumnSource[];
 declare const useArrayTableActions: () => ObservableColumnSource[];
+/**
+ * 懒挂载单元格渲染器(可编辑列)。
+ *
+ * 已有行的可编辑格被 Editable 装饰器默认转成 readPretty 只读文本态(点击才进编辑),
+ * 但仍挂着完整 Formily 树——这是行多列多滚动卡的主因。本渲染器:
+ *  - 新增行(_isNew,保持编辑态需即时校验) 或 已被激活(点击/导航进过)的格 -> 挂 AgField 全树;
+ *  - 其余(存量行、没碰过) -> 只渲染廉价纯文本(复用 readOnlyFormatters),不挂 Formily 树。
+ *
+ * 激活态存放在 AG-Grid context.activeCells(Set),由 index.tsx 在点击/键盘导航时写入并 refreshCells。
+ * 「挂了不卸」:一旦激活保持挂载(直到行被虚拟化销毁),不做失焦退回,避开一堆边界。
+ *
+ * 校验安全:未碰过的存量格本就是 readPretty、本就不参与校验,不挂树校验语义零变化。@author nokecy
+ */
+declare const LazyAgField: (params: any) => React.JSX.Element;
+/**
+ * 反应式只读文本渲染器(列级 readPretty 在「可编辑表」里的展示列)。
+ *
+ * 只读纯文本快路径(valueFormatter)经 AG-Grid 缓存 params.value 取值,setValuesIn 程序化原地改值
+ * 不会刷新该格 → 自动带出的外码/描述等只读展示列空白。本渲染器 Observer 读可观察 record[dataKey],
+ * 保持 readPretty 纯文本观感(不挂 Formily 树、不可点编辑),但能跟随 setValuesIn 即时刷新。
+ *
+ * 仅用于「可编辑表的列级 readPretty 展示列」;「整表 readPretty」(明细/详情页,数据经 setValues 整体
+ * 加载,行引用整体替换→AG-Grid 自然刷新)仍走更廉价的静态 valueFormatter 快路径。@author nokecy
+ */
+declare const LazyReadOnlyText: (params: any) => React.JSX.Element;
 declare const buildArrayTableColumns: (dataSource: any[], field: ArrayField, sources: ObservableColumnSource[]) => AgGridReactProps['columnDefs'];
 declare const useAddition: () => React.JSX.Element | null;
-export { isColumnComponent, useArrayTableSources, useArrayTableActions, buildArrayTableColumns, useAddition };
+export { isColumnComponent, useArrayTableSources, useArrayTableActions, buildArrayTableColumns, useAddition, LazyAgField, LazyReadOnlyText };

package/dist/esm/array-table/utils.js

@@ -8,7 +8,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
-import { useField, useFieldSchema, RecursionField } from '@formily/react';
+import { useField, useFieldSchema, RecursionField, Observer } from '@formily/react';
 import { isArr } from '@formily/shared';
 import ArrayBase from "./arrayBase";
 import { getReadOnlyFormatter } from "./readOnlyFormatters";
@@ -148,7 +148,7 @@ var AgField = function AgField(_ref) {
  * 校验安全:未碰过的存量格本就是 readPretty、本就不参与校验,不挂树校验语义零变化。@author nokecy
  */
 var LazyAgField = function LazyAgField(params) {
-  var _context$activeCells, _context$activeCells$;
+  var _context$activeCells, _context$activeCells$, _fieldSchema$name;
   var value = params.value,
     record = params.data,
     dataSource = params.dataSource,
@@ -172,19 +172,64 @@ var LazyAgField = function LazyAgField(params) {
       node: node
     });
   }
-  var text = formatter ? formatter(value, {
-    columnProps: columnProps,
-    fieldSchema: fieldSchema
-  }) : value == null ? '' : String(value);
-  // 纯文本占满单元格,点击交给 AG-Grid onCellClicked 激活;样式尽量贴近 Editable 只读态避免点开跳动
-  return /*#__PURE__*/React.createElement("span", {
-    className: "ag-array-table-lazy-text",
-    style: {
-      display: 'inline-block',
-      width: '100%',
-      cursor: 'text'
-    }
-  }, text);
+
+  // Observer 包裹纯文本:让未激活的廉价文本格反应式跟随内层 Formily 字段值。
+  // record 即 field.value[index] 的可观察对象;在 Observer 里按内层字段名直接读 record[dataKey]
+  // (而非 AG-Grid 渲染时快照的 params.value)建立依赖后,onFieldValueChange/setValuesIn 程序化原地
+  // 改值(行引用不变 → AG-Grid 不刷新该格、外层 observer 也不重渲)时,本格能自行重渲刷新——
+  // 免去调用方加 forceAgField 逃生阀。字段名缺失才回退 params.value。@author nokecy
+  var dataKey = (_fieldSchema$name = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.name) !== null && _fieldSchema$name !== void 0 ? _fieldSchema$name : colDef === null || colDef === void 0 ? void 0 : colDef.field;
+  return /*#__PURE__*/React.createElement(Observer, null, function () {
+    var liveValue = dataKey != null && record ? record[dataKey] : value;
+    var text = formatter ? formatter(liveValue, {
+      columnProps: columnProps,
+      fieldSchema: fieldSchema
+    }) : liveValue == null ? '' : String(liveValue);
+    // 纯文本占满单元格,点击交给 AG-Grid onCellClicked 激活;样式尽量贴近 Editable 只读态避免点开跳动
+    return /*#__PURE__*/React.createElement("span", {
+      className: "ag-array-table-lazy-text",
+      style: {
+        display: 'inline-block',
+        width: '100%',
+        cursor: 'text'
+      }
+    }, text);
+  });
+};
+
+/**
+ * 反应式只读文本渲染器(列级 readPretty 在「可编辑表」里的展示列)。
+ *
+ * 只读纯文本快路径(valueFormatter)经 AG-Grid 缓存 params.value 取值,setValuesIn 程序化原地改值
+ * 不会刷新该格 → 自动带出的外码/描述等只读展示列空白。本渲染器 Observer 读可观察 record[dataKey],
+ * 保持 readPretty 纯文本观感(不挂 Formily 树、不可点编辑),但能跟随 setValuesIn 即时刷新。
+ *
+ * 仅用于「可编辑表的列级 readPretty 展示列」;「整表 readPretty」(明细/详情页,数据经 setValues 整体
+ * 加载,行引用整体替换→AG-Grid 自然刷新)仍走更廉价的静态 valueFormatter 快路径。@author nokecy
+ */
+var LazyReadOnlyText = function LazyReadOnlyText(params) {
+  var _fieldSchema$name2;
+  var value = params.value,
+    record = params.data,
+    colDef = params.colDef,
+    formatter = params.formatter,
+    columnProps = params.columnProps,
+    fieldSchema = params.fieldSchema;
+  var dataKey = (_fieldSchema$name2 = fieldSchema === null || fieldSchema === void 0 ? void 0 : fieldSchema.name) !== null && _fieldSchema$name2 !== void 0 ? _fieldSchema$name2 : colDef === null || colDef === void 0 ? void 0 : colDef.field;
+  return /*#__PURE__*/React.createElement(Observer, null, function () {
+    var liveValue = dataKey != null && record ? record[dataKey] : value;
+    var text = formatter ? formatter(liveValue, {
+      columnProps: columnProps,
+      fieldSchema: fieldSchema
+    }) : liveValue == null ? '' : String(liveValue);
+    return /*#__PURE__*/React.createElement("span", {
+      className: "ag-array-table-readonly-text",
+      style: {
+        display: 'inline-block',
+        width: '100%'
+      }
+    }, text);
+  });
 };
 
 // 在 Column 的子 schema 里递归找到内层数据字段(可读 x-component / x-pattern / x-reactions / enum) @author nokecy
@@ -289,6 +334,21 @@ var buildArrayTableColumns = function buildArrayTableColumns(dataSource, field,
 
     // ① 只读纯文本
     if (readOnly && formatter) {
+      // 列级 readPretty 在「可编辑表」里是展示列(值可能被 setValuesIn 自动带出),静态 valueFormatter
+      // 读 AG-Grid 缓存值不刷新 → 反应式只读渲染。整表 readPretty(明细/详情页,数据 setValues 整体加载、
+      // 行引用整体替换、AG-Grid 自然刷新)仍走更廉价的静态 valueFormatter 快路径。@author nokecy
+      if (arrayPattern !== 'readPretty') {
+        return buf.concat(_objectSpread(_objectSpread(_objectSpread({}, base), valueGetter ? {
+          valueGetter: valueGetter
+        } : {}), {}, {
+          cellRenderer: LazyReadOnlyText,
+          cellRendererParams: {
+            formatter: formatter,
+            columnProps: columnProps,
+            fieldSchema: dataField
+          }
+        }));
+      }
       return buf.concat(_objectSpread(_objectSpread(_objectSpread({}, base), valueGetter ? {
         valueGetter: valueGetter
       } : {}), {}, {
@@ -344,4 +404,4 @@ var useAddition = function useAddition() {
     return addition;
   }, null);
 };
-export { isColumnComponent, useArrayTableSources, useArrayTableActions, buildArrayTableColumns, useAddition };
+export { isColumnComponent, useArrayTableSources, useArrayTableActions, buildArrayTableColumns, useAddition, LazyAgField, LazyReadOnlyText };