feat: improve code

Author: chenos

src/client/PublicSharedForm.tsx

@@ -1,21 +1,23 @@
-import { SchemaComponent, SchemaComponentProvider, useRequest } from '@nocobase/client';
+import { SchemaComponent, SchemaComponentContext, useRequest } from '@nocobase/client';
 import { Spin } from 'antd';
-import React from 'react';
+import React, { useContext } from 'react';
 import { useParams } from 'react-router';
+import { useCreateActionProps } from './useCreateActionProps';
 
 export function PublicSharedForm() {
   const params = useParams();
   const { data, loading } = useRequest<any>({
     url: `sharedForms:getMeta/${params.name}`,
   });
+  const ctx = useContext(SchemaComponentContext);
   if (loading) {
     return <Spin />;
   }
   return (
     <div>
-      <SchemaComponentProvider designable={false}>
-        <SchemaComponent schema={data?.data?.schema} />
-      </SchemaComponentProvider>
+      <SchemaComponentContext.Provider value={{ ...ctx, designable: false }}>
+        <SchemaComponent schema={data?.data?.schema} scope={{ useCreateActionProps }} />
+      </SchemaComponentContext.Provider>
     </div>
   );
 }

src/client/SharedFormConfigure.tsx

@@ -3,6 +3,7 @@ import { Breadcrumb, Button, Space } from 'antd';
 import React from 'react';
 import { useParams } from 'react-router';
 import { Link } from 'react-router-dom';
+import { useCreateActionProps } from './useCreateActionProps';
 
 export function SharedFormConfigure() {
   const params = useParams();
@@ -35,7 +36,7 @@ export function SharedFormConfigure() {
         </Space>
       </div>
       <div style={{ maxWidth: 800, margin: '100px auto' }}>
-        <RemoteSchemaComponent uid={params.name} />
+        <RemoteSchemaComponent uid={params.name} scope={{ useCreateActionProps }} />
       </div>
     </div>
   );

src/client/SharedFormTable.tsx

@@ -81,39 +81,61 @@ const initialSchema = (values) => {
   return {
     type: 'void',
     name: uid(),
-    'x-toolbar': 'BlockSchemaToolbar',
-    'x-toolbar-props': {
-      draggable: false,
-    },
-    'x-settings': 'blockSettings:createForm',
-    'x-component': 'CardItem',
-    'x-decorator': 'FormBlockProvider',
-    'x-decorator-props': {
-      collection: values.collection,
-      dataSource: values.dataSource || 'main',
-    },
-    'x-use-decorator-props': 'useCreateFormBlockDecoratorProps',
     properties: {
-      a69vmspkv8h: {
+      form: {
         type: 'void',
-        'x-component': 'FormV2',
-        'x-use-component-props': 'useCreateFormBlockProps',
+        'x-toolbar': 'BlockSchemaToolbar',
+        'x-toolbar-props': {
+          draggable: false,
+        },
+        'x-settings': 'blockSettings:createForm',
+        'x-component': 'CardItem',
+        'x-decorator': 'FormBlockProvider',
+        'x-decorator-props': {
+          collection: values.collection,
+          dataSource: values.dataSource || 'main',
+        },
+        'x-use-decorator-props': 'useCreateFormBlockDecoratorProps',
         properties: {
-          grid: {
+          a69vmspkv8h: {
             type: 'void',
-            'x-component': 'Grid',
-            'x-initializer': 'form:configureFields',
-          },
-          l9xfwp6cfh1: {
-            type: 'void',
-            'x-component': 'ActionBar',
-            'x-initializer': 'createForm:configureActions',
-            'x-component-props': {
-              layout: 'one-column',
+            'x-component': 'FormV2',
+            'x-use-component-props': 'useCreateFormBlockProps',
+            properties: {
+              grid: {
+                type: 'void',
+                'x-component': 'Grid',
+                'x-initializer': 'form:configureFields',
+              },
+              l9xfwp6cfh1: {
+                type: 'void',
+                'x-component': 'ActionBar',
+                'x-initializer': 'createForm:configureActions',
+                'x-component-props': {
+                  layout: 'one-column',
+                },
+              },
             },
           },
         },
       },
+      success: {
+        type: 'void',
+        'x-editable': false,
+        'x-toolbar-props': {
+          draggable: false,
+        },
+        'x-settings': 'blockSettings:markdown',
+        'x-component': 'Markdown.Void',
+        'x-decorator': 'CardItem',
+        'x-component-props': {
+          content: 'This is a demo text, **supports Markdown syntax**.',
+        },
+        'x-decorator-props': {
+          name: 'markdown',
+          engine: 'handlebars',
+        },
+      },
     },
   };
 };

src/client/useCreateActionProps.ts

@@ -0,0 +1,32 @@
+import { useForm } from '@formily/react';
+import { useActionContext, useCollection, useDataBlockRequest, useDataBlockResource } from '@nocobase/client';
+import { App as AntdApp } from 'antd';
+
+export const useCreateActionProps = () => {
+  const { setVisible } = useActionContext();
+  const { message } = AntdApp.useApp();
+  const form = useForm();
+  const resource = useDataBlockResource();
+  const { runAsync } = useDataBlockRequest();
+  const collection = useCollection();
+  return {
+    type: 'primary',
+    async onClick() {
+      await form.submit();
+      const values = form.values;
+      if (values[collection.filterTargetKey]) {
+        await resource.update({
+          values,
+          filterByTk: values[collection.filterTargetKey],
+        });
+      } else {
+        await resource.publicSubmit({
+          values,
+        });
+      }
+      await runAsync();
+      message.success('Saved successfully!');
+      setVisible(false);
+    },
+  };
+};

src/server/plugin.ts

@@ -7,6 +7,14 @@ export class PluginSharedFormsServer extends Plugin {
   async beforeLoad() {}
 
   async load() {
+    this.app.dataSourceManager.afterAddDataSource((dataSource) => {
+      dataSource.resourceManager.registerActionHandlers({
+        publicSubmit: async (ctx, next) => {
+          ctx.body = 'ok';
+          await next();
+        },
+      });
+    });
     this.app.resourceManager.registerActionHandlers({
       'sharedForms:getMeta': async (ctx, next) => {
         const { filterByTk } = ctx.action.params;