From cb91f7dbd4c0ff37cb4ce40b631221642664f53a Mon Sep 17 00:00:00 2001
From: chenos <chenlinxh@gmail.com>
Date: Fri, 19 Apr 2024 16:15:03 +0800
Subject: [PATCH] feat: improve form block (#4099)

* feat: improve form block

* fix: remove RenderChildrenWithAssociationFilter

* fix: improve form block
---
 .../client/src/block-provider/BlockProvider.tsx  |  5 ++---
 .../src/block-provider/FormBlockProvider.tsx     | 16 ++++++----------
 .../src/block-provider/TableBlockProvider.tsx    |  5 +++--
 .../src/block-provider/TableSelectorProvider.tsx |  4 ++--
 .../src/client/instruction/FormBlockProvider.tsx | 11 +++--------
 5 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/packages/core/client/src/block-provider/BlockProvider.tsx b/packages/core/client/src/block-provider/BlockProvider.tsx
index 38f1320f17..fd4de45d66 100644
--- a/packages/core/client/src/block-provider/BlockProvider.tsx
+++ b/packages/core/client/src/block-provider/BlockProvider.tsx
@@ -132,9 +132,8 @@ export const useBlockRequestContext = () => {
 };
 
 /**
- * @internal
- * @param props
- * @returns
+ * @deprecated
+ * 废弃组件，不建议使用
  */
 export const RenderChildrenWithAssociationFilter: React.FC<any> = (props) => {
   const fieldSchema = useFieldSchema();
diff --git a/packages/core/client/src/block-provider/FormBlockProvider.tsx b/packages/core/client/src/block-provider/FormBlockProvider.tsx
index c10b70b19a..a4e2b00adc 100644
--- a/packages/core/client/src/block-provider/FormBlockProvider.tsx
+++ b/packages/core/client/src/block-provider/FormBlockProvider.tsx
@@ -1,5 +1,5 @@
 import { createForm } from '@formily/core';
-import { RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
+import { Schema, useField } from '@formily/react';
 import { Spin } from 'antd';
 import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
 import { withDynamicSchemaProps } from '../application/hoc/withDynamicSchemaProps';
@@ -88,7 +88,7 @@ const InternalFormBlockProvider = (props) => {
     <FormBlockContext.Provider value={formBlockValue}>
       <RecordProvider isNew={record?.isNew} parent={record?.parentRecord?.data} record={record?.data}>
         <div ref={formBlockRef}>
-          <RenderChildrenWithDataTemplates form={form} />
+          <RenderChildrenWithDataTemplates form={form}>{props.children}</RenderChildrenWithDataTemplates>
         </div>
       </RecordProvider>
     </FormBlockContext.Provider>
@@ -189,16 +189,12 @@ export const useFormBlockProps = () => {
   };
 };
 
-const RenderChildrenWithDataTemplates = ({ form }) => {
-  const FieldSchema = useFieldSchema();
-  const { findComponent } = useDesignable();
-  const field = useField();
-  const Component = findComponent(field.component?.[0]) || React.Fragment;
+const RenderChildrenWithDataTemplates = ({ form, children }) => {
   return (
-    <Component {...field.componentProps}>
+    <>
       <DataTemplateSelect style={{ marginBottom: 18 }} form={form} />
-      <RecursionField schema={FieldSchema} onlyRenderProperties />
-    </Component>
+      {children}
+    </>
   );
 };
 
diff --git a/packages/core/client/src/block-provider/TableBlockProvider.tsx b/packages/core/client/src/block-provider/TableBlockProvider.tsx
index 5d5f234d4f..24f3fa5de3 100644
--- a/packages/core/client/src/block-provider/TableBlockProvider.tsx
+++ b/packages/core/client/src/block-provider/TableBlockProvider.tsx
@@ -5,7 +5,7 @@ import { withDynamicSchemaProps } from '../application/hoc/withDynamicSchemaProp
 import { useCollectionManager_deprecated } from '../collection-manager';
 import { useTableBlockParams } from '../modules/blocks/data-blocks/table';
 import { FixedBlockWrapper, SchemaComponentOptions } from '../schema-component';
-import { BlockProvider, RenderChildrenWithAssociationFilter, useBlockRequestContext } from './BlockProvider';
+import { BlockProvider, useBlockRequestContext } from './BlockProvider';
 
 /**
  * @internal
@@ -39,6 +39,7 @@ interface Props {
    * Table 区块的 collection name
    */
   collection?: string;
+  children?: any;
 }
 
 const InternalTableBlockProvider = (props: Props) => {
@@ -81,7 +82,7 @@ const InternalTableBlockProvider = (props: Props) => {
           setExpandFlag: setExpandFlagValue,
         }}
       >
-        <RenderChildrenWithAssociationFilter {...props} />
+        {props.children}
       </TableBlockContext.Provider>
     </FixedBlockWrapper>
   );
diff --git a/packages/core/client/src/block-provider/TableSelectorProvider.tsx b/packages/core/client/src/block-provider/TableSelectorProvider.tsx
index c2423641aa..fa6bd4c4fd 100644
--- a/packages/core/client/src/block-provider/TableSelectorProvider.tsx
+++ b/packages/core/client/src/block-provider/TableSelectorProvider.tsx
@@ -10,7 +10,7 @@ import { isInFilterFormBlock } from '../filter-provider';
 import { mergeFilter } from '../filter-provider/utils';
 import { RecordProvider, useRecord } from '../record-provider';
 import { SchemaComponentOptions } from '../schema-component';
-import { BlockProvider, RenderChildrenWithAssociationFilter, useBlockRequestContext } from './BlockProvider';
+import { BlockProvider, useBlockRequestContext } from './BlockProvider';
 import { useParsedFilter } from './hooks';
 
 type Params = {
@@ -76,7 +76,7 @@ const InternalTableSelectorProvider = (props) => {
           },
         }}
       >
-        <RenderChildrenWithAssociationFilter {...props} />
+        {props.children}
       </TableSelectorContext.Provider>
     </RecordProvider>
   );
diff --git a/packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/FormBlockProvider.tsx b/packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/FormBlockProvider.tsx
index fca9b7f0a8..001583f8f1 100644
--- a/packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/FormBlockProvider.tsx
+++ b/packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/FormBlockProvider.tsx
@@ -1,5 +1,5 @@
 import { createForm } from '@formily/core';
-import { RecursionField, useField, useFieldSchema } from '@formily/react';
+import { useField, useFieldSchema } from '@formily/react';
 import {
   BlockRequestContext_deprecated,
   CollectionManagerProvider,
@@ -31,7 +31,6 @@ export function FormBlockProvider(props) {
   const values = userJob?.result?.[formKey];
 
   const { findComponent } = useDesignable();
-  const Component = findComponent(field.component?.[0]) || React.Fragment;
 
   const form = useMemo(
     () =>
@@ -81,12 +80,8 @@ export function FormBlockProvider(props) {
               value={{ block: 'form', props, field, service, resource, __parent }}
             >
               <FormBlockContext.Provider value={formBlockValue}>
-                <Component {...field.componentProps}>
-                  <FormV2.Templates style={{ marginBottom: 18 }} form={form} />
-                  <div ref={formBlockRef}>
-                    <RecursionField schema={fieldSchema} onlyRenderProperties />
-                  </div>
-                </Component>
+                <FormV2.Templates style={{ marginBottom: 18 }} form={form} />
+                <div ref={formBlockRef}>{props.children}</div>
               </FormBlockContext.Provider>
             </BlockRequestContext_deprecated.Provider>
           </FormActiveFieldsProvider>