fix(Table): fix the problem that the content of the association field is not displayed (#3930)

* test: add e2e test

* fix(Table): fix the problem that the content of the association field is not displayed

* fix(Calendar): avoid infinite loops

packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/schemaInitializer.test.ts

@@ -109,8 +109,13 @@ test.describe('configure actions', () => {
 test.describe('configure columns', () => {
   // 该用例在 CI 并发环境下容易报错，原因未知，通过增加重试次数可以解决
   test.describe.configure({ retries: process.env.CI ? 4 : 0 });
-  test('action column & display collection fields & display association fields', async ({ page, mockPage }) => {
+  test('action column & display collection fields & display association fields', async ({
+    page,
+    mockPage,
+    mockRecord,
+  }) => {
     await mockPage(oneEmptyTable).goto();
+    const record = await mockRecord('t_unp4scqamw9');
     const configureColumnButton = page.getByLabel('schema-initializer-TableV2-table:configureColumns-t_unp4scqamw9');
 
     // Action column -------------------------------------------------------------
@@ -181,6 +186,7 @@ test.describe('configure columns', () => {
     await expect(page.getByRole('menuitem', { name: 'Nickname' }).getByRole('switch')).toBeChecked();
     await page.mouse.move(300, 0);
     await expect(page.getByRole('button', { name: 'Nickname', exact: true })).toBeVisible();
+    await expect(page.getByLabel('block-item-CardItem-').getByText(record.f_pw7uiecc8uc.nickname)).toBeVisible();
 
     // 点击开关，删除创建的字段
     await configureColumnButton.hover();

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

@@ -3,18 +3,18 @@ import { TinyColor } from '@ctrl/tinycolor';
 import { SortableContext, SortableContextProps, useSortable } from '@dnd-kit/sortable';
 import { css } from '@emotion/css';
 import { ArrayField } from '@formily/core';
-import { useCreation } from 'ahooks';
 import { spliceArrayState } from '@formily/core/esm/shared/internals';
 import { RecursionField, Schema, observer, useField, useFieldSchema } from '@formily/react';
 import { action } from '@formily/reactive';
 import { uid } from '@formily/shared';
 import { isPortalInBody } from '@nocobase/utils/client';
-import { useDeepCompareEffect, useMemoizedFn } from 'ahooks';
+import { useCreation, useDeepCompareEffect, useMemoizedFn } from 'ahooks';
 import { Table as AntdTable, Skeleton, TableColumnProps } from 'antd';
 import { default as classNames, default as cls } from 'classnames';
 import _, { omit } from 'lodash';
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useInView } from 'react-intersection-observer';
 import { DndContext, useDesignable, useTableSize } from '../..';
 import {
   RecordIndexProvider,
@@ -25,14 +25,13 @@ import {
   useTableBlockContext,
   useTableSelectorContext,
 } from '../../../';
-import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
 import { useACLFieldWhitelist } from '../../../acl/ACLProvider';
+import { withDynamicSchemaProps } from '../../../application/hoc/withDynamicSchemaProps';
+import { isNewRecord } from '../../../data-source/collection-record/isNewRecord';
 import { useToken } from '../__builtins__';
 import { SubFormProvider } from '../association-field/hooks';
 import { ColumnFieldProvider } from './components/ColumnFieldProvider';
 import { extractIndex, isCollectionFieldComponent, isColumnComponent } from './utils';
-import { isNewRecord } from '../../../data-source/collection-record/isNewRecord';
-import { useInView } from 'react-intersection-observer';
 
 const MemoizedAntdTable = React.memo(AntdTable);
 
@@ -101,7 +100,8 @@ const useTableColumns = (props: { showDel?: boolean; isSubTable?: boolean }) =>
           width: 200,
           ...s['x-component-props'],
           render: (v, record) => {
-            if (collectionFields?.length === 1 && collectionFields[0]['x-read-pretty'] && v == undefined) return null;
+            // 这行代码会导致这里的测试不通过：packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/schemaInitializer.test.ts:189
+            // if (collectionFields?.length === 1 && collectionFields[0]['x-read-pretty'] && v == undefined) return null;
 
             const index = field.value?.indexOf(record);
             const basePath = field.address.concat(record.__index || index);

packages/plugins/@nocobase/plugin-calendar/src/client/calendar/Calendar.tsx

@@ -105,7 +105,7 @@ const useEvents = (dataSource: any, fieldNames: any, date: Date, view: (typeof W
       };
 
       if (cron === 'every_week') {
-        const nextStart = start
+        let nextStart = start
           .clone()
           .year(startDate.year())
           .month(startDate.month())
@@ -115,7 +115,7 @@ const useEvents = (dataSource: any, fieldNames: any, date: Date, view: (typeof W
           if (push(nextStart.clone())) {
             break;
           }
-          nextStart.add(1, 'week');
+          nextStart = nextStart.add(1, 'week');
         }
       } else if (cron === 'every_month') {
         push(start.clone().year(dateM.year()).month(dateM.month()));
@@ -142,7 +142,7 @@ const useEvents = (dataSource: any, fieldNames: any, date: Date, view: (typeof W
       }
     });
     return events;
-  }, [dataSource, fieldNames, date, view]);
+  }, [dataSource, fieldNames.start, fieldNames.end, fieldNames.id, fieldNames.title, date, view, t]);
 };
 
 const CalendarRecordViewer = (props) => {

packages/plugins/@nocobase/plugin-calendar/src/client/schema-initializer/CalendarBlockProvider.tsx

@@ -8,7 +8,7 @@ import {
   withDynamicSchemaProps,
 } from '@nocobase/client';
 import _ from 'lodash';
-import React, { createContext, useContext, useEffect, useMemo } from 'react';
+import React, { createContext, useContext, useEffect } from 'react';
 import { useCalendarBlockParams } from '../hooks/useCalendarBlockParams';
 
 export const CalendarBlockContext = createContext<any>({});
@@ -57,14 +57,17 @@ const useCompatCalendarBlockParams = (props) => {
   }
 };
 
-export const CalendarBlockProvider = withDynamicSchemaProps((props) => {
+export const CalendarBlockProvider = withDynamicSchemaProps(
-  const params = useCompatCalendarBlockParams(props);
+  (props) => {
-  return (
+    const params = useCompatCalendarBlockParams(props);
-    <BlockProvider name="calendar" {...props} params={params}>
+    return (
-      <InternalCalendarBlockProvider {...props} />
+      <BlockProvider name="calendar" {...props} params={params}>
-    </BlockProvider>
+        <InternalCalendarBlockProvider {...props} />
-  );
+      </BlockProvider>
-});
+    );
+  },
+  { displayName: 'CalendarBlockProvider' },
+);
 
 export const useCalendarBlockContext = () => {
   return useContext(CalendarBlockContext);