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