fix(client): improve form schema component

packages/client/src/schema-component/antd/form/Form.tsx

@@ -1,56 +1,22 @@
 import { FormLayout } from '@formily/antd';
-import { createForm, FormPath } from '@formily/core';
-import {
-  FieldContext,
-  FormContext,
-  observer,
-  SchemaContext,
-  SchemaOptionsContext,
-  useField,
-  useFieldSchema
-} from '@formily/react';
-import { toJS } from '@formily/reactive';
+import { createForm } from '@formily/core';
+import { FieldContext, FormContext, observer, useField, useFieldSchema } from '@formily/react';
 import { Spin } from 'antd';
-import React, { useContext, useMemo } from 'react';
-import { SchemaComponent, useAttach } from '../..';
+import React, { useMemo } from 'react';
+import { useAttach } from '../..';
 import { useRequest } from '../../../api-client';
 
-type ComposedForm = React.FC<any> & {
-  __NOCOBASE_FORM?: boolean;
-};
-
-const useFormDecorator = () => {
-  const field = useField();
-  const options = useContext(SchemaOptionsContext);
-  const decorator = field.decoratorType ? FormPath.getIn(options?.components, field.decoratorType) : null;
-  return decorator?.__NOCOBASE_FORM ? decorator : null;
-};
-
-const FormDecorator: React.FC<any> = (props) => {
-  const { form } = props;
-  const options = useContext(SchemaOptionsContext);
-  const field = useField();
-  const fieldSchema = useFieldSchema();
-  const f = useAttach(form.createVoidField({ ...field.props, basePath: '' }));
-  const finalComponent = FormPath.getIn(options?.components, field.componentType) ?? field.componentType;
-  return (
-    <FormContext.Provider value={form}>
-      <SchemaContext.Provider value={fieldSchema}>
-        <FieldContext.Provider value={f}>
-          {React.createElement(finalComponent, toJS(field.componentProps))}
-        </FieldContext.Provider>
-      </SchemaContext.Provider>
-    </FormContext.Provider>
-  );
-};
-
 const FormComponent: React.FC<any> = (props) => {
-  const { form } = props;
-  const fieldSchema = useFieldSchema();
+  const { form, children, ...others } = props;
+  const field = useField();
+  // TODO: component 里 useField 会与当前 field 存在偏差
+  const f = useAttach(form.createVoidField({ ...field.props, basePath: '' }));
   return (
     <FieldContext.Provider value={undefined}>
       <FormContext.Provider value={form}>
-        <SchemaComponent schema={fieldSchema} />
+        <FormLayout layout={'vertical'} {...others}>
+          <FieldContext.Provider value={f}>{children}</FieldContext.Provider>
+        </FormLayout>
       </FormContext.Provider>
     </FieldContext.Provider>
   );
@@ -72,9 +38,8 @@ const useDefaultValues = (props: any = {}, opts: any = {}) => {
   return useRequest(useRequestProps(props), opts);
 };
 
-export const Form: ComposedForm = observer((props) => {
+export const Form: React.FC<any> = observer((props) => {
   const { request, initialValue, useValues = useDefaultValues, ...others } = props;
-  const decorator = useFormDecorator();
   const fieldSchema = useFieldSchema();
   const form = useMemo(() => createForm(), []);
   const { loading } = useValues(props, {
@@ -86,11 +51,7 @@ export const Form: ComposedForm = observer((props) => {
   });
   return (
     <Spin spinning={loading}>
-      <FormLayout layout={'vertical'} {...others}>
-        {decorator ? <FormDecorator form={form} /> : <FormComponent form={form} />}
-      </FormLayout>
+      <FormComponent form={form} {...others} />
     </Spin>
   );
 });
-
-Form.__NOCOBASE_FORM = true;

packages/client/src/schema-component/antd/form/demos/demo2.tsx

@@ -11,7 +11,7 @@ export default observer(() => {
       form1: {
         type: 'void',
         'x-decorator': 'Card',
-        "x-decorator-props": {
+        'x-decorator-props': {
           title: 'Form Title',
         },
         'x-component': 'Form',
@@ -20,6 +20,7 @@ export default observer(() => {
             'x-component': 'Input',
             'x-decorator': 'FormItem',
             title: 'T1',
+            required: true,
           },
           out: {
             'x-component': 'Output',
@@ -46,6 +47,7 @@ export default observer(() => {
     const form = useForm();
     return {
       async run() {
+        await form.submit();
         console.log(form.values);
       },
     };

packages/client/src/schema-component/antd/form/demos/demo6.tsx

@@ -0,0 +1,61 @@
+import { FormItem, Input } from '@formily/antd';
+import { ISchema, observer, useForm } from '@formily/react';
+import { Action, Form, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
+import { Card } from 'antd';
+import React from 'react';
+
+export default observer(() => {
+  const schema: ISchema = {
+    type: 'object',
+    properties: {
+      form1: {
+        type: 'void',
+        'x-decorator': 'Form',
+        'x-decorator-props': {
+          initialValue: {
+            field1: 'aaa',
+          },
+        },
+        'x-component': 'Card',
+        properties: {
+          field1: {
+            'x-component': 'Input',
+            'x-decorator': 'FormItem',
+            title: 'T1',
+          },
+          out: {
+            'x-component': 'Output',
+          },
+          action1: {
+            // type: 'void',
+            'x-component': 'Action',
+            title: 'Submit',
+            'x-component-props': {
+              useAction: '{{ useSubmit }}',
+            },
+          },
+        },
+      },
+    },
+  };
+
+  const Output = observer(() => {
+    const form = useForm();
+    return <pre>{JSON.stringify(form.values, null, 2)}</pre>;
+  });
+
+  const useSubmit = () => {
+    const form = useForm();
+    return {
+      async run() {
+        console.log(form.values);
+      },
+    };
+  };
+
+  return (
+    <SchemaComponentProvider scope={{ useSubmit }} components={{ Card, Output, Action, Form, Input, FormItem }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+});

packages/client/src/schema-component/antd/form/index.md

@@ -15,7 +15,11 @@ group:
 
 ### Form Decorator
 
-Form 也可以作 decorator 存在，和 Action.Drawer 结合就是 DrawerForm 了。
+Form 也可以作 decorator 存在
+
+<code src="./demos/demo6.tsx"/>
+
+和 Action.Drawer 结合就是 DrawerForm 了
 
 <code src="./demos/demo1.tsx"/>
 

packages/client/src/schema-initializer/demos/demo3.tsx

@@ -146,8 +146,8 @@ export default function App() {
         schema={{
           type: 'void',
           name: 'page',
-          'x-decorator': 'Page',
-          'x-component': 'Form',
+          'x-decorator': 'Form',
+          'x-component': 'Page',
           properties: {
             title: {
               type: 'string',