From dd783f65546a75e8fbd8acd8b33ff77e20bd2a8b Mon Sep 17 00:00:00 2001 From: chenos Date: Tue, 8 Feb 2022 13:43:40 +0800 Subject: [PATCH] fix(client): improve form schema component --- .../src/schema-component/antd/form/Form.tsx | 65 ++++--------------- .../antd/form/demos/demo2.tsx | 4 +- .../antd/form/demos/demo6.tsx | 61 +++++++++++++++++ .../src/schema-component/antd/form/index.md | 6 +- .../src/schema-initializer/demos/demo3.tsx | 4 +- 5 files changed, 84 insertions(+), 56 deletions(-) create mode 100644 packages/client/src/schema-component/antd/form/demos/demo6.tsx diff --git a/packages/client/src/schema-component/antd/form/Form.tsx b/packages/client/src/schema-component/antd/form/Form.tsx index 09959f0d0..96e5b8ea3 100644 --- a/packages/client/src/schema-component/antd/form/Form.tsx +++ b/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 & { - __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 = (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 ( - - - - {React.createElement(finalComponent, toJS(field.componentProps))} - - - - ); -}; - const FormComponent: React.FC = (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 ( - + + {children} + ); @@ -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 = 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 ( - - {decorator ? : } - + ); }); - -Form.__NOCOBASE_FORM = true; diff --git a/packages/client/src/schema-component/antd/form/demos/demo2.tsx b/packages/client/src/schema-component/antd/form/demos/demo2.tsx index 8d0e91796..5f1f243aa 100644 --- a/packages/client/src/schema-component/antd/form/demos/demo2.tsx +++ b/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); }, }; diff --git a/packages/client/src/schema-component/antd/form/demos/demo6.tsx b/packages/client/src/schema-component/antd/form/demos/demo6.tsx new file mode 100644 index 000000000..3e44e1ae9 --- /dev/null +++ b/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 
{JSON.stringify(form.values, null, 2)}
; + }); + + const useSubmit = () => { + const form = useForm(); + return { + async run() { + console.log(form.values); + }, + }; + }; + + return ( + + + + ); +}); diff --git a/packages/client/src/schema-component/antd/form/index.md b/packages/client/src/schema-component/antd/form/index.md index 9f2eb65bc..ad07c1d08 100644 --- a/packages/client/src/schema-component/antd/form/index.md +++ b/packages/client/src/schema-component/antd/form/index.md @@ -15,7 +15,11 @@ group: ### Form Decorator -Form 也可以作 decorator 存在，和 Action.Drawer 结合就是 DrawerForm 了。 +Form 也可以作 decorator 存在 + + + +和 Action.Drawer 结合就是 DrawerForm 了 diff --git a/packages/client/src/schema-initializer/demos/demo3.tsx b/packages/client/src/schema-initializer/demos/demo3.tsx index bff1f9497..fd89ecfa3 100644 --- a/packages/client/src/schema-initializer/demos/demo3.tsx +++ b/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',