@hzab/form-render 1.4.1-beta → 1.5.0-beta

package/CHANGELOG.md

@@ -1,6 +1,7 @@
-# @hzab/form-render@1.4.1
+# @hzab/form-render@1.5.0
 
-fix: ArrayTable & ArrayCards key nanoid 生成
+feat: 上传组件多模式上传，出参格式配置
+fix: 字符串事件处理（onChange）
 
 # @hzab/form-render@1.4.0
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/form-render",
-  "version": "1.4.1-beta",
+  "version": "1.5.0-beta",
   "description": "",
   "main": "src",
   "scripts": {

package/src/common/schema-handler.ts

@@ -1,4 +1,14 @@
 import _ from "lodash";
+import { customAlphabet } from "nanoid";
+
+/**
+ * 指定 nanoid 字符集合
+ */
+export const alphabet = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+export const nanoid = customAlphabet(alphabet, 20);
+
+/** formily 执行函数作用域相关参数 */
+export const formilyDataKeys = ["$form", "$self", "$observable", "$effect", "$memo", "$props", "$values"];
 
 /** 自增容器 */
 export const arrayList = ["ArrayTable", "ArrayCards"];
@@ -29,8 +39,8 @@ export const bindOnChange = (schema, opt) => {
     const comProps = item?.["x-component-props"];
     if (!comProps) {
       item["x-component-props"] = {};
-    } else if (isScopeKey(comProps)) {
-      item["x-component-props"] = getValByScope(comProps, schemaScope) || {};
+    } else if (isScopeKey(comProps, schemaScope)) {
+      item["x-component-props"] = getScopeKeyVal(comProps, schemaScope) || {};
     }
 
     const bindParams = {
@@ -90,16 +100,24 @@ export const bindOnChange = (schema, opt) => {
 export const bindCallback = (opt) => {
   const { target, actionName, schemaScope, formOnChange } = opt || {};
   const tempFn = target[actionName];
-  target[actionName] = function (...sourceArgs) {
+  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 (isScopeKey(tempFn)) {
+    if (isRunStr(tempFn)) {
       // schemaScope 传入方式
-      const fn = schemaScope && schemaScope[getScopeKey(tempFn)];
+      const fn = handleSchemaStrVal(tempFn, { ...params, ...schemaScope });
+
       typeof fn === "function" && fn(...sourceArgs, res);
     } else if (typeof tempFn === "function") {
       // 直接传入函数的方式
@@ -107,6 +125,17 @@ export const bindCallback = (opt) => {
     }
     formOnChange && formOnChange(res);
   };
+
+  // 通过 formily 字符串执行的方式回去函数作用域参数
+  target[actionName] = `{{
+    function t() {
+      // 执行 ${fnKey} 唯一函数，formily 当前函数作用域相关参数
+      return _$tempData && _$tempData.${fnKey} && _$tempData.${fnKey}(
+        { ${formilyDataKeys.join(", ")} },
+        arguments
+      );
+    }
+  }}`;
 };
 
 /**
@@ -114,8 +143,7 @@ export const bindCallback = (opt) => {
  * @param args
  */
 export const handleChangeValue = (opt) => {
-  const { componentName, formRender, parent, targetKey, actionName, sourceArgs } = opt || {};
-  console.log("parent", parent);
+  const { formRender, targetKey, actionName, sourceArgs } = opt || {};
   // 自增表格、卡片无法获知当前编辑内容所在的索引，导致无法知道当前值
   const res = {
     key: targetKey,
@@ -123,26 +151,16 @@ export const handleChangeValue = (opt) => {
     formRender,
     formValues: formRender.values,
     sourceArgs: sourceArgs,
-    // value: formRender.getValuesIn(targetKey),
-    // parent,
-    // TODO: 自增情况下无法获知索引
-    // parentValue: formRender.getValuesIn(parent?.name),
   };
 
-  // TODO: 自增返回父级值？
-  // if (returnParentValue.includes(parent?.["x-component"])) {
-  //   res.value = res.parentValue;
-  // }
-
   return res;
 };
 
 /**
- * 是否是 scope key
- * @param strKey
- * @returns
+ * 是否是可执行字符串，为 {{}} 包裹的字符串
+ * @param params
  */
-export const isScopeKey = (strKey) => {
+export const isRunStr = (strKey) => {
   if (typeof strKey !== "string") {
     return false;
   }
@@ -151,12 +169,12 @@ export const isScopeKey = (strKey) => {
 };
 
 /**
- * 获取 scope key
- * @param strKey
- * @returns
+ * 获取可执行字符串，返回 {{}} 包裹的字符串
+ * @param params
  */
-export const getScopeKey = (strKey) => {
-  if (!isScopeKey(strKey)) {
+export const getRunStr = (strKey) => {
+  const _isRunStr = isRunStr(strKey);
+  if (!_isRunStr) {
     return "";
   }
   const key = strKey.trim();
@@ -164,13 +182,50 @@ export const getScopeKey = (strKey) => {
 };
 
 /**
- * 通过字符串获取 schemaScope 中的数据
+ * 处理 schema 字符串值
+ * 1.可执行字符串（{{}}包裹的字符串）：schema scope 取出对应的值，否则转为可执行函数
+ * 2.其他情况直接返回对应数据
  * @param strKey
  * @param schemaScope
  * @returns
  */
-export const getValByScope = (strKey, schemaScope = {}) => {
-  if (isScopeKey(strKey)) {
-    return schemaScope && schemaScope[getScopeKey(strKey)];
+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/components/ArrayBase/index.tsx

@@ -0,0 +1,315 @@
+import { CopyOutlined, DeleteOutlined, DownOutlined, MenuOutlined, PlusOutlined, UpOutlined } from "@ant-design/icons";
+import { ArrayField } from "@formily/core";
+import { JSXComponent, Schema, useField, useFieldSchema } from "@formily/react";
+import { clone, isUndef, isValid } from "@formily/shared";
+import { Button } from "antd";
+import { ButtonProps } from "antd/lib/button";
+import cls from "classnames";
+import React, { createContext, useContext } from "react";
+import { SortableHandle, usePrefixCls } from "c-formily-antd/lib/__builtins__";
+
+export interface IArrayBaseAdditionProps extends ButtonProps {
+  title?: string;
+  method?: "push" | "unshift";
+  defaultValue?: any;
+}
+export interface IArrayBaseOperationProps extends ButtonProps {
+  title?: string;
+  index?: number;
+  ref?: React.Ref<HTMLElement>;
+}
+
+export interface IArrayBaseContext {
+  props: IArrayBaseProps;
+  field: ArrayField;
+  schema: Schema;
+}
+
+export interface IArrayBaseItemProps {
+  index: number;
+  record: ((index: number) => Record<string, any>) | Record<string, any>;
+}
+
+export type ArrayBaseMixins = {
+  Addition?: React.FC<React.PropsWithChildren<IArrayBaseAdditionProps>>;
+  Copy?: React.FC<React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>>;
+  Remove?: React.FC<React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>>;
+  MoveUp?: React.FC<React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>>;
+  MoveDown?: React.FC<React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>>;
+  SortHandle?: React.FC<React.PropsWithChildren<IArrayBaseOperationProps & { index?: number }>>;
+  Index?: React.FC;
+  useArray?: () => IArrayBaseContext;
+  useIndex?: (index?: number) => number;
+  useRecord?: (record?: number) => any;
+};
+
+export interface IArrayBaseProps {
+  disabled?: boolean;
+  onAdd?: (index: number) => void;
+  onCopy?: (index: number) => void;
+  onRemove?: (index: number) => void;
+  onMoveDown?: (index: number) => void;
+  onMoveUp?: (index: number) => void;
+}
+
+type ComposedArrayBase = React.FC<React.PropsWithChildren<IArrayBaseProps>> &
+  ArrayBaseMixins & {
+    Item?: React.FC<React.PropsWithChildren<IArrayBaseItemProps>>;
+    mixin?: <T extends JSXComponent>(target: T) => T & ArrayBaseMixins;
+  };
+
+const ArrayBaseContext = createContext<IArrayBaseContext>(null);
+
+const ItemContext = createContext<IArrayBaseItemProps>(null);
+
+const takeRecord = (val: any, index?: number) => (typeof val === "function" ? val(index) : val);
+
+const useArray = () => {
+  return useContext(ArrayBaseContext);
+};
+
+const useIndex = (index?: number) => {
+  const ctx = useContext(ItemContext);
+  return ctx ? ctx.index : index;
+};
+
+const useRecord = (record?: number) => {
+  const ctx = useContext(ItemContext);
+  return takeRecord(ctx ? ctx.record : record, ctx?.index);
+};
+
+const getSchemaDefaultValue = (schema: Schema) => {
+  if (schema?.type === "array") return [];
+  if (schema?.type === "object") return {};
+  if (schema?.type === "void") {
+    for (let key in schema.properties) {
+      const value = getSchemaDefaultValue(schema.properties[key]);
+      if (isValid(value)) return value;
+    }
+  }
+};
+
+const getDefaultValue = (defaultValue: any, schema: Schema) => {
+  if (isValid(defaultValue)) return clone(defaultValue);
+  if (Array.isArray(schema?.items)) return getSchemaDefaultValue(schema?.items[0]);
+  return getSchemaDefaultValue(schema?.items);
+};
+
+export const ArrayBase: ComposedArrayBase = (props) => {
+  const field = useField<ArrayField>();
+  const schema = useFieldSchema();
+  return <ArrayBaseContext.Provider value={{ field, schema, props }}>{props.children}</ArrayBaseContext.Provider>;
+};
+
+ArrayBase.Item = ({ children, ...props }) => {
+  return <ItemContext.Provider value={props}>{children}</ItemContext.Provider>;
+};
+
+const SortHandle = SortableHandle((props: any) => {
+  const prefixCls = usePrefixCls("formily-array-base");
+  return (
+    <MenuOutlined {...props} className={cls(`${prefixCls}-sort-handle`, props.className)} style={{ ...props.style }} />
+  );
+}) as any;
+
+ArrayBase.SortHandle = (props) => {
+  const array = useArray();
+  if (!array) return null;
+  if (array.field?.pattern !== "editable") return null;
+  return <SortHandle {...props} />;
+};
+
+ArrayBase.Index = (props) => {
+  const index = useIndex();
+  const prefixCls = usePrefixCls("formily-array-base");
+  return (
+    <span {...props} className={`${prefixCls}-index`}>
+      #{index + 1}.
+    </span>
+  );
+};
+
+ArrayBase.Addition = (props) => {
+  const self = useField();
+  const array = useArray();
+  const prefixCls = usePrefixCls("formily-array-base");
+  if (!array) return null;
+  if (array.field?.pattern !== "editable" && array.field?.pattern !== "disabled") return null;
+  return (
+    <Button
+      type="dashed"
+      block
+      {...props}
+      disabled={self?.disabled}
+      className={cls(`${prefixCls}-addition`, props.className)}
+      onClick={(e) => {
+        if (array.props?.disabled) return;
+        if (props.onClick) {
+          props.onClick(e);
+          if (e.defaultPrevented) return;
+        }
+        const defaultValue = getDefaultValue(props.defaultValue, array.schema);
+        if (props.method === "unshift") {
+          array.field?.unshift?.(defaultValue);
+          array.props?.onAdd?.(0);
+        } else {
+          array.field?.push?.(defaultValue);
+          array.props?.onAdd?.(array?.field?.value?.length - 1);
+        }
+      }}
+      icon={isUndef(props.icon) ? <PlusOutlined /> : props.icon}
+    >
+      {props.title || self.title}
+    </Button>
+  );
+};
+
+ArrayBase.Copy = React.forwardRef((props, ref) => {
+  const self = useField();
+  const array = useArray();
+  const index = useIndex(props.index);
+  const prefixCls = usePrefixCls("formily-array-base");
+  if (!array) return null;
+  if (array.field?.pattern !== "editable") return null;
+  return (
+    <Button
+      type="text"
+      {...props}
+      disabled={self?.disabled}
+      className={cls(`${prefixCls}-copy`, self?.disabled ? `${prefixCls}-copy-disabled` : "", props.className)}
+      ref={ref}
+      onClick={(e) => {
+        if (self?.disabled) return;
+        e.stopPropagation();
+        if (array.props?.disabled) return;
+        if (props.onClick) {
+          props.onClick(e);
+          if (e.defaultPrevented) return;
+        }
+        const value = clone(array?.field?.value[index]);
+        const distIndex = index + 1;
+        array.field?.insert?.(distIndex, value);
+        array.props?.onCopy?.(distIndex);
+      }}
+      icon={isUndef(props.icon) ? <CopyOutlined /> : props.icon}
+    >
+      {props.title || self.title}
+    </Button>
+  );
+});
+
+ArrayBase.Remove = React.forwardRef((props, ref) => {
+  const index = useIndex(props.index);
+  const self = useField();
+  const array = useArray();
+  const prefixCls = usePrefixCls("formily-array-base");
+  if (!array) return null;
+  if (array.field?.pattern !== "editable") return null;
+  return (
+    <Button
+      type="text"
+      {...props}
+      disabled={self?.disabled}
+      className={cls(`${prefixCls}-remove`, self?.disabled ? `${prefixCls}-remove-disabled` : "", props.className)}
+      ref={ref}
+      onClick={(e) => {
+        if (self?.disabled) return;
+        e.stopPropagation();
+        if (props.onClick) {
+          props.onClick(e);
+          if (e.defaultPrevented) return;
+        }
+        array.field?.remove?.(index);
+        array.props?.onRemove?.(index);
+      }}
+      icon={isUndef(props.icon) ? <DeleteOutlined /> : props.icon}
+    >
+      {props.title || self.title}
+    </Button>
+  );
+});
+
+ArrayBase.MoveDown = React.forwardRef((props, ref) => {
+  const index = useIndex(props.index);
+  const self = useField();
+  const array = useArray();
+  const prefixCls = usePrefixCls("formily-array-base");
+  if (!array) return null;
+  if (array.field?.pattern !== "editable") return null;
+  return (
+    <Button
+      type="text"
+      {...props}
+      disabled={self?.disabled}
+      className={cls(
+        `${prefixCls}-move-down`,
+        self?.disabled ? `${prefixCls}-move-down-disabled` : "",
+        props.className,
+      )}
+      ref={ref}
+      onClick={(e) => {
+        if (self?.disabled) return;
+        e.stopPropagation();
+        if (props.onClick) {
+          props.onClick(e);
+          if (e.defaultPrevented) return;
+        }
+        array.field?.moveDown?.(index);
+        array.props?.onMoveDown?.(index);
+      }}
+      icon={isUndef(props.icon) ? <DownOutlined /> : props.icon}
+    >
+      {props.title || self.title}
+    </Button>
+  );
+});
+
+ArrayBase.MoveUp = React.forwardRef((props, ref) => {
+  const index = useIndex(props.index);
+  const self = useField();
+  const array = useArray();
+  const prefixCls = usePrefixCls("formily-array-base");
+  if (!array) return null;
+  if (array.field?.pattern !== "editable") return null;
+  return (
+    <Button
+      type="text"
+      {...props}
+      disabled={self?.disabled}
+      className={cls(`${prefixCls}-move-up`, self?.disabled ? `${prefixCls}-move-up-disabled` : "", props.className)}
+      ref={ref}
+      onClick={(e) => {
+        if (self?.disabled) return;
+        e.stopPropagation();
+        if (props.onClick) {
+          props.onClick(e);
+          if (e.defaultPrevented) return;
+        }
+        array?.field?.moveUp(index);
+        array?.props?.onMoveUp?.(index);
+      }}
+      icon={isUndef(props.icon) ? <UpOutlined /> : props.icon}
+    >
+      {props.title || self.title}
+    </Button>
+  );
+});
+
+ArrayBase.useArray = useArray;
+ArrayBase.useIndex = useIndex;
+ArrayBase.useRecord = useRecord;
+ArrayBase.mixin = (target: any) => {
+  target.Index = ArrayBase.Index;
+  target.SortHandle = ArrayBase.SortHandle;
+  target.Addition = ArrayBase.Addition;
+  target.Copy = ArrayBase.Copy;
+  target.Remove = ArrayBase.Remove;
+  target.MoveDown = ArrayBase.MoveDown;
+  target.MoveUp = ArrayBase.MoveUp;
+  target.useArray = ArrayBase.useArray;
+  target.useIndex = ArrayBase.useIndex;
+  target.useRecord = ArrayBase.useRecord;
+  return target;
+};
+
+export default ArrayBase;

package/src/components/ArrayBase/style.less

@@ -0,0 +1,87 @@
+@root-entry-name: 'default';
+@import (reference) '~antd/es/style/themes/index.less';
+
+@array-base-prefix-cls: ~'@{ant-prefix}-formily-array-base';
+
+.@{array-base-prefix-cls}-remove,
+.@{array-base-prefix-cls}-copy {
+  transition: all 0.25s ease-in-out;
+  color: @text-color;
+  font-size: 14px;
+  margin-left: 6px;
+  padding: 0;
+  border: none;
+  width: auto;
+  height: auto;
+
+  &:hover {
+    color: @primary-5;
+  }
+
+  &-disabled {
+    color: @disabled-color;
+    cursor: not-allowed !important;
+    &:hover {
+      color: @disabled-color;
+    }
+  }
+}
+
+.@{array-base-prefix-cls}-sort-handle {
+  cursor: move;
+  color: #888 !important;
+  // overrid iconfont.less .anticon[tabindex] cursor
+  &.anticon[tabindex] {
+    cursor: move;
+  }
+}
+
+.@{array-base-prefix-cls}-addition {
+  transition: all 0.25s ease-in-out;
+}
+
+.@{array-base-prefix-cls}-move-down {
+  transition: all 0.25s ease-in-out;
+  color: @text-color;
+  font-size: 14px;
+  margin-left: 6px;
+  padding: 0;
+  border: none;
+  width: auto;
+  height: auto;
+
+  &:hover {
+    color: @primary-5;
+  }
+
+  &-disabled {
+    color: @disabled-color;
+    cursor: not-allowed !important;
+    &:hover {
+      color: @disabled-color;
+    }
+  }
+}
+
+.@{array-base-prefix-cls}-move-up {
+  transition: all 0.25s ease-in-out;
+  color: @text-color;
+  font-size: 14px;
+  margin-left: 6px;
+  padding: 0;
+  border: none;
+  width: auto;
+  height: auto;
+
+  &:hover {
+    color: @primary-5;
+  }
+
+  &-disabled {
+    color: @disabled-color;
+    cursor: not-allowed !important;
+    &:hover {
+      color: @disabled-color;
+    }
+  }
+}

package/src/components/ArrayBase/style.ts

@@ -0,0 +1,2 @@
+import 'antd/lib/button/style/index'
+import './style.less'

package/src/components/ArrayCards/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React from "react";
 import { Card, Empty } from "antd";
 import { CardProps } from "antd/lib/card";
 import { ArrayField } from "@formily/core";
@@ -6,8 +6,8 @@ import { useField, observer, useFieldSchema, RecursionField } from "@formily/rea
 import cls from "classnames";
 import { ISchema } from "@formily/json-schema";
 import { usePrefixCls } from "c-formily-antd/lib/__builtins__";
-import { ArrayBase, ArrayBaseMixins, IArrayBaseProps } from "c-formily-antd/lib/array-base";
-import { nanoid } from "nanoid";
+import { ArrayBase, ArrayBaseMixins, IArrayBaseProps } from "../ArrayBase";
+
 type ComposedArrayCards = React.FC<React.PropsWithChildren<CardProps & IArrayBaseProps>> & ArrayBaseMixins;
 
 const isAdditionComponent = (schema: ISchema) => {
@@ -47,19 +47,12 @@ const isOperationComponent = (schema: ISchema) => {
 export const ArrayCards: ComposedArrayCards = observer((props) => {
   const field = useField<ArrayField>();
   const schema = useFieldSchema();
+  const dataSource = Array.isArray(field.value) ? field.value : [];
   const prefixCls = usePrefixCls("formily-array-cards", props);
-  const { onAdd, onCopy, onRemove, onMoveDown, onMoveUp } = props;
-  const dataSource = useMemo(() => {
-    return Array.isArray(field.value)
-      ? field.value?.map((item) => {
-          return {
-            ...item,
-            _key: item?.id || nanoid(),
-          };
-        })
-      : [];
-  }, [field.value?.length]);
+  const { onAdd, onCopy, onRemove, onMoveDown, onMoveUp, ...cardProps } = props;
+
   if (!schema) throw new Error("can not found schema object");
+
   const renderItems = () => {
     return dataSource?.map((item, index) => {
       const items = Array.isArray(schema.items) ? schema.items[index] || schema.items[0] : schema.items;
@@ -91,7 +84,6 @@ export const ArrayCards: ComposedArrayCards = observer((props) => {
           {props.extra}
         </span>
       );
-
       const content = (
         <RecursionField
           schema={items}
@@ -104,9 +96,10 @@ export const ArrayCards: ComposedArrayCards = observer((props) => {
         />
       );
       return (
-        <ArrayBase.Item key={item?._key} index={index} record={() => field.value?.[index]}>
+        // ! key 用于排序，必须是序号
+        <ArrayBase.Item key={index} index={index} record={() => field.value?.[index]}>
           <Card
-            {...props}
+            {...cardProps}
             onChange={() => {}}
             className={cls(`${prefixCls}-item`, props.className)}
             title={title}
@@ -132,7 +125,7 @@ export const ArrayCards: ComposedArrayCards = observer((props) => {
     if (dataSource?.length) return;
     return (
       <Card
-        {...props}
+        {...cardProps}
         onChange={() => {}}
         className={cls(`${prefixCls}-item`, props.className)}
         title={props.title || field.title}