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",
 | 
			
		||||
  "devDependencies": {
 | 
			
		||||
    "@ant-design/icons": "5.x",
 | 
			
		||||
    "@emotion/css": "^11.7.1",
 | 
			
		||||
    "@formily/antd-v5": "1.x",
 | 
			
		||||
    "@formily/core": "2.x",
 | 
			
		||||
    "@formily/react": "2.x",
 | 
			
		||||
 | 
			
		||||
@ -1,5 +1,8 @@
 | 
			
		||||
import { cx } from '@nocobase/client';
 | 
			
		||||
import React from 'react';
 | 
			
		||||
import { CloseOutlined } from '@ant-design/icons';
 | 
			
		||||
 | 
			
		||||
import { css, cx } from '@nocobase/client';
 | 
			
		||||
 | 
			
		||||
import { AddButton } from './AddButton';
 | 
			
		||||
import { useGetAriaLabelOfAddButton } from './hooks/useGetAriaLabelOfAddButton';
 | 
			
		||||
import { Node } from './nodes';
 | 
			
		||||
@ -11,12 +14,14 @@ export function Branch({
 | 
			
		||||
  branchIndex = null,
 | 
			
		||||
  controller = null,
 | 
			
		||||
  className,
 | 
			
		||||
  end,
 | 
			
		||||
}: {
 | 
			
		||||
  from?: any;
 | 
			
		||||
  entry?: any;
 | 
			
		||||
  branchIndex?: number | null;
 | 
			
		||||
  controller?: React.ReactNode;
 | 
			
		||||
  className?: string;
 | 
			
		||||
  end?: boolean;
 | 
			
		||||
}) {
 | 
			
		||||
  const { styles } = useStyles();
 | 
			
		||||
  const { getAriaLabel } = useGetAriaLabelOfAddButton(from, branchIndex);
 | 
			
		||||
@ -26,7 +31,7 @@ export function Branch({
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <div className={cx(styles.branchClass, className)}>
 | 
			
		||||
    <div className={cx('workflow-branch', styles.branchClass, className)}>
 | 
			
		||||
      <div className="workflow-branch-lines" />
 | 
			
		||||
      {controller}
 | 
			
		||||
      <AddButton aria-label={getAriaLabel()} upstream={from} branchIndex={branchIndex} />
 | 
			
		||||
@ -35,6 +40,11 @@ export function Branch({
 | 
			
		||||
          <Node data={item} key={item.id} />
 | 
			
		||||
        ))}
 | 
			
		||||
      </div>
 | 
			
		||||
      {end ? (
 | 
			
		||||
        <div className="end-sign">
 | 
			
		||||
          <CloseOutlined />
 | 
			
		||||
        </div>
 | 
			
		||||
      ) : null}
 | 
			
		||||
    </div>
 | 
			
		||||
  );
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -50,7 +50,6 @@ export interface Instruction {
 | 
			
		||||
  scope?: { [key: string]: any };
 | 
			
		||||
  components?: { [key: string]: any };
 | 
			
		||||
  component?(props): JSX.Element;
 | 
			
		||||
  endding?: boolean;
 | 
			
		||||
  useVariables?(node, options?): VariableOption;
 | 
			
		||||
  useScopeVariables?(node, options?): VariableOptions;
 | 
			
		||||
  useInitializers?(node): SchemaInitializerItemOptions | null;
 | 
			
		||||
@ -139,36 +138,13 @@ export function useUpstreamScopes(node) {
 | 
			
		||||
export function Node({ data }) {
 | 
			
		||||
  const { styles } = useStyles();
 | 
			
		||||
  const { getAriaLabel } = useGetAriaLabelOfAddButton(data);
 | 
			
		||||
  const { component: Component = NodeDefaultView, endding } = instructions.get(data.type);
 | 
			
		||||
  const { component: Component = NodeDefaultView } = instructions.get(data.type);
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <NodeContext.Provider value={data}>
 | 
			
		||||
      <div className={cx(styles.nodeBlockClass)}>
 | 
			
		||||
        <Component data={data} />
 | 
			
		||||
        {!endding ? (
 | 
			
		||||
          <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>
 | 
			
		||||
        )}
 | 
			
		||||
        <AddButton aria-label={getAriaLabel()} upstream={data} />
 | 
			
		||||
      </div>
 | 
			
		||||
    </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 { Space, Spin, Tag } from 'antd';
 | 
			
		||||
import dayjs from 'dayjs';
 | 
			
		||||
import React, { createContext, useContext, useEffect, useState } from 'react';
 | 
			
		||||
 | 
			
		||||
import { css } from '@nocobase/client';
 | 
			
		||||
 | 
			
		||||
import {
 | 
			
		||||
  CollectionManagerProvider,
 | 
			
		||||
 | 
			
		||||
@ -182,6 +182,24 @@ const useStyles = createStyles(({ css, token }) => {
 | 
			
		||||
          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`
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user