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

packages/core/client/src/schema-component/antd/grid-card/GridCard.Item.tsx

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

packages/core/client/src/schema-component/antd/list/List.Item.tsx

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

packages/core/client/src/schema-initializer/buttons/RecordBlockInitializers.tsx

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

packages/core/client/src/schema-initializer/items/RecordAssociationGridCardBlockInitializer.tsx

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

packages/core/client/src/schema-initializer/items/RecordAssociationListBlockInitializer.tsx

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

packages/core/client/src/schema-initializer/items/index.tsx

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