@hzab/form-render 1.5.0-beta2 → 1.5.0-beta4

package/CHANGELOG.md

@@ -1,5 +1,6 @@
 # @hzab/form-render@1.5.0
 
+feat: ossUpload 文件目录配置 dir 前缀 oss-upload 文件目录；dir 格式格式化
 feat: 上传组件多模式上传，出参格式配置
 fix: 字符串事件处理（onChange）
 

package/package.json

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

package/src/common/schema-handler.ts

@@ -14,7 +14,7 @@ export const nanoid = customAlphabet(alphabet, 20);
  *
  * 2. `$form` is the current Form Model
  *
- * 3. `$deps` is the dependencies value
+ * 3. `$deps` is the dependencies value 仅在 run 中存在
  *
  * 4. `$observable` function is used to create an persistent observable state object
  *
@@ -30,7 +30,7 @@ export const nanoid = customAlphabet(alphabet, 20);
  **/
 
 /** formily 执行函数作用域相关参数 */
-export const formilyDataKeys = ["$form", "$self", "$observable", "$effect", "$memo", "$props", "$values", "$deps"];
+export const formilyDataKeys = ["$form", "$self", "$observable", "$effect", "$memo", "$props", "$values"];
 
 /** 自增容器 */
 export const arrayList = ["ArrayTable", "ArrayCards"];
@@ -127,9 +127,9 @@ export const bindCallback = (opt) => {
   }
   // 设置一个唯一的函数名，用于从 schema scope 传入 formily 事件执行中
   const fnKey = "fnKey_" + nanoid();
-  // 设置 schemaScope 中的唯一函数,获取执行函数作用域 $form, $self, $observable, $effect, $memo, $props, $values, $deps 相关参数
+  // 设置 schemaScope 中的唯一函数,获取执行函数作用域 $form, $self, $observable, $effect, $memo, $props, $values 相关参数
   schemaScope._$tempData[fnKey] = function (params, sourceArgs) {
-    const { $form, $self, $observable, $effect, $memo, $props, $values, $deps } = params;
+    const { $form, $self, $observable, $effect, $memo, $props, $values } = params;
     // 处理结果数据，各组件返回数据格式不一致
     const res = handleChangeValue({
       ...opt,

package/src/components/LocationPicker/components/ModalContent/index.tsx

@@ -220,7 +220,6 @@ export const ModalContent = observer((props: any) => {
   function onClickMap(ev) {
     const { lng: evLon, lat: evLat } = ev.lnglat || {};
     if (element === "Polypoint") {
-      console.log(evLon, evLat);
       setPickPoint(evLon, evLat, { changeCenter: true });
     }
   }

package/src/components/Upload/common/customRequest.ts

@@ -3,8 +3,14 @@ import LUploadOss from "./ossUpload";
 export const getOfflineUploadRequest = (props) => {
   return ({ action, data, file, filename, headers, method, onSuccess, onProgress, onError }) => {
     // TODO: 处理请求逻辑
-    // file.ossPromise = ;
-    onSuccess(file);
+    file.ossPromise = new Promise((resolve) => {
+      resolve(file);
+    })
+      .then((file) => {
+        onSuccess(file);
+        return file;
+      })
+      .catch(onError);
   };
 };
 

package/src/components/Upload/common/fileName.ts

@@ -7,6 +7,9 @@ import { nanoid } from "./nanoid";
  * @returns
  */
 export function getFileName(fileUrl) {
+  if (typeof fileUrl !== "string") {
+    return;
+  }
   const res = fileUrl?.match(/([^\/]+?)\.[^\/\.]+$/);
   if (res && res.length > 0) {
     return res?.[1] || res?.[0];
@@ -21,6 +24,9 @@ export function getFileName(fileUrl) {
  * @returns
  */
 export function getFullFileName(fileUrl) {
+  if (typeof fileUrl !== "string") {
+    return;
+  }
   const res = fileUrl?.match(/[^\/]+?\.[^\/\.]+$/);
   if (res && res.length > 0) {
     return res[0];
@@ -34,10 +40,13 @@ export function getFullFileName(fileUrl) {
  * @param {*} str
  * @returns
  */
-export const mergeFileName = function (fileName, str) {
+export const mergeFileName = function (fileName, str = "") {
+  if (typeof fileName !== "string") {
+    return "";
+  }
   const name = fileName?.match(/([^\/]+?)\.[^\/]+$/)?.[1] || "";
   const suffix = fileName?.match(/[^\/]+?\.([^\/]+)$/)?.[1] || "";
-  return `${name}${str}.${suffix}`;
+  return `${name}${str ?? ""}.${suffix}`;
 };
 
 /**

package/src/components/Upload/common/handleIOFileList.ts

@@ -97,6 +97,9 @@ export const objStrToObj = function (objStr) {
  * @returns
  */
 export function mergePreviewConfig(uri, previewConfig) {
+  if (typeof uri !== "string") {
+    return uri;
+  }
   let _uri = uri?.trim();
   // base64 直接返回
   if (isBase64Str(_uri)) {

package/src/components/Upload/common/ossUpload.js

@@ -1,5 +1,6 @@
 import { axios } from "@hzab/data-model";
 import { getFileNameByFileObj } from "./fileName";
+import { formatDirStr, mergeDirStr } from "./utils";
 
 export function getSignature(opt = {}) {
   const { serverUrl = "/api/v1/user/oss/getWebOssConfig" } = opt;
@@ -12,6 +13,9 @@ export function getSignature(opt = {}) {
     return Promise.resolve(window.__ossSignatureRes);
   }
   const { axios: _ax = axios, params = {}, axiosConf } = opt;
+  // 处理 dir 格式，必须为非 / 开头， /  结尾。如： test/
+  params.dir = formatDirStr(params.dir);
+
   return _ax
     .get(serverUrl, {
       ...axiosConf,
@@ -39,6 +43,8 @@ class OssUpload {
   }
 
   getSignature(serverUrl = this.serverUrl, opt) {
+    // dir 前缀 oss-upload 文件目录
+    opt.params.dir = mergeDirStr("web-upload/", opt.params.dir);
     return getSignature({
       ...opt,
       serverUrl,

package/src/components/Upload/common/utils.js

@@ -1,5 +1,22 @@
 import { nanoid } from "nanoid";
 
+/**
+ * 格式化 dir 字符串，必须为非 / 开头， /  结尾。如： test/
+ * @param {*} dir
+ * @returns
+ */
+export const formatDirStr = function (dir) {
+  return dir?.replace(/^\/(.*)\/*$/, "$1").replace(/(.?=*)\/*$/, "$1/");
+};
+
+/**
+ * 合并 dir 字符串
+ * @param {*} dir
+ */
+export const mergeDirStr = function (dir1, dir2) {
+  return `${formatDirStr(dir1 || "")}${formatDirStr(dir2 || "")}`;
+};
+
 /**
  *  建立一个可以存取该 file 的 url
  * @param {Object} file 文件

package/src/components/Upload/uploader.jsx

@@ -102,7 +102,12 @@ export function Uploader({ onChange, ...props }) {
       let _file = _files[i]?.originFileObj || _files[i];
       if (!_file.url) {
         _file.url = (await _file.ossPromise) || _file.ossUrl || typeof _file === "string" ? _file : "";
-        _files[i].url = _file.url;
+        if (typeof _file.url === "string") {
+          _files[i].url = _file.url;
+        } else if (typeof _file?.url?.ossUrl === "string") {
+          _file.url = _file?.url?.ossUrl;
+          _files[i].url = _file?.url?.ossUrl;
+        }
       }
     }
 

package/src/components/index.tsx

@@ -1,8 +1,5 @@
 import Text from "./Text";
 
-export * from "./ArrayBase";
-export * from "./ArrayTable";
-export * from "./ArrayCards";
 export * from "./Upload";
 
 export * from "./UserSelect";

package/src/index.tsx

@@ -26,6 +26,8 @@ import {
   FormLayout,
   FormTab,
   FormCollapse,
+  ArrayTable,
+  ArrayCards,
 } from "c-formily-antd";
 import { Card, Slider, Rate } from "antd";
 
@@ -61,6 +63,8 @@ const antdComponents = {
   FormLayout,
   FormTab,
   FormCollapse,
+  ArrayTable,
+  ArrayCards,
 };
 
 /** schema scope 解决父级无 schema Scope 导致 scope 对象刷新的问题 */
@@ -76,6 +80,8 @@ const FormRender = forwardRef((props: any, parentRef) => {
   const SchemaField = useCallback(
     createSchemaField({
       components: {
+        ArrayTable,
+        ArrayCards,
         Space,
         FormGrid,
         FormLayout,

package/src/components/ArrayBase/index.tsx

@@ -1,315 +0,0 @@
-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

@@ -1,87 +0,0 @@
-@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

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

package/src/components/ArrayCards/index.tsx

@@ -1,151 +0,0 @@
-import React from "react";
-import { Card, Empty } from "antd";
-import { CardProps } from "antd/lib/card";
-import { ArrayField } from "@formily/core";
-import { useField, observer, useFieldSchema, RecursionField } from "@formily/react";
-import cls from "classnames";
-import { ISchema } from "@formily/json-schema";
-import { usePrefixCls } from "c-formily-antd/lib/__builtins__";
-import { ArrayBase, ArrayBaseMixins, IArrayBaseProps } from "../ArrayBase";
-
-type ComposedArrayCards = React.FC<React.PropsWithChildren<CardProps & IArrayBaseProps>> & ArrayBaseMixins;
-
-const isAdditionComponent = (schema: ISchema) => {
-  return schema["x-component"]?.indexOf("Addition") > -1;
-};
-
-const isIndexComponent = (schema: ISchema) => {
-  return schema["x-component"]?.indexOf?.("Index") > -1;
-};
-
-const isRemoveComponent = (schema: ISchema) => {
-  return schema["x-component"]?.indexOf?.("Remove") > -1;
-};
-
-const isCopyComponent = (schema: ISchema) => {
-  return schema["x-component"]?.indexOf?.("Copy") > -1;
-};
-
-const isMoveUpComponent = (schema: ISchema) => {
-  return schema["x-component"]?.indexOf?.("MoveUp") > -1;
-};
-
-const isMoveDownComponent = (schema: ISchema) => {
-  return schema["x-component"]?.indexOf?.("MoveDown") > -1;
-};
-
-const isOperationComponent = (schema: ISchema) => {
-  return (
-    isAdditionComponent(schema) ||
-    isRemoveComponent(schema) ||
-    isCopyComponent(schema) ||
-    isMoveDownComponent(schema) ||
-    isMoveUpComponent(schema)
-  );
-};
-
-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, ...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;
-      const title = (
-        <span>
-          <RecursionField
-            schema={items}
-            name={index}
-            filterProperties={(schema) => {
-              if (!isIndexComponent(schema)) return false;
-              return true;
-            }}
-            onlyRenderProperties
-          />
-          {props.title || field.title}
-        </span>
-      );
-      const extra = (
-        <span>
-          <RecursionField
-            schema={items}
-            name={index}
-            filterProperties={(schema) => {
-              if (!isOperationComponent(schema)) return false;
-              return true;
-            }}
-            onlyRenderProperties
-          />
-          {props.extra}
-        </span>
-      );
-      const content = (
-        <RecursionField
-          schema={items}
-          name={index}
-          filterProperties={(schema) => {
-            if (isIndexComponent(schema)) return false;
-            if (isOperationComponent(schema)) return false;
-            return true;
-          }}
-        />
-      );
-      return (
-        // ! key 用于排序，必须是序号
-        <ArrayBase.Item key={index} index={index} record={() => field.value?.[index]}>
-          <Card
-            {...cardProps}
-            onChange={() => {}}
-            className={cls(`${prefixCls}-item`, props.className)}
-            title={title}
-            extra={extra}
-          >
-            {content}
-          </Card>
-        </ArrayBase.Item>
-      );
-    });
-  };
-
-  const renderAddition = () => {
-    return schema.reduceProperties((addition, schema, key) => {
-      if (isAdditionComponent(schema)) {
-        return <RecursionField schema={schema} name={key} />;
-      }
-      return addition;
-    }, null);
-  };
-
-  const renderEmpty = () => {
-    if (dataSource?.length) return;
-    return (
-      <Card
-        {...cardProps}
-        onChange={() => {}}
-        className={cls(`${prefixCls}-item`, props.className)}
-        title={props.title || field.title}
-      >
-        <Empty />
-      </Card>
-    );
-  };
-
-  return (
-    <ArrayBase onAdd={onAdd} onCopy={onCopy} onRemove={onRemove} onMoveUp={onMoveUp} onMoveDown={onMoveDown}>
-      {renderEmpty()}
-      {renderItems()}
-      {renderAddition()}
-    </ArrayBase>
-  );
-});
-
-ArrayCards.displayName = "ArrayCards";
-
-ArrayBase.mixin(ArrayCards);
-
-export default ArrayCards;

package/src/components/ArrayCards/style.less

@@ -1,15 +0,0 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
-
-@array-base-prefix-cls: ~'@{ant-prefix}-formily-array-base';
-@array-cards-prefix-cls: ~'@{ant-prefix}-formily-array-cards';
-
-.@{array-cards-prefix-cls}-item {
-  margin-bottom: 10px !important;
-}
-
-.ant-card-extra {
-  .@{array-base-prefix-cls}-copy {
-    margin-left: 6px;
-  }
-}

package/src/components/ArrayCards/style.ts

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

package/src/components/ArrayTable/index.tsx

@@ -1,405 +0,0 @@
-import React, { Fragment, useState, useRef, useEffect, createContext, useContext, useCallback } from "react";
-import { Table, Pagination, Space, Select, Badge } from "antd";
-import { PaginationProps } from "antd/lib/pagination";
-import { TableProps, ColumnProps } from "antd/lib/table";
-import { SelectProps } from "antd/lib/select";
-import cls from "classnames";
-import { GeneralField, FieldDisplayTypes, ArrayField } from "@formily/core";
-import { useField, observer, useFieldSchema, RecursionField, ReactFC } from "@formily/react";
-import { isArr, isBool, isFn } from "@formily/shared";
-import { Schema } from "@formily/json-schema";
-import { usePrefixCls, SortableContainer, SortableElement } from "c-formily-antd/lib/__builtins__";
-import { ArrayBase, ArrayBaseMixins, IArrayBaseProps } from "../ArrayBase";
-
-interface ObservableColumnSource {
-  field: GeneralField;
-  columnProps: ColumnProps<any>;
-  schema: Schema;
-  display: FieldDisplayTypes;
-  name: string;
-}
-interface IArrayTablePaginationProps extends PaginationProps {
-  dataSource?: any[];
-  showPagination?: boolean;
-  children?: (
-    dataSource: any[],
-    pagination: React.ReactNode,
-    options: {
-      startIndex: number;
-    },
-  ) => React.ReactElement;
-}
-
-interface IStatusSelectProps extends SelectProps<any> {
-  pageSize?: number;
-}
-
-type ComposedArrayTable = React.FC<React.PropsWithChildren<TableProps<any> & IArrayBaseProps>> &
-  ArrayBaseMixins & {
-    Column?: React.FC<React.PropsWithChildren<ColumnProps<any>>>;
-  };
-
-interface PaginationAction {
-  totalPage?: number;
-  pageSize?: number;
-  showPagination?: boolean;
-  changePage?: (page: number) => void;
-}
-
-const SortableRow = SortableElement((props: any) => <tr {...props} />);
-const SortableBody = SortableContainer((props: any) => <tbody {...props} />);
-
-const isColumnComponent = (schema: Schema) => {
-  return schema["x-component"]?.indexOf("Column") > -1;
-};
-
-const isOperationsComponent = (schema: Schema) => {
-  return schema["x-component"]?.indexOf("Operations") > -1;
-};
-
-const isAdditionComponent = (schema: Schema) => {
-  return schema["x-component"]?.indexOf("Addition") > -1;
-};
-
-const useArrayTableSources = () => {
-  const arrayField = useField();
-  const schema = useFieldSchema();
-  const parseSources = (schema: Schema): ObservableColumnSource[] => {
-    if (isColumnComponent(schema) || isOperationsComponent(schema) || isAdditionComponent(schema)) {
-      if (!schema["x-component-props"]?.["dataIndex"] && !schema["name"]) return [];
-      const name = schema["x-component-props"]?.["dataIndex"] || schema["name"];
-      const field = arrayField.query(arrayField.address.concat(name)).take();
-      const columnProps = field?.component?.[1] || schema["x-component-props"] || {};
-      const display = field?.display || schema["x-display"] || "visible";
-      return [
-        {
-          name,
-          display,
-          field,
-          schema,
-          columnProps,
-        },
-      ];
-    } else if (schema.properties) {
-      return schema.reduceProperties((buf, schema) => {
-        return buf.concat(parseSources(schema));
-      }, []);
-    }
-  };
-
-  const parseArrayItems = (schema: Schema["items"]) => {
-    if (!schema) return [];
-    const sources: ObservableColumnSource[] = [];
-    const items = isArr(schema) ? schema : [schema];
-    return items.reduce((columns, schema) => {
-      const item = parseSources(schema);
-      if (item) {
-        return columns.concat(item);
-      }
-      return columns;
-    }, sources);
-  };
-
-  if (!schema) throw new Error("can not found schema object");
-
-  return parseArrayItems(schema.items);
-};
-
-const useArrayTableColumns = (
-  dataSource: any[],
-  field: ArrayField,
-  sources: ObservableColumnSource[],
-): TableProps<any>["columns"] => {
-  return sources.reduce((buf, { name, columnProps, schema, display }, key) => {
-    if (display !== "visible") return buf;
-    if (!isColumnComponent(schema)) return buf;
-    return buf.concat({
-      ...columnProps,
-      // ! key 用于排序，必须是序号
-      key,
-      dataIndex: name,
-      render: (value: any, record: any) => {
-        const index = dataSource?.indexOf(record);
-        const children = (
-          <ArrayBase.Item index={index} record={() => field?.value?.[index]}>
-            <RecursionField schema={schema} name={index} onlyRenderProperties />
-          </ArrayBase.Item>
-        );
-        return children;
-      },
-    });
-  }, []);
-};
-
-const useAddition = () => {
-  const schema = useFieldSchema();
-  return schema.reduceProperties((addition, schema, key) => {
-    if (isAdditionComponent(schema)) {
-      return <RecursionField schema={schema} name={key} />;
-    }
-    return addition;
-  }, null);
-};
-
-const schedulerRequest = {
-  request: null,
-};
-
-const StatusSelect: ReactFC<IStatusSelectProps> = observer(
-  (props) => {
-    const field = useField<ArrayField>();
-    const prefixCls = usePrefixCls("formily-array-table");
-    const errors = field.errors;
-    const parseIndex = (address: string) => {
-      return Number(address.slice(address.indexOf(field.address.toString()) + 1).match(/(\d+)/)?.[1]);
-    };
-    const options = props.options?.map(({ label, value }) => {
-      const val = Number(value);
-      const hasError = errors.some(({ address }) => {
-        const currentIndex = parseIndex(address);
-        const startIndex = (val - 1) * props.pageSize;
-        const endIndex = val * props.pageSize;
-        return currentIndex >= startIndex && currentIndex <= endIndex;
-      });
-      return {
-        label: hasError ? <Badge dot>{label}</Badge> : label,
-        value,
-      };
-    });
-
-    const width = String(options?.length).length * 15;
-
-    return (
-      <Select
-        value={props.value}
-        onChange={props.onChange}
-        options={options}
-        virtual
-        style={{
-          width: width < 60 ? 60 : width,
-        }}
-        className={cls(`${prefixCls}-status-select`, {
-          "has-error": errors?.length,
-        })}
-      />
-    );
-  },
-  {
-    scheduler: (update) => {
-      clearTimeout(schedulerRequest.request);
-      schedulerRequest.request = setTimeout(() => {
-        update();
-      }, 100);
-    },
-  },
-);
-
-const PaginationContext = createContext<PaginationAction>({});
-const usePagination = () => {
-  return useContext(PaginationContext);
-};
-
-const ArrayTablePagination: ReactFC<IArrayTablePaginationProps> = (props) => {
-  const [current, setCurrent] = useState(1);
-  const prefixCls = usePrefixCls("formily-array-table");
-  const showPagination = props.showPagination ?? true;
-  const pageSize = props.pageSize || 10;
-  const size = props.size || "default";
-  const dataSource = props.dataSource || [];
-  const startIndex = (current - 1) * pageSize;
-  const endIndex = startIndex + pageSize - 1;
-  const total = dataSource?.length || 0;
-  const totalPage = Math.ceil(total / pageSize);
-  const pages = Array.from(new Array(totalPage)).map((_, index) => {
-    const page = index + 1;
-    return {
-      label: page,
-      value: page,
-    };
-  });
-  const handleChange = (current: number) => {
-    setCurrent(current);
-  };
-
-  useEffect(() => {
-    if (totalPage > 0 && totalPage < current) {
-      handleChange(totalPage);
-    }
-  }, [totalPage, current]);
-
-  const renderPagination = () => {
-    if (totalPage <= 1 || !showPagination) return;
-    return (
-      <div className={`${prefixCls}-pagination`}>
-        <Space>
-          <StatusSelect
-            value={current}
-            pageSize={pageSize}
-            onChange={handleChange}
-            options={pages}
-            notFoundContent={false}
-          />
-          <Pagination
-            {...props}
-            pageSize={pageSize}
-            current={current}
-            total={dataSource.length}
-            size={size}
-            showSizeChanger={false}
-            onChange={handleChange}
-          />
-        </Space>
-      </div>
-    );
-  };
-
-  return (
-    <Fragment>
-      <PaginationContext.Provider
-        value={{
-          totalPage,
-          pageSize,
-          changePage: handleChange,
-          showPagination,
-        }}
-      >
-        {props.children?.(
-          showPagination ? dataSource?.slice(startIndex, endIndex + 1) : dataSource,
-          renderPagination(),
-          { startIndex },
-        )}
-      </PaginationContext.Provider>
-    </Fragment>
-  );
-};
-
-const RowComp: ReactFC<React.HTMLAttributes<HTMLTableRowElement>> = (props) => {
-  const prefixCls = usePrefixCls("formily-array-table");
-  const index = props["data-row-key"] || 0;
-  return (
-    <SortableRow
-      lockAxis="y"
-      {...props}
-      index={index}
-      className={cls(props.className, `${prefixCls}-row-${index + 1}`)}
-    />
-  );
-};
-
-export const ArrayTable: ComposedArrayTable = observer((props) => {
-  const ref = useRef<HTMLDivElement>();
-  const field = useField<ArrayField>();
-  const prefixCls = usePrefixCls("formily-array-table");
-  const dataSource = Array.isArray(field.value) ? field.value.slice() : [];
-  const sources = useArrayTableSources();
-  const columns = useArrayTableColumns(dataSource, field, sources);
-  const pagination = isBool(props.pagination) ? { showPagination: props.pagination } : props.pagination;
-  const addition = useAddition();
-  const { onAdd, onCopy, onRemove, onMoveDown, onMoveUp } = props;
-  const defaultRowKey = (record: any) => {
-    return dataSource.indexOf(record);
-  };
-  const addTdStyles = (id: number) => {
-    const node = ref.current?.querySelector(`.${prefixCls}-row-${id}`);
-    const helper = document.body.querySelector(`.${prefixCls}-sort-helper`);
-    if (!helper) return;
-    const tds = node?.querySelectorAll("td");
-    if (!tds) return;
-    requestAnimationFrame(() => {
-      helper.querySelectorAll("td").forEach((td, index) => {
-        if (tds[index]) {
-          td.style.width = getComputedStyle(tds[index]).width;
-        }
-      });
-    });
-  };
-  const getWrapperComp = useCallback(
-    (dataSource: any[], start: number) => (props: any) =>
-      (
-        <SortableBody
-          {...props}
-          start={start}
-          list={dataSource.slice()}
-          accessibility={{
-            container: ref.current || undefined,
-          }}
-          onSortStart={(event) => {
-            addTdStyles(event.active.id as number);
-          }}
-          onSortEnd={({ oldIndex, newIndex }) => {
-            field.move(oldIndex, newIndex);
-          }}
-          className={cls(`${prefixCls}-sort-helper`, props.className)}
-        />
-      ),
-    [field],
-  );
-  return (
-    <ArrayTablePagination {...pagination} dataSource={dataSource}>
-      {(dataSource, pager, { startIndex }) => (
-        <div ref={ref} className={prefixCls}>
-          <ArrayBase onAdd={onAdd} onCopy={onCopy} onRemove={onRemove} onMoveUp={onMoveUp} onMoveDown={onMoveDown}>
-            <Table
-              size="small"
-              bordered
-              rowKey={defaultRowKey}
-              {...props}
-              onChange={() => {}}
-              pagination={false}
-              columns={columns}
-              dataSource={dataSource}
-              components={{
-                body: {
-                  wrapper: getWrapperComp(dataSource, startIndex),
-                  row: RowComp,
-                },
-              }}
-            />
-            <div style={{ marginTop: 5, marginBottom: 5 }}>{pager}</div>
-            {sources.map((column, key) => {
-              //专门用来承接对Column的状态管理
-              if (!isColumnComponent(column.schema)) return;
-              return React.createElement(RecursionField, {
-                name: column.name,
-                schema: column.schema,
-                onlyRenderSelf: true,
-                // ! key 用于排序，必须是序号
-                key,
-              });
-            })}
-            {addition}
-          </ArrayBase>
-        </div>
-      )}
-    </ArrayTablePagination>
-  );
-});
-
-ArrayTable.displayName = "ArrayTable";
-
-ArrayTable.Column = () => {
-  return <Fragment />;
-};
-
-ArrayBase.mixin(ArrayTable);
-
-const Addition: ArrayBaseMixins["Addition"] = (props) => {
-  const array = ArrayBase.useArray();
-  const { totalPage = 0, pageSize = 10, changePage, showPagination } = usePagination();
-  return (
-    <ArrayBase.Addition
-      {...props}
-      onClick={(e) => {
-        // 如果添加数据后将超过当前页，则自动切换到下一页
-        const total = array?.field?.value.length || 0;
-        if (showPagination && total === totalPage * pageSize + 1 && isFn(changePage)) {
-          changePage(totalPage + 1);
-        }
-        props.onClick?.(e);
-      }}
-    />
-  );
-};
-ArrayTable.Addition = Addition;
-
-export default ArrayTable;

package/src/components/ArrayTable/style.less

@@ -1,53 +0,0 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
-
-@array-table-prefix-cls: ~'@{ant-prefix}-formily-array-table';
-
-.@{array-table-prefix-cls} {
-  .@{array-table-prefix-cls}-pagination {
-    display: flex;
-    justify-content: center;
-
-    .@{array-table-prefix-cls}-status-select.has-error {
-      .@{ant-prefix}-select-selector {
-        border-color: @error-color !important;
-      }
-    }
-  }
-
-  .@{ant-prefix}-table {
-    table {
-      overflow: hidden;
-    }
-
-    td {
-      visibility: visible;
-
-      .@{ant-prefix}-formily-item:not(.@{ant-prefix}-formily-item-feedback-layout-popover) {
-        margin-bottom: 0 !important;
-
-        .@{ant-prefix}-formily-item-help {
-          position: absolute;
-          font-size: 12px;
-          top: 100%;
-          background: #fff;
-          width: 100%;
-          margin-top: 3px;
-          padding: 3px;
-          z-index: 1;
-          border-radius: 3px;
-          box-shadow: 0 0 10px #eee;
-          animation: none;
-          transform: translateY(0);
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  .@{array-table-prefix-cls}-sort-helper {
-    background: #fff;
-    border: 1px solid #eee;
-    z-index: 10;
-  }
-}

package/src/components/ArrayTable/style.ts

@@ -1,7 +0,0 @@
-import 'antd/lib/table/style/index'
-import 'antd/lib/button/style/index'
-import 'antd/lib/select/style/index'
-import 'antd/lib/space/style/index'
-import 'antd/lib/badge/style/index'
-import 'antd/lib/pagination/style/index'
-import './style.less'