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:
Dunqing 2023-08-02 16:00:11 +08:00 committed by GitHub
parent a2fe6ab18d
commit 495c2209c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 98 additions and 4 deletions

View File

@ -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>
);

View File

@ -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>
);
};

View File

@ -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',

View File

@ -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)}
/>
);
};

View File

@ -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)}
/>
);
};

View File

@ -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';