feat: association blocks support GridCard
and List
blocks (#2356)
* feat: association blocks support `GridCard` and `List` blocks * fix: incorrect schemas * fix: use RecordProvider instated of RecordSimpleProvider
This commit is contained in:
parent
a2fe6ab18d
commit
495c2209c2
@ -3,7 +3,7 @@ import { ObjectField } from '@formily/core';
|
||||
import { useField } from '@formily/react';
|
||||
import { Card } from 'antd';
|
||||
import React from 'react';
|
||||
import { RecordSimpleProvider } from '../../../record-provider';
|
||||
import { RecordProvider } from '../../../record-provider';
|
||||
|
||||
const itemCss = css`
|
||||
display: flex;
|
||||
@ -30,7 +30,7 @@ export const GridCardItem = (props) => {
|
||||
`}
|
||||
>
|
||||
<div className={itemCss}>
|
||||
<RecordSimpleProvider value={field.value}>{props.children}</RecordSimpleProvider>
|
||||
<RecordProvider record={field.value}>{props.children}</RecordProvider>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
@ -1,13 +1,13 @@
|
||||
import { ObjectField } from '@formily/core';
|
||||
import { useField } from '@formily/react';
|
||||
import React from 'react';
|
||||
import { RecordSimpleProvider } from '../../../record-provider';
|
||||
import { RecordProvider } from '../../../record-provider';
|
||||
|
||||
export const ListItem = (props) => {
|
||||
const field = useField<ObjectField>();
|
||||
return (
|
||||
<div className={'itemCss'}>
|
||||
<RecordSimpleProvider value={field.value}>{props.children}</RecordSimpleProvider>
|
||||
<RecordProvider record={field.value}>{props.children}</RecordProvider>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -75,6 +75,20 @@ const useRelationFields = () => {
|
||||
field,
|
||||
component: 'RecordAssociationDetailsBlockInitializer',
|
||||
},
|
||||
{
|
||||
key: `${field.name}_list`,
|
||||
type: 'item',
|
||||
title: '{{t("List")}}',
|
||||
field,
|
||||
component: 'RecordAssociationListBlockInitializer',
|
||||
},
|
||||
{
|
||||
key: `${field.name}_grid_card`,
|
||||
type: 'item',
|
||||
title: '{{t("Grid Card")}}',
|
||||
field,
|
||||
component: 'RecordAssociationGridCardBlockInitializer',
|
||||
},
|
||||
{
|
||||
key: `${field.name}_form`,
|
||||
type: 'item',
|
||||
|
@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import { TableOutlined } from '@ant-design/icons';
|
||||
|
||||
import { useCollectionManager } from '../../collection-manager';
|
||||
import { useSchemaTemplateManager } from '../../schema-templates';
|
||||
import { SchemaInitializer } from '../SchemaInitializer';
|
||||
import { createGridCardBlockSchema, useRecordCollectionDataSourceItems } from '../utils';
|
||||
|
||||
export const RecordAssociationGridCardBlockInitializer = (props) => {
|
||||
const { item, onCreateBlockSchema, componentType, createBlockSchema, insert, ...others } = props;
|
||||
const { getTemplateSchemaByMode } = useSchemaTemplateManager();
|
||||
const { getCollection } = useCollectionManager();
|
||||
const field = item.field;
|
||||
const collection = getCollection(field.target);
|
||||
const resource = `${field.collectionName}.${field.name}`;
|
||||
|
||||
return (
|
||||
<SchemaInitializer.Item
|
||||
icon={<TableOutlined />}
|
||||
{...others}
|
||||
onClick={async ({ item }) => {
|
||||
if (item.template) {
|
||||
const s = await getTemplateSchemaByMode(item);
|
||||
insert(s);
|
||||
} else {
|
||||
insert(
|
||||
createGridCardBlockSchema({
|
||||
rowKey: collection.filterTargetKey,
|
||||
collection: field.target,
|
||||
resource,
|
||||
association: resource,
|
||||
}),
|
||||
);
|
||||
}
|
||||
}}
|
||||
items={useRecordCollectionDataSourceItems('GridCard', item, field.target, resource)}
|
||||
/>
|
||||
);
|
||||
};
|
@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import { TableOutlined } from '@ant-design/icons';
|
||||
|
||||
import { useCollectionManager } from '../../collection-manager';
|
||||
import { useSchemaTemplateManager } from '../../schema-templates';
|
||||
import { SchemaInitializer } from '../SchemaInitializer';
|
||||
import { createListBlockSchema, useRecordCollectionDataSourceItems } from '../utils';
|
||||
|
||||
export const RecordAssociationListBlockInitializer = (props) => {
|
||||
const { item, onCreateBlockSchema, componentType, createBlockSchema, insert, ...others } = props;
|
||||
const { getTemplateSchemaByMode } = useSchemaTemplateManager();
|
||||
const { getCollection } = useCollectionManager();
|
||||
const field = item.field;
|
||||
const collection = getCollection(field.target);
|
||||
const resource = `${field.collectionName}.${field.name}`;
|
||||
|
||||
return (
|
||||
<SchemaInitializer.Item
|
||||
icon={<TableOutlined />}
|
||||
{...others}
|
||||
onClick={async ({ item }) => {
|
||||
if (item.template) {
|
||||
const s = await getTemplateSchemaByMode(item);
|
||||
insert(s);
|
||||
} else {
|
||||
insert(
|
||||
createListBlockSchema({
|
||||
rowKey: collection.filterTargetKey,
|
||||
collection: field.target,
|
||||
resource,
|
||||
association: resource,
|
||||
}),
|
||||
);
|
||||
}
|
||||
}}
|
||||
items={useRecordCollectionDataSourceItems('List', item, field.target, resource)}
|
||||
/>
|
||||
);
|
||||
};
|
@ -38,6 +38,8 @@ export * from './ListBlockInitializer';
|
||||
export * from './MarkdownBlockInitializer';
|
||||
export * from './PrintActionInitializer';
|
||||
export * from './RecordAssociationBlockInitializer';
|
||||
export * from './RecordAssociationGridCardBlockInitializer';
|
||||
export * from './RecordAssociationListBlockInitializer';
|
||||
export * from './RecordAssociationCalendarBlockInitializer';
|
||||
export * from './RecordAssociationDetailsBlockInitializer';
|
||||
export * from './RecordAssociationFormBlockInitializer';
|
||||
|
Loading…
Reference in New Issue
Block a user