From bab5d40dbebe26f72bb137775441e32606057de7 Mon Sep 17 00:00:00 2001 From: Zeke Zhang <958414905@qq.com> Date: Tue, 4 Jun 2024 21:35:37 +0800 Subject: [PATCH] refactor(FormV2): add FormWithDataTemplates component (#4551) * Revert "fix(client): fix data template style (#4536)" This reverts commit db66090ab279508473e74803dbb8637341fa6f3f. * refactor(FormV2): add FormWithDataTemplates component * chore: fix failed e2e tests * chore: make e2e test more stable --- .../src/block-provider/FormBlockProvider.tsx | 25 +++------------ .../form-create/schemaSettings1.test.ts | 2 ++ .../antd/form-v2/FormWithDataTemplates.tsx | 31 +++++++++++++++++++ .../antd/form-v2/Templates.tsx | 4 +-- .../schema-component/antd/form-v2/index.ts | 2 +- .../BranchIntoYesAndNoFormulaEngine.test.ts | 2 +- 6 files changed, 41 insertions(+), 25 deletions(-) create mode 100644 packages/core/client/src/schema-component/antd/form-v2/FormWithDataTemplates.tsx diff --git a/packages/core/client/src/block-provider/FormBlockProvider.tsx b/packages/core/client/src/block-provider/FormBlockProvider.tsx index 7f238a6220..4f995aea34 100644 --- a/packages/core/client/src/block-provider/FormBlockProvider.tsx +++ b/packages/core/client/src/block-provider/FormBlockProvider.tsx @@ -8,8 +8,8 @@ */ import { createForm } from '@formily/core'; -import { RecursionField, Schema, useField, useFieldSchema } from '@formily/react'; -import { Spin, theme } from 'antd'; +import { Schema, useField } from '@formily/react'; +import { Spin } from 'antd'; import React, { createContext, useContext, useEffect, useMemo, useRef } from 'react'; import { CollectionRecord, @@ -20,8 +20,7 @@ import { import { withDynamicSchemaProps } from '../hoc/withDynamicSchemaProps'; import { useTreeParentRecord } from '../modules/blocks/data-blocks/table/TreeRecordProvider'; import { RecordProvider } from '../record-provider'; -import { useActionContext, useDesignable } from '../schema-component'; -import { Templates as DataTemplateSelect } from '../schema-component/antd/form-v2/Templates'; +import { useActionContext } from '../schema-component'; import { BlockProvider, useBlockRequestContext } from './BlockProvider'; import { TemplateBlockProvider } from './TemplateBlockProvider'; import { FormActiveFieldsProvider } from './hooks/useFormActiveFields'; @@ -95,9 +94,7 @@ const InternalFormBlockProvider = (props) => { return ( -
- -
+
{props.children}
 ); @@ -178,20 +175,6 @@ export const useFormBlockProps = () => { }; }; -const RenderChildrenWithDataTemplates = ({ form }) => { - const FieldSchema = useFieldSchema(); - const { findComponent } = useDesignable(); - const field = useField(); - const Component = findComponent(field.component?.[0]) || React.Fragment; - const { token } = theme.useToken(); - return ( - - - - - ); -}; - /** * @internal */ diff --git a/packages/core/client/src/modules/blocks/data-blocks/form/__e2e__/form-create/schemaSettings1.test.ts b/packages/core/client/src/modules/blocks/data-blocks/form/__e2e__/form-create/schemaSettings1.test.ts index 12d1c3c943..9caeb9bd0c 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/form/__e2e__/form-create/schemaSettings1.test.ts +++ b/packages/core/client/src/modules/blocks/data-blocks/form/__e2e__/form-create/schemaSettings1.test.ts @@ -729,6 +729,8 @@ test.describe('creation form block schema settings', () => { 'x-index': 1, }, }).goto(); + + await page.waitForLoadState('networkidle'); await page.getByLabel('schema-initializer-Grid-page:addBlock').hover(); //使用复制模板 await page.getByRole('menuitem', { name: 'form Form' }).first().hover(); diff --git a/packages/core/client/src/schema-component/antd/form-v2/FormWithDataTemplates.tsx b/packages/core/client/src/schema-component/antd/form-v2/FormWithDataTemplates.tsx new file mode 100644 index 0000000000..c50175c49a --- /dev/null +++ b/packages/core/client/src/schema-component/antd/form-v2/FormWithDataTemplates.tsx @@ -0,0 +1,31 @@ +/** + * 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 React from 'react'; +import { Templates } from '../..'; +import { useFormBlockContext } from '../../../block-provider/FormBlockProvider'; +import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps'; +import { useToken } from '../../../style'; +import { Form } from './Form'; + +export const FormWithDataTemplates: any = withDynamicSchemaProps( + (props) => { + const formBlockCtx = useFormBlockContext(); + const { token } = useToken(); + return ( + <> + +
+ + ); + }, + { + displayName: 'FormWithDataTemplates', + }, +); diff --git a/packages/core/client/src/schema-component/antd/form-v2/Templates.tsx b/packages/core/client/src/schema-component/antd/form-v2/Templates.tsx index 45a44d1464..d18d9484fa 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/Templates.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/Templates.tsx @@ -93,7 +93,7 @@ export const useFormDataTemplates = () => { }; }; -export const Templates = ({ style = {}, form }) => { +export const Templates = ({ style = {}, form }: { style?: React.CSSProperties; form?: any }) => { const { token } = useToken(); const { templates, display, enabled, defaultTemplate } = useFormDataTemplates(); const { getCollectionJoinField } = useCollectionManager_deprecated(); @@ -103,7 +103,7 @@ export const Templates = ({ style = {}, form }) => { const api = useAPIClient(); const { t } = useTranslation(); useEffect(() => { - if (enabled && defaultTemplate) { + if (enabled && defaultTemplate && form) { form.__template = true; if (defaultTemplate.key === 'duplicate') { handleTemplateDataChange(defaultTemplate.dataId, defaultTemplate); diff --git a/packages/core/client/src/schema-component/antd/form-v2/index.ts b/packages/core/client/src/schema-component/antd/form-v2/index.ts index 6bc51a013d..1573d182d7 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/index.ts +++ b/packages/core/client/src/schema-component/antd/form-v2/index.ts @@ -7,9 +7,9 @@ * For more information, please refer to: https://www.nocobase.com/agreement. */ -import { Form as FormV2 } from './Form'; import { DetailsDesigner, FormDesigner, ReadPrettyFormDesigner } from './Form.Designer'; import { FilterDesigner } from './Form.FilterDesigner'; +import { FormWithDataTemplates as FormV2 } from './FormWithDataTemplates'; import { Templates } from './Templates'; export * from './Form.Settings'; diff --git a/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/BranchIntoYesAndNoFormulaEngine.test.ts b/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/BranchIntoYesAndNoFormulaEngine.test.ts index 12b81b161e..5c9b303852 100644 --- a/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/BranchIntoYesAndNoFormulaEngine.test.ts +++ b/packages/plugins/@nocobase/plugin-workflow/src/client/__e2e__/conditionNode/BranchIntoYesAndNoFormulaEngine.test.ts @@ -439,7 +439,7 @@ test('Collection event Add Data Trigger, determines that the trigger node single await page.getByRole('menuitemcheckbox', { name: triggerNodeFieldDisplayName }).click(); const conditionalRightConstant = faker.lorem.words(); await page.waitForTimeout(500); - await page.keyboard.type(`!='${conditionalRightConstant}'`, { delay: 50 }); + await page.keyboard.type(`!='${conditionalRightConstant}'`, { delay: 100 }); await expect(conditionNode.conditionExpressionEditBox).toHaveText( `Trigger variables / Trigger data / ${triggerNodeFieldDisplayName}!='${conditionalRightConstant}'`, );