refactor: @emotion/css to antd-style (#1044)
Reviewed-on: daoyoucloud/tachybase#1044
This commit is contained in:
		
							parent
							
								
									f2a2cc228f
								
							
						
					
					
						commit
						3e42e2ab80
					
				| @ -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 | ||||
|       wrap | ||||
|       className={css` | ||||
|         display: flex; | ||||
|         > .ant-space-item { | ||||
|           width: 100%; | ||||
|         } | ||||
|       `}
 | ||||
|     > | ||||
|     <Space wrap className={styles.space}> | ||||
|       <CustomCascader | ||||
|         style={{ width: '100%' }} | ||||
|         showSearch={{ filter }} | ||||
|  | ||||
| @ -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 { AutoCenter, Card, Empty, SearchBar, Selector, Space } from 'antd-mobile'; | ||||
| import { TeamFill } from 'antd-mobile-icons'; | ||||
| import { BlockItem, useAPIClient } from '@tachybase/client'; | ||||
| 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) => { | ||||
|  | ||||
| @ -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` | ||||
|             position: relative; | ||||
|             margin: 1rem 0 0 0; | ||||
|           `}
 | ||||
|           style={{ | ||||
|             position: 'relative', | ||||
|             margin: '1rem 0 0 0', | ||||
|           }} | ||||
|         > | ||||
|           {compile(approvalStatusConfigObj[targetStatus].label)} | ||||
|         </Tag> | ||||
|  | ||||
| @ -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 }) => { | ||||
|   const compile = useCompile(); | ||||
|   return ( | ||||
|     <> | ||||
|       <span | ||||
|         className={css` | ||||
| import { QuestionCircleOutlined } from '@ant-design/icons'; | ||||
| import { Tooltip } from 'antd'; | ||||
| 
 | ||||
| const useStyles = createStyles(({ css }) => { | ||||
|   return { | ||||
|     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>} | ||||
|     </> | ||||
|   ); | ||||
|  | ||||
| @ -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 ( | ||||
|     <fieldset | ||||
|       className={css` | ||||
|         .ant-radio-group { | ||||
|           .anticon { | ||||
|             margin-left: 0.5em; | ||||
|           } | ||||
|         } | ||||
|       `}
 | ||||
|     > | ||||
|     <fieldset className={styles.container}> | ||||
|       <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"> | ||||
|  | ||||
| @ -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` | ||||
|                   .ant-drawer-body { | ||||
|                     background: var(--nb-box-bg); | ||||
|                   } | ||||
|                 `,
 | ||||
|                 className: styles.container, | ||||
|               }, | ||||
|               properties: { | ||||
|                 applyDetail: { | ||||
|  | ||||
| @ -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 { | ||||
|  | ||||
| @ -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'; | ||||
| 
 | ||||
|  | ||||
| @ -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 ( | ||||
|     <fieldset | ||||
|       className={css` | ||||
|         display: flex; | ||||
|         gap: 0.5em; | ||||
|       `}
 | ||||
|       style={{ | ||||
|         display: 'flex', | ||||
|         gap: '0.5em', | ||||
|       }} | ||||
|     > | ||||
|       <InputNumber | ||||
|         min={1} | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user