feat: improve form block (#4099)

* feat: improve form block

* fix: remove RenderChildrenWithAssociationFilter

* fix: improve form block

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();

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}
+    </>
   );
 };
 

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>
   );

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>
   );

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>