fix: subform/subtable height equaling form height when form height is…

… set (#4717) * fix: subform height equaling form height when form height is set * fix: bug * fix: bug * fix: bug * fix: bug * fix: bug * fix: bug * fix: bug * fix: bug
nocobase · Jun 20, 2024 · 4671a17 · 4671a17
1 parent f7f1bdf
commit 4671a17
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 10 deletions.
diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalNester.tsx
@@ -53,9 +53,18 @@ export const InternalNester = observer(
         <ACLCollectionProvider actionPath={`${collectionField.target}:${actionName}`}>
           <FormLayout layout={'vertical'}>
             <div
-              className={cx(InternalNesterCss, {
-                [InternalNesterCardCss]: showTitle === false,
-              })}
+              className={cx(
+                InternalNesterCss,
+                {
+                  [InternalNesterCardCss]: showTitle === false,
+                },
+                css`
+                  .nb-grid-container {
+                    height: 100% !important;
+                    margin-bottom: 0px;
+                  }
+                `,
+              )}
             >
               <RecursionField
                 onlyRenderProperties

diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalSubTable.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalSubTable.tsx
@@ -59,6 +59,10 @@ export const InternalSubTable = observer(
                   margin: 0px !important;
                 }
               }
+              .ant-table-body {
+                max-height: 100% !important;
+                min-height: 100% !important;
+              }
             `}
             layout={'vertical'}
             bordered={false}

diff --git a/packages/core/client/src/schema-component/antd/form-v2/Form.tsx b/packages/core/client/src/schema-component/antd/form-v2/Form.tsx
@@ -17,7 +17,7 @@ import { getValuesByPath } from '@nocobase/utils/client';
 import { ConfigProvider, Spin, theme } from 'antd';
 import React, { useEffect, useMemo } from 'react';
 import { useActionContext } from '..';
-import { useAttach, useComponent } from '../..';
+import { useAttach, useComponent, useDesignable } from '../..';
 import { useTemplateBlockContext } from '../../../block-provider/TemplateBlockProvider';
 import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
 import { ActionType } from '../../../schema-settings/LinkageRules/type';
@@ -45,7 +45,7 @@ const FormComponent: React.FC<FormProps> = (props) => {
   const f = useAttach(form.createVoidField({ ...field.props, basePath: '' }));
   const height = useFormBlockHeight();
   const { token } = theme.useToken();
-
+  const { designable } = useDesignable();
   return (
     <FieldContext.Provider value={undefined}>
       <FormContext.Provider value={form}>
@@ -55,7 +55,7 @@ const FormComponent: React.FC<FormProps> = (props) => {
               .nb-grid-container {
                 height: ${height ? height + 'px' : '100%'};
                 overflow-y: auto;
-                margin: 0px -${token.marginLG}px;
+                margin: 0px -${token.marginLG}px ${designable ? 0 : -token.marginLG}px;
                 padding: 0px ${token.paddingLG}px;
               }
             `}

diff --git a/packages/core/client/src/schema-component/antd/form-v2/hook.ts b/packages/core/client/src/schema-component/antd/form-v2/hook.ts
@@ -11,7 +11,7 @@ import { theme } from 'antd';
 import { useFieldSchema } from '@formily/react';
 import { useDataBlockHeight } from '../../hooks/useBlockSize';
 import { useDesignable } from '../../';
-import { useDataBlockRequest } from '../../../data-source';
+import { useCollection, useDataBlockRequest } from '../../../data-source';
 import { useFormDataTemplates } from './Templates';
 import { useBlockHeightProps } from '../../../block-provider/hooks/useBlockHeightProps';
 
@@ -31,12 +31,34 @@ export const useFormBlockHeight = () => {
   });
 
   const hasFormActions = Object.keys(actionSchema?.properties || {}).length > 0;
-  const actionBarHeight = hasFormActions || designable ? token.controlHeight + 2 * token.marginLG : 2 * token.marginLG;
+  const isFormBlock = schema?.parent?.['x-decorator']?.includes?.('FormBlockProvider');
+  const actionBarPadding = () => {
+    if (isFormBlock) {
+      return designable ? 2 : 1;
+    }
+    return 2;
+  };
+
+  const actionBarHeight =
+    hasFormActions || designable ? token.controlHeight + actionBarPadding() * token.marginLG : 1 * token.marginLG;
   const blockTitleHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0;
   const { data } = useDataBlockRequest() || {};
   const { count, pageSize } = (data as any)?.meta || ({} as any);
   const hasPagination = count > pageSize;
-  const paginationHeight = hasPagination ? token.controlHeightSM + 1 * token.paddingLG : 0;
+  const paginationHeight = hasPagination ? token.controlHeightSM + (designable ? 1 : 0) * token.paddingLG : 0;
   const dataTemplateHeight = display && enabled ? token.controlHeight + 2 * token.padding + token.margin : 0;
-  return height - actionBarHeight - token.paddingLG - blockTitleHeaderHeight - paginationHeight - dataTemplateHeight;
+  const blockBottomPadding = () => {
+    if (!isFormBlock && !hasPagination) {
+      return designable ? 1 : 0;
+    }
+    return 1;
+  };
+  return (
+    height -
+    actionBarHeight -
+    blockBottomPadding() * token.paddingLG -
+    blockTitleHeaderHeight -
+    paginationHeight -
+    dataTemplateHeight
+  );
 };