From 3e42e2ab8021aa6f2ee197eb86a700f24b031710 Mon Sep 17 00:00:00 2001 From: sealday Date: Thu, 23 May 2024 21:48:31 +0800 Subject: [PATCH] refactor: @emotion/css to antd-style (#1044) Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/1044 --- .../association-field/InternalCascader.tsx | 31 ++++++++++++------- .../initiations/component/InitiationsItem.tsx | 11 ++++--- .../VC.ApprovalInstructionNode.tsx | 16 +++++----- .../approval-config/VC.ContentTooltip.tsx | 28 ++++++++++------- .../approval-config/VC.NegotiationConfig.tsx | 31 +++++++++++-------- .../VC.ApproverInterface.tsx | 23 +++++++++----- .../instruction/node.ApprovalInstruction.tsx | 9 +++--- .../LauncherInterface.schema.tsx | 5 +-- .../features/delay/DelayInstruction.tsx | 15 ++++----- 9 files changed, 100 insertions(+), 69 deletions(-) diff --git a/packages/core/client/src/schema-component/antd/association-field/InternalCascader.tsx b/packages/core/client/src/schema-component/antd/association-field/InternalCascader.tsx index 90739c205..8930c01cf 100644 --- a/packages/core/client/src/schema-component/antd/association-field/InternalCascader.tsx +++ b/packages/core/client/src/schema-component/antd/association-field/InternalCascader.tsx @@ -1,9 +1,10 @@ +import React, { useEffect, useMemo, useState } from 'react'; import { ArrayItems, FormItem } from '@tachybase/components'; import { - FormProvider, connect, createForm, createSchemaField, + FormProvider, observer, onFormValuesChange, uid, @@ -11,14 +12,27 @@ import { useFieldSchema, } from '@tachybase/schema'; import { fuzzysearch } from '@tachybase/utils/client'; + import { Input, Space } from 'antd'; -import React, { useEffect, useMemo, useState } from 'react'; +import { createStyles } from 'antd-style'; import { useTranslation } from 'react-i18next'; + import { CustomCascader, SchemaComponent } from '../..'; -import { css, useAPIClient, useCollection, useRequest } from '../../..'; +import { useAPIClient } from '../../..'; import { mergeFilter } from '../../../filter-provider/utils'; import useServiceOptions, { useAssociationFieldContext } from './hooks'; +const useStyles = createStyles(({ css }) => { + return { + space: css` + display: flex; + > .ant-space-item { + width: 100%; + } + `, + }; +}); + const SchemaField = createSchemaField({ components: { Space, @@ -44,6 +58,7 @@ const Cascade = connect((props) => { const [selectedOptions, setSelectedOptions] = useState([]); const [chang, setChang] = useState(false); const [dataList, setDataList] = useState({}); + const { styles } = useStyles(); useEffect(() => { const propsValue = props.value || fieldSchema['x-component-props'].value; if (!chang && propsValue) { @@ -154,15 +169,7 @@ const Cascade = connect((props) => { return fuzzysearch(inputValue, path.map((option) => option.label || '').join('')); }; return ( - .ant-space-item { - width: 100%; - } - `} - > + { diff --git a/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/VC.ApprovalInstructionNode.tsx b/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/VC.ApprovalInstructionNode.tsx index e79c7173f..2611e9c7f 100644 --- a/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/VC.ApprovalInstructionNode.tsx +++ b/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/VC.ApprovalInstructionNode.tsx @@ -1,7 +1,9 @@ -import { css, useCompile } from '@tachybase/client'; -import { Branch, NodeDefaultView, useFlowContext, useStyles } from '@tachybase/plugin-workflow/client'; -import { Tag } from 'antd'; import React from 'react'; +import { useCompile } from '@tachybase/client'; +import { Branch, NodeDefaultView, useFlowContext, useStyles } from '@tachybase/plugin-workflow/client'; + +import { Tag } from 'antd'; + import { APPROVAL_ACTION_STATUS, approvalStatusConfigObj } from '../../constants'; // 审批节点组件 @@ -47,10 +49,10 @@ const BranchListComp = (props) => { controller={ {compile(approvalStatusConfigObj[targetStatus].label)} diff --git a/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/approval-config/VC.ContentTooltip.tsx b/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/approval-config/VC.ContentTooltip.tsx index 7b34f9fea..1209c2f24 100644 --- a/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/approval-config/VC.ContentTooltip.tsx +++ b/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/approval-config/VC.ContentTooltip.tsx @@ -1,21 +1,25 @@ -import { QuestionCircleOutlined } from '@ant-design/icons'; -import { css, useCompile } from '@tachybase/client'; -import { Tooltip } from 'antd'; import React from 'react'; +import { createStyles, useCompile } from '@tachybase/client'; + +import { QuestionCircleOutlined } from '@ant-design/icons'; +import { Tooltip } from 'antd'; + +const useStyles = createStyles(({ css }) => { + return { + span: css` + & + .anticon { + margin-left: 0.25em; + } + `, + }; +}); export const ContentTooltip = ({ content, tooltip }) => { const compile = useCompile(); + const { styles } = useStyles(); return ( <> - - {compile(content)} - + {compile(content)} {tooltip && {}} ); diff --git a/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/approval-config/VC.NegotiationConfig.tsx b/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/approval-config/VC.NegotiationConfig.tsx index 099c34655..ad41e0396 100644 --- a/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/approval-config/VC.NegotiationConfig.tsx +++ b/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/approval-config/VC.NegotiationConfig.tsx @@ -1,15 +1,28 @@ -// @ts-nocheck -import React from 'react'; +import React, { useCallback } from 'react'; +import { createStyles, InputNumber } from '@tachybase/client'; + import { QuestionCircleOutlined } from '@ant-design/icons'; -import { InputNumber, css } from '@tachybase/client'; import { Radio, Tooltip } from 'antd'; -import { useCallback } from 'react'; + import { useTranslation } from '../../../locale'; +const useStyles = createStyles(({ css }) => { + return { + container: css` + .ant-radio-group { + .anticon { + margin-left: 0.5em; + } + } + `, + }; +}); + // 协商模式 export const NegotiationConfig = ({ value, onChange }) => { const { t } = useTranslation(); const percentSign = value > 0 && value < 1 ? '%' : value; + const { styles } = useStyles(); const onChangeRadio = useCallback( ({ target }) => { if (target.value !== percentSign) { @@ -25,15 +38,7 @@ export const NegotiationConfig = ({ value, onChange }) => { [onChange], ); return ( -
+
diff --git a/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/approver-interface/VC.ApproverInterface.tsx b/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/approver-interface/VC.ApproverInterface.tsx index 5a2af02e6..3d7c41120 100644 --- a/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/approver-interface/VC.ApproverInterface.tsx +++ b/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/approver-interface/VC.ApproverInterface.tsx @@ -1,22 +1,34 @@ +import React, { useContext, useState } from 'react'; import { + createStyles, ExtendCollectionsProvider, RecordProvider, SchemaComponent, SchemaComponentContext, - css, } from '@tachybase/client'; import { useFlowContext } from '@tachybase/plugin-workflow/client'; import { uid } from '@tachybase/utils/client'; -import React, { useContext, useState } from 'react'; + import { CollectionApprovalTodos } from '../../../common/Cn.ApprovalTodos'; import { NAMESPACE } from '../../../locale'; import { ApproverBlock } from './VC.ApproverBlock'; +const useStyles = createStyles(({ css }) => { + return { + container: css` + .ant-drawer-body { + background: var(--nb-box-bg); + } + `, + }; +}); + // 审批人操作界面 export const ApproverInterfaceComponent = () => { const context = useContext(SchemaComponentContext); const [, setId] = useState(uid()); const { workflow } = useFlowContext(); + const { styles } = useStyles(); const commentFields = CollectionApprovalTodos.fields.filter((field) => field.name === 'comment'); return ( { designable: !workflow.executed, }} > - {/* @ts-ignore */} { title: `{{t("Approver's interface", { ns: "${NAMESPACE}" })}}`, 'x-component': 'Action.Drawer', 'x-component-props': { - className: css` - .ant-drawer-body { - background: var(--nb-box-bg); - } - `, + className: styles.container, }, properties: { applyDetail: { diff --git a/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/node.ApprovalInstruction.tsx b/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/node.ApprovalInstruction.tsx index af1a208b3..8d9047879 100644 --- a/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/node.ApprovalInstruction.tsx +++ b/packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/node.ApprovalInstruction.tsx @@ -1,18 +1,19 @@ -import { ArrayItems } from '@tachybase/components'; +import React from 'react'; import { css } from '@tachybase/client'; +import { ArrayItems } from '@tachybase/components'; import { Instruction, RadioWithTooltip } from '@tachybase/plugin-workflow/client'; import { uid } from '@tachybase/utils/client'; -import React from 'react'; + import { APPROVAL_ACTION_STATUS } from '../../constants'; import { NAMESPACE } from '../../locale'; import { AssigneesAddition } from './approval-config/VC.AssigneesAddition'; import { AssigneesSelect } from './approval-config/VC.AssigneesSelect'; import { ContentTooltip } from './approval-config/VC.ContentTooltip'; import { NegotiationConfig } from './approval-config/VC.NegotiationConfig'; -import { ApproverInterfaceComponent } from './approver-interface/VC.ApproverInterface'; import { SchemaConfigButtonApprover } from './approval-config/VC.SchemaConfigButtonApprover'; -import { ApprovalInstructionNode } from './VC.ApprovalInstructionNode'; +import { ApproverInterfaceComponent } from './approver-interface/VC.ApproverInterface'; import { isApprovalReturnFunc } from './utils'; +import { ApprovalInstructionNode } from './VC.ApprovalInstructionNode'; // 工作流节点 nodes - 人工处理->审批 export class ApprovalInstruction extends Instruction { diff --git a/packages/plugins/@hera/plugin-approval/src/client/configuration/trigger/launcher-interface/LauncherInterface.schema.tsx b/packages/plugins/@hera/plugin-approval/src/client/configuration/trigger/launcher-interface/LauncherInterface.schema.tsx index d36baaf49..eb4052f9c 100644 --- a/packages/plugins/@hera/plugin-approval/src/client/configuration/trigger/launcher-interface/LauncherInterface.schema.tsx +++ b/packages/plugins/@hera/plugin-approval/src/client/configuration/trigger/launcher-interface/LauncherInterface.schema.tsx @@ -1,6 +1,7 @@ -import { SchemaComponent, css, parseCollectionName } from '@tachybase/client'; -import { useForm } from '@tachybase/schema'; import React from 'react'; +import { css, parseCollectionName, SchemaComponent } from '@tachybase/client'; +import { useForm } from '@tachybase/schema'; + import { NAMESPACE } from '../../../locale'; import { SchemaAddBlock } from './SchemaAddBlock.component'; diff --git a/packages/plugins/@tachybase/plugin-workflow/src/client/features/delay/DelayInstruction.tsx b/packages/plugins/@tachybase/plugin-workflow/src/client/features/delay/DelayInstruction.tsx index e4142807d..4a78e4257 100644 --- a/packages/plugins/@tachybase/plugin-workflow/src/client/features/delay/DelayInstruction.tsx +++ b/packages/plugins/@tachybase/plugin-workflow/src/client/features/delay/DelayInstruction.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import { InputNumber, Select } from 'antd'; -import { css, useCompile, usePlugin } from '@tachybase/client'; -import WorkflowPlugin, { Instruction, JOB_STATUS } from '../..'; +import { useCompile } from '@tachybase/client'; +import { InputNumber, Select } from 'antd'; + +import { Instruction, JOB_STATUS } from '../..'; import { NAMESPACE } from '../../locale'; const UnitOptions = [ @@ -26,10 +27,10 @@ function Duration({ value = 60000, onChange }) { return (