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

package/CHANGELOG.md

@@ -1,8 +1,10 @@
 # @hzab/list-render@1.10.12
 
+fix: 首次列表加载携带queryFormInitialValues的参数
+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-beta3",
   "description": "",
   "main": "src",
   "scripts": {

package/src/common/formily-utils.jsx

@@ -1,149 +1,174 @@
-import { observer } from "@formily/react";
-import { untracked, autorun, observable } from "@formily/reactive";
-
-export function handleTableProps(field, { scope, value, record }) {
-  if (!field) {
-    return field;
-  }
-  const opt = {
-    scope: scope,
-    $self: field,
-    $values: value,
-    $deps: record,
-  };
-  // inTable
-  // x-table-props
-  if (typeof field.inTable === "string") {
-    field.inTable = getStateFunc(field.inTable, opt)(opt);
-  }
-  const tableProps = field["x-table-props"];
-  if (tableProps) {
-    if (typeof tableProps === "string") {
-      field["x-table-props"] = getStateFunc(field.inTable, opt)(opt);
-    } else if (tableProps && typeof tableProps === "object") {
-      Object.keys(tableProps).forEach((key) => {
-        if (typeof field["x-table-props"][key] === "string") {
-          field["x-table-props"][key] = getStateFunc(field["x-table-props"][key], opt)(opt);
-        }
-      });
-    }
-  }
-  return field;
-}
-
-/**
- * 解决 render 中无法响应数据的情况
- * @param {Function} render
- * @returns
- */
-export function getColRender(render) {
-  return function (...args) {
-    const Observer = observer(function () {
-      return render(...args);
-    });
-    return <Observer />;
-  };
-}
-
-/**
- * 根据 formily 函数字符串 {{xxx}}，获取可执行函数
- * @param {string} funcStr
- * @param {Object} opt
- * @returns
- */
-export function getStateFunc(funcStr = "", opt) {
-  const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
-  return getFunc(`return ${stateStr};`, opt);
-}
-
-/**
- * 根据函数字符串，获取可执行函数
- * @param {string} funcStr
- * @param {Object} opt
- * @returns
- */
-export function getFunc(
-  funcStr = "",
-  // opt = {"scope", "$self", "$values"},
-  opt = {},
-) {
-  const _opt = {
-    // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
-    $observable: observable,
-    $memo: autorun.memo,
-    $effect: autorun.effect,
-    scope: {},
-    ...opt,
-  };
-  const fn = new Function(
-    "opt",
-    `const { ${Object.keys(_opt).join(", ")} } = opt || {}; const {${Object.keys(_opt.scope || {}).join(
-      ", ",
-    )}} = scope || {}; ${funcStr}`,
-  );
-
-  return function (opt) {
-    return fn.call(this, {
-      // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
-      $observable: observable,
-      $memo: autorun.memo,
-      $effect: autorun.effect,
-      ...opt,
-    });
-  };
-}
-
-/**
- * 根据 formily 函数字符串 {{xxx}}，获取可执行的异步函数
- * @param {string} funcStr
- * @param {Object} opt
- * @returns
- */
-export function getStateSyncFunc(funcStr = "", opt) {
-  const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
-  return getFuncSync(`return ${stateStr}`, opt);
-}
-
-/**
- * 根据函数字符串，获取可执行的异步函数
- * @param {string} funcStr
- * @param {Object} opt
- * @returns
- */
-export function getFuncSync(
-  funcStr = "",
-  // opt = {"scope", "$self", "$values"},
-  opt = {},
-) {
-  const _opt = {
-    // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
-    $observable: observable,
-    $memo: autorun.memo,
-    $effect: autorun.effect,
-    scope: {},
-    ...opt,
-  };
-
-  // 把 effectFn 字符串转为可执行函数，并传入所需的参数，支持异步
-  const getAsyncFunction = new Function(`return Object.getPrototypeOf(async function(){}).constructor;`);
-  const AsyncFunction = getAsyncFunction();
-  // 只能这样拿到 AsyncFunction
-  // 直接写 Object.getPrototypeOf(async function(){}).constructor
-  // 会被 babel 转成 Function
-  const asyncFunc = new AsyncFunction(
-    "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);}`,
-  );
-
-  return function (opt) {
-    return asyncFunc.call(this, {
-      // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
-      $observable: observable,
-      $memo: autorun.memo,
-      $effect: autorun.effect,
-      ...opt,
-    });
-  };
-}
+import { observer } from "@formily/react";
+import { autorun, observable } from "@formily/reactive";
+
+export function handleTableProps(field, { scope, value, record }) {
+  if (!field) {
+    return field;
+  }
+  const opt = {
+    scope: scope,
+    $self: field,
+    $values: value,
+    $deps: record,
+  };
+  // inTable
+  // x-table-props
+  if (typeof field.inTable === "string") {
+    field.inTable = getStateFunc(field.inTable, opt)(opt);
+  }
+  const tableProps = field["x-table-props"];
+  if (tableProps) {
+    if (typeof tableProps === "string") {
+      field["x-table-props"] = getStateFunc(field.inTable, opt)(opt);
+    } else if (tableProps && typeof tableProps === "object") {
+      Object.keys(tableProps).forEach((key) => {
+        if (typeof field["x-table-props"][key] === "string") {
+          field["x-table-props"][key] = getStateFunc(field["x-table-props"][key], opt)(opt);
+        }
+      });
+    }
+  }
+  return field;
+}
+
+/**
+ * 解决 render 中无法响应数据的情况
+ * @param {Function} render
+ * @returns
+ */
+export function getColRender(render) {
+  return function (...args) {
+    const Observer = observer(function () {
+      return render(...args);
+    });
+    return <Observer />;
+  };
+}
+
+/**
+ * 根据 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
+ * @param {Object} opt
+ * @returns
+ */
+export function getStateFunc(funcStr = "", opt) {
+  if (typeof funcStr !== "string" || !funcStr.startsWith("{{")) {
+    return funcStr;
+  }
+  const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
+  return getFunc(stateStr, opt);
+}
+
+/**
+ * 根据函数字符串，获取可执行函数
+ * @param {string} funcStr
+ * @param {Object} opt
+ * @returns
+ */
+export function getFunc(
+  funcStr = "",
+  // opt = {"scope", "$self", "$values"},
+  opt = {},
+) {
+  const _opt = {
+    // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
+    $observable: observable,
+    $memo: autorun.memo,
+    $effect: autorun.effect,
+    scope: {},
+    ...opt,
+  };
+  const fn = new Function(
+    "opt",
+    `const { ${Object.keys(_opt).join(", ")} } = opt || {}; const {${Object.keys(_opt.scope || {}).join(
+      ", ",
+    )}} = scope || {}; return ${funcStr}; `,
+  );
+
+  return function (opt) {
+    return fn.call(this, {
+      // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
+      $observable: observable,
+      $memo: autorun.memo,
+      $effect: autorun.effect,
+      ...opt,
+    });
+  };
+}
+
+/**
+ * 根据 formily 函数字符串 {{xxx}}，获取可执行的异步函数
+ * @param {string} funcStr
+ * @param {Object} opt
+ * @returns
+ */
+export function getStateSyncFunc(funcStr = "", opt) {
+  if (typeof funcStr !== "string" || !funcStr.startsWith("{{")) {
+    return funcStr;
+  }
+  const stateStr = funcStr.replace(/^\{\{/, "").replace(/\}\}$/, "");
+  return getFuncSync(stateStr, opt);
+}
+
+/**
+ * 根据函数字符串，获取可执行的异步函数
+ * @param {string} funcStr
+ * @param {Object} opt
+ * @returns
+ */
+export function getFuncSync(
+  funcStr = "",
+  // opt = {"scope", "$self", "$values"},
+  opt = {},
+) {
+  const _opt = {
+    // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
+    $observable: observable,
+    $memo: autorun.memo,
+    $effect: autorun.effect,
+    scope: {},
+    ...opt,
+  };
+
+  // 把 effectFn 字符串转为可执行函数，并传入所需的参数，支持异步
+  const getAsyncFunction = new Function(`return Object.getPrototypeOf(async function(){}).constructor;`);
+  const AsyncFunction = getAsyncFunction();
+  // 只能这样拿到 AsyncFunction
+  // 直接写 Object.getPrototypeOf(async function(){}).constructor
+  // 会被 babel 转成 Function
+  const asyncFunc = new AsyncFunction(
+    "opt",
+    `try {const {${Object.keys(_opt).join(", ")}} = opt || {};  const {${Object.keys(_opt.scope || {}).join(
+      ", ",
+    )}} = scope || {}; return ${funcStr}; } catch(err) {console.error("Error Formily Reactive Function: ", err);}`,
+  );
+
+  return function (opt) {
+    return asyncFunc.call(this, {
+      // opt = ["scope", "$self", "$deps", "$values", "$observable", "$memo", "$effect"],
+      $observable: observable,
+      $memo: autorun.memo,
+      $effect: autorun.effect,
+      ...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/index.js

@@ -1,5 +1,5 @@
-import ListRender from "./list-render.jsx";
-
-export * from "@hzab/data-model";
-
-export default ListRender;
+import ListRender from "./list-render.jsx";
+
+export * from "@hzab/data-model";
+
+export default ListRender;

package/src/list-render.jsx

@@ -130,7 +130,7 @@ const ListRender = forwardRef(function (props, parentRef) {
       }
     });
 
-    !props.closeAutoRequest && getList({ ...(modelQueryRef.current || {}), ...getUrlQuery });
+    !props.closeAutoRequest && getList({ ...queryFormInitialValues, ...(modelQueryRef.current || {}), ...getUrlQuery });
   }, []);
 
   useEffect(() => {
@@ -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,