fix: when the page has FixedBlock, the table of popup is not displayed (#1619)

* fix: when the page has FixedBlock, the table of popup is not displayed

* feat: improve disable link

* docs: update

* feat: improve fixedblock design item

packages/core/client/src/schema-component/antd/calendar/Calendar.Designer.tsx

@@ -1,7 +1,7 @@
 import { ISchema, useField, useFieldSchema } from '@formily/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useCompile, useDesignable, useFixedBlockDesignerSetting } from '../..';
+import { FixedBlockDesignerItem, useCompile, useDesignable } from '../..';
 import { useCalendarBlockContext } from '../../../block-provider';
 import { useCollection, useCollectionManager } from '../../../collection-manager';
 import { useCollectionFilterOptions } from '../../../collection-manager/action-hooks';
@@ -21,7 +21,6 @@ export const CalendarDesigner = () => {
   const defaultFilter = fieldSchema?.['x-decorator-props']?.params?.filter || {};
   const fieldNames = fieldSchema?.['x-decorator-props']?.['fieldNames'] || {};
   const defaultResource = fieldSchema?.['x-decorator-props']?.resource;
-  const fixedBlockDesignerSetting = useFixedBlockDesignerSetting();
 
   return (
     <GeneralSchemaDesigner template={template} title={title || name}>
@@ -62,7 +61,7 @@ export const CalendarDesigner = () => {
           dn.refresh();
         }}
       />
-      {fixedBlockDesignerSetting}
+      <FixedBlockDesignerItem />
       <SchemaSettings.CascaderItem
         title={t('Start date field')}
         value={fieldNames.start}

packages/core/client/src/schema-component/antd/kanban/Kanban.Designer.tsx

@@ -7,7 +7,7 @@ import { useCollectionFilterOptions } from '../../../collection-manager/action-h
 import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
 import { useSchemaTemplate } from '../../../schema-templates';
 import { useDesignable } from '../../hooks';
-import { useFixedBlockDesignerSetting } from '../page';
+import { FixedBlockDesignerItem } from '../page';
 
 export const KanbanDesigner = () => {
   const { name, title } = useCollection();
@@ -20,7 +20,6 @@ export const KanbanDesigner = () => {
   const defaultFilter = fieldSchema?.['x-decorator-props']?.params?.filter || {};
   const defaultResource = fieldSchema?.['x-decorator-props']?.resource;
   const template = useSchemaTemplate();
-  const fixedBlockDesignerSetting = useFixedBlockDesignerSetting();
 
   return (
     <GeneralSchemaDesigner template={template} title={title || name}>
@@ -55,7 +54,7 @@ export const KanbanDesigner = () => {
           });
         }}
       />
-      {fixedBlockDesignerSetting}
+      <FixedBlockDesignerItem />
       <SchemaSettings.Divider />
       <SchemaSettings.Template componentName={'Kanban'} collectionName={name} resourceName={defaultResource} />
       <SchemaSettings.Divider />

packages/core/client/src/schema-component/antd/page/FixedBlock.tsx

@@ -41,9 +41,13 @@ export const useFixedBlock = () => {
 export const FixedBlockWrapper: React.FC = (props) => {
   const fixedBlock = useFixedSchema();
   const { height, fixedBlockUID } = useFixedBlock();
-
-  // The fixedBlockUID of false means that the page has no fixed blocks
-  if (!fixedBlock && fixedBlockUID) return null;
+  const record = useRecord();
+  const isPopup = Object.keys(record);
+  /**
+   * The fixedBlockUID of false means that the page has no fixed blocks
+   * isPopup means that the FixedBlock is in the popup mode
+   */
+  if (!fixedBlock && fixedBlockUID && !isPopup) return null;
   return (
     <div
       className="nb-fixed-block"
@@ -56,7 +60,7 @@ export const FixedBlockWrapper: React.FC = (props) => {
   );
 };
 
-export const useFixedBlockDesignerSetting = () => {
+export const FixedBlockDesignerItem = () => {
   const field = useField();
   const { t } = useTranslation();
   const fieldSchema = useFieldSchema();

packages/core/client/src/schema-component/antd/record-picker/ReadPrettyRecordPicker.tsx

@@ -53,14 +53,7 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
             {snapshot ? (
               text
             ) : isTagsMode ? (
-              <Typography.Text
-                className={css`
-                  margin-left: 8px;
-                `}
-                underline
-              >
-                {text}
-              </Typography.Text>
+              <Typography.Text underline>{text}</Typography.Text>
             ) : (
               <a
                 onClick={(e) => {
@@ -75,7 +68,7 @@ export const ReadPrettyRecordPicker: React.FC = observer((props: any) => {
               </a>
             )}
           </span>
-          {index < arr.length - 1 && !isTagsMode ? <span style={{ marginRight: 4, color: '#aaa' }}>,</span> : null}
+          {index < arr.length - 1 ? <span style={{ marginRight: 4, color: '#aaa' }}>,</span> : null}
         </Fragment>
       );
     });

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

@@ -10,7 +10,7 @@ import { FilterBlockType } from '../../../filter-provider/utils';
 import { GeneralSchemaDesigner, SchemaSettings } from '../../../schema-settings';
 import { useSchemaTemplate } from '../../../schema-templates';
 import { useDesignable } from '../../hooks';
-import { useFixedBlockDesignerSetting } from '../page';
+import { FixedBlockDesignerItem } from '../page';
 
 export const TableBlockDesigner = () => {
   const { name, title, sortable } = useCollection();
@@ -41,7 +41,6 @@ export const TableBlockDesigner = () => {
   const collection = useCollection();
   const { dragSort, resource } = field.decoratorProps;
   const treeChildren = resource?.includes('.') ? getCollectionField(resource)?.treeChildren : !!collection?.tree;
-  const fixedBlockDesignerSetting = useFixedBlockDesignerSetting();
   return (
     <GeneralSchemaDesigner template={template} title={title || name}>
       <SchemaSettings.BlockTitleItem />
@@ -82,7 +81,7 @@ export const TableBlockDesigner = () => {
           }}
         />
       )}
-      {fixedBlockDesignerSetting}
+      <FixedBlockDesignerItem />
       <SchemaSettings.ModalItem
         title={t('Set the data scope')}
         schema={

packages/plugins/map/src/client/block/MapBlockDesigner.tsx

@@ -4,7 +4,7 @@ import {
   useCollectionFilterOptions,
   useDesignable,
   useSchemaTemplate,
-  useFixedBlockDesignerSetting,
+  FixedBlockDesignerItem,
   GeneralSchemaDesigner,
   SchemaSettings,
   mergeFilter,
@@ -12,7 +12,7 @@ import {
 } from '@nocobase/client';
 import set from 'lodash/set';
 import React from 'react';
-import { useTranslation} from 'react-i18next'
+import { useTranslation } from 'react-i18next';
 import { useMapTranslation } from '../locale';
 import { useMapBlockContext } from './MapBlockProvider';
 
@@ -33,7 +33,6 @@ export const MapBlockDesigner = () => {
   const defaultZoom = fieldSchema?.['x-component-props']?.['zoom'] || 13;
 
   const template = useSchemaTemplate();
-  const fixedBlockDesignerSetting = useFixedBlockDesignerSetting();
 
   const mapFieldOptions = getCollectionFieldsOptions(collection?.name, ['point', 'lineString', 'polygon']);
   const markerFieldOptions = getCollectionFieldsOptions(collection?.name, 'string');
@@ -41,7 +40,7 @@ export const MapBlockDesigner = () => {
   return (
     <GeneralSchemaDesigner template={template} title={title || name}>
       <SchemaSettings.BlockTitleItem />
-      {fixedBlockDesignerSetting}
+      <FixedBlockDesignerItem />
       <SchemaSettings.SelectItem
         title={mapT('Map field')}
         value={fieldNames.field}