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