refactor(plugin-workflow): add end property to branch (#2928)
This commit is contained in:
parent
4bac9abbbb
commit
770f1b7af7
@ -9,7 +9,6 @@
|
|||||||
"main": "./dist/server/index.js",
|
"main": "./dist/server/index.js",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@ant-design/icons": "5.x",
|
"@ant-design/icons": "5.x",
|
||||||
"@emotion/css": "^11.7.1",
|
|
||||||
"@formily/antd-v5": "1.x",
|
"@formily/antd-v5": "1.x",
|
||||||
"@formily/core": "2.x",
|
"@formily/core": "2.x",
|
||||||
"@formily/react": "2.x",
|
"@formily/react": "2.x",
|
||||||
|
@ -1,5 +1,8 @@
|
|||||||
import { cx } from '@nocobase/client';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { CloseOutlined } from '@ant-design/icons';
|
||||||
|
|
||||||
|
import { css, cx } from '@nocobase/client';
|
||||||
|
|
||||||
import { AddButton } from './AddButton';
|
import { AddButton } from './AddButton';
|
||||||
import { useGetAriaLabelOfAddButton } from './hooks/useGetAriaLabelOfAddButton';
|
import { useGetAriaLabelOfAddButton } from './hooks/useGetAriaLabelOfAddButton';
|
||||||
import { Node } from './nodes';
|
import { Node } from './nodes';
|
||||||
@ -11,12 +14,14 @@ export function Branch({
|
|||||||
branchIndex = null,
|
branchIndex = null,
|
||||||
controller = null,
|
controller = null,
|
||||||
className,
|
className,
|
||||||
|
end,
|
||||||
}: {
|
}: {
|
||||||
from?: any;
|
from?: any;
|
||||||
entry?: any;
|
entry?: any;
|
||||||
branchIndex?: number | null;
|
branchIndex?: number | null;
|
||||||
controller?: React.ReactNode;
|
controller?: React.ReactNode;
|
||||||
className?: string;
|
className?: string;
|
||||||
|
end?: boolean;
|
||||||
}) {
|
}) {
|
||||||
const { styles } = useStyles();
|
const { styles } = useStyles();
|
||||||
const { getAriaLabel } = useGetAriaLabelOfAddButton(from, branchIndex);
|
const { getAriaLabel } = useGetAriaLabelOfAddButton(from, branchIndex);
|
||||||
@ -26,7 +31,7 @@ export function Branch({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={cx(styles.branchClass, className)}>
|
<div className={cx('workflow-branch', styles.branchClass, className)}>
|
||||||
<div className="workflow-branch-lines" />
|
<div className="workflow-branch-lines" />
|
||||||
{controller}
|
{controller}
|
||||||
<AddButton aria-label={getAriaLabel()} upstream={from} branchIndex={branchIndex} />
|
<AddButton aria-label={getAriaLabel()} upstream={from} branchIndex={branchIndex} />
|
||||||
@ -35,6 +40,11 @@ export function Branch({
|
|||||||
<Node data={item} key={item.id} />
|
<Node data={item} key={item.id} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
{end ? (
|
||||||
|
<div className="end-sign">
|
||||||
|
<CloseOutlined />
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -50,7 +50,6 @@ export interface Instruction {
|
|||||||
scope?: { [key: string]: any };
|
scope?: { [key: string]: any };
|
||||||
components?: { [key: string]: any };
|
components?: { [key: string]: any };
|
||||||
component?(props): JSX.Element;
|
component?(props): JSX.Element;
|
||||||
endding?: boolean;
|
|
||||||
useVariables?(node, options?): VariableOption;
|
useVariables?(node, options?): VariableOption;
|
||||||
useScopeVariables?(node, options?): VariableOptions;
|
useScopeVariables?(node, options?): VariableOptions;
|
||||||
useInitializers?(node): SchemaInitializerItemOptions | null;
|
useInitializers?(node): SchemaInitializerItemOptions | null;
|
||||||
@ -139,36 +138,13 @@ export function useUpstreamScopes(node) {
|
|||||||
export function Node({ data }) {
|
export function Node({ data }) {
|
||||||
const { styles } = useStyles();
|
const { styles } = useStyles();
|
||||||
const { getAriaLabel } = useGetAriaLabelOfAddButton(data);
|
const { getAriaLabel } = useGetAriaLabelOfAddButton(data);
|
||||||
const { component: Component = NodeDefaultView, endding } = instructions.get(data.type);
|
const { component: Component = NodeDefaultView } = instructions.get(data.type);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NodeContext.Provider value={data}>
|
<NodeContext.Provider value={data}>
|
||||||
<div className={cx(styles.nodeBlockClass)}>
|
<div className={cx(styles.nodeBlockClass)}>
|
||||||
<Component data={data} />
|
<Component data={data} />
|
||||||
{!endding ? (
|
<AddButton aria-label={getAriaLabel()} upstream={data} />
|
||||||
<AddButton aria-label={getAriaLabel()} upstream={data} />
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
className={css`
|
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 1px;
|
|
||||||
height: 6em;
|
|
||||||
padding: 2em 0;
|
|
||||||
background-color: var(--nb-box-bg);
|
|
||||||
|
|
||||||
.anticon {
|
|
||||||
font-size: 1.5em;
|
|
||||||
line-height: 100%;
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
>
|
|
||||||
<CloseOutlined />
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</NodeContext.Provider>
|
</NodeContext.Provider>
|
||||||
);
|
);
|
||||||
|
@ -1,8 +1,9 @@
|
|||||||
import { css } from '@emotion/css';
|
import React, { createContext, useContext, useEffect, useState } from 'react';
|
||||||
import { observer, useField, useFieldSchema, useForm } from '@formily/react';
|
import { observer, useField, useFieldSchema, useForm } from '@formily/react';
|
||||||
import { Space, Spin, Tag } from 'antd';
|
import { Space, Spin, Tag } from 'antd';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import React, { createContext, useContext, useEffect, useState } from 'react';
|
|
||||||
|
import { css } from '@nocobase/client';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
CollectionManagerProvider,
|
CollectionManagerProvider,
|
||||||
|
@ -182,6 +182,24 @@ const useStyles = createStyles(({ css, token }) => {
|
|||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.end-sign {
|
||||||
|
position: relative;
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 0;
|
||||||
|
height: 6em;
|
||||||
|
padding: 2em 0;
|
||||||
|
border-left: 1px dashed ${token.colorBgLayout};
|
||||||
|
|
||||||
|
.anticon {
|
||||||
|
font-size: 1.5em;
|
||||||
|
line-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
`,
|
`,
|
||||||
|
|
||||||
nodeBlockClass: css`
|
nodeBlockClass: css`
|
||||||
|
Loading…
Reference in New Issue
Block a user