@hzab/form-render 1.6.18 → 1.6.20

package/src/common/schema-handler.ts

@@ -1,253 +1,253 @@
-import _ from "lodash";
-import { customAlphabet } from "nanoid";
-
-/**
- * 指定 nanoid 字符集合
- */
-export const alphabet = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
-export const nanoid = customAlphabet(alphabet, 20);
-
-/**
- * You can use the built-in context variables
- *
- * 1. `$self` is the current Field Model
- *
- * 2. `$form` is the current Form Model
- *
- * 3. `$deps` is the dependencies value 仅在 run 中存在
- *
- * 4. `$observable` function is used to create an persistent observable state object
- *
- * 5. `$memo` function is is used to create a persistent data
- *
- * 6. `$effect` function is used to handle side-effect logic
- *
- * 7. `$props` function is used to set component props to current field
- *
- * Document Links
- *
- * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F
- **/
-
-/** formily 执行函数作用域相关参数 */
-export const formilyDataKeys = ["$form", "$self", "$observable", "$effect", "$memo", "$props", "$values"];
-
-/** 自增容器 */
-export const arrayList = ["ArrayTable", "ArrayCards"];
-/** 不需要绑定事件的目标 */
-export const skipBindList = ["FormCollapse", "FormCollapse.CollapsePanel"];
-/** change 回调返回 parent 数据的组件 */
-export const returnParentValue = ["ArrayTable", "ArrayCards"];
-
-/**
- * schema 每项添加 onChange，解决无全局 onChange 问题
- * @param schema
- * @param onChange
- * @returns
- */
-export const bindOnChange = (schema, opt) => {
-  const { schemaScope, onChange, formRender, parent, isCloneDeep = true } = opt || {};
-  let _schema = isCloneDeep ? _.cloneDeep(schema) : schema;
-  _schema = _schema.schema || _schema;
-  Object.keys(_schema.properties || {})?.forEach((key) => {
-    let item = _schema.properties[key];
-    if (!item) {
-      return;
-    }
-    const componentName = item["x-component"];
-    // 解决 name 丢失的问题
-    item.name = key;
-
-    const comProps = item?.["x-component-props"];
-    if (!comProps) {
-      item["x-component-props"] = {};
-    } else if (isScopeKey(comProps, schemaScope)) {
-      item["x-component-props"] = getScopeKeyVal(comProps, schemaScope) || {};
-    }
-
-    const bindParams = {
-      componentName,
-      target: item["x-component-props"],
-      targetKey: key,
-      targetId: key,
-      formOnChange: onChange,
-      schemaScope,
-      formRender,
-      parent,
-    };
-
-    // 不需要绑定事件的目标：折叠面板不需要设置 onChange 事件，否则会导致触发多次
-    if (!skipBindList.includes(componentName)) {
-      // 绑定新的 change 事件
-      bindCallback({
-        ...bindParams,
-        actionName: "onChange",
-      });
-    }
-
-    // 处理自增表格、卡片等情况
-    if (arrayList.includes(componentName)) {
-      bindOnChange(item.items, {
-        ...opt,
-        parent: item,
-        isCloneDeep: false,
-      });
-      // 处理点击新增、删除、排序操作
-      const actions = ["onAdd", "onCopy", "onRemove", "onMoveDown", "onMoveUp"];
-      actions.forEach((actionName) => {
-        bindCallback({
-          ...bindParams,
-          actionName,
-        });
-      });
-    }
-
-    // 处理嵌套的情况
-    if (item.properties) {
-      bindOnChange(item, {
-        ...opt,
-        isCloneDeep: false,
-      });
-    }
-  });
-  return _schema;
-};
-
-/**
- * 添加回调函数
- * @param target
- * @param name
- * @param formOnChange
- */
-export const bindCallback = (opt) => {
-  const { target, actionName, schemaScope, formOnChange } = opt || {};
-  const tempFn = target[actionName];
-  if (!schemaScope._$tempData) {
-    schemaScope._$tempData = {};
-  }
-  // 设置一个唯一的函数名，用于从 schema scope 传入 formily 事件执行中
-  const fnKey = "fnKey_" + nanoid();
-  // 设置 schemaScope 中的唯一函数,获取执行函数作用域 $form, $self, $observable, $effect, $memo, $props, $values 相关参数
-  schemaScope._$tempData[fnKey] = function (params, sourceArgs) {
-    const { $form, $self, $observable, $effect, $memo, $props, $values } = params;
-    // 处理结果数据，各组件返回数据格式不一致
-    const res = handleChangeValue({
-      ...opt,
-      sourceArgs,
-    });
-    // 触发组件 onChange 事件
-    if (isRunStr(tempFn)) {
-      // schemaScope 传入方式
-      const fn = handleSchemaStrVal(tempFn, { ...params, ...schemaScope });
-
-      typeof fn === "function" && fn(...sourceArgs, res);
-    } else if (typeof tempFn === "function") {
-      // 直接传入函数的方式
-      tempFn(...sourceArgs, res);
-    }
-    formOnChange && formOnChange(res);
-  };
-
-  // 通过 formily 字符串执行的方式回去函数作用域参数
-  target[actionName] = `{{
-    function t() {
-      // 执行 ${fnKey} 唯一函数，formily 当前函数作用域相关参数
-      return _$tempData && _$tempData.${fnKey} && _$tempData.${fnKey}(
-        { ${formilyDataKeys.join(", ")} },
-        arguments
-      );
-    }
-  }}`;
-};
-
-/**
- * 从 onChange 事件中获取数据
- * @param args
- */
-export const handleChangeValue = (opt) => {
-  const { formRender, targetKey, actionName, sourceArgs } = opt || {};
-  // 自增表格、卡片无法获知当前编辑内容所在的索引，导致无法知道当前值
-  const res = {
-    key: targetKey,
-    actionName: actionName,
-    formRender,
-    formValues: formRender.values,
-    sourceArgs: sourceArgs,
-  };
-
-  return res;
-};
-
-/**
- * 是否是可执行字符串，为 {{}} 包裹的字符串
- * @param params
- */
-export const isRunStr = (strKey) => {
-  if (typeof strKey !== "string") {
-    return false;
-  }
-  const key = strKey.trim();
-  return key.startsWith("{{") && key.endsWith("}}");
-};
-
-/**
- * 获取可执行字符串，返回 {{}} 包裹的字符串
- * @param params
- */
-export const getRunStr = (strKey) => {
-  const _isRunStr = isRunStr(strKey);
-  if (!_isRunStr) {
-    return "";
-  }
-  const key = strKey.trim();
-  return key.replace(/^\{\{/, "").replace(/\}\}$/, "");
-};
-
-/**
- * 处理 schema 字符串值
- * 1.可执行字符串（{{}}包裹的字符串）：schema scope 取出对应的值，否则转为可执行函数
- * 2.其他情况直接返回对应数据
- * @param strKey
- * @param schemaScope
- * @returns
- */
-export const handleSchemaStrVal = (strKey, schemaScope) => {
-  const _str = getRunStr(strKey);
-  if (!_str) {
-    return strKey;
-  }
-  let fn = getScopeKeyVal(_str, schemaScope);
-  if (fn) {
-    return fn;
-  }
-  return new Function("$root", `with($root) { return (${_str}) }`)(schemaScope);
-};
-
-/**
- * 是否是 schema scope key
- * @param strKey
- * @returns
- */
-export const isScopeKey = (strKey, schemaScope) => {
-  const key = getRunStr(strKey);
-  if (!schemaScope || typeof schemaScope !== "object") {
-    throw new Error("请传入正确的 schema scope");
-  }
-  // 判断是否是 scope 变量名
-  if (!schemaScope?.[key]) {
-    return false;
-  }
-  return key;
-};
-
-/**
- * 获取 schema scope key
- * @param strKey
- * @returns
- */
-export const getScopeKeyVal = (strKey, schemaScope) => {
-  if (!isScopeKey(strKey, schemaScope)) {
-    return "";
-  }
-  return schemaScope[getRunStr(strKey)];
-};
+import _ from "lodash";
+import { customAlphabet } from "nanoid";
+
+/**
+ * 指定 nanoid 字符集合
+ */
+export const alphabet = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+export const nanoid = customAlphabet(alphabet, 20);
+
+/**
+ * You can use the built-in context variables
+ *
+ * 1. `$self` is the current Field Model
+ *
+ * 2. `$form` is the current Form Model
+ *
+ * 3. `$deps` is the dependencies value 仅在 run 中存在
+ *
+ * 4. `$observable` function is used to create an persistent observable state object
+ *
+ * 5. `$memo` function is is used to create a persistent data
+ *
+ * 6. `$effect` function is used to handle side-effect logic
+ *
+ * 7. `$props` function is used to set component props to current field
+ *
+ * Document Links
+ *
+ * https://react.formilyjs.org/api/shared/schema#%E5%86%85%E7%BD%AE%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%BD%9C%E7%94%A8%E5%9F%9F
+ **/
+
+/** formily 执行函数作用域相关参数 */
+export const formilyDataKeys = ["$form", "$self", "$observable", "$effect", "$memo", "$props", "$values"];
+
+/** 自增容器 */
+export const arrayList = ["ArrayTable", "ArrayCards"];
+/** 不需要绑定事件的目标 */
+export const skipBindList = ["FormCollapse", "FormCollapse.CollapsePanel"];
+/** change 回调返回 parent 数据的组件 */
+export const returnParentValue = ["ArrayTable", "ArrayCards"];
+
+/**
+ * schema 每项添加 onChange，解决无全局 onChange 问题
+ * @param schema
+ * @param onChange
+ * @returns
+ */
+export const bindOnChange = (schema, opt) => {
+  const { schemaScope, onChange, formRender, parent, isCloneDeep = true } = opt || {};
+  let _schema = isCloneDeep ? _.cloneDeep(schema) : schema;
+  _schema = _schema.schema || _schema;
+  Object.keys(_schema.properties || {})?.forEach((key) => {
+    let item = _schema.properties[key];
+    if (!item) {
+      return;
+    }
+    const componentName = item["x-component"];
+    // 解决 name 丢失的问题
+    item.name = key;
+
+    const comProps = item?.["x-component-props"];
+    if (!comProps) {
+      item["x-component-props"] = {};
+    } else if (isScopeKey(comProps, schemaScope)) {
+      item["x-component-props"] = getScopeKeyVal(comProps, schemaScope) || {};
+    }
+
+    const bindParams = {
+      componentName,
+      target: item["x-component-props"],
+      targetKey: key,
+      targetId: key,
+      formOnChange: onChange,
+      schemaScope,
+      formRender,
+      parent,
+    };
+
+    // 不需要绑定事件的目标：折叠面板不需要设置 onChange 事件，否则会导致触发多次
+    if (!skipBindList.includes(componentName)) {
+      // 绑定新的 change 事件
+      bindCallback({
+        ...bindParams,
+        actionName: "onChange",
+      });
+    }
+
+    // 处理自增表格、卡片等情况
+    if (arrayList.includes(componentName)) {
+      bindOnChange(item.items, {
+        ...opt,
+        parent: item,
+        isCloneDeep: false,
+      });
+      // 处理点击新增、删除、排序操作
+      const actions = ["onAdd", "onCopy", "onRemove", "onMoveDown", "onMoveUp"];
+      actions.forEach((actionName) => {
+        bindCallback({
+          ...bindParams,
+          actionName,
+        });
+      });
+    }
+
+    // 处理嵌套的情况
+    if (item.properties) {
+      bindOnChange(item, {
+        ...opt,
+        isCloneDeep: false,
+      });
+    }
+  });
+  return _schema;
+};
+
+/**
+ * 添加回调函数
+ * @param target
+ * @param name
+ * @param formOnChange
+ */
+export const bindCallback = (opt) => {
+  const { target, actionName, schemaScope, formOnChange } = opt || {};
+  const tempFn = target[actionName];
+  if (!schemaScope._$tempData) {
+    schemaScope._$tempData = {};
+  }
+  // 设置一个唯一的函数名，用于从 schema scope 传入 formily 事件执行中
+  const fnKey = "fnKey_" + nanoid();
+  // 设置 schemaScope 中的唯一函数,获取执行函数作用域 $form, $self, $observable, $effect, $memo, $props, $values 相关参数
+  schemaScope._$tempData[fnKey] = function (params, sourceArgs) {
+    const { $form, $self, $observable, $effect, $memo, $props, $values } = params;
+    // 处理结果数据，各组件返回数据格式不一致
+    const res = handleChangeValue({
+      ...opt,
+      sourceArgs,
+    });
+    // 触发组件 onChange 事件
+    if (isRunStr(tempFn)) {
+      // schemaScope 传入方式
+      const fn = handleSchemaStrVal(tempFn, { ...params, ...schemaScope });
+
+      typeof fn === "function" && fn(...sourceArgs, res);
+    } else if (typeof tempFn === "function") {
+      // 直接传入函数的方式
+      tempFn(...sourceArgs, res);
+    }
+    formOnChange && formOnChange(res);
+  };
+
+  // 通过 formily 字符串执行的方式回去函数作用域参数
+  target[actionName] = `{{
+    function t() {
+      // 执行 ${fnKey} 唯一函数，formily 当前函数作用域相关参数
+      return _$tempData && _$tempData.${fnKey} && _$tempData.${fnKey}(
+        { ${formilyDataKeys.join(", ")} },
+        arguments
+      );
+    }
+  }}`;
+};
+
+/**
+ * 从 onChange 事件中获取数据
+ * @param args
+ */
+export const handleChangeValue = (opt) => {
+  const { formRender, targetKey, actionName, sourceArgs } = opt || {};
+  // 自增表格、卡片无法获知当前编辑内容所在的索引，导致无法知道当前值
+  const res = {
+    key: targetKey,
+    actionName: actionName,
+    formRender,
+    formValues: formRender.values,
+    sourceArgs: sourceArgs,
+  };
+
+  return res;
+};
+
+/**
+ * 是否是可执行字符串，为 {{}} 包裹的字符串
+ * @param params
+ */
+export const isRunStr = (strKey) => {
+  if (typeof strKey !== "string") {
+    return false;
+  }
+  const key = strKey.trim();
+  return key.startsWith("{{") && key.endsWith("}}");
+};
+
+/**
+ * 获取可执行字符串，返回 {{}} 包裹的字符串
+ * @param params
+ */
+export const getRunStr = (strKey) => {
+  const _isRunStr = isRunStr(strKey);
+  if (!_isRunStr) {
+    return "";
+  }
+  const key = strKey.trim();
+  return key.replace(/^\{\{/, "").replace(/\}\}$/, "");
+};
+
+/**
+ * 处理 schema 字符串值
+ * 1.可执行字符串（{{}}包裹的字符串）：schema scope 取出对应的值，否则转为可执行函数
+ * 2.其他情况直接返回对应数据
+ * @param strKey
+ * @param schemaScope
+ * @returns
+ */
+export const handleSchemaStrVal = (strKey, schemaScope) => {
+  const _str = getRunStr(strKey);
+  if (!_str) {
+    return strKey;
+  }
+  let fn = getScopeKeyVal(_str, schemaScope);
+  if (fn) {
+    return fn;
+  }
+  return new Function("$root", `with($root) { return (${_str}) }`)(schemaScope);
+};
+
+/**
+ * 是否是 schema scope key
+ * @param strKey
+ * @returns
+ */
+export const isScopeKey = (strKey, schemaScope) => {
+  const key = getRunStr(strKey);
+  if (!schemaScope || typeof schemaScope !== "object") {
+    throw new Error("请传入正确的 schema scope");
+  }
+  // 判断是否是 scope 变量名
+  if (!schemaScope?.[key]) {
+    return false;
+  }
+  return key;
+};
+
+/**
+ * 获取 schema scope key
+ * @param strKey
+ * @returns
+ */
+export const getScopeKeyVal = (strKey, schemaScope) => {
+  if (!isScopeKey(strKey, schemaScope)) {
+    return "";
+  }
+  return schemaScope[getRunStr(strKey)];
+};

package/src/common/schema-merge.ts

@@ -1,68 +1,68 @@
-import _ from "lodash";
-
-export function mergeSchema(BaseSchema, InsideSchema, title = "") {
-  const _schema = {
-    form: BaseSchema.form,
-    schema: _.cloneDeep(BaseSchema.schema),
-  };
-  let idx = Object.keys(_schema.schema.properties).length;
-
-  if (title) {
-    _schema.schema.properties.insideTitle = {
-      type: "string",
-      "x-component": "Text",
-      "x-component-props": {
-        content: title || "内部情况",
-      },
-      "x-designable-id": "insideTitle" + idx,
-      "x-index": idx,
-    };
-  }
-
-  Object.keys(InsideSchema.schema.properties).forEach((key) => {
-    const obj = InsideSchema.schema.properties[key];
-    idx += 1;
-    obj["x-index"] = idx;
-    _schema.schema.properties[key] = obj;
-  });
-  return _schema;
-}
-
-export function mergeSchemas(schemas) {
-  if (!(Array.isArray(schemas) && schemas.length > 0)) {
-    console.error("请传入 schema");
-    return;
-  }
-  const _schemaList = _.cloneDeep(schemas);
-  const _schema = {
-    form: _schemaList[0].json.form,
-    schema: {
-      type: "object",
-      properties: {},
-      "x-designable-id": _.uniqueId("schema-merge-"),
-    },
-  };
-
-  let idx = 0;
-  _schemaList.forEach((schema, i) => {
-    const titleName = `insideTitle-${i}`;
-    _schema.schema.properties[titleName] = {
-      type: "string",
-      "x-component": "Text",
-      "x-component-props": {
-        content: schema.title,
-      },
-      "x-designable-id": titleName,
-      "x-index": idx,
-    };
-    idx += 1;
-    Object.keys(schema.json.schema.properties).forEach((key) => {
-      const obj = schema.json.schema.properties[key];
-      obj["x-index"] = idx;
-      _schema.schema.properties[key] = obj;
-      idx += 1;
-    });
-  });
-
-  return _schema;
-}
+import _ from "lodash";
+
+export function mergeSchema(BaseSchema, InsideSchema, title = "") {
+  const _schema = {
+    form: BaseSchema.form,
+    schema: _.cloneDeep(BaseSchema.schema),
+  };
+  let idx = Object.keys(_schema.schema.properties).length;
+
+  if (title) {
+    _schema.schema.properties.insideTitle = {
+      type: "string",
+      "x-component": "Text",
+      "x-component-props": {
+        content: title || "内部情况",
+      },
+      "x-designable-id": "insideTitle" + idx,
+      "x-index": idx,
+    };
+  }
+
+  Object.keys(InsideSchema.schema.properties).forEach((key) => {
+    const obj = InsideSchema.schema.properties[key];
+    idx += 1;
+    obj["x-index"] = idx;
+    _schema.schema.properties[key] = obj;
+  });
+  return _schema;
+}
+
+export function mergeSchemas(schemas) {
+  if (!(Array.isArray(schemas) && schemas.length > 0)) {
+    console.error("请传入 schema");
+    return;
+  }
+  const _schemaList = _.cloneDeep(schemas);
+  const _schema = {
+    form: _schemaList[0].json.form,
+    schema: {
+      type: "object",
+      properties: {},
+      "x-designable-id": _.uniqueId("schema-merge-"),
+    },
+  };
+
+  let idx = 0;
+  _schemaList.forEach((schema, i) => {
+    const titleName = `insideTitle-${i}`;
+    _schema.schema.properties[titleName] = {
+      type: "string",
+      "x-component": "Text",
+      "x-component-props": {
+        content: schema.title,
+      },
+      "x-designable-id": titleName,
+      "x-index": idx,
+    };
+    idx += 1;
+    Object.keys(schema.json.schema.properties).forEach((key) => {
+      const obj = schema.json.schema.properties[key];
+      obj["x-index"] = idx;
+      _schema.schema.properties[key] = obj;
+      idx += 1;
+    });
+  });
+
+  return _schema;
+}