@hzab/list-render 1.10.12-beta → 1.10.12-beta2

package/CHANGELOG.md

@@ -1,8 +1,9 @@
 # @hzab/list-render@1.10.12
 
+feat: schema title 支持传入 ReactNode，支持通过 schemaScope 传入
 fix: table 响应数据 去除 inTable == false 的字段
-feat: schema title 支持传入 ReactNode
-feat: schema clone 函数
+fix: table 响应表单 FormilyField 环境变量 scenario: "tableReactionsForm"
+fix: 行内编辑 清除上一次的数据，解决切换表单数据未清除问题
 
 # @hzab/list-render@1.10.11
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.12-beta",
+  "version": "1.10.12-beta2",
   "description": "",
   "main": "src",
   "scripts": {

package/src/common/formily-utils.jsx

@@ -1,5 +1,5 @@
 import { observer } from "@formily/react";
-import { untracked, autorun, observable } from "@formily/reactive";
+import { autorun, observable } from "@formily/reactive";
 
 export function handleTableProps(field, { scope, value, record }) {
   if (!field) {
@@ -45,6 +45,25 @@ export function getColRender(render) {
   };
 }
 
+/**
+ * 根据 formily 函数字符串 {{xxx}}，获取变量或可执行函数
+ * @param {*} funcStr
+ * @param {*} opt
+ * @returns
+ */
+export const getScopeVal = function (funcStr = "", opt = {}) {
+  if (typeof funcStr !== "string" || !funcStr.startsWith("{{")) {
+    return funcStr;
+  }
+  const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
+  const res = opt?.scope?.[stateStr];
+  // 存在对应变量直接返回
+  if (res) {
+    return res;
+  }
+  return getFunc(stateStr, opt);
+};
+
 /**
  * 根据 formily 函数字符串 {{xxx}}，获取可执行函数
  * @param {string} funcStr
@@ -52,8 +71,11 @@ export function getColRender(render) {
  * @returns
  */
 export function getStateFunc(funcStr = "", opt) {
+  if (typeof funcStr !== "string" || !funcStr.startsWith("{{")) {
+    return funcStr;
+  }
   const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
-  return getFunc(`return ${stateStr};`, opt);
+  return getFunc(stateStr, opt);
 }
 
 /**
@@ -79,7 +101,7 @@ export function getFunc(
     "opt",
     `const { ${Object.keys(_opt).join(", ")} } = opt || {}; const {${Object.keys(_opt.scope || {}).join(
       ", ",
-    )}} = scope || {}; ${funcStr}`,
+    )}} = scope || {}; return ${funcStr}; `,
   );
 
   return function (opt) {
@@ -100,8 +122,11 @@ export function getFunc(
  * @returns
  */
 export function getStateSyncFunc(funcStr = "", opt) {
+  if (typeof funcStr !== "string" || !funcStr.startsWith("{{")) {
+    return funcStr;
+  }
   const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
-  return getFuncSync(`return ${stateStr}`, opt);
+  return getFuncSync(stateStr, opt);
 }
 
 /**
@@ -134,7 +159,7 @@ export function getFuncSync(
     "opt",
     `try {const {${Object.keys(_opt).join(", ")}} = opt || {};  const {${Object.keys(_opt.scope || {}).join(
       ", ",
-    )}} = scope || {}; ${funcStr}} catch(err) {console.error("Error Formily Reactive Function: ", err);}`,
+    )}} = scope || {}; return ${funcStr}; } catch(err) {console.error("Error Formily Reactive Function: ", err);}`,
   );
 
   return function (opt) {

package/src/common/utils.js

@@ -1,3 +1,4 @@
+import { autorun, observable } from "@formily/reactive";
 import { Schema } from "@formily/json-schema";
 import _ from "lodash";
 import dayjs from "dayjs";
@@ -5,6 +6,7 @@ import advancedFormat from "dayjs/plugin/advancedFormat";
 import weekOfYear from "dayjs/plugin/weekOfYear";
 
 import { cloneSchema } from "@hzab/utils/src/formily/cloneSchema";
+import { getScopeVal } from "./formily-utils";
 
 dayjs.extend(advancedFormat);
 dayjs.extend(weekOfYear);
@@ -94,7 +96,7 @@ export function getDateVal(val, format) {
 }
 
 export function getFieldList(_schema, fieldList = [], opt = {}, isTableSortXIdex = false) {
-  const schema = _schema?.schema || _schema;
+  const schema = cloneSchema(_schema?.schema || _schema);
 
   // 解决 schema 字符串可执行代码、变量等
   const properties = Schema.getOrderProperties(schema);
@@ -108,11 +110,33 @@ export function getFieldList(_schema, fieldList = [], opt = {}, isTableSortXIdex
 
   schema?.properties &&
     properties.forEach((item) => {
-      const field = item.schema;
+      const field = { ...item.schema };
       if (!field.name) {
         field.name = item.key;
       }
       const componentName = field["x-component"];
+      // 处理 title 渲染逻辑，解析 scope 字符串变量
+      if (typeof field.title === "string" && field.title.startsWith("{{")) {
+        field.title = getScopeVal(field.title, { scope: opt.schemaScope });
+        if (typeof field.title === "function") {
+          field.title = field.title({
+            ...opt,
+            scope: opt.schemaScope,
+            scenario: "listRender",
+            // $deps,
+            $self: field,
+            $effect: autorun.effect,
+            // $form: $form,
+            // $values: $values,
+            $observable: observable,
+            $memo: autorun.memo,
+            $props: {
+              // formilyRef.current.fields  formilyRef.current.fieldSchemas
+              formilyRef: opt.formilyRef,
+            },
+          });
+        }
+      }
       if (_boxList.includes(componentName)) {
         getFieldList(field, fieldList, opt);
       } else {

package/src/components/Formily/FormilyEditTable.tsx

@@ -15,7 +15,7 @@ export interface Item {
 
 export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
   SchemaField: any;
-  field: {
+  getField: () => {
     type: string;
     name: string;
   };
@@ -38,7 +38,7 @@ export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
 
 export const EditableCell: React.FC<EditableCellProps> = ({
   SchemaField,
-  field,
+  getField,
   editing,
   dataIndex,
   title,
@@ -53,6 +53,7 @@ export const EditableCell: React.FC<EditableCellProps> = ({
   children,
   ...restProps
 }) => {
+  const field = getField && getField();
   const fPattern = field?.["x-pattern"];
   const fDisplay = field?.["x-display"];
   const { editMode = "modal" } = topProps || {};
@@ -80,7 +81,7 @@ export const EditableCell: React.FC<EditableCellProps> = ({
             schema={{
               type: "object",
               properties: {
-                [field.name]: {
+                [field?.name]: {
                   ...field,
                   title: "",
                   ["x-component-props"]: {
@@ -195,6 +196,9 @@ export const useEditTable = (props) => {
   const onEdit = async (record: Partial<Item> & { key: React.Key }, key, opt = { fieldRef: null }) => {
     const { fieldRef } = opt || {};
     editingFiledRef.current = fieldRef;
+    // 清除上一次的数据，解决切换表单数据未清除问题
+    // TODO: 拆分表单解决
+    formRender.values = {};
     formRender?.setValues(record);
     setEditingId(record[idKey]);
     setEditingKey(key);
@@ -222,7 +226,7 @@ export const useEditTable = (props) => {
     try {
       // 点击保存，数据抛出
       (await formRender?.validate()) as Item;
-      onEditSubmit && (await onEditSubmit(formRender.values, { field } ));
+      onEditSubmit && (await onEditSubmit(formRender.values, { field }));
       // 清除编辑目标
       setEditingId("");
       setEditingKey("");
@@ -243,7 +247,8 @@ export const useEditTable = (props) => {
         ...(col.onCell ? col.onCell(record, ...args) : {}),
         record,
         SchemaField,
-        field: col.field,
+        // 函数获取解决 cloneDepp 报错问题
+        getField: col.getField,
         dataIndex: col.dataIndex,
         title: col.title,
         editable: col.editable,

package/src/components/Formily/FormilyField.tsx

@@ -23,11 +23,12 @@ export const FormilyField = memo(function (props: formilyFieldPropsT) {
   const _schema = useMemo(() => {
     const schemaRmInTable = cloneSchema(schema);
     // 去除 inTable = false 的字段
-    Object.keys(schemaRmInTable?.schema?.properties)?.forEach((key) => {
-      if (schemaRmInTable?.schema?.properties?.[key]?.inTable === false) {
-        delete schemaRmInTable?.schema?.properties?.[key];
-      }
-    });
+    schemaRmInTable?.properties &&
+      Object.keys(schemaRmInTable?.properties)?.forEach((key) => {
+        if (schemaRmInTable?.properties?.[key]?.inTable === false) {
+          delete schemaRmInTable?.properties?.[key];
+        }
+      });
     return schemaRmInTable;
   }, [schema]);
   const SchemaField = useCallback(
@@ -49,7 +50,7 @@ export const FormilyField = memo(function (props: formilyFieldPropsT) {
           return Com && <Com {...props} />;
         },
       },
-      scope: { ...schemaScope },
+      scope: { ...schemaScope, scenario: "tableReactionsForm" },
     } as any),
     [],
   );

package/src/list-render.jsx

@@ -512,7 +512,7 @@ const ListRender = forwardRef(function (props, parentRef) {
           setShowSearch={handleSetShowSearch}
           loading={listLoading}
           tableProps={props.tableProps}
-          getFieldListOpt={props.getFieldListOpt}
+          getFieldListOpt={{ ...props.getFieldListOpt, schemaScope: props.schemaScope }}
           components={props.components}
           schemaScope={props.schemaScope}
           i18n={i18n}

package/src/table-render/index.jsx

@@ -102,7 +102,7 @@ const TableRender = forwardRef(function (props, tableRef) {
     if (!(props.schema && props.schema.properties)) {
       return;
     }
-    const fieldList = getFieldList(props.schema, [], props.getFieldListOpt, isTableSortXIdex);
+    const fieldList = getFieldList(props.schema, [], { ...props.getFieldListOpt, formilyRef }, isTableSortXIdex);
     const columns = [];
 
     // 序号列
@@ -218,11 +218,13 @@ const TableRender = forwardRef(function (props, tableRef) {
         }
 
         columns.push({
-          // field, // title 传入 ReactNode，内部深克隆导致页面报错白屏
+          // field, // HACK: 直接传入 field 在 title 传入 ReactNode，内部深克隆导致页面报错白屏。使用函数获取解决
+          getField: () => field,
           editable: true,
           ..._colConf,
           onCell: (record, rowIndex) =>
             _colConf?.onCell?.({ ...record, _field: { ...field, ...(fieldSchemas?.[name] || {}) } }, rowIndex) || {},
+          // 函数式传入，解决 title ReactNode 传入报错问题
           title: () => (isFunction(_colConf?.title) ? _colConf?.title() : _title),
           key: name,
           dataIndex: name,