mirror of
https://gitee.com/nocobase/nocobase.git
synced 2024-11-29 18:58:26 +08:00
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
This commit is contained in:
parent
f7f1bdffbb
commit
4671a17628
@ -53,9 +53,18 @@ export const InternalNester = observer(
|
||||
<ACLCollectionProvider actionPath={`${collectionField.target}:${actionName}`}>
|
||||
<FormLayout layout={'vertical'}>
|
||||
<div
|
||||
className={cx(InternalNesterCss, {
|
||||
className={cx(
|
||||
InternalNesterCss,
|
||||
{
|
||||
[InternalNesterCardCss]: showTitle === false,
|
||||
})}
|
||||
},
|
||||
css`
|
||||
.nb-grid-container {
|
||||
height: 100% !important;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
`,
|
||||
)}
|
||||
>
|
||||
<RecursionField
|
||||
onlyRenderProperties
|
||||
|
@ -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}
|
||||
|
@ -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;
|
||||
}
|
||||
`}
|
||||
|
@ -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
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user