From 2b7544bdc4ed37d6caebec0f31f910b2c0324558 Mon Sep 17 00:00:00 2001 From: Katherine Date: Mon, 17 Jun 2024 16:37:31 +0800 Subject: [PATCH] refactor: workflow block && template block support setting block height (#4678) * refactor: workflow support setting block height * refactor: support block template * fix: bug * fix: bug * fix: bug * fix: bug * fix: bug --- lerna.json | 4 +-- .../src/block-provider/TableBlockProvider.tsx | 5 +-- .../hooks/useBlockHeightProps.tsx | 12 +++++-- .../schema-component/hooks/useBlockSize.ts | 34 +++++++++++-------- .../src/client/WorkflowTodo.tsx | 2 +- 5 files changed, 34 insertions(+), 23 deletions(-) diff --git a/lerna.json b/lerna.json index d8fc54b603..cdde822653 100644 --- a/lerna.json +++ b/lerna.json @@ -2,9 +2,7 @@ "version": "1.2.4-alpha", "npmClient": "yarn", "useWorkspaces": true, - "npmClientArgs": [ - "--ignore-engines" - ], + "npmClientArgs": ["--ignore-engines"], "command": { "version": { "forcePublish": true, diff --git a/packages/core/client/src/block-provider/TableBlockProvider.tsx b/packages/core/client/src/block-provider/TableBlockProvider.tsx index 8f34a5e440..cf52966199 100644 --- a/packages/core/client/src/block-provider/TableBlockProvider.tsx +++ b/packages/core/client/src/block-provider/TableBlockProvider.tsx @@ -15,7 +15,7 @@ import { withDynamicSchemaProps } from '../hoc/withDynamicSchemaProps'; import { useTableBlockParams } from '../modules/blocks/data-blocks/table'; import { FixedBlockWrapper, SchemaComponentOptions } from '../schema-component'; import { BlockProvider, useBlockRequestContext } from './BlockProvider'; - +import { useBlockHeightProps } from './hooks'; /** * @internal */ @@ -67,6 +67,7 @@ const InternalTableBlockProvider = (props: Props) => { const { resource, service } = useBlockRequestContext(); const fieldSchema = useFieldSchema(); const [expandFlag, setExpandFlag] = useState(fieldNames || propsExpandFlag ? true : false); + const { heightProps } = useBlockHeightProps(); useEffect(() => { setExpandFlag(fieldNames || propsExpandFlag); @@ -104,6 +105,7 @@ const InternalTableBlockProvider = (props: Props) => { childrenColumnName, allIncludesChildren, setExpandFlag: setExpandFlagValue, + heightProps, }} > {props.children} @@ -147,7 +149,6 @@ export const TableBlockProvider = withDynamicSchemaProps((props) => { const collection = getCollection(props.collection, props.dataSource); const { treeTable } = fieldSchema?.['x-decorator-props'] || {}; const { params, parseVariableLoading } = useTableBlockParamsCompat(props); - let childrenColumnName = 'children'; if (treeTable) { diff --git a/packages/core/client/src/block-provider/hooks/useBlockHeightProps.tsx b/packages/core/client/src/block-provider/hooks/useBlockHeightProps.tsx index f738f0bca8..7feba143e2 100644 --- a/packages/core/client/src/block-provider/hooks/useBlockHeightProps.tsx +++ b/packages/core/client/src/block-provider/hooks/useBlockHeightProps.tsx @@ -9,17 +9,23 @@ import { useFieldSchema } from '@formily/react'; import { useMemo } from 'react'; +import { useBlockTemplateContext } from '../../schema-templates/BlockTemplate'; export const useBlockHeightProps = () => { const fieldSchema = useFieldSchema(); const cardItemSchema = getCardItemSchema(fieldSchema); - const pageSchema = useMemo(() => getPageSchema(fieldSchema), []); + const blockTemplateSchema = useBlockTemplateContext()?.fieldSchema; + const pageSchema = useMemo(() => getPageSchema(blockTemplateSchema || fieldSchema), []); const { disablePageHeader, enablePageTabs, hidePageTitle } = pageSchema?.['x-component-props'] || {}; return { - heightProps: { ...cardItemSchema?.['x-component-props'], disablePageHeader, enablePageTabs, hidePageTitle }, + heightProps: { + ...cardItemSchema?.['x-component-props'], + disablePageHeader, + enablePageTabs, + hidePageTitle, + }, }; }; - export const getPageSchema = (schema) => { if (!schema) return null; diff --git a/packages/core/client/src/schema-component/hooks/useBlockSize.ts b/packages/core/client/src/schema-component/hooks/useBlockSize.ts index f8ef157b38..4f6382c66a 100644 --- a/packages/core/client/src/schema-component/hooks/useBlockSize.ts +++ b/packages/core/client/src/schema-component/hooks/useBlockSize.ts @@ -13,7 +13,7 @@ import { theme } from 'antd'; import { debounce } from 'lodash'; import { useCallback, useMemo, useRef, useState } from 'react'; import { useDesignable } from '..'; -import { useDataBlockRequest } from '../../'; +import { useDataBlockRequest, useCollection, useTableBlockContext } from '../../'; import { HeightMode } from '../../schema-settings/SchemaSettingsBlockHeightItem'; import { useBlockHeightProps, getPageSchema } from '../../block-provider/hooks'; @@ -58,7 +58,18 @@ const usePageFullScreenHeight = (props?) => { return navHeight + pageHeaderHeight + addBlockBtnHeight; }; -//抽屉中满屏 +// 抽屉中满屏 +const useDrawerFullScreenHeight = () => { + const { token } = theme.useToken(); + const { designable } = useDesignable(); + const tabActionHeight = token.paddingContentVerticalLG + token.margin + 2 * token.paddingContentVertical + 24; + const addBlockBtnHeight = designable + ? token.controlHeight + 2 * token.paddingContentHorizontalLG + : 1 * token.paddingContentHorizontalLG; + return tabActionHeight + addBlockBtnHeight; +}; + +//满屏 const useFullScreenHeight = (props?) => { const schema = useFieldSchema(); const isDrawerBlock = hasActionContainerInParentChain(schema); @@ -70,24 +81,18 @@ const useFullScreenHeight = (props?) => { 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 InternalWorkflowCollection = ['users_jobs', 'approvals', 'approvalRecords']; // 表格区块高度计算 const useTableHeight = () => { const { token } = theme.useToken(); - const { heightProps } = useBlockHeightProps(); + const { heightProps: blockHeightProps } = useBlockHeightProps(); + const { heightProps: tableHeightProps } = useTableBlockContext(); const { designable } = useDesignable(); const schema = useFieldSchema(); + const heightProps = tableHeightProps || blockHeightProps; const pageFullScreenHeight = useFullScreenHeight(); const { data } = useDataBlockRequest(); + const { name } = useCollection(); const { count, pageSize } = (data as any)?.meta || ({} as any); const hasPagination = count > pageSize; const { heightMode, height, title } = heightProps; @@ -97,7 +102,8 @@ const useTableHeight = () => { 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 tableHeaderHeight = + (designable && !InternalWorkflowCollection.includes(name) ? 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 ( diff --git a/packages/plugins/@nocobase/plugin-workflow-manual/src/client/WorkflowTodo.tsx b/packages/plugins/@nocobase/plugin-workflow-manual/src/client/WorkflowTodo.tsx index f2bd8cd60c..4f9cb944ce 100644 --- a/packages/plugins/@nocobase/plugin-workflow-manual/src/client/WorkflowTodo.tsx +++ b/packages/plugins/@nocobase/plugin-workflow-manual/src/client/WorkflowTodo.tsx @@ -244,7 +244,7 @@ export const WorkflowTodo: React.FC & { Drawer: React.FC; Decorator: React.FC } 'x-component': 'ActionBar', 'x-component-props': { style: { - marginBottom: 16, + marginBottom: 'var(--nb-spacing)', }, }, properties: {