fix(client/demos): gird x-initializer
This commit is contained in:
parent
5ec50d32bb
commit
d2275455be
@ -1,18 +1,60 @@
|
|||||||
import { ISchema, observer, useFieldSchema } from '@formily/react';
|
import { ISchema, observer, useFieldSchema } from '@formily/react';
|
||||||
import { uid } from '@formily/shared';
|
import { uid } from '@formily/shared';
|
||||||
import {
|
import {
|
||||||
BlockItem,
|
|
||||||
CardItem,
|
CardItem,
|
||||||
DragHandler,
|
DragHandler,
|
||||||
Form,
|
|
||||||
Grid,
|
Grid,
|
||||||
Markdown,
|
Markdown,
|
||||||
SchemaComponent,
|
SchemaComponent,
|
||||||
SchemaComponentProvider,
|
SchemaComponentProvider,
|
||||||
|
SchemaInitializer,
|
||||||
SchemaInitializerProvider
|
SchemaInitializerProvider
|
||||||
} from '@nocobase/client';
|
} from '@nocobase/client';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
|
const gridRowColWrap = (schema) => {
|
||||||
|
return {
|
||||||
|
type: 'void',
|
||||||
|
'x-component': 'Grid.Row',
|
||||||
|
properties: {
|
||||||
|
[uid()]: {
|
||||||
|
type: 'void',
|
||||||
|
'x-component': 'Grid.Col',
|
||||||
|
properties: {
|
||||||
|
[schema.name || uid()]: schema,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AddBlockButton = (props: any) => {
|
||||||
|
const { insertPosition, component } = props;
|
||||||
|
return (
|
||||||
|
<SchemaInitializer.Button
|
||||||
|
insertPosition={insertPosition}
|
||||||
|
wrap={gridRowColWrap}
|
||||||
|
items={[
|
||||||
|
{
|
||||||
|
key: 'media',
|
||||||
|
type: 'itemGroup',
|
||||||
|
title: 'Other blocks',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
key: 'markdown',
|
||||||
|
type: 'item',
|
||||||
|
title: 'Markdown',
|
||||||
|
component: 'MarkdownBlockInitializer',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
component={component}
|
||||||
|
title={component ? undefined : 'Add block'}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const Block = observer((props) => {
|
const Block = observer((props) => {
|
||||||
const fieldSchema = useFieldSchema();
|
const fieldSchema = useFieldSchema();
|
||||||
return (
|
return (
|
||||||
@ -29,7 +71,7 @@ const schema: ISchema = {
|
|||||||
grid: {
|
grid: {
|
||||||
type: 'void',
|
type: 'void',
|
||||||
'x-component': 'Grid',
|
'x-component': 'Grid',
|
||||||
'x-item-initializer': 'AddBlockItem',
|
'x-initializer': 'AddBlockButton',
|
||||||
'x-uid': uid(),
|
'x-uid': uid(),
|
||||||
properties: {},
|
properties: {},
|
||||||
},
|
},
|
||||||
@ -38,8 +80,8 @@ const schema: ISchema = {
|
|||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<SchemaComponentProvider components={{ BlockItem, Block, Grid, CardItem, Markdown, Form }}>
|
<SchemaComponentProvider components={{ Grid, CardItem, Markdown }}>
|
||||||
<SchemaInitializerProvider>
|
<SchemaInitializerProvider initializers={{ AddBlockButton }}>
|
||||||
<SchemaComponent schema={schema} />
|
<SchemaComponent schema={schema} />
|
||||||
</SchemaInitializerProvider>
|
</SchemaInitializerProvider>
|
||||||
</SchemaComponentProvider>
|
</SchemaComponentProvider>
|
||||||
|
Loading…
Reference in New Issue
Block a user