feat: support summary props (#5640)

packages/core/client/src/data-source/collection-field/CollectionField.tsx

@@ -18,7 +18,7 @@ import { useFormBlockContext } from '../../block-provider/FormBlockProvider';
 import { useDynamicComponentProps } from '../../hoc/withDynamicSchemaProps';
 import { ErrorFallback, useCompile, useComponent } from '../../schema-component';
 import { useIsAllowToSetDefaultValue } from '../../schema-settings/hooks/useIsAllowToSetDefaultValue';
-import { CollectionFieldProvider, useCollectionField } from './CollectionFieldProvider';
+import { CollectionFieldOriginalContext, CollectionFieldProvider, useCollectionField } from './CollectionFieldProvider';
 
 type Props = {
   component: any;
@@ -93,11 +93,14 @@ export const CollectionFieldInternalField: React.FC = (props: Props) => {
 
 export const CollectionField = connect((props) => {
   const fieldSchema = useFieldSchema();
+  const field = useField<Field>();
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback.Modal} onError={(err) => console.log(err)}>
-      <CollectionFieldProvider name={fieldSchema.name}>
-        <CollectionFieldInternalField {...props} />
-      </CollectionFieldProvider>
+      <CollectionFieldOriginalContext.Provider value={{ fieldSchema, field }}>
+        <CollectionFieldProvider name={fieldSchema.name}>
+          <CollectionFieldInternalField {...props} />
+        </CollectionFieldProvider>
+      </CollectionFieldOriginalContext.Provider>
     </ErrorBoundary>
   );
 });

packages/core/client/src/data-source/collection-field/CollectionFieldProvider.tsx

@@ -18,6 +18,9 @@ import { CollectionDeletedPlaceholder } from '../components/CollectionDeletedPla
 export const CollectionFieldContext = createContext<CollectionFieldOptions>(null);
 CollectionFieldContext.displayName = 'CollectionFieldContext';
 
+export const CollectionFieldOriginalContext = createContext<any>(null);
+CollectionFieldOriginalContext.displayName = 'CollectionFieldOriginalContext';
+
 export type CollectionFieldProviderProps = {
   name?: SchemaKey;
   children?: ReactNode;

packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx

@@ -235,6 +235,7 @@ export const tableBlockSettings = new SchemaSettings({
     {
       name: 'divider',
       type: 'divider',
+      sort: 7000,
       useVisible: () => {
         const fieldSchema = useFieldSchema();
         const supportTemplate = !fieldSchema?.['x-decorator-props']?.disableTemplate;
@@ -243,6 +244,7 @@ export const tableBlockSettings = new SchemaSettings({
     },
     {
       name: 'ConvertReferenceToDuplicate',
+      sort: 8000,
       Component: SchemaSettingsTemplate,
       useComponentProps() {
         const { name } = useCollection_deprecated();
@@ -265,10 +267,12 @@ export const tableBlockSettings = new SchemaSettings({
     {
       name: 'divider2',
       type: 'divider',
+      sort: 9000,
     },
     {
       name: 'delete',
       type: 'remove',
+      sort: 10000,
       useComponentProps: () => {
         return {
           removeParentsIfNoChildren: true,

packages/core/client/src/schema-component/antd/table-v2/Table.tsx

@@ -13,7 +13,7 @@ import { SortableContext, SortableContextProps, useSortable } from '@dnd-kit/sor
 import { css, cx } from '@emotion/css';
 import { ArrayField } from '@formily/core';
 import { spliceArrayState } from '@formily/core/esm/shared/internals';
-import { RecursionField, Schema, observer, useField, useFieldSchema } from '@formily/react';
+import { RecursionField, Schema, SchemaOptionsContext, observer, useField, useFieldSchema } from '@formily/react';
 import { action } from '@formily/reactive';
 import { uid } from '@formily/shared';
 import { isPortalInBody } from '@nocobase/utils/client';
@@ -26,10 +26,12 @@ import { useTranslation } from 'react-i18next';
 import { useInView } from 'react-intersection-observer';
 import { DndContext, useDesignable, useTableSize } from '../..';
 import {
+  CollectionFieldOriginalContext,
   RecordIndexProvider,
   RecordProvider,
   useCollection,
   useCollectionParentRecordData,
+  useDataBlockProps,
   useDataBlockRequest,
   useFlag,
   useSchemaInitializerRender,
@@ -321,11 +323,18 @@ const usePaginationProps = (pagination1, pagination2) => {
     [JSON.stringify({ ...pagination1, ...pagination2 })],
   );
   const { total: totalCount, current, pageSize } = pagination || {};
+  const blockProps = useDataBlockProps();
+  const original = useContext(CollectionFieldOriginalContext);
+  const { components } = useContext(SchemaOptionsContext);
+  const C = original?.fieldSchema?.['x-component-props']?.summary?.Component || blockProps?.summary?.Component;
   const showTotal = useCallback(
     (total) => {
+      if (components[C]) {
+        return React.createElement(components[C]);
+      }
       return t('Total {{count}} items', { count: total });
     },
-    [t, totalCount],
+    [components, C, t],
   );
   const result = useMemo(() => {
     if (totalCount) {