fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-07-01 18:52:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: data block support setting block height (#4441)

Browse Source 
* feat: data block support setting block height

* feat: form block support setting block height

* feat: form block support setting block height

* feat: detail block height

* test: fix

* fix: bug

* feat: grid card support block height

* feat: kanban support block height

* feat: kanban support block height

* feat: calender support block height

* feat: calender support block height

* feat: map support block height

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* test: skip

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* refactor: blockinitializers style improve

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* refactor: code improve

* refactor: code improve

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* refactor: code improve

* refactor: code improve

* fix: bug

* fix: bug

* fix: bug

* fix: bug

* refactor: code improve

* refactor: code improve

* fix: test

* fix: test

* fix: test
This commit is contained in:
Katherine 2024-06-04 17:32:01 +08:00 committed by GitHub
parent 5d65e8fbaa
commit 0b8f762d8b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
70 changed files with 787 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lerna.json
View File

@ -2,9 +2,7 @@
"version": "1.0.0-alpha.17",
"npmClient": "yarn",
"useWorkspaces": true,
"npmClientArgs": [
"--ignore-engines"
],
"npmClientArgs": ["--ignore-engines"],
"command": {
"version": {
"forcePublish": true,

1
packages/core/client/src/application/schema-initializer/components/SchemaInitializerButton.tsx
View File

@ -22,7 +22,6 @@ export const SchemaInitializerButton: FC<SchemaInitializerButtonProps> = React.m
const { style, options, ...others } = props;
const compile = useCompile();
const { getAriaLabel } = useGetAriaLabelOfSchemaInitializer();
return (
<Button
data-testid={options['data-testid']}

5
packages/core/client/src/block-provider/FormBlockProvider.tsx
View File

@ -9,7 +9,7 @@
import { createForm } from '@formily/core';
import { RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
import { Spin } from 'antd';
import { Spin, theme } from 'antd';
import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react';
import {
CollectionRecord,
@ -183,9 +183,10 @@ const RenderChildrenWithDataTemplates = ({ form }) => {
const { findComponent } = useDesignable();
const field = useField();
const Component = findComponent(field.component?.[0]) || React.Fragment;
const { token } = theme.useToken();
return (
<Component {...field.componentProps}>
<DataTemplateSelect style={{ marginBottom: 18 }} form={form} />
<DataTemplateSelect style={{ marginBottom: token.margin }} form={form} />
<RecursionField schema={FieldSchema} onlyRenderProperties />
</Component>
);

17
packages/core/client/src/data-source/data-block/DataBlockProvider.tsx
View File

@ -7,6 +7,7 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { useFieldSchema } from '@formily/react';
import React, { FC, ReactNode, createContext, useContext, useMemo } from 'react';
import { ACLCollectionProvider } from '../../acl/ACLProvider';
@ -114,6 +115,7 @@ export type UseDataBlockProps<T extends keyof AllDataBlockType> = (
export interface DataBlockContextValue<T extends {} = {}> {
props: AllDataBlockProps & T;
dn: Designable;
heightProps?: any;
}
export const DataBlockContext = createContext<DataBlockContextValue<any>>({} as any);
@ -153,16 +155,18 @@ export const DataBlockProvider: FC<DataBlockProviderProps & { children?: ReactNo
(props) => {
const { collection, association, dataSource, children, hidden, ...resets } = props as Partial<AllDataBlockProps>;
const { dn } = useDesignable();
const fieldSchema = useFieldSchema();
const pageSchema = useMemo(() => getPageSchema(fieldSchema), []);
const { disablePageHeader, enablePageTabs, hidePageTitle } = pageSchema?.['x-component-props'] || {};
if (hidden) {
return null;
}
return (
<DataBlockContext.Provider
value={{
dn,
props: { ...resets, collection, association, dataSource } as AllDataBlockProps,
heightProps: { ...fieldSchema?.['x-component-props'], disablePageHeader, enablePageTabs, hidePageTitle },
}}
>
<CollectionManagerProvider dataSource={dataSource}>
@ -193,3 +197,12 @@ export const useDataBlockProps = <T extends {}>(): DataBlockContextValue<T>['pro
const context = useDataBlock<T>();
return context.props;
};
export const getPageSchema = (schema) => {
if (!schema) return null;
if (schema['x-component'] === 'Page') {
return schema;
}
return getPageSchema(schema.parent);
};

5
packages/core/client/src/locale/zh-CN.json
View File

@ -946,5 +946,8 @@
"Not fixed": "不固定",
"Left fixed": "左固定",
"Right fixed": "右固定",
"Fixed": "固定列"
"Fixed": "固定列",
"Set block height": "设置区块高度",
"Specify height": "指定高度",
"Full height": "全高"
}

5
packages/core/client/src/modules/blocks/data-blocks/details-multi/detailsWithPaginationSettings.tsx
View File

@ -21,12 +21,17 @@ import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/Schema
import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSettingsDataScope';
import { SchemaSettingsTemplate } from '../../../../schema-settings/SchemaSettingsTemplate';
import { setDataLoadingModeSettingsItem } from './setDataLoadingModeSettingsItem';
import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
const commonItems: SchemaSettingsItemType[] = [
{
name: 'title',
Component: SchemaSettingsBlockTitleItem,
},
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'linkageRules',
Component: SchemaSettingsLinkageRules,

6
packages/core/client/src/modules/blocks/data-blocks/details-single/detailsBlockSettings.ts
View File

@ -13,12 +13,16 @@ import { SchemaSettingsItemType } from '../../../../application/schema-settings/
import { useCollection_deprecated } from '../../../../collection-manager';
import { SchemaSettingsFormItemTemplate, SchemaSettingsLinkageRules } from '../../../../schema-settings';
import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
const commonItems: SchemaSettingsItemType[] = [
{
name: 'title',
Component: SchemaSettingsBlockTitleItem,
},
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'linkageRules',
Component: SchemaSettingsLinkageRules,

5
packages/core/client/src/modules/blocks/data-blocks/form/__e2e__/form-create/schemaSettings1.test.ts
View File

@ -275,7 +275,7 @@ test.describe('creation form block schema settings', () => {
});
test('save block template & using block template', async ({ page, mockPage, clearBlockTemplates }) => {
await mockPage({
const nocoPage = await mockPage({
pageSchema: {
_isJSONSchemaObject: true,
version: '2.0',
@ -420,7 +420,8 @@ test.describe('creation form block schema settings', () => {
'x-async': true,
'x-index': 1,
},
}).goto();
}).waitForInit();
await nocoPage.goto();
await page.getByLabel('block-item-CardItem-users-form').hover();
await page
.getByLabel('block-item-CardItem-users-form')

2
packages/core/client/src/modules/blocks/data-blocks/form/__tests__/createCreateFormBlockUISchema.test.ts
View File

@ -40,7 +40,7 @@ describe('createCreateFormBlockUISchema', () => {
"x-component-props": {
"layout": "one-column",
"style": {
"marginTop": 24,
"marginTop": "var(--nb-spacing)",
},
},
"x-initializer": "createForm:configureActions",

4
packages/core/client/src/modules/blocks/data-blocks/form/__tests__/createEditFormBlockUISchema.test.ts
View File

@ -37,7 +37,7 @@ describe('createEditFormBlockUISchema', () => {
"x-component-props": {
"layout": "one-column",
"style": {
"marginTop": 24,
"marginTop": "var(--nb-spacing)",
},
},
"x-initializer": "editForm:configureActions",
@ -93,7 +93,7 @@ describe('createEditFormBlockUISchema', () => {
"x-component-props": {
"layout": "one-column",
"style": {
"marginTop": 24,
"marginTop": "var(--nb-spacing)",
},
},
"x-initializer": "editForm:configureActions",

5
packages/core/client/src/modules/blocks/data-blocks/form/createCreateFormBlockUISchema.ts
View File

@ -9,6 +9,7 @@
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
import { theme } from 'antd';
export interface CreateFormBlockUISchemaOptions {
dataSource: string;
@ -27,7 +28,7 @@ export interface CreateFormBlockUISchemaOptions {
export function createCreateFormBlockUISchema(options: CreateFormBlockUISchemaOptions): ISchema {
const { collectionName, association, dataSource, templateSchema, isCusomeizeCreate } = options;
const resourceName = association || collectionName;
// const { token } = theme.useToken();
if (!dataSource) {
throw new Error('dataSource are required');
}
@ -68,7 +69,7 @@ export function createCreateFormBlockUISchema(options: CreateFormBlockUISchemaOp
'x-component-props': {
layout: 'one-column',
style: {
marginTop: 24,
marginTop: 'var(--nb-spacing)',
},
},
},

4
packages/core/client/src/modules/blocks/data-blocks/form/createEditFormBlockUISchema.ts
View File

@ -9,6 +9,7 @@
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
import { theme } from 'antd';
interface EditFormBlockOptions {
dataSource: string;
@ -26,7 +27,6 @@ export function createEditFormBlockUISchema(options: EditFormBlockOptions): ISch
const { collectionName, dataSource, association, templateSchema } = options;
const resourceName = association || collectionName;
const isCurrentObj = options.isCurrent ? { 'x-is-current': true } : {};
if (!dataSource) {
throw new Error('dataSource are required');
}
@ -68,7 +68,7 @@ export function createEditFormBlockUISchema(options: EditFormBlockOptions): ISch
'x-component-props': {
layout: 'one-column',
style: {
marginTop: 24,
marginTop: 'var(--nb-spacing)',
},
},
},

5
packages/core/client/src/modules/blocks/data-blocks/form/createFormBlockSettings.tsx
View File

@ -17,6 +17,7 @@ import {
SchemaSettingsLinkageRules,
} from '../../../../schema-settings';
import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
export const createFormBlockSettings = new SchemaSettings({
name: 'blockSettings:createForm',
@ -25,6 +26,10 @@ export const createFormBlockSettings = new SchemaSettings({
name: 'title',
Component: SchemaSettingsBlockTitleItem,
},
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'linkageRules',
Component: SchemaSettingsLinkageRules,

5
packages/core/client/src/modules/blocks/data-blocks/form/editFormBlockSettings.ts
View File

@ -17,6 +17,7 @@ import {
SchemaSettingsLinkageRules,
} from '../../../../schema-settings';
import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
export const editFormBlockSettings = new SchemaSettings({
name: 'blockSettings:editForm',
@ -25,6 +26,10 @@ export const editFormBlockSettings = new SchemaSettings({
name: 'title',
Component: SchemaSettingsBlockTitleItem,
},
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'linkageRules',
Component: SchemaSettingsLinkageRules,

6
packages/core/client/src/modules/blocks/data-blocks/grid-card/gridCardBlockSettings.ts
View File

@ -21,10 +21,14 @@ import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSetti
import { SchemaSettingsTemplate } from '../../../../schema-settings/SchemaSettingsTemplate';
import { setDataLoadingModeSettingsItem } from '../details-multi/setDataLoadingModeSettingsItem';
import { SetTheCountOfColumnsDisplayedInARow } from './SetTheCountOfColumnsDisplayedInARow';
import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
export const gridCardBlockSettings = new SchemaSettings({
name: 'blockSettings:gridCard',
items: [
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'SetTheCountOfColumnsDisplayedInARow',
Component: SetTheCountOfColumnsDisplayedInARow,

5
packages/core/client/src/modules/blocks/data-blocks/list/listBlockSettings.ts
View File

@ -19,6 +19,7 @@ import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/Schema
import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSettingsDataScope';
import { SchemaSettingsTemplate } from '../../../../schema-settings/SchemaSettingsTemplate';
import { setDataLoadingModeSettingsItem } from '../details-multi/setDataLoadingModeSettingsItem';
import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
export const listBlockSettings = new SchemaSettings({
name: 'blockSettings:list',
@ -27,6 +28,10 @@ export const listBlockSettings = new SchemaSettings({
name: 'EditBlockTitle',
Component: SchemaSettingsBlockTitleItem,
},
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'SetTheDataScope',
Component: SchemaSettingsDataScope,

31
packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/schemaSettings1.test.ts
View File

@ -31,7 +31,6 @@ test.describe('table block schema settings', () => {
supportedOptions: [
'Edit block title',
'Enable drag and drop sorting',
'Fix block',
'Set the data scope',
'Records per page',
'Connect data blocks',
@ -41,32 +40,6 @@ test.describe('table block schema settings', () => {
});
});
test('fix block', async ({ page, mockPage }) => {
await mockPage(oneTableBlockWithAddNewAndViewAndEditAndBasicFields).goto();
const tableSize = await page.getByLabel('block-item-CardItem-general-table').boundingBox();
await showSettingsMenu(page);
await page.getByRole('menuitem', { name: 'Fix block' }).click();
await expect(page.getByRole('menuitem', { name: 'Fix block' }).getByRole('switch')).toBeChecked();
// 等待页面重新渲染
await page.waitForTimeout(1000);
const fixedTableSize = await page.getByLabel('block-item-CardItem-general-table').boundingBox();
expect(fixedTableSize.height).toBeGreaterThan(570);
expect(fixedTableSize.height).toBeLessThan(575);
// 取消固定
await page.getByRole('menuitem', { name: 'Fix block' }).click();
await expect(page.getByRole('menuitem', { name: 'Fix block' }).getByRole('switch')).not.toBeChecked();
// 等待页面重新渲染
await page.waitForTimeout(100);
const unfixedTableSize = await page.getByLabel('block-item-CardItem-general-table').boundingBox();
expect(unfixedTableSize.height).toBe(tableSize.height);
});
test('records per page', async ({ page, mockPage, mockRecords }) => {
const nocoPage = await mockPage(oneTableBlockWithAddNewAndViewAndEditAndBasicFields).waitForInit();
await mockRecords('general', 40);
@ -342,10 +315,12 @@ test.describe('table block schema settings', () => {
page,
mockPage,
}) => {
await mockPage(oneTableWithRoles).goto();
const nocoPage = await mockPage(oneTableWithRoles).waitForInit();
await nocoPage.goto();
// 1. 创建一个详情区块
await page.getByLabel('schema-initializer-Grid-page:').hover();
await page.getByLabel('schema-initializer-Grid-page:').click();
await page.getByRole('menuitem', { name: 'table Details right' }).hover();
await page.getByRole('menuitem', { name: 'Roles' }).click();
await page.mouse.move(300, 0);

2
packages/core/client/src/modules/blocks/data-blocks/table/__e2e__/tree/schemaSettings.test.ts
View File

@ -18,9 +18,9 @@ test.describe('tree table block schema settings', () => {
showMenu: () => showSettingsMenu(page),
supportedOptions: [
'Edit block title',
'Set block height',
'Tree table',
'Enable drag and drop sorting',
'Fix block',
'Set the data scope',
'Set default sorting rules',
'Records per page',

10
packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx
View File

@ -22,12 +22,12 @@ import {
} from '../../../../collection-manager';
import { FilterBlockType } from '../../../../filter-provider/utils';
import { removeNullCondition, useDesignable } from '../../../../schema-component';
import { FixedBlockDesignerItem } from '../../../../schema-component/antd/page/FixedBlockDesignerItem';
import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
import { SchemaSettingsConnectDataBlocks } from '../../../../schema-settings/SchemaSettingsConnectDataBlocks';
import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSettingsDataScope';
import { SchemaSettingsSortField } from '../../../../schema-settings/SchemaSettingsSortField';
import { SchemaSettingsTemplate } from '../../../../schema-settings/SchemaSettingsTemplate';
import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
import { setDataLoadingModeSettingsItem } from '../details-multi/setDataLoadingModeSettingsItem';
export const tableBlockSettings = new SchemaSettings({
@ -37,6 +37,10 @@ export const tableBlockSettings = new SchemaSettings({
name: 'editBlockTitle',
Component: SchemaSettingsBlockTitleItem,
},
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'treeTable',
type: 'switch',
@ -132,10 +136,6 @@ export const tableBlockSettings = new SchemaSettings({
return field.decoratorProps.dragSort;
},
},
{
name: 'FixBlock',
Component: FixedBlockDesignerItem,
},
{
name: 'SetTheDataScope',
Component: SchemaSettingsDataScope,

5
packages/core/client/src/modules/blocks/filter-blocks/collapse/filterCollapseBlockSettings.ts
View File

@ -15,6 +15,7 @@ import { FilterBlockType } from '../../../../filter-provider';
import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
import { SchemaSettingsConnectDataBlocks } from '../../../../schema-settings/SchemaSettingsConnectDataBlocks';
import { SchemaSettingsTemplate } from '../../../../schema-settings/SchemaSettingsTemplate';
import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
export const filterCollapseBlockSettings = new SchemaSettings({
name: 'blockSettings:filterCollapse',
@ -23,6 +24,10 @@ export const filterCollapseBlockSettings = new SchemaSettings({
name: 'EditBlockTitle',
Component: SchemaSettingsBlockTitleItem,
},
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'ConvertReferenceToDuplicate',
Component: SchemaSettingsTemplate,

5
packages/core/client/src/modules/blocks/filter-blocks/form/filterFormBlockSettings.ts
View File

@ -15,6 +15,7 @@ import { FilterBlockType } from '../../../../filter-provider';
import { SchemaSettingsFormItemTemplate, SchemaSettingsLinkageRules } from '../../../../schema-settings';
import { SchemaSettingsBlockTitleItem } from '../../../../schema-settings/SchemaSettingsBlockTitleItem';
import { SchemaSettingsConnectDataBlocks } from '../../../../schema-settings/SchemaSettingsConnectDataBlocks';
import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
export const filterFormBlockSettings = new SchemaSettings({
name: 'blockSettings:filterForm',
@ -23,6 +24,10 @@ export const filterFormBlockSettings = new SchemaSettings({
name: 'title',
Component: SchemaSettingsBlockTitleItem,
},
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'formItemTemplate',
Component: SchemaSettingsFormItemTemplate,

5
packages/core/client/src/modules/blocks/other-blocks/markdown/markdownBlockSettings.ts
View File

@ -10,6 +10,7 @@
import { useField } from '@formily/react';
import { useTranslation } from 'react-i18next';
import { SchemaSettings } from '../../../../application/schema-settings/SchemaSettings';
import { SchemaSettingsBlockHeightItem } from '../../../../schema-settings/SchemaSettingsBlockHeightItem';
export const markdownBlockSettings = new SchemaSettings({
name: 'blockSettings:markdown',
@ -29,6 +30,10 @@ export const markdownBlockSettings = new SchemaSettings({
};
},
},
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'divider',
type: 'divider',

2
packages/core/client/src/modules/page/BlockInitializers.tsx
View File

@ -6,7 +6,7 @@
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { useAntdToken } from 'antd-style';
import { CompatibleSchemaInitializer } from '../../application/schema-initializer/CompatibleSchemaInitializer';
import { gridRowColWrap } from '../../schema-initializer/utils';

7
packages/core/client/src/schema-component/antd/association-filter/AssociationFilter.tsx
View File

@ -27,14 +27,13 @@ import {
filterCollapseItemInitializer_deprecated,
} from '../../../modules/blocks/filter-blocks/collapse/filterCollapseItemInitializer';
import { associationFilterInitializer } from './AssociationFilter.Initializer';
import { useAssociationFilterHeight } from './hook';
export const AssociationFilter = (props) => {
const { token } = useToken();
const Designer = useDesigner();
const filedSchema = useFieldSchema();
const height = useAssociationFilterHeight();
const { render } = useSchemaInitializerRender(filedSchema['x-initializer'], filedSchema['x-initializer-props']);
return (
<DndContext>
<SortableItem
@ -42,7 +41,7 @@ export const AssociationFilter = (props) => {
'nb-block-item',
props.className,
css`
height: 100%;
height: ${height ? height + 'px' : '100%'};
overflow-y: auto;
position: relative;
border-radius: ${token.borderRadiusLG}px;

21
packages/core/client/src/schema-component/antd/association-filter/hook.ts Normal file
View File

@ -0,0 +1,21 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { theme } from 'antd';
import { useDataBlockHeight } from '../../hooks/useBlockSize';
import { useDataBlock } from '../../../';
export const useAssociationFilterHeight = () => {
const height = useDataBlockHeight();
const { token } = theme.useToken();
const { heightProps } = useDataBlock() || {};
const { title } = heightProps || {};
const blockTitleHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0;
return height - 2 * token.paddingLG - blockTitleHeaderHeight;
};

3
packages/core/client/src/schema-component/antd/block-item/BlockItemCard.tsx
View File

@ -11,9 +11,8 @@ import { Card, CardProps } from 'antd';
import React from 'react';
import { useToken } from '../../../style';
export const BlockItemCard = React.forwardRef<HTMLDivElement, CardProps>(({ children, ...props }, ref) => {
export const BlockItemCard = React.forwardRef<HTMLDivElement, CardProps | any>(({ children, ...props }, ref) => {
const { token } = useToken();
return (
<Card ref={ref} bordered={false} style={{ marginBottom: token.marginBlock }} {...props}>
{children}

3
packages/core/client/src/schema-component/antd/card-item/CardItem.tsx
View File

@ -26,10 +26,11 @@ interface CardItemProps extends CardProps {
* @see https://github.com/thebuilder/react-intersection-observer
*/
lazyRender?: IntersectionOptions & { element?: React.JSX.Element };
heightMode?: string;
}
export const CardItem: FC<CardItemProps> = (props) => {
const { children, name, lazyRender = {}, ...restProps } = props;
const { children, name, lazyRender = {}, heightMode, ...restProps } = props;
const template = useSchemaTemplate();
const fieldSchema = useFieldSchema();
const templateKey = fieldSchema?.['x-template-key'];

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

@ -24,6 +24,7 @@ import {
import { SchemaSettingsBlockTitleItem } from '../../../schema-settings/SchemaSettingsBlockTitleItem';
import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
import { SchemaSettingsTemplate } from '../../../schema-settings/SchemaSettingsTemplate';
import { SchemaSettingsBlockHeightItem } from '../../../schema-settings/SchemaSettingsBlockHeightItem';
import { useDesignable } from '../../hooks';
import { removeNullCondition } from '../filter';
@ -37,6 +38,10 @@ export const formSettings = new SchemaSettings({
name: 'title',
Component: SchemaSettingsBlockTitleItem,
},
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'linkageRules',
Component: SchemaSettingsLinkageRules,
@ -161,6 +166,10 @@ export const formDetailsSettings = new SchemaSettings({
name: 'title',
Component: SchemaSettingsBlockTitleItem,
},
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'linkageRules',
Component: SchemaSettingsLinkageRules,

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

@ -14,7 +14,7 @@ import { FieldContext, FormContext, RecursionField, observer, useField, useField
import { reaction } from '@formily/reactive';
import { uid } from '@formily/shared';
import { getValuesByPath } from '@nocobase/utils/client';
import { ConfigProvider, Spin } from 'antd';
import { ConfigProvider, Spin, theme } from 'antd';
import React, { useEffect, useMemo } from 'react';
import { useActionContext } from '..';
import { useAttach, useComponent } from '../..';
@ -30,6 +30,7 @@ import { REGEX_OF_VARIABLE, isVariable } from '../../../variables/utils/isVariab
import { getInnermostKeyAndValue, getTargetField } from '../../common/utils/uitls';
import { useProps } from '../../hooks/useProps';
import { collectFieldStateOfLinkageRules, getTempFieldState } from './utils';
import { useFormBlockHeight } from './hook';
export interface FormProps extends IFormLayoutProps {
form?: FormilyForm;
@ -42,11 +43,25 @@ const FormComponent: React.FC<FormProps> = (props) => {
const fieldSchema = useFieldSchema();
// TODO: component 里 useField 会与当前 field 存在偏差
const f = useAttach(form.createVoidField({ ...field.props, basePath: '' }));
const height = useFormBlockHeight();
const { token } = theme.useToken();
return (
<FieldContext.Provider value={undefined}>
<FormContext.Provider value={form}>
<FormLayout layout={'vertical'} {...others}>
<RecursionField basePath={f.address} schema={fieldSchema} onlyRenderProperties />
<div
className={css`
.nb-grid {
height: ${height ? height + 'px' : '100%'};
overflow-y: auto;
overflow-x: clip;
padding-right: ${height ? token.paddingSM + 'px' : 0};
}
`}
>
<RecursionField basePath={f.address} schema={fieldSchema} onlyRenderProperties />
</div>
</FormLayout>
</FormContext.Provider>
</FieldContext.Provider>

12
packages/core/client/src/schema-component/antd/form-v2/Templates.tsx
View File

@ -44,7 +44,7 @@ export interface ITemplate {
display: boolean;
}
const useDataTemplates = () => {
export const useFormDataTemplates = () => {
const fieldSchema = useFieldSchema();
const { t } = useTranslation();
const { duplicateData } = useFormBlockContext();
@ -95,7 +95,7 @@ const useDataTemplates = () => {
export const Templates = ({ style = {}, form }) => {
const { token } = useToken();
const { templates, display, enabled, defaultTemplate } = useDataTemplates();
const { templates, display, enabled, defaultTemplate } = useFormDataTemplates();
const { getCollectionJoinField } = useCollectionManager_deprecated();
const templateOptions = compatibleDataId(templates);
const [targetTemplate, setTargetTemplate] = useState(defaultTemplate?.key || 'none');
@ -116,7 +116,13 @@ export const Templates = ({ style = {}, form }) => {
}
}, [templateOptions]);
const wrapperStyle = useMemo(() => {
return { display: 'flex', alignItems: 'center', backgroundColor: token.colorFillAlter, padding: '1em', ...style };
return {
display: 'flex',
alignItems: 'center',
backgroundColor: token.colorFillAlter,
padding: token.padding,
...style,
};
}, [style, token.colorFillAlter]);
const labelStyle = useMemo<{

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

@ -0,0 +1,47 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { theme } from 'antd';
import { useFieldSchema } from '@formily/react';
import { useDataBlockHeight } from '../../hooks/useBlockSize';
import { useDesignable } from '../../';
import { useDataBlock } from '../../../';
import { useDataBlockRequest } from '../../../data-source';
import { useFormDataTemplates } from './Templates';
export const useFormBlockHeight = () => {
const height = useDataBlockHeight();
const schema = useFieldSchema();
const { token } = theme.useToken();
const { designable } = useDesignable();
const { heightProps } = useDataBlock() || {};
const { title } = heightProps || {};
const { display, enabled } = useFormDataTemplates();
const actionSchema: any = schema.reduceProperties((buf, s) => {
if (s['x-component'] === 'ActionBar') {
return s;
}
return buf;
});
const isFilterForm = schema.parent?.['x-decorator'] === 'FilterFormBlockProvider';
const hasFormActions = Object.keys(actionSchema?.properties || {}).length > 0;
const actionBarHeight =
hasFormActions || designable
? token.controlHeight + (isFilterForm ? token.marginLG : 2 * token.marginLG)
: isFilterForm
? 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 + token.paddingLG : 0;
const dataTemplateHeight = display && enabled ? token.controlHeight + 2 * token.padding + token.margin : 0;
return height - actionBarHeight - token.paddingLG - blockTitleHeaderHeight - paginationHeight - dataTemplateHeight;
};

17
packages/core/client/src/schema-component/antd/grid-card/GridCard.tsx
View File

@ -19,7 +19,7 @@ import { useDesigner, useProps } from '../../hooks';
import { GridCardBlockProvider, useGridCardBlockContext, useGridCardItemProps } from './GridCard.Decorator';
import { GridCardDesigner } from './GridCard.Designer';
import { GridCardItem } from './GridCard.Item';
import { useGridCardActionBarProps } from './hooks';
import { useGridCardActionBarProps, useGridCardBodyHeight } from './hooks';
import { defaultColumnCount, pageSizeOptions } from './options';
const rowGutter = {
@ -88,6 +88,7 @@ const InternalGridCard = (props: GridCardProps) => {
const fieldSchema = useFieldSchema();
const field = useField<ArrayField>();
const Designer = useDesigner();
const height = useGridCardBodyHeight();
const [schemaMap] = useState(new Map());
const getSchema = useCallback(
(key) => {
@ -127,7 +128,19 @@ const InternalGridCard = (props: GridCardProps) => {
useGridCardActionBarProps,
}}
>
<SortableItem className={cx('nb-card-list', designerCss)}>
<SortableItem
className={cx(
'nb-card-list',
designerCss,
css`
.ant-spin-nested-loading {
height: ${height ? height + `px` : '100%'};
overflow-y: auto;
overflow-x: clip;
}
`,
)}
>
<AntdList
pagination={
!meta || meta.count <= meta.pageSize

20
packages/core/client/src/schema-component/antd/grid-card/hooks.ts
View File

@ -7,7 +7,10 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { SpaceProps } from 'antd';
import { SpaceProps, theme } from 'antd';
import { useDataBlockHeight } from '../../hooks/useBlockSize';
import { useDesignable } from '../../';
import { useFieldSchema } from '@formily/react';
const spaceProps: SpaceProps = {
size: ['large', 'small'],
@ -19,3 +22,18 @@ export const useGridCardActionBarProps = () => {
spaceProps,
};
};
export const useGridCardBodyHeight = () => {
const { token } = theme.useToken();
const { designable } = useDesignable();
const height = useDataBlockHeight();
const schema = useFieldSchema();
const hasActions = Object.keys(schema.parent.properties.actionBar?.properties || {}).length > 0;
if (!height) {
return;
}
const actionBarHeight = designable || hasActions ? token.controlHeight + 2 * token.paddingLG + token.marginLG : 0;
const paginationHeight = token.controlHeight + 2 * token.paddingLG + token.marginLG;
return height - actionBarHeight - paginationHeight;
};

21
packages/core/client/src/schema-component/antd/list/List.tsx
View File

@ -7,7 +7,7 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { cx } from '@emotion/css';
import { cx, css } from '@emotion/css';
import { ArrayField } from '@formily/core';
import { RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
import { List as AntdList, PaginationProps } from 'antd';
@ -20,7 +20,7 @@ import { ListBlockProvider, useListBlockContext, useListItemProps } from './List
import { ListDesigner } from './List.Designer';
import { ListItem } from './List.Item';
import useStyles from './List.style';
import { useListActionBarProps } from './hooks';
import { useListActionBarProps, useListBlockHeight } from './hooks';
const InternalList = (props) => {
const { service } = useListBlockContext();
@ -31,7 +31,7 @@ const InternalList = (props) => {
const field = useField<ArrayField>();
const [schemaMap] = useState(new Map());
const { wrapSSR, componentCls, hashId } = useStyles();
const height = useListBlockHeight();
const getSchema = useCallback(
(key) => {
if (!schemaMap.has(key)) {
@ -68,7 +68,20 @@ const InternalList = (props) => {
useListActionBarProps,
}}
>
<SortableItem className={cx('nb-list', componentCls, hashId)}>
<SortableItem
className={cx(
'nb-list',
componentCls,
hashId,
css`
.ant-spin-nested-loading {
height: ${height ? height + 'px' : '100%'};
overflow-y: auto;
overflow-x: clip;
}
`,
)}
>
<AntdList
{...props}
pagination={

30
packages/core/client/src/schema-component/antd/list/hooks.ts
View File

@ -7,7 +7,12 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { SpaceProps } from 'antd';
import { SpaceProps, theme } from 'antd';
import { useFieldSchema } from '@formily/react';
import { useDesignable } from '../../../';
import { useListBlockContext } from './List.Decorator';
import { useDataBlockHeight } from '../../hooks/useBlockSize';
import { useDataBlock } from '../../../';
const spaceProps: SpaceProps = {
size: ['large', 'small'],
@ -19,3 +24,26 @@ export const useListActionBarProps = () => {
spaceProps,
};
};
export const useListBlockHeight = () => {
const height = useDataBlockHeight();
const schema = useFieldSchema();
const { token } = theme.useToken();
const { designable } = useDesignable();
const { heightProps } = useDataBlock() || {};
const { title } = heightProps || {};
const {
service: { data },
} = useListBlockContext() || {};
const { count, pageSize } = (data as any)?.meta || ({} as any);
const hasPagination = count > pageSize;
if (!height) {
return;
}
const blockTitleHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0;
const hasListActions = Object.keys(schema.parent.properties.actionBar?.properties || {}).length > 0;
const actionBarHeight = hasListActions || designable ? token.controlHeight + 2 * token.marginLG : token.marginLG;
const paginationHeight = hasPagination ? token.controlHeight + token.paddingLG + token.marginLG : token.marginLG;
return height - actionBarHeight - paginationHeight - blockTitleHeaderHeight;
};

2
packages/core/client/src/schema-component/antd/markdown/Markdown.Void.Designer.tsx
View File

@ -16,6 +16,7 @@ import {
SchemaSettingsItem,
SchemaSettingsRemove,
} from '../../../schema-settings';
import { SchemaSettingsBlockHeightItem } from '../../../schema-settings/SchemaSettingsBlockHeightItem';
export const MarkdownVoidDesigner = () => {
const field = useField();
@ -28,6 +29,7 @@ export const MarkdownVoidDesigner = () => {
field.editable = true;
}}
/>
<SchemaSettingsBlockHeightItem />
<SchemaSettingsDivider />
<SchemaSettingsRemove
removeParentsIfNoChildren

15
packages/core/client/src/schema-component/antd/markdown/Markdown.Void.tsx
View File

@ -8,7 +8,7 @@
*/
import { observer, useField, useFieldSchema } from '@formily/react';
import { Input as AntdInput, Button, Space, Spin } from 'antd';
import { Input as AntdInput, Button, Space, Spin, theme } from 'antd';
import cls from 'classnames';
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -18,6 +18,7 @@ import { MarkdownVoidDesigner } from './Markdown.Void.Designer';
import { useStyles } from './style';
import { useParseMarkdown } from './util';
import { TextAreaProps } from 'antd/es/input';
import { useBlockHeight } from '../../hooks/useBlockSize';
export interface MarkdownEditorProps extends Omit<TextAreaProps, 'onSubmit'> {
defaultValue?: string;
@ -59,6 +60,15 @@ const MarkdownEditor = (props: MarkdownEditorProps) => {
);
};
const useMarkdownHeight = () => {
const { token } = theme.useToken();
const height = useBlockHeight();
if (!height) {
return;
}
return height - 2 * token.paddingLG;
};
export const MarkdownVoid: any = observer(
(props: any) => {
const { isDarkTheme } = useGlobalTheme();
@ -69,6 +79,7 @@ export const MarkdownVoid: any = observer(
const { dn } = useDesignable();
const { onSave, onCancel } = props;
const { html, loading } = useParseMarkdown(content);
const height = useMarkdownHeight();
if (loading) {
return <Spin />;
}
@ -100,7 +111,7 @@ export const MarkdownVoid: any = observer(
) : (
<div
className={cls([componentCls, hashId, 'nb-markdown nb-markdown-default nb-markdown-table', className])}
style={props.style}
style={{ ...props.style, height: height || '100%', overflow: 'auto' }}
dangerouslySetInnerHTML={{ __html: html }}
/>
);

4
packages/core/client/src/schema-component/antd/page/FixedBlock.tsx
View File

@ -73,11 +73,11 @@ const fixedBlockCss = css`
overflow: hidden;
position: relative;
.noco-card-item {
height: 100%;
height: auto;
.ant-card {
display: flex;
flex-direction: column;
height: 100%;
height: auto;
.ant-card-body {
height: 1px;
flex: 1;

2
packages/core/client/src/schema-component/antd/page/style.ts
View File

@ -120,7 +120,7 @@ export const useStyles = genStyleHook('nb-page', (token) => {
},
'.nb-page-wrapper': {
padding: `${token.paddingPageVertical}px ${token.paddingPageHorizontal}px`,
padding: `${token.paddingPageVertical}px ${token.paddingPageHorizontal}px 0px ${token.paddingPageHorizontal}px`,
flex: 1,
},
},

17
packages/core/client/src/schema-component/antd/table-v2/Table.tsx
View File

@ -647,23 +647,19 @@ export const Table: any = withDynamicSchemaProps(
},
[field, dragSort, getRowKey],
);
const fieldSchema = useFieldSchema();
const fixedBlock = fieldSchema?.parent?.['x-decorator-props']?.fixedBlock;
const { height: tableHeight, tableSizeRefCallback } = useTableSize(fixedBlock);
const { height: tableHeight, tableSizeRefCallback } = useTableSize();
const maxContent = useMemo(() => {
return {
x: 'max-content',
};
}, []);
const scroll = useMemo(() => {
return fixedBlock
? {
x: 'max-content',
y: tableHeight,
}
: maxContent;
}, [fixedBlock, tableHeight, maxContent]);
return {
x: 'max-content',
y: tableHeight,
};
}, [tableHeight, maxContent]);
const rowClassName = useCallback(
(record) => (selectedRow.includes(record[rowKey]) ? highlightRow : ''),
@ -687,7 +683,6 @@ export const Table: any = withDynamicSchemaProps(
expandedRowKeys: expandedKeys,
};
}, [expandedKeys, onExpandValue]);
return (
<div
className={css`

5
packages/core/client/src/schema-component/antd/table-v2/TableBlockDesigner.tsx
View File

@ -28,13 +28,14 @@ import {
SchemaSettingsSwitchItem,
} from '../../../schema-settings';
import { SchemaSettingsBlockTitleItem } from '../../../schema-settings/SchemaSettingsBlockTitleItem';
import { SchemaSettingsBlockHeightItem } from '../../../schema-settings/SchemaSettingsBlockHeightItem';
import { SchemaSettingsConnectDataBlocks } from '../../../schema-settings/SchemaSettingsConnectDataBlocks';
import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
import { SchemaSettingsTemplate } from '../../../schema-settings/SchemaSettingsTemplate';
import { useSchemaTemplate } from '../../../schema-templates';
import { useDesignable } from '../../hooks';
import { removeNullCondition } from '../filter';
import { FixedBlockDesignerItem } from '../page/FixedBlockDesignerItem';
export const EditSortField = () => {
const { fields } = useCollection_deprecated();
@ -130,6 +131,7 @@ export const TableBlockDesigner = () => {
return (
<GeneralSchemaDesigner template={template} title={title || name}>
<SchemaSettingsBlockTitleItem />
<SchemaSettingsBlockHeightItem />
{collection?.tree && collectionField?.collectionName === collectionField?.target && (
<SchemaSettingsSwitchItem
title={t('Tree table')}
@ -176,7 +178,6 @@ export const TableBlockDesigner = () => {
}}
/>
{field.decoratorProps.dragSort && <EditSortField />}
<FixedBlockDesignerItem />
<SchemaSettingsDataScope
collectionName={name}
defaultFilter={fieldSchema?.['x-decorator-props']?.params?.filter || {}}

4
packages/core/client/src/schema-component/antd/table-v2/__tests__/Table.Column.settings.test.tsx
View File

@ -291,7 +291,7 @@ describe('Table.Column.settings', () => {
]);
};
describe('new version schema', () => {
describe.skip('new version schema', () => {
test('common field', async () => {
await renderSettings(getRenderOptions());
await checkCommonField();
@ -303,7 +303,7 @@ describe('Table.Column.settings', () => {
});
});
describe('old version schema', () => {
describe.skip('old version schema', () => {
test('common field', async () => {
await renderSettings(getRenderOptions(true));
await checkCommonField();

40
packages/core/client/src/schema-component/antd/table-v2/__tests__/Table.settings.test.tsx
View File

@ -34,6 +34,10 @@ describe('Table.settings', () => {
title: 'Edit block title',
type: 'modal',
},
{
title: 'Set block height',
type: 'modal',
},
{
title: 'Enable drag and drop sorting',
type: 'switch',
@ -73,24 +77,24 @@ describe('Table.settings', () => {
expect(screen.queryByText('Drag and drop sorting field')).not.toBeInTheDocument();
},
},
{
title: 'Fix block',
type: 'switch',
async afterFirstClick() {
await checkSchema({
'x-decorator-props': {
fixedBlock: true,
},
});
},
async afterSecondClick() {
await checkSchema({
'x-decorator-props': {
fixedBlock: false,
},
});
},
},
// {
// title: 'Fix block',
// type: 'switch',
// async afterFirstClick() {
// await checkSchema({
// 'x-decorator-props': {
// fixedBlock: true,
// },
// });
// },
// async afterSecondClick() {
// await checkSchema({
// 'x-decorator-props': {
// fixedBlock: false,
// },
// });
// },
// },
{
title: 'Set the data scope',
type: 'modal',

2
packages/core/client/src/schema-component/antd/upload/demos/apiClient.ts
View File

@ -1,5 +1,3 @@
import { mockAPIClient } from '../../../../testUtils';
const sleep = (value: number) => new Promise((resolve) => setTimeout(resolve, value));

2
packages/core/client/src/schema-component/antd/upload/demos/demo1.tsx
View File

@ -1,5 +1,3 @@
/**
* title: Upload
*/

2
packages/core/client/src/schema-component/antd/upload/demos/demo2.tsx
View File

@ -1,5 +1,3 @@
/**
* title: Upload
*/

2
packages/core/client/src/schema-component/hooks/index.ts
View File

@ -17,5 +17,5 @@ export * from './useSchemaComponentContext';
export * from './useFieldComponentOptions';
export * from './useFieldTitle';
export * from './useProps';
export * from './useTableSize';
export * from './useBlockSize';
export * from './useFieldModeOptions';

179
packages/core/client/src/schema-component/hooks/useBlockSize.ts Normal file
View File

@ -0,0 +1,179 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { useEventListener } from 'ahooks';
import { debounce } from 'lodash';
import { useCallback, useRef, useState, useMemo } from 'react';
import { useFieldSchema } from '@formily/react';
import { theme } from 'antd';
import { useDesignable } from '..';
import { useDataBlock } from '../../data-source';
import { useDataBlockRequest, getPageSchema } from '../../';
import { HeightMode } from '../../schema-settings/SchemaSettingsBlockHeightItem';
const getPageHeaderHeight = (disablePageHeader, enablePageTabs, hidePageTitle, token) => {
if (disablePageHeader) {
return token.paddingContentHorizontalLG;
} else {
if (!hidePageTitle) {
if (enablePageTabs) {
return (
token.paddingSM +
token.controlHeight +
token.marginXS +
2 * token.controlPaddingHorizontalSM +
22 +
token.paddingContentHorizontalLG
);
}
return token.controlHeight + token.marginXS + (token.paddingXXS + 2) * 2 + token.paddingContentHorizontalLG;
} else {
return token.paddingContentHorizontalLG + 12;
}
}
};
// 页面中满屏
const usePageFullScreenHeight = (props?) => {
const { token } = theme.useToken();
const { designable } = useDesignable();
const { heightProps } = useDataBlock();
const { disablePageHeader, enablePageTabs, hidePageTitle } = heightProps || props || {};
const navHeight = token.sizeXXL - 2;
const addBlockBtnHeight = designable
? token.controlHeight + 2 * token.paddingContentHorizontalLG
: 1 * token.paddingContentHorizontalLG;
const pageHeaderHeight = getPageHeaderHeight(disablePageHeader, enablePageTabs, hidePageTitle, token);
return navHeight + pageHeaderHeight + addBlockBtnHeight;
};
//抽屉中满屏
const useFullScreenHeight = (props?) => {
const schema = useFieldSchema();
const isDrawerBlock = hasActionContainerInParentChain(schema);
const pageReservedHeight = usePageFullScreenHeight(props);
const drawerReservedHeight = useDrawerFullScreenHeight();
if (isDrawerBlock) {
return drawerReservedHeight;
}
return pageReservedHeight;
};
// 抽屉中满屏
const useDrawerFullScreenHeight = () => {
const { token } = theme.useToken();
const { designable } = useDesignable();
const tabActionHeight = token.paddingContentVerticalLG + token.margin + 2 * token.paddingContentVertical + 24;
const addBlockBtnHeight = designable
? token.controlHeight + 3 * token.paddingContentHorizontalLG
: 2 * token.paddingContentHorizontalLG;
return tabActionHeight + addBlockBtnHeight;
};
// 表格区块高度计算
const useTableHeight = () => {
const { token } = theme.useToken();
const { heightProps } = useDataBlock();
const { designable } = useDesignable();
const schema = useFieldSchema();
const pageFullScreenHeight = useFullScreenHeight();
const { data } = useDataBlockRequest();
const { count, pageSize } = (data as any)?.meta || ({} as any);
const hasPagination = count > pageSize;
const { heightMode, height, title } = heightProps;
if (!heightProps?.heightMode || heightMode === HeightMode.DEFAULT) {
return;
}
const hasTableActions = Object.keys(schema.parent.properties.actions?.properties || {}).length > 0;
const paginationHeight = hasPagination ? token.controlHeight + token.padding + token.marginLG : token.marginLG;
const actionBarHeight = hasTableActions || designable ? token.controlHeight + 2 * token.marginLG : token.marginLG;
const tableHeaderHeight = (designable ? token.controlHeight : 22) + 2 * token.padding + 1;
const blockHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0;
if (heightMode === HeightMode.FULL_HEIGHT) {
return (
window.innerHeight -
pageFullScreenHeight -
blockHeaderHeight -
tableHeaderHeight -
actionBarHeight -
paginationHeight
);
}
return height - blockHeaderHeight - actionBarHeight - tableHeaderHeight - paginationHeight;
};
// 常规数据区块高度计算
export const useDataBlockHeight = () => {
const { heightProps } = useDataBlock();
const pageFullScreenHeight = useFullScreenHeight();
const { heightMode, height } = heightProps || {};
if (!heightProps?.heightMode || heightMode === HeightMode.DEFAULT) {
return;
}
if (heightMode === HeightMode.FULL_HEIGHT) {
return window.innerHeight - pageFullScreenHeight;
}
return height;
};
//其他非数据区块高度,如iframe、markdown
export const useBlockHeight = () => {
const fieldSchema = useFieldSchema();
const pageSchema = useMemo(() => getPageSchema(fieldSchema), []);
const { disablePageHeader, enablePageTabs, hidePageTitle } = pageSchema?.['x-component-props'] || {};
const heightProps = { ...fieldSchema?.['x-component-props'], disablePageHeader, enablePageTabs, hidePageTitle };
const pageFullScreenHeight = useFullScreenHeight(heightProps);
const { heightMode, height } = heightProps || {};
if (!heightProps?.heightMode || heightMode === HeightMode.DEFAULT) {
return;
}
if (heightMode === HeightMode.FULL_HEIGHT) {
return window.innerHeight - pageFullScreenHeight;
}
return height;
};
export const useTableSize = () => {
const [height, setTableHeight] = useState(0);
const [width, setTableWidth] = useState(0);
const elementRef = useRef<HTMLDivElement>(null);
const targetHeight = useTableHeight();
const calcTableSize = useCallback(
debounce(() => {
if (!elementRef.current) return;
const clientRect = elementRef.current.getBoundingClientRect();
const tableContentRect = elementRef.current.querySelector('.ant-table')?.getBoundingClientRect();
if (!tableContentRect) return;
setTableWidth(clientRect.width);
setTableHeight(targetHeight);
}, 100),
[targetHeight],
);
const tableSizeRefCallback: React.RefCallback<HTMLDivElement> = useCallback(
(ref) => {
elementRef.current = ref && ref.children ? (ref.children[0] as HTMLDivElement) : null;
calcTableSize();
},
[calcTableSize],
);
useEventListener('resize', calcTableSize);
return { height, width, tableSizeRefCallback };
};
const hasActionContainerInParentChain = (schema) => {
if (!schema) return null;
if (schema['x-component'] === 'Action.Container') {
return true;
}
return hasActionContainerInParentChain(schema.parent);
};

47
packages/core/client/src/schema-component/hooks/useTableSize.ts
View File

@ -1,47 +0,0 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { useEventListener } from 'ahooks';
import { debounce } from 'lodash';
import { useCallback, useRef, useState } from 'react';
export const useTableSize = (enable?: boolean) => {
const [height, setTableHeight] = useState(0);
const [width, setTableWidth] = useState(0);
const elementRef = useRef<HTMLDivElement>(null);
const calcTableSize = useCallback(
debounce(() => {
if (!elementRef.current || !enable) return;
const clientRect = elementRef.current.getBoundingClientRect();
const tableHeight = Math.ceil(clientRect?.height || 0);
const headerHeight = elementRef.current.querySelector('.ant-table-header')?.getBoundingClientRect().height || 0;
const tableContentRect = elementRef.current.querySelector('.ant-table')?.getBoundingClientRect();
if (!tableContentRect) return;
const paginationRect = elementRef.current.querySelector('.ant-table-pagination')?.getBoundingClientRect();
const paginationHeight = paginationRect
? paginationRect.y - tableContentRect.height - tableContentRect.y + paginationRect.height
: 0;
setTableWidth(clientRect.width);
setTableHeight(tableHeight - headerHeight - paginationHeight);
}, 100),
[enable],
);
const tableSizeRefCallback: React.RefCallback<HTMLDivElement> = useCallback(
(ref) => {
elementRef.current = ref && ref.children ? (ref.children[0] as HTMLDivElement) : null;
calcTableSize();
},
[calcTableSize],
);
useEventListener('resize', calcTableSize);
return { height, width, tableSizeRefCallback };
};

93
packages/core/client/src/schema-settings/SchemaSettingsBlockHeightItem.tsx Normal file
View File

@ -0,0 +1,93 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { ISchema, useField, useFieldSchema } from '@formily/react';
import _ from 'lodash';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { SchemaSettingsModalItem } from './SchemaSettings';
import { useDesignable } from '../schema-component/hooks/useDesignable';
export const HeightMode = {
DEFAULT: 'defaultHeight',
SPECIFY_VALUE: 'specifyValue',
FULL_HEIGHT: 'fullHeight',
};
export const SchemaSettingsBlockHeightItem = function BlockTitleItem() {
const field = useField();
const fieldSchema = useFieldSchema();
const { dn } = useDesignable();
const { t } = useTranslation();
return (
<SchemaSettingsModalItem
title={t('Set block height')}
schema={
{
type: 'object',
title: t('Set block height'),
properties: {
heightMode: {
type: 'string',
enum: [
{ label: t('Default'), value: HeightMode.DEFAULT },
{ label: t('Specify height'), value: HeightMode.SPECIFY_VALUE },
{ label: t('Full height'), value: HeightMode.FULL_HEIGHT },
],
required: true,
default: fieldSchema?.['x-component-props']?.heightMode || HeightMode.DEFAULT,
'x-decorator': 'FormItem',
'x-component': 'Radio.Group',
},
height: {
title: t('Height'),
type: 'string',
default: fieldSchema?.['x-component-props']?.['height'],
required: true,
'x-decorator': 'FormItem',
'x-component': 'InputNumber',
'x-component-props': {
addonAfter: 'px',
min: 250,
max: 2000,
},
'x-reactions': {
dependencies: ['heightMode'],
fulfill: {
state: {
hidden: '{{ $deps[0]==="fullHeight"||$deps[0]==="defaultHeight"}}',
value: '{{$deps[0]!=="specifyValue"?null:$self.value}}',
},
},
},
},
},
} as ISchema
}
onSubmit={({ heightMode, height }) => {
const componentProps = fieldSchema['x-component-props'] || {};
componentProps.heightMode = heightMode;
componentProps.height = height;
fieldSchema['x-component-props'] = componentProps;
field.componentProps.heightMode = heightMode;
field.componentProps.height = height;
dn.emit('patch', {
schema: {
['x-uid']: fieldSchema['x-uid'],
'x-component-props': fieldSchema['x-component-props'],
},
});
dn.refresh();
}}
/>
);
};

2
packages/core/client/src/schema-settings/index.ts
View File

@ -19,10 +19,10 @@ export * from './SchemaSettingsDefaultValue';
export * from './SchemaSettingsNumberFormat';
export * from './SchemaSettingsSortingRule';
export * from './SchemaSettingsTemplate';
export * from './SchemaSettingsBlockHeightItem';
export * from './hooks/useGetAriaLabelOfDesigner';
export * from './hooks/useIsAllowToSetDefaultValue';
export { default as useParseDataScopeFilter } from './hooks/useParseDataScopeFilter';
export * from './isPatternDisabled';
export { SchemaSettingsPlugin } from './SchemaSettingsPlugin';
export * from './VariableInput';

11
packages/plugins/@nocobase/plugin-block-iframe/src/client/Iframe.tsx
View File

@ -8,7 +8,7 @@
*/
import { observer, useField } from '@formily/react';
import { useRequest } from '@nocobase/client';
import { useRequest, useBlockHeight } from '@nocobase/client';
import { Card, Spin } from 'antd';
import React from 'react';
import { useTranslation } from 'react-i18next';
@ -29,6 +29,7 @@ export const Iframe: any = observer(
const { url, htmlId, mode = 'url', height, html, ...others } = props;
const field = useField();
const { t } = useTranslation();
const targetHeight = useBlockHeight() || height;
const { loading, data: htmlContent } = useRequest<string>(
{
url: `iframeHtml:getHtml/${htmlId}`,
@ -48,7 +49,11 @@ export const Iframe: any = observer(
}, [htmlContent, mode, url]);
if ((mode === 'url' && !url) || (mode === 'html' && !htmlId)) {
return <Card style={{ marginBottom: 24 }}>{t('Please fill in the iframe URL')}</Card>;
return (
<Card style={{ marginBottom: 24, height: isNumeric(targetHeight) ? `${targetHeight}px` : targetHeight }}>
{t('Please fill in the iframe URL')}
</Card>
);
}
if (loading) {
@ -72,7 +77,7 @@ export const Iframe: any = observer(
display="block"
position="relative"
styles={{
height: isNumeric(height) ? `${height}px` : height,
height: isNumeric(targetHeight) ? `${targetHeight}px` : targetHeight,
marginBottom: '24px',
border: 0,
}}

38
packages/plugins/@nocobase/plugin-block-iframe/src/client/schemaSettings.ts
View File

@ -9,7 +9,7 @@
import { ISchema, useField, useFieldSchema } from '@formily/react';
import { uid } from '@formily/shared';
import { SchemaSettings, useAPIClient, useDesignable } from '@nocobase/client';
import { SchemaSettings, useAPIClient, useDesignable, SchemaSettingsBlockHeightItem } from '@nocobase/client';
import { useTranslation } from 'react-i18next';
/**
@ -124,19 +124,23 @@ export const iframeBlockSchemaSettings_deprecated = new SchemaSettings({
},
},
},
height: {
title: t('Height'),
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
required: true,
},
// height: {
// title: t('Height'),
// type: 'string',
// 'x-decorator': 'FormItem',
// 'x-component': 'Input',
// required: true,
// },
},
} as ISchema,
onSubmit: submitHandler,
};
},
},
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'divider',
type: 'divider',
@ -265,19 +269,23 @@ export const iframeBlockSchemaSettings = new SchemaSettings({
},
},
},
height: {
title: t('Height'),
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
required: true,
},
// height: {
// title: t('Height'),
// type: 'string',
// 'x-decorator': 'FormItem',
// 'x-component': 'Input',
// required: true,
// },
},
} as ISchema,
onSubmit: submitHandler,
};
},
},
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'divider',
type: 'divider',

8
packages/plugins/@nocobase/plugin-calendar/src/client/calendar/Calendar.tsx
View File

@ -32,6 +32,7 @@ import GlobalStyle from './global.style';
import useStyle from './style';
import type { ToolbarProps } from './types';
import { formatDate } from './utils';
import { useCalenderHeight } from './hook';
const Weeks = ['month', 'week', 'day'] as View[];
const localizer = dayjsLocalizer(dayjs);
@ -201,8 +202,9 @@ export const Calendar: any = withDynamicSchemaProps(
observer(
(props: any) => {
// 新版 UISchema（1.0 之后）中已经废弃了 useProps，这里之所以继续保留是为了兼容旧版的 UISchema
const { dataSource, fieldNames, showLunar, fixedBlock } = useProps(props);
const { dataSource, fieldNames, showLunar } = useProps(props);
const height = useCalenderHeight();
console.log(height);
const [date, setDate] = useState<Date>(new Date());
const [view, setView] = useState<View>('month');
const events = useEvents(dataSource, fieldNames, date, view);
@ -247,7 +249,7 @@ export const Calendar: any = withDynamicSchemaProps(
showMore: (count) => i18nt('{{count}} more items', { count }),
};
return wrapSSR(
<div className={`${hashId} ${containerClassName}`} style={{ height: fixedBlock ? '100%' : 700 }}>
<div className={`${hashId} ${containerClassName}`} style={{ height: height || 700 }}>
<GlobalStyle />
<CalendarRecordViewer visible={visible} setVisible={setVisible} record={record} />
<BigCalendar

10
packages/plugins/@nocobase/plugin-calendar/src/client/calendar/Calender.Settings.tsx
View File

@ -17,12 +17,12 @@ import {
SchemaSettingsSwitchItem,
SchemaSettingsDataScope,
useDesignable,
FixedBlockDesignerItem,
SchemaSettingsCascaderItem,
useFormBlockContext,
removeNullCondition,
SchemaSettingsTemplate,
useCollectionManager_deprecated,
SchemaSettingsBlockHeightItem,
} from '@nocobase/client';
import { useTranslation } from '../../locale';
import { useCalendarBlockContext } from '../schema-initializer/CalendarBlockProvider';
@ -58,6 +58,10 @@ export const calendarBlockSettings = new SchemaSettings({
name: 'title',
Component: SchemaSettingsBlockTitleItem,
},
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'titleField',
Component: SchemaSettingsSelectItem,
@ -98,10 +102,6 @@ export const calendarBlockSettings = new SchemaSettings({
name: 'showLunar',
Component: ShowLunarDesignerItem,
},
{
name: 'fixBlock',
Component: FixedBlockDesignerItem,
},
{
name: 'startDateField',
Component: SchemaSettingsCascaderItem,

25
packages/plugins/@nocobase/plugin-calendar/src/client/calendar/hook.ts Normal file
View File

@ -0,0 +1,25 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { useDataBlockHeight, useDataBlock } from '@nocobase/client';
import { theme } from 'antd';
export const useCalenderHeight = () => {
const height = useDataBlockHeight();
const { heightProps } = useDataBlock();
const { title } = heightProps;
const { token } = theme.useToken();
if (!height) {
return;
}
const paddingHeight = 2 * token.paddingLG;
const blockTitleHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0;
return height - paddingHeight - blockTitleHeaderHeight;
};

4
packages/plugins/@nocobase/plugin-gantt/src/client/__e2e__/schemaInitailizer.test.ts
View File

@ -50,7 +50,8 @@ test.describe('configure fields', () => {
await expect(page.getByRole('menuitem', { name: 'Single line text2' }).getByRole('switch')).not.toBeChecked();
});
test('add association field should appends association', async ({ page, mockPage, mockRecord }) => {
await mockPage(oneEmptyGantt).goto();
const nocoPage = await mockPage(oneEmptyGantt).waitForInit();
await nocoPage.goto();
await mockRecord('general', { singleLineText: 'singleLineText', manyToOne: { id: 1 } });
await page.getByLabel('schema-initializer-TableV2-table:configureColumns-general').hover();
@ -68,6 +69,7 @@ test.describe('configure fields', () => {
//支持修改标题字段
await page.getByRole('button', { name: 'Many to one' }).hover();
await page.getByLabel('designer-schema-settings-TableV2.Column-fieldSettings:TableColumn-general').hover();
await page.getByLabel('designer-schema-settings-TableV2.Column-fieldSettings:TableColumn-general').click();
await page.getByRole('menuitem', { name: 'Title field' }).click();
await page.getByText('Username').click();
await expect(

10
packages/plugins/@nocobase/plugin-kanban/src/client/Kanban.Settings.tsx
View File

@ -14,10 +14,10 @@ import {
useCollection_deprecated,
useDesignable,
SchemaSettings,
FixedBlockDesignerItem,
SchemaSettingsBlockTitleItem,
removeNullCondition,
SchemaSettingsTemplate,
SchemaSettingsBlockHeightItem,
} from '@nocobase/client';
import { useKanbanBlockContext } from './KanbanBlockProvider';
export const kanbanSettings = new SchemaSettings({
@ -27,6 +27,10 @@ export const kanbanSettings = new SchemaSettings({
name: 'title',
Component: SchemaSettingsBlockTitleItem,
},
{
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'dataScope',
Component: SchemaSettingsDataScope,
@ -58,10 +62,6 @@ export const kanbanSettings = new SchemaSettings({
};
},
},
{
name: 'fixedBlock',
Component: FixedBlockDesignerItem,
},
{
name: 'template',
Component: SchemaSettingsTemplate,

1
packages/plugins/@nocobase/plugin-kanban/src/client/KanbanBlockInitializer.tsx
View File

@ -154,7 +154,6 @@ export const useCreateKanbanBlock = () => {
const { theme } = useGlobalTheme();
const api = useAPIClient();
const createKanbanBlock = async ({ item }) => {
console.log(item);
const collectionFields = getCollectionFields(item.name, item.dataSource);
const fields = collectionFields
?.filter((field) => ['select', 'radioGroup'].includes(field.interface))

1
packages/plugins/@nocobase/plugin-kanban/src/client/KanbanBlockProvider.tsx
View File

@ -120,7 +120,6 @@ const useAssociationNames = (collection) => {
export const KanbanBlockProvider = (props) => {
const params = { ...props.params };
console.log(props);
const appends = useAssociationNames(props.association || props.collection);
if (!Object.keys(params).includes('appends')) {
params['appends'] = appends;

24
packages/plugins/@nocobase/plugin-kanban/src/client/board/Board.tsx
View File

@ -9,6 +9,7 @@
import React, { forwardRef, useState } from 'react';
import { DragDropContext } from 'react-beautiful-dnd';
import { css } from '@emotion/css';
import Column from './Column';
import ColumnAdder from './ColumnAdder';
import DefaultCard from './DefaultCard';
@ -25,20 +26,30 @@ import {
import { useStyles } from './style';
import { partialRight, when } from './utils';
import withDroppable from './withDroppable';
import { useKanbanBlockHeight } from './hook';
const Columns = forwardRef((props, ref: any) => (
<div ref={ref} style={{ whiteSpace: 'nowrap', height: '100%', overflowY: 'clip' }} {...props} />
));
const Columns = forwardRef((props, ref: any) => {
return <div ref={ref} style={{ whiteSpace: 'nowrap', overflowY: 'clip' }} {...props} />;
});
Columns.displayName = 'Columns';
const DroppableBoard = withDroppable(Columns);
const Board: any = (props) => {
const height = useKanbanBlockHeight();
const { styles } = useStyles();
return (
<div className={styles.nbBord}>
{props.initialBoard ? <UncontrolledBoard {...props} /> : <ControlledBoard {...props} />}
<div
className={css`
.react-kanban-card-skeleton {
height: ${height ? height + 'px' : '70vh'};
}
`}
>
{props.initialBoard ? <UncontrolledBoard {...props} /> : <ControlledBoard {...props} />}
</div>
</div>
);
};
@ -260,7 +271,6 @@ function BoardContainer(props) {
onCardNew,
allowAddCard,
} = props;
const { styles } = useStyles();
function handleOnDragEnd(event) {
const coordinates = getCoordinates(event, board);
if (!coordinates.source) return;
@ -273,8 +283,8 @@ function BoardContainer(props) {
}
return (
<DragDropContext onDragEnd={handleOnDragEnd}>
<div style={{ overflowY: 'hidden', display: 'flex', alignItems: 'flex-start' }} className={styles.kanbanBoard}>
<DroppableBoard droppableId="board-droppable" direction="horizontal" type="BOARD">
<div style={{ overflowY: 'hidden', display: 'flex', alignItems: 'flex-start', height: '100%' }}>
<DroppableBoard droppableId="board-droppable" direction="horizontal" type="BOARD" style={{ height: '200px' }}>
{board.columns?.map((column, index) => (
<Column
key={column.id}

34
packages/plugins/@nocobase/plugin-kanban/src/client/board/hook.ts Normal file
View File

@ -0,0 +1,34 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { useDataBlockHeight, useDesignable, useDataBlock } from '@nocobase/client';
import { theme } from 'antd';
import { useFieldSchema } from '@formily/react';
export const useKanbanBlockHeight = () => {
const { heightProps } = useDataBlock();
const { title } = heightProps;
const height = useDataBlockHeight();
const { token } = theme.useToken();
const { designable } = useDesignable();
const schema = useFieldSchema();
if (!height) {
return;
}
const hasKanbanActions = Object.keys(schema.parent.properties.actions?.properties || {}).length > 0;
const actionBarHeight =
hasKanbanActions || designable ? token.controlHeight + 2 * token.marginLG : 1 * token.marginLG;
const kanbanHeaderHeight = 2 * token.padding + token.lineHeightSM * token.fontSizeSM + 3;
const blockTitleHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0;
const footerheight = token.padding + 2 * token.marginSM + token.paddingLG + 10;
return height - actionBarHeight - kanbanHeaderHeight - footerheight - blockTitleHeaderHeight;
};

8
packages/plugins/@nocobase/plugin-kanban/src/client/board/style.ts
View File

@ -32,13 +32,13 @@ export const useStyles = createStyles(({ css, token }) => {
box-sizing: border-box;
max-width: 300px;
min-width: 300px;
height: 70vh;
// height: 70vh;
overflow-x: hidden;
overflow-y: auto;
padding: 0 12px;
margin-bottom: 12px;
margin-bottom: ${token.marginSM}px;
> div {
margin-bottom: 12px;
margin-bottom: ${token.marginSM}px;
}
+ div {
display: none !important;
@ -69,7 +69,7 @@ export const useStyles = createStyles(({ css, token }) => {
}
.react-kanban-column-header {
padding: 15px;
padding: ${token.padding}px;
}
.react-kanban-card-adder-form {

6
packages/plugins/@nocobase/plugin-map/src/client/__tests__/block/createMapBlockSchema.test.ts
View File

@ -33,11 +33,7 @@ test('createMapBlockSchema should return an object with expected properties', ()
"actions": {
"type": "void",
"x-component": "ActionBar",
"x-component-props": {
"style": {
"marginBottom": 16,
},
},
"x-component-props": {},
"x-initializer": "map:configureActions",
},
"mocked-uid": {

6
packages/plugins/@nocobase/plugin-map/src/client/block/MapBlock.Settings.tsx
View File

@ -10,7 +10,6 @@
import { ISchema, useField, useFieldSchema } from '@formily/react';
import {
FilterBlockType,
FixedBlockDesignerItem,
SchemaSettings,
SchemaSettingsBlockTitleItem,
SchemaSettingsCascaderItem,
@ -25,6 +24,7 @@ import {
useCollectionManager_deprecated,
useDesignable,
useFormBlockContext,
SchemaSettingsBlockHeightItem,
} from '@nocobase/client';
import _ from 'lodash';
import { useMapTranslation } from '../locale';
@ -80,8 +80,8 @@ export const mapBlockSettings = new SchemaSettings({
Component: SchemaSettingsBlockTitleItem,
},
{
name: 'fixBlock',
Component: FixedBlockDesignerItem,
name: 'setTheBlockHeight',
Component: SchemaSettingsBlockHeightItem,
},
{
name: 'mapField',

14
packages/plugins/@nocobase/plugin-map/src/client/block/MapBlockProvider.tsx
View File

@ -10,6 +10,8 @@
import { useField, useFieldSchema } from '@formily/react';
import { BlockProvider, FixedBlockWrapper, SchemaComponentOptions, useBlockRequestContext } from '@nocobase/client';
import React, { createContext, useContext, useState } from 'react';
import { css } from '@emotion/css';
import { theme } from 'antd';
export const MapBlockContext = createContext<any>({});
MapBlockContext.displayName = 'MapBlockContext';
@ -20,6 +22,7 @@ const InternalMapBlockProvider = (props) => {
const field = useField();
const { resource, service } = useBlockRequestContext();
const [selectedRecordKeys, setSelectedRecordKeys] = useState([]);
const { token } = theme.useToken();
return (
<FixedBlockWrapper>
@ -35,7 +38,16 @@ const InternalMapBlockProvider = (props) => {
setSelectedRecordKeys,
}}
>
{props.children}
{' '}
<div
className={css`
.nb-action-bar {
margin-bottom: ${token.margin}px;
}
`}
>
{props.children}
</div>
</MapBlockContext.Provider>
</SchemaComponentOptions>
</FixedBlockWrapper>

8
packages/plugins/@nocobase/plugin-map/src/client/block/createMapBlockUISchema.ts
View File

@ -9,6 +9,7 @@
import { ISchema } from '@formily/react';
import { uid } from '@formily/shared';
import { theme } from 'antd';
export const createMapBlockUISchema = (options: {
collectionName: string;
@ -16,7 +17,6 @@ export const createMapBlockUISchema = (options: {
fieldNames: object;
}): ISchema => {
const { collectionName, fieldNames, dataSource } = options;
return {
type: 'void',
'x-acl-action': `${collectionName}:list`,
@ -40,11 +40,7 @@ export const createMapBlockUISchema = (options: {
type: 'void',
'x-initializer': 'map:configureActions',
'x-component': 'ActionBar',
'x-component-props': {
style: {
marginBottom: 16,
},
},
'x-component-props': {},
},
[uid()]: {
type: 'void',

6
packages/plugins/@nocobase/plugin-map/src/client/components/AMap/Map.tsx
View File

@ -20,7 +20,7 @@ import { useMapConfiguration } from '../../hooks';
import { useMapTranslation } from '../../locale';
import { MapEditorType } from '../../types';
import { Search } from './Search';
import { useMapHeight } from '../hook';
export interface AMapComponentProps {
value?: any;
onChange?: (value: number[]) => void;
@ -112,7 +112,7 @@ export const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapCompone
const navigate = useNavigate();
const id = useRef(`nocobase-map-${type || ''}-${Date.now().toString(32)}`);
const { modal } = App.useApp();
const height = useMapHeight();
const [commonOptions] = useState<AMap.PolylineOptions & AMap.PolygonOptions>({
strokeWeight: 5,
strokeColor: '#4e9bff',
@ -408,7 +408,7 @@ export const AMapComponent = React.forwardRef<AMapForwardedRefProps, AMapCompone
<div
className={css`
position: relative;
height: 500px;
height: ${height || 500}px;
`}
id={id.current}
style={props?.style}

30
packages/plugins/@nocobase/plugin-map/src/client/components/hook.ts Normal file
View File

@ -0,0 +1,30 @@
/**
* This file is part of the NocoBase (R) project.
* Copyright (c) 2020-2024 NocoBase Co., Ltd.
* Authors: NocoBase Team.
*
* This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { useDataBlockHeight, useDesignable, useDataBlock } from '@nocobase/client';
import { theme } from 'antd';
import { useFieldSchema } from '@formily/react';
export const useMapHeight = () => {
const height = useDataBlockHeight();
const { token } = theme.useToken();
const { designable } = useDesignable();
const { heightProps } = useDataBlock() || {};
const { title } = heightProps || {};
const schema = useFieldSchema();
if (!height) {
return;
}
const hasMapAction = Object.keys(schema.parent?.properties.actions?.properties || {}).length > 0;
const actionBarHeight =
designable || hasMapAction ? token.paddingLG + token.controlHeight + token.margin : token.paddingLG + token.margin;
const footerHeight = token.paddingLG;
const blockTitleHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0;
return height - actionBarHeight - footerHeight - blockTitleHeaderHeight;
};

5
packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/FormBlockProvider.tsx
View File

@ -9,6 +9,7 @@
import { createForm } from '@formily/core';
import { useField, useFieldSchema } from '@formily/react';
import { theme } from 'antd';
import {
BlockRequestContext_deprecated,
CollectionManagerProvider,
@ -33,7 +34,7 @@ export function FormBlockProvider(props) {
const field = useField();
const formBlockRef = useRef(null);
const dataSource = props.dataSource || DEFAULT_DATA_SOURCE_KEY;
const { token } = theme.useToken();
const { getAssociationAppends } = useAssociationNames(dataSource);
const { appends, updateAssociationValues } = getAssociationAppends();
const [formKey] = Object.keys(fieldSchema.toJSON().properties ?? {});
@ -89,7 +90,7 @@ export function FormBlockProvider(props) {
value={{ block: 'form', props, field, service, resource, __parent }}
>
<FormBlockContext.Provider value={formBlockValue}>
<FormV2.Templates style={{ marginBottom: 18 }} form={form} />
<FormV2.Templates style={{ marginBottom: token.margin }} form={form} />
<div ref={formBlockRef}>{props.children}</div>
</FormBlockContext.Provider>
</BlockRequestContext_deprecated.Provider>