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