docs(client): add useValues demo for form schema

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

@@ -1,12 +1,21 @@
 import { FormLayout } from '@formily/antd';
 import { createForm } from '@formily/core';
 import { FieldContext, FormContext, observer, useField, useFieldSchema } from '@formily/react';
+import { Options, Result } from 'ahooks/lib/useRequest/src/types';
 import { Spin } from 'antd';
 import React, { useMemo } from 'react';
 import { useAttach } from '../..';
 import { useRequest } from '../../../api-client';
 
-const FormComponent: React.FC<any> = (props) => {
+type Opts = Options<any, any> & { uid?: string };
+
+export interface FormProps {
+  [key: string]: any;
+}
+
+export type FormUseValues = (props?: FormProps, opts?: Opts) => Result<any, any>;
+
+const FormComponent: React.FC<FormProps> = (props) => {
   const { form, children, ...others } = props;
   const field = useField();
   // TODO: component 里 useField 会与当前 field 存在偏差
@@ -34,12 +43,12 @@ const useRequestProps = (props: any) => {
   };
 };
 
-const useDefaultValues = (props: any = {}, opts: any = {}) => {
+const useDef = (props: FormProps = {}, opts: any = {}) => {
   return useRequest(useRequestProps(props), opts);
 };
 
-export const Form: React.FC<any> = observer((props) => {
-  const { request, initialValue, useValues = useDefaultValues, ...others } = props;
+export const Form: React.FC<FormProps> = observer((props) => {
+  const { request, initialValue, useValues = useDef, ...others } = props;
   const fieldSchema = useFieldSchema();
   const form = useMemo(() => createForm(), []);
   const { loading } = useValues(props, {

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

@@ -0,0 +1,68 @@
+import { FormItem, Input } from '@formily/antd';
+import { ISchema, observer, useForm } from '@formily/react';
+import { Action, Form, FormUseValues, SchemaComponent, SchemaComponentProvider, useRequest } from '@nocobase/client';
+import { Card } from 'antd';
+import React from 'react';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    form1: {
+      type: 'void',
+      'x-decorator': 'Form',
+      'x-decorator-props': {
+        useValues: '{{ useValues }}',
+      },
+      '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);
+    },
+  };
+};
+
+const useValues: FormUseValues = (props, opts) => {
+  return useRequest(() => {
+    return Promise.resolve({ data: { field1: 'aabb' } });
+  }, opts);
+};
+
+export default observer(() => {
+  return (
+    <SchemaComponentProvider
+      scope={{ useSubmit, useValues }}
+      components={{ Card, Output, Action, Form, Input, FormItem }}
+    >
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+});

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

@@ -34,3 +34,15 @@ Form 也可以作 decorator 存在
 ### 远程初始化数据
 
 <code src="./demos/demo5.tsx"/>
+
+### useValues
+
+<code src="./demos/demo7.tsx"/>
+
+## API
+
+属性说明
+
+- `initialValue` 静态的初始化数据
+- `request` 远程请求参数
+- `useValues` 自定义的 useRequest