refactor: improve FixedBlock performance (#1593)

* refactor: improve FixedBlock performance * fix: style * fix: fixedBlock not work when the page have many blocks * refactor: improve performance
2023-03-29 17:11:20 +08:00 · 2023-03-29 17:11:20 +08:00 · 6747331529
commit 6747331529
parent e6326460b0
7 changed files with 145 additions and 150 deletions
--- a/packages/core/client/src/block-provider/CalendarBlockProvider.tsx
+++ b/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,
  };
 };
--- a/packages/core/client/src/block-provider/KanbanBlockProvider.tsx
+++ b/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>
  );
 };

--- a/packages/core/client/src/block-provider/TableBlockProvider.tsx
+++ b/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>
  );
 };

--- a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
+++ b/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,
    },
--- a/packages/core/client/src/schema-component/antd/page/FixedBlock.tsx
+++ b/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({
-  setFixedSchema: (schema: Schema) => {},
+const FixedBlockContext = React.createContext<{
+  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 { fieldSchema: templateFieldSchema } = useBlockTemplateContext();
+  const { setFixedBlock, fixedBlockUID } = useFixedBlock();
  const hasSet = useRef(false);

  useEffect(() => {
-    if (fieldSchema?.['x-decorator-props']?.fixedBlock) {
-      const nextSchema = templateFieldSchema || fieldSchema;
-      setFixedSchema(nextSchema);
+    if (!fixedBlockUID || hasSet.current) {
+      setFixedBlock(field?.decoratorProps?.fixedBlock ? fieldSchema['x-uid'] : false);
      hasSet.current = true;
-    } else if (hasSet.current) {
-      setFixedSchema(null);
    }
-  }, [field?.decoratorProps?.fixedBlock, fieldSchema?.['x-decorator-props']?.fixedBlock]);
+  }, [field?.decoratorProps?.fixedBlock]);

-  useEffect(
-    () => () => {
-      if (hasSet.current && fixedSchemaRef.current) {
-        setFixedSchema(null);
-        fixedSchemaRef.current = null;
-      }
-    },
-    [],
-  );
-  return fieldSchema?.['x-decorator-props']?.fixedBlock
+  return fieldSchema['x-uid'] === fixedBlockUID;
 };

 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 { 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`
+const fixedBlockCss = css`
  overflow: hidden;
  position: relative;
-            height: calc(100vh - ${height}px);
  .noco-card-item {
-              position: absolute;
-              top: 0;
-              left: 0;
-              right: 0;
-              bottom: 0;
+    height: 100%;
    .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>
  );
 };
--- a/packages/core/client/src/schema-component/antd/page/Page.tsx
+++ b/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
-                className={css`
-                  > .nb-grid:not(:last-child) {
-                    > .nb-schema-initializer-button {
-                      display: none;
-                    }
-                  }
-                `}
-              >
-                {props.children}
-              </div>
+              <div className={pageWithFixedBlockCss}>{props.children}</div>
            </FixedBlock>
          )}
        </div>
--- a/packages/plugins/map/src/client/block/MapBlockProvider.tsx
+++ b/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>
  );
 };