react-flow-builder

v2.8.0

Published

7 months ago

English | [简体中文](https://github.com/bytedance/flow-builder/blob/main/README.zh-CN.md)

Downloads

4,662

0High
0Medium
0Low

lixiao1022

flow builder process react

Introduction

English | 简体中文

A highly customizable streaming flow builder. The registration ability can flexibly customize your nodes, different types of node display and form, etc.

| demo1 | demo2 | | ------------------------------- | ------------------------------- |

Try it out

https://bytedance.github.io/flow-builder

Github

https://github.com/bytedance/flow-builder

Installation

yarn add react-flow-builder

or

npm install react-flow-builder

Usage

// index.tsx
import React, { useState, useContext } from 'react';
import FlowBuilder, {
  NodeContext,
  INode,
  IRegisterNode,
} from 'react-flow-builder';

import './index.css';

const StartNodeDisplay: React.FC = () => {
  const node = useContext(NodeContext);
  return <div className="start-node">{node.name}</div>;
};

const EndNodeDisplay: React.FC = () => {
  const node = useContext(NodeContext);
  return <div className="end-node">{node.name}</div>;
};

const OtherNodeDisplay: React.FC = () => {
  const node = useContext(NodeContext);
  return <div className="other-node">{node.name}</div>;
};

const ConditionNodeDisplay: React.FC = () => {
  const node = useContext(NodeContext);
  return <div className="condition-node">{node.name}</div>;
};

const registerNodes: IRegisterNode[] = [
  {
    type: 'start',
    name: 'start node',
    displayComponent: StartNodeDisplay,
    isStart: true,
  },
  {
    type: 'end',
    name: 'end node',
    displayComponent: EndNodeDisplay,
    isEnd: true,
  },
  {
    type: 'node',
    name: 'other node',
    displayComponent: OtherNodeDisplay,
  },
  {
    type: 'condition',
    name: 'condition node',
    displayComponent: ConditionNodeDisplay,
  },
  {
    type: 'branch',
    name: 'branch node',
    conditionNodeType: 'condition',
  },
];

const Demo = () => {
  const [nodes, setNodes] = useState<INode[]>([]);

  const handleChange = (nodes: INode[]) => {
    console.log('nodes change', nodes);
    setNodes(nodes);
  };

  return (
    <FlowBuilder
      nodes={nodes}
      onChange={handleChange}
      registerNodes={registerNodes}
    />
  );
};

export default Demo;

// index.css
.start-node, .end-node {
  height: 64px;
  width: 64px;
  border-radius: 50%;
  line-height: 64px;
  color: #fff;
  text-align: center;
}

.start-node {
  background-color: #338aff;
}

.end-node {
  background-color: #666;
}

.other-node, .condition-node {
  width: 224px;
  border-radius: 4px;
  color: #666;
  background: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}

.other-node {
  height: 118px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.condition-node {
  height: 44px;
  padding: 12px 16px;
}

API

FlowBuilder

HistoryToolConfig

| Property | Description | Type | Default | | :------- | :---------- | :-------- | :------ | | hidden | | boolean | false | | max | | number | 10 |

ZoomToolConfig

| Property | Description | Type | Default | | :----------- | :---------- | :-------- | :------ | | hidden | | boolean | false | | initialValue | | number | 100 | | min | | number | 10 | | max | | number | 200 | | step | | number | 10 |

DragComponent

DropComponent

| Property | Description | Type | Version | | :------- | :--------------------------------------------------------------------------------------------- | :----------- | :------ | | onDrop | The drop event of the custom drop component needs to call this method to add the new node type | () => void | 1.0.0 |

DrawerComponent

| Property | Description | Type | Version | | :----------------- | :--------------------------------------------------------------- | :------------------------------ | :------ | | visible | You can judge the boolean value of selectedNode by yourself. | any | 2.0.0 | | onClose | You can also call closeDrawer by yourself. | any | 2.0.0 | | children | | any | 2.0.0 | | title | | any | 2.0.0 | | width | | any | 2.0.0 | | destroyOnClose | | any | 2.0.0 | | maskClosable | | any | 2.0.0 | | configComponentRef | | React.MutableRefObject<any> | 2.5.0 |

PopoverComponent

| Property | Description | Type | Version | | :---------------- | :---------- | :---- | :------ | | visible | | any | 2.0.0 | | onVisibleChange | | any | 2.0.0 | | children | | any | 2.0.0 | | overlayClassName | | any | 2.0.0 | | placement | | any | 2.0.0 | | trigger | | any | 2.0.0 | | content | | any | 2.0.0 | | getPopupContainer | | any | 2.0.0 |

PopconfirmComponent

| Property | Description | Type | Version | | :---------------- | :----------------------------------------- | :---- | :------ | | title | | any | 2.0.0 | | onConfirm | You can also call removeNode yourself. | any | 2.0.0 | | children | | any | 2.0.0 | | getPopupContainer | | any | 2.0.0 |

FlowBuilderInstance

Formatter

| Name | Description | Type | | :------------- | :---------------------- | :---------------------------------------------------------------------- | | buildFlatNodes | Translate to flat nodes | (params: {registerNodes: IRegisterNode[], nodes: INode[]}) => INode[] | | buildTreeNodes | Translate to tree nodes | (params: {nodes: INode[]}) => INode[] | | createUuid | Create uuid | (prefix?: string) => string |

RegisterNode

RegisterRemoteNode

| Property | Description | Type | Required | Default | Version | | :------- | :------------- | :------- | :------- | :------ | :------ | | url | remote url | string | ✓ | - | 1.3.0 | | cssUrl | remote css url | string | | - | 1.3.0 |

DisplayComponent

ConfigComponent

| Property | Description | Type | | :------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------- | | cancel | Called on cancel, used to close the drawer (useDrawer is recommended since V1) | () => void | | node | The all information of node (NodeContext is recommended since V1) | Node | | nodes | (BuilderContext is recommended since V1) | Node[] | | save | Called on save node data (automatically close the drawer, no need to call cancel). FlowBuilder will set the validateStatusError property according to the second param (useDrawer is recommended since V1) | (values: any, validateStatusError?: boolean) => void |

AddableComponent

Node

Context

Added since V1

In the context of FlowBuilder the following contexts can be used

BuilderContext

Contains props and state. The following is the state:

NodeContext

Get the data of the node where it is used. For details Node

Hooks