fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-05-05 05:29:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(grid): grid style (#4715)

Browse Source 
* fix: grid style

* fix: bug
This commit is contained in:
Katherine 2024-06-20 14:40:54 +08:00 committed by GitHub
parent e5cfe67dfd
commit 362a83804e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 50 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/client/src/schema-component/antd/action/ActionBar.tsx
View File

@ -73,7 +73,7 @@ export const ActionBar = withDynamicSchemaProps(
<Portal>
<DndContext>
<div
style={{ display: 'flex', alignItems: 'center', gap: 8, ...style, marginTop: token.marginLG }}
style={{ display: 'flex', alignItems: 'center', gap: 8, ...style }}
{...others}
className={cx(others.className, 'nb-action-bar')}
>

9
packages/core/client/src/schema-component/antd/form-v2/Form.tsx
View File

@ -52,14 +52,11 @@ const FormComponent: React.FC<FormProps> = (props) => {
<FormLayout layout={'vertical'} {...others}>
<div
className={css`
.nb-grid {
.nb-grid-container {
height: ${height ? height + 'px' : '100%'};
overflow-y: auto;
.nb-grid-warp {
width: 100%;
overflow-x: clip;
padding-right: ${token.paddingSM + 'px'};
}
margin: 0px -${token.marginLG}px;
padding: 0px ${token.paddingLG}px;
}
`}
>

13
packages/core/client/src/schema-component/antd/form-v2/hook.ts
View File

@ -29,23 +29,14 @@ export const useFormBlockHeight = () => {
}
return buf;
});
const isFilterForm = schema.parent?.['x-decorator'] === 'FilterFormBlockProvider';
const isDetailForm = schema.parent?.['x-decorator'] === 'DetailsBlockProvider';
const hasFormActions = Object.keys(actionSchema?.properties || {}).length > 0;
const unDesignableActionBar = () => {
return token.marginLG;
};
const actionBarHeight =
hasFormActions || designable
? token.controlHeight +
(isFilterForm || !isDetailForm ? (designable ? 2 : 1) * token.marginLG : 2 * token.marginLG)
: unDesignableActionBar();
const actionBarHeight = hasFormActions || designable ? token.controlHeight + 2 * token.marginLG : 2 * 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 + (designable ? 1 : 0) * token.paddingLG : 0;
const paginationHeight = hasPagination ? token.controlHeightSM + 1 * token.paddingLG : 0;
const dataTemplateHeight = display && enabled ? token.controlHeight + 2 * token.padding + token.margin : 0;
return height - actionBarHeight - token.paddingLG - blockTitleHeaderHeight - paginationHeight - dataTemplateHeight;
};

88
packages/core/client/src/schema-component/antd/grid/Grid.tsx
View File

@ -361,57 +361,57 @@ export const Grid: any = observer(
<GridContext.Provider value={gridContextValue}>
<div
className={cls(
`nb-grid ${styles.container}`,
'nb-grid-container',
css`
& {
margin-bottom: ${designable ? 0 : -token.marginLG}px;
}
`,
)}
style={{ position: 'relative' }}
ref={gridRef}
>
<div className="nb-grid-warp">
<DndWrapper dndContext={props.dndContext}>
{showDivider ? (
<RowDivider
rows={rows}
first
id={`${addr}_0`}
data={{
breakRemoveOn: breakRemoveOnGrid,
wrapSchema: wrapRowSchema,
insertAdjacent: 'afterBegin',
schema: fieldSchema,
}}
/>
) : null}
{rows.map((schema, index) => {
return (
<React.Fragment key={index}>
{distributedValue ? (
<SchemaComponent name={schema.name} schema={schema} distributed />
) : (
<MemorizedRecursionField name={schema.name} schema={schema} />
)}
{showDivider ? (
<RowDivider
rows={rows}
index={index}
id={`${addr}_${index + 1}`}
data={{
breakRemoveOn: breakRemoveOnGrid,
wrapSchema: wrapRowSchema,
insertAdjacent: 'afterEnd',
schema,
}}
/>
) : null}
</React.Fragment>
);
})}
</DndWrapper>
{render()}
<div className={cls(`nb-grid ${styles.container}`)} style={{ position: 'relative' }} ref={gridRef}>
<div className="nb-grid-warp">
<DndWrapper dndContext={props.dndContext}>
{showDivider ? (
<RowDivider
rows={rows}
first
id={`${addr}_0`}
data={{
breakRemoveOn: breakRemoveOnGrid,
wrapSchema: wrapRowSchema,
insertAdjacent: 'afterBegin',
schema: fieldSchema,
}}
/>
) : null}
{rows.map((schema, index) => {
return (
<React.Fragment key={index}>
{distributedValue ? (
<SchemaComponent name={schema.name} schema={schema} distributed />
) : (
<MemorizedRecursionField name={schema.name} schema={schema} />
)}
{showDivider ? (
<RowDivider
rows={rows}
index={index}
id={`${addr}_${index + 1}`}
data={{
breakRemoveOn: breakRemoveOnGrid,
wrapSchema: wrapRowSchema,
insertAdjacent: 'afterEnd',
schema,
}}
/>
) : null}
</React.Fragment>
);
})}
</DndWrapper>
{render()}
</div>
</div>
</div>
</GridContext.Provider>