feat(demos): form drawer example
This commit is contained in:
parent
a299849613
commit
4d9299f04d
@ -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',
|
||||||
|
Loading…
Reference in New Issue
Block a user