refactor: @emotion/css to antd-style (#1044)

Reviewed-on: daoyoucloud/tachybase#1044

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 (
-    <Space
+    <Space wrap className={styles.space}>
-      wrap
-      className={css`
-        display: flex;
-        > .ant-space-item {
-          width: 100%;
-        }
-      `}
-    >
       <CustomCascader
         style={{ width: '100%' }}
         showSearch={{ filter }}

packages/plugins/@hera/plugin-approval-mobile/src/client/approval/initiations/component/InitiationsItem.tsx

@@ -1,10 +1,13 @@
-import { BlockItem, ExtendCollectionsProvider, css, useAPIClient, useRequest } from '@tachybase/client';
 import React, { useContext, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { BlockItem, useAPIClient } from '@tachybase/client';
-import { AutoCenter, Card, Empty, SearchBar, Selector, Space } from 'antd-mobile';
-import { TeamFill } from 'antd-mobile-icons';
 import { observer } from '@tachybase/schema';
+
+import { Card, Empty, Selector } from 'antd-mobile';
+import { TeamFill } from 'antd-mobile-icons';
+import { useNavigate } from 'react-router-dom';
+
 import '../../style/style.css';
+
 import { InitiationsBlockContext } from '../InitiationsBlock';
 
 export const InitiationsItem = observer((props) => {

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={
         <Tag
           color={approvalStatusConfigObj[targetStatus].color}
-          className={css`
+          style={{
-            position: relative;
+            position: 'relative',
-            margin: 1rem 0 0 0;
+            margin: '1rem 0 0 0',
-          `}
+          }}
         >
           {compile(approvalStatusConfigObj[targetStatus].label)}
         </Tag>

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';
 
-export const ContentTooltip = ({ content, tooltip }) => {
+import { QuestionCircleOutlined } from '@ant-design/icons';
-  const compile = useCompile();
+import { Tooltip } from 'antd';
-  return (
+
-    <>
+const useStyles = createStyles(({ css }) => {
-      <span
+  return {
-        className={css`
+    span: css`
       & + .anticon {
         margin-left: 0.25em;
       }
-        `}
+    `,
-      >
+  };
-        {compile(content)}
+});
-      </span>
+
+export const ContentTooltip = ({ content, tooltip }) => {
+  const compile = useCompile();
+  const { styles } = useStyles();
+  return (
+    <>
+      <span className={styles.span}>{compile(content)}</span>
       {tooltip && <Tooltip title={compile(tooltip)}>{<QuestionCircleOutlined style={{ color: '#666' }} />}</Tooltip>}
     </>
   );

packages/plugins/@hera/plugin-approval/src/client/configuration/instruction/approval-config/VC.NegotiationConfig.tsx

@@ -1,15 +1,28 @@
-// @ts-nocheck
+import React, { useCallback } from 'react';
-import React 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 (
-    <fieldset
+    <fieldset className={styles.container}>
-      className={css`
-        .ant-radio-group {
-          .anticon {
-            margin-left: 0.5em;
-          }
-        }
-      `}
-    >
       <Radio.Group key="radio" value={percentSign} onChange={onChangeRadio}>
         <Radio key="0" value="0">
           <Tooltip title={t('The approval or rejection by anyone of them is the result.')} placement="bottom">

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 (
     <ExtendCollectionsProvider
@@ -34,7 +46,6 @@ export const ApproverInterfaceComponent = () => {
           designable: !workflow.executed,
         }}
       >
-        {/* @ts-ignore */}
         <RecordProvider record={{}} parent={false}>
           <SchemaComponent
             components={{ SchemaContent: ApproverBlock }}
@@ -44,11 +55,7 @@ export const ApproverInterfaceComponent = () => {
               title: `{{t("Approver's interface", { ns: "${NAMESPACE}" })}}`,
               'x-component': 'Action.Drawer',
               'x-component-props': {
-                className: css`
+                className: styles.container,
-                  .ant-drawer-body {
-                    background: var(--nb-box-bg);
-                  }
-                `,
               },
               properties: {
                 applyDetail: {

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 {

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';
 

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 { useCompile } from '@tachybase/client';
-import { css, useCompile, usePlugin } from '@tachybase/client';
-import WorkflowPlugin, { Instruction, JOB_STATUS } from '../..';
 
+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 (
     <fieldset
-      className={css`
+      style={{
-        display: flex;
+        display: 'flex',
-        gap: 0.5em;
+        gap: '0.5em',
-      `}
+      }}
     >
       <InputNumber
         min={1}