feat(demos): form drawer example

This commit is contained in:
chenos 2022-12-26 12:46:33 +08:00
parent a299849613
commit 4d9299f04d

View File

@ -1,9 +1,11 @@
import { FormLayout } from '@formily/antd'; import { FormDrawer, FormLayout } from '@formily/antd';
import { createForm } from '@formily/core'; import { createForm } from '@formily/core';
import { FormContext, ISchema } from '@formily/react'; import { FormContext, ISchema, SchemaOptionsContext } from '@formily/react';
import { uid } from '@formily/shared'; import { uid } from '@formily/shared';
import { import {
AntdSchemaComponentProvider,
CardItem, CardItem,
CollectionManagerContext,
CollectionManagerProvider, CollectionManagerProvider,
CollectionProvider, CollectionProvider,
FormItem, FormItem,
@ -12,13 +14,14 @@ import {
InputNumber, InputNumber,
Markdown, Markdown,
SchemaComponent, SchemaComponent,
SchemaComponentOptions,
SchemaComponentProvider, SchemaComponentProvider,
SchemaInitializer, SchemaInitializer,
SchemaInitializerProvider, SchemaInitializerProvider,
useCollectionManager useCollectionManager
} from '@nocobase/client'; } from '@nocobase/client';
import cloneDeep from 'lodash/cloneDeep'; import cloneDeep from 'lodash/cloneDeep';
import React from 'react'; import React, { useContext } from 'react';
const collection: any = { const collection: any = {
name: 'posts', name: 'posts',
@ -63,9 +66,11 @@ const form = createForm({
const FormItemInitializer = (props) => { const FormItemInitializer = (props) => {
const { item, insert } = props; const { item, insert } = props;
const { getInterface } = useCollectionManager(); const { getInterface } = useCollectionManager();
const schemaOptions = useContext(SchemaOptionsContext);
const cm = useContext(CollectionManagerContext);
return ( return (
<SchemaInitializer.Item <SchemaInitializer.Item
onClick={() => { onClick={async () => {
const interfaceOptions = getInterface(item.fieldInterface); const interfaceOptions = getInterface(item.fieldInterface);
if (!interfaceOptions) { if (!interfaceOptions) {
return; return;
@ -76,6 +81,27 @@ const FormItemInitializer = (props) => {
options.uiSchema.title = name; options.uiSchema.title = name;
collection.fields.push(options); collection.fields.push(options);
form.setValuesIn(name, uid()); form.setValuesIn(name, uid());
const { values } = await FormDrawer('Add field', () => {
return (
<CollectionManagerContext.Provider value={cm}>
<AntdSchemaComponentProvider>
<SchemaComponentOptions scope={schemaOptions.scope} components={schemaOptions.components}>
<FormLayout layout={'vertical'}>
<SchemaComponent
schema={{
properties: interfaceOptions.properties,
}}
/>
</FormLayout>
</SchemaComponentOptions>
</AntdSchemaComponentProvider>
</CollectionManagerContext.Provider>
);
}).open({
initialValues: {},
});
insert({ insert({
name, name,
type: 'string', type: 'string',