mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 08:36:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

style(client): grid style improve (#4647)

Browse Source 
* style: grid style improve

* refactor: remove min height for block heght

* fix: min height
This commit is contained in:
Katherine 2024-06-13 10:41:27 +08:00 committed by GitHub
parent a6c16cf3db
commit e8c2bffe20
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx
View File

@ -9,8 +9,6 @@
import { useFieldSchema } from '@formily/react'; import { useFieldSchema } from '@formily/react';
import cls from 'classnames'; import cls from 'classnames';
import { css } from '@emotion/css';
import { theme } from 'antd';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps'; import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
import { CustomCreateStylesUtils, createStyles } from '../../../style'; import { CustomCreateStylesUtils, createStyles } from '../../../style';
@ -20,7 +18,6 @@ import { useGetAriaLabelOfBlockItem } from './hooks/useGetAriaLabelOfBlockItem';
import { ErrorBoundary } from 'react-error-boundary'; import { ErrorBoundary } from 'react-error-boundary';
import { ErrorFallback } from '../error-fallback'; import { ErrorFallback } from '../error-fallback';
import { useSchemaToolbarRender } from '../../../application'; import { useSchemaToolbarRender } from '../../../application';
import { useDesignable } from '../../';
const useStyles = createStyles(({ css, token }: CustomCreateStylesUtils) => { const useStyles = createStyles(({ css, token }: CustomCreateStylesUtils) => {
return css` return css`
@ -87,26 +84,10 @@ export const BlockItem: React.FC<BlockItemProps> = withDynamicSchemaProps(
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
const { render } = useSchemaToolbarRender(fieldSchema); const { render } = useSchemaToolbarRender(fieldSchema);
const { getAriaLabel } = useGetAriaLabelOfBlockItem(props.name); const { getAriaLabel } = useGetAriaLabelOfBlockItem(props.name);
const { token } = theme.useToken();
const { designable } = useDesignable();
const label = useMemo(() => getAriaLabel(), [getAriaLabel]); const label = useMemo(() => getAriaLabel(), [getAriaLabel]);
return ( return (
<SortableItem <SortableItem role="button" aria-label={label} className={cls('nb-block-item', className, blockItemCss)}>
role="button"
aria-label={label}
className={cls(
'nb-block-item',
className,
blockItemCss,
css`
margin-bottom: ${designable ? token.marginLG : 0}px !important;
.ant-card {
margin-bottom: ${designable ? token.marginLG : 0}px !important;
}
`,
)}
>
{render()} {render()}
<ErrorBoundary FallbackComponent={ErrorFallback} onError={(err) => console.log(err)}> <ErrorBoundary FallbackComponent={ErrorFallback} onError={(err) => console.log(err)}>
{children} {children}

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

@ -13,6 +13,8 @@ import { ISchema, RecursionField, Schema, observer, useField, useFieldSchema } f
import { uid } from '@formily/shared'; import { uid } from '@formily/shared';
import cls from 'classnames'; import cls from 'classnames';
import _ from 'lodash'; import _ from 'lodash';
import { css } from '@emotion/css';
import { theme } from 'antd';
import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { SchemaComponent, useDesignable, useSchemaInitializerRender } from '../../../'; import { SchemaComponent, useDesignable, useSchemaInitializerRender } from '../../../';
import { useFormBlockContext, useFormBlockType } from '../../../block-provider/FormBlockProvider'; import { useFormBlockContext, useFormBlockType } from '../../../block-provider/FormBlockProvider';
@ -333,7 +335,8 @@ export const Grid: any = observer(
const rows = useRowProperties(); const rows = useRowProperties();
const { setPrintContent } = useFormBlockContext(); const { setPrintContent } = useFormBlockContext();
const { styles } = useStyles(); const { styles } = useStyles();
const { token } = theme.useToken();
const { designable } = useDesignable();
const distributedValue = const distributedValue =
distributed === undefined distributed === undefined
? fieldSchema?.parent['x-component'] === 'Page' || fieldSchema?.parent['x-component'] === 'Tabs.TabPane' ? fieldSchema?.parent['x-component'] === 'Page' || fieldSchema?.parent['x-component'] === 'Tabs.TabPane'
@ -356,7 +359,18 @@ export const Grid: any = observer(
return ( return (
<FilterBlockProvider> <FilterBlockProvider>
<GridContext.Provider value={gridContextValue}> <GridContext.Provider value={gridContextValue}>
<div className={`nb-grid ${styles.container}`} style={{ position: 'relative' }} ref={gridRef}> <div
className={cls(
`nb-grid ${styles.container}`,
css`
& {
margin-bottom: ${designable ? 0 : -token.marginLG}px;
}
`,
)}
style={{ position: 'relative' }}
ref={gridRef}
>
<div className="nb-grid-warp"> <div className="nb-grid-warp">
<DndWrapper dndContext={props.dndContext}> <DndWrapper dndContext={props.dndContext}>
{showDivider ? ( {showDivider ? (