refactor: improve FixedBlock performance (#1593)

* refactor:  improve FixedBlock performance

* fix: style

* fix: fixedBlock not work when the page have many blocks

* refactor: improve performance

packages/core/client/src/block-provider/CalendarBlockProvider.tsx

@@ -1,7 +1,7 @@
 import { ArrayField } from '@formily/core';
 import { useField } from '@formily/react';
 import React, { createContext, useContext, useEffect } from 'react';
-import { useFixedSchema } from '../schema-component';
+import { FixedBlockWrapper } from '../schema-component';
 import { BlockProvider, useBlockRequestContext } from './BlockProvider';
 
 export const CalendarBlockContext = createContext<any>({});
@@ -10,11 +10,11 @@ const InternalCalendarBlockProvider = (props) => {
   const { fieldNames, showLunar } = props;
   const field = useField();
   const { resource, service } = useBlockRequestContext();
-  const fixedBlock = useFixedSchema()
   // if (service.loading) {
   //   return <Spin />;
   // }
   return (
+    <FixedBlockWrapper>
       <CalendarBlockContext.Provider
         value={{
           field,
@@ -22,11 +22,12 @@ const InternalCalendarBlockProvider = (props) => {
           resource,
           fieldNames,
           showLunar,
-        fixedBlock,
+          fixedBlock: field?.decoratorProps?.fixedBlock,
         }}
       >
         {props.children}
       </CalendarBlockContext.Provider>
+    </FixedBlockWrapper>
   );
 };
 
@@ -53,6 +54,6 @@ export const useCalendarBlockProps = () => {
   return {
     fieldNames: ctx.fieldNames,
     showLunar: ctx.showLunar,
-    fixedBlock: ctx.fixedBlock
+    fixedBlock: ctx.fixedBlock,
   };
 };

packages/core/client/src/block-provider/KanbanBlockProvider.tsx

@@ -5,7 +5,7 @@ import uniq from 'lodash/uniq';
 import React, { createContext, useContext, useEffect } from 'react';
 import { useACLRoleContext } from '../acl';
 import { useCollection, useCollectionManager } from '../collection-manager';
-import { useFixedSchema } from '../schema-component';
+import { FixedBlockWrapper } from '../schema-component';
 import { toColumns } from '../schema-component/antd/kanban/Kanban';
 import { BlockProvider, useBlockRequestContext } from './BlockProvider';
 
@@ -24,7 +24,6 @@ const useGroupField = (props) => {
 
 const InternalKanbanBlockProvider = (props) => {
   const field = useField<any>();
-  const fixedBlock = useFixedSchema();
   const { resource, service } = useBlockRequestContext();
   const groupField = useGroupField(props);
   if (!groupField) {
@@ -35,6 +34,7 @@ const InternalKanbanBlockProvider = (props) => {
   }
   field.loaded = true;
   return (
+    <FixedBlockWrapper>
       <KanbanBlockContext.Provider
         value={{
           props: {
@@ -44,11 +44,12 @@ const InternalKanbanBlockProvider = (props) => {
           service,
           resource,
           groupField,
-        fixedBlock,
+          fixedBlock: field?.decoratorProps?.fixedBlock,
         }}
       >
         {props.children}
       </KanbanBlockContext.Provider>
+    </FixedBlockWrapper>
   );
 };
 

packages/core/client/src/block-provider/TableBlockProvider.tsx

@@ -3,7 +3,7 @@ import { FormContext, Schema, useField, useFieldSchema } from '@formily/react';
 import uniq from 'lodash/uniq';
 import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { useCollectionManager } from '../collection-manager';
-import { SchemaComponentOptions, useFixedSchema, removeNullCondition } from '../schema-component';
+import { SchemaComponentOptions, removeNullCondition, FixedBlockWrapper } from '../schema-component';
 import { BlockProvider, RenderChildrenWithAssociationFilter, useBlockRequestContext } from './BlockProvider';
 import { useFilterBlock } from '../filter-provider/FilterProvider';
 import { findFilterTargets } from './hooks';
@@ -24,8 +24,8 @@ const InternalTableBlockProvider = (props: Props) => {
   const field = useField();
   const { resource, service } = useBlockRequestContext();
   const [expandFlag, setExpandFlag] = useState(false);
-  useFixedSchema();
   return (
+    <FixedBlockWrapper>
       <TableBlockContext.Provider
         value={{
           field,
@@ -42,6 +42,7 @@ const InternalTableBlockProvider = (props: Props) => {
       >
         <RenderChildrenWithAssociationFilter {...props} />
       </TableBlockContext.Provider>
+    </FixedBlockWrapper>
   );
 };
 

packages/core/client/src/schema-component/antd/form-item/FormItem.tsx

@@ -20,6 +20,9 @@ const divWrap = (schema: ISchema) => {
   return {
     type: 'void',
     'x-component': 'div',
+    'x-component-props': {
+      className: 'nb-block-wrap',
+    },
     properties: {
       [schema.name || uid()]: schema,
     },

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

@@ -1,51 +1,58 @@
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
+import { useField, useFieldSchema } from '@formily/react';
 import { css } from '@emotion/css';
 import { SchemaSettings } from '../../../schema-settings';
 import { useTranslation } from 'react-i18next';
 import { useDesignable } from '../../hooks';
 import { useRecord } from '../../../record-provider';
-import { useBlockTemplateContext } from '../../../schema-templates/BlockTemplate';
 
-const FixedBlockContext = React.createContext({
+const FixedBlockContext = React.createContext<{
-  setFixedSchema: (schema: Schema) => {},
+  setFixedBlock: (value: string | false) => void;
+  height: number;
+  fixedBlockUID: boolean | string;
+}>({
+  setFixedBlock: () => {},
   height: 0,
-  fixedSchemaRef: {} as unknown as React.MutableRefObject<Schema>,
+  fixedBlockUID: false,
 });
 
 export const useFixedSchema = () => {
   const field = useField();
   const fieldSchema = useFieldSchema();
-  const { setFixedSchema, fixedSchemaRef } = useFixedBlock();
+  const { setFixedBlock, fixedBlockUID } = useFixedBlock();
-  const { fieldSchema: templateFieldSchema } = useBlockTemplateContext();
   const hasSet = useRef(false);
 
   useEffect(() => {
-    if (fieldSchema?.['x-decorator-props']?.fixedBlock) {
+    if (!fixedBlockUID || hasSet.current) {
-      const nextSchema = templateFieldSchema || fieldSchema;
+      setFixedBlock(field?.decoratorProps?.fixedBlock ? fieldSchema['x-uid'] : false);
-      setFixedSchema(nextSchema);
       hasSet.current = true;
-    } else if (hasSet.current) {
-      setFixedSchema(null);
     }
-  }, [field?.decoratorProps?.fixedBlock, fieldSchema?.['x-decorator-props']?.fixedBlock]);
+  }, [field?.decoratorProps?.fixedBlock]);
 
-  useEffect(
+  return fieldSchema['x-uid'] === fixedBlockUID;
-    () => () => {
-      if (hasSet.current && fixedSchemaRef.current) {
-        setFixedSchema(null);
-        fixedSchemaRef.current = null;
-      }
-    },
-    [],
-  );
-  return fieldSchema?.['x-decorator-props']?.fixedBlock
 };
 
 export const useFixedBlock = () => {
   return useContext(FixedBlockContext);
 };
 
+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;
+  return (
+    <div
+      className="nb-fixed-block"
+      style={{
+        height: fixedBlockUID !== false ? `calc(100vh - ${height}px)` : undefined,
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
+
 export const useFixedBlockDesignerSetting = () => {
   const field = useField();
   const { t } = useTranslation();
@@ -83,36 +90,11 @@ interface FixedBlockProps {
   height: number;
 }
 
-const FixedBlock: React.FC<FixedBlockProps> = (props) => {
+const fixedBlockCss = css`
-  const { height } = props;
-  const [fixedSchema, _setFixedSchema] = useState<Schema>();
-  const fixedSchemaRef = useRef(fixedSchema);
-
-  const setFixedSchema = (next) => {
-    if (fixedSchema && next) {
-      fixedSchemaRef.current = next;
-    }
-    _setFixedSchema(next);
-  };
-
-  const schema = useMemo<Schema>(() => {
-    return fixedSchema?.parent;
-  }, [fixedSchema]);
-
-  return (
-    <FixedBlockContext.Provider value={{ height, setFixedSchema, fixedSchemaRef }}>
-      {schema ? (
-        <div
-          className={css`
   overflow: hidden;
   position: relative;
-            height: calc(100vh - ${height}px);
   .noco-card-item {
-              position: absolute;
+    height: 100%;
-              top: 0;
-              left: 0;
-              right: 0;
-              bottom: 0;
     .ant-card {
       display: flex;
       flex-direction: column;
@@ -126,13 +108,21 @@ const FixedBlock: React.FC<FixedBlockProps> = (props) => {
       }
     }
   }
-          `}
+`;
+
+const FixedBlock: React.FC<FixedBlockProps> = (props) => {
+  const { height } = props;
+  const [fixedBlockUID, setFixedBlock] = useState<false | string>(false);
+  return (
+    <FixedBlockContext.Provider value={{ height, setFixedBlock, fixedBlockUID }}>
+      <div
+        className={fixedBlockUID ? fixedBlockCss : ''}
+        style={{
+          height: fixedBlockUID ? `calc(100vh - ${height}px)` : undefined,
+        }}
       >
-          <RecursionField onlyRenderProperties={false} name={schema.name} schema={schema} />
+        {props.children}
       </div>
-      ) : (
-        props.children
-      )}
     </FixedBlockContext.Provider>
   );
 };

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

@@ -111,13 +111,22 @@ const pageDesignerCss = css`
   }
 `;
 
+const pageWithFixedBlockCss = classNames([
+  'nb-page',
+  css`
+    > .nb-grid:not(:last-child) {
+      > .nb-schema-initializer-button {
+        display: none;
+      }
+    }
+  `,
+]);
+
 export const Page = (props) => {
   const { children, ...others } = props;
-  const field = useField();
   const compile = useCompile();
   const { title, setTitle } = useDocumentTitle();
   const fieldSchema = useFieldSchema();
-  const history = useHistory();
   const dn = useDesignable();
   useEffect(() => {
     if (!title) {
@@ -288,17 +297,7 @@ export const Page = (props) => {
                 height + 46 + 48
               }
             >
-              <div
+              <div className={pageWithFixedBlockCss}>{props.children}</div>
-                className={css`
-                  > .nb-grid:not(:last-child) {
-                    > .nb-schema-initializer-button {
-                      display: none;
-                    }
-                  }
-                `}
-              >
-                {props.children}
-              </div>
             </FixedBlock>
           )}
         </div>

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

@@ -1,6 +1,5 @@
-import { ArrayField } from '@formily/core';
 import { useField, useFieldSchema } from '@formily/react';
-import { BlockProvider, SchemaComponentOptions, useBlockRequestContext, useFixedSchema } from '@nocobase/client';
+import { BlockProvider, FixedBlockWrapper, SchemaComponentOptions, useBlockRequestContext } from '@nocobase/client';
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
 export const MapBlockContext = createContext<any>({});
@@ -12,8 +11,8 @@ const InternalMapBlockProvider = (props) => {
   const { resource, service } = useBlockRequestContext();
   const [selectedRecordKeys, setSelectedRecordKeys] = useState([]);
 
-  useFixedSchema();
   return (
+    <FixedBlockWrapper>
       <SchemaComponentOptions scope={{ selectedRecordKeys }}>
         <MapBlockContext.Provider
           value={{
@@ -29,6 +28,7 @@ const InternalMapBlockProvider = (props) => {
           {props.children}
         </MapBlockContext.Provider>
       </SchemaComponentOptions>
+    </FixedBlockWrapper>
   );
 };