English | 简体中文
A highly customizable streaming flow builder. The registration ability can flexibly customize your nodes, different types of node display and form, etc.
https://react-flow-builder.web.cloudendpoint.cn/
yarn add react-flow-builder
or
npm install react-flow-builder
// index.tsx
import React, { useState } from 'react';
import FlowBuilder, {
INode,
IRegisterNode,
IDisplayComponent,
} from 'react-flow-builder';
import './index.css';
const StartNodeDisplay: React.FC<IDisplayComponent> = ({ node }) => {
return <div className="start-node">{node.name}</div>;
};
const EndNodeDisplay: React.FC<IDisplayComponent> = ({ node }) => {
return <div className="end-node">{node.name}</div>;
};
const OtherNodeDisplay: React.FC<IDisplayComponent> = ({ node }) => {
return <div className="other-node">{node.name}</div>;
};
const ConditionNodeDisplay: React.FC<IDisplayComponent> = ({ node }) => {
return <div className="condition-node">{node.name}</div>;
};
const registerNodes: IRegisterNode[] = [
{
type: 'start',
name: 'start node',
displayComponent: StartNodeDisplay,
},
{
type: 'end',
name: 'end node',
displayComponent: EndNodeDisplay,
},
{
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;
}
Property | Description | Type | Required | Default |
---|---|---|---|---|
backgroundColor | The color of background | string |
#F7F7F7 | |
className | The class name of the container | string |
- | |
drawerProps | Extra props of Drawer Component from antd. visible and onClose have already in FlowBuilder, and {title : "Configuration", width : 480, destroyOnClose : true, maskClosable : false} |
DrawerProps |
- | |
drawerVisibleWhenAddNode | Drawer visible when add node | boolean |
false | |
historyTool | undo and redo | boolean | HistoryToolConfig |
false | |
layout | Use vertical or horizontal layout | vertical | horizontal |
vertical |
|
lineColor | The color of line | string |
#999999 | |
nodes | The nodes of FlowBuilder | Node[] | ✓ | - |
readonly | Readonly mode, cannot add, remove, configure. | boolean |
false | |
registerNodes | The registered nodes | RegisterNode[] | ✓ | - |
spaceX | Horizontal spacing between nodes | number |
16 |
|
spaceY | Vertical spacing between nodes | number |
16 |
|
zoomTool | zoom | boolean | ZoomToolConfig |
false | |
onChange | Callback function for when the data change | (nodes: Node[], changeEvent?: string ) => void |
✓ | - |
onHistoryChange | (undoDisabled: boolean, redoDisabled: boolean) => void |
- | ||
onZoomChange | (outDisabled: boolean, value: number, inDisabled: boolean) => void |
- |
Property | Description | Type | Default |
---|---|---|---|
hidden | boolean |
false | |
max | number |
10 |
Property | Description | Type | Default |
---|---|---|---|
hidden | boolean |
false | |
initialValue | number |
100 | |
min | number |
10 | |
max | number |
200 | |
step | number |
10 |
Name | Description | Type |
---|---|---|
add | add node | (node: INode, newNodeType: string) => void |
history | undo, redo | (type: 'undo' | 'redo') => void |
remove | remove noded | (nodes: INode | INode[]) => void |
zoom | zoom | (type: 'out' | 'in' | number) => void |
closeDrawer | close drawer | () => void |
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 |
Property | Description | Type | Required | Default |
---|---|---|---|---|
addableComponent | React.FC <AddableComponent> |
- | ||
addableNodeTypes | The list of nodes that can be added below the node | string[] |
- | |
addIcon | The icon in addable node list (There are already some default icons) | ReactNode |
- | |
conditionMinNum | The min number of condition node | number |
1 | |
conditionMaxNum | The max number of condition node | number |
- | |
conditionNodeType | The type of condition node | string |
- | |
configComponent | The Component of configuring node form | React.FC <ConfigComponent> |
- | |
configTitle | The drawer title of configuring node | string | ((node: INode, nodes: INode[]) => string) |
- | |
customRemove | Custom remove button | boolean |
false | |
displayComponent | The Component of displaying node | React.FC <DisplayComponent> |
- | |
initialNodeData | 增加节点时初始化数据 | Record<string, any> |
- | |
isStart | Is start node | boolean |
false | |
isEnd | Is end node | boolean |
false | |
name | The name of node | string |
✓ | - |
removeConfirmTitle | The confirmation information before deleting the node. The title of Popconfirm | string | ReactNode |
Are you sure to remove this node? | |
type | The type of node, promise start is start node type and end is end node type |
string |
✓ | - |
Property | Description | Type |
---|---|---|
node | The all information of node | Node |
nodes | Node[] | |
remove | Remove node | (nodes?: INode | INode[]) => void |
Property | Description | Type |
---|---|---|
cancel | Called on cancel, used to close the drawer | () => void |
node | The all information of node | Node |
nodes | 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 |
(values: any, validateStatusError?: boolean) => void |
Property | Description | Type |
---|---|---|
add | (type: string) => void |
|
node | The all information of node | Node |
nodes | Node[] |
Property | Description | Type |
---|---|---|
children | The condition nodes array of branch node, or the next flow of condition node | Node[] |
configuring | Whether configuring of node. The display Component can highlight the node according to this property | boolean |
data | The data of node | any |
id | The unique id of node | string |
name | The name of node. Same as the name of the registered node |
string |
path | The full path in FlowBuilder | string[] |
type | The type of node. Same as the type of the registered node |
string |
validateStatusError | The Component of configuring node form validate failed. The display Component can highlight the node according to this property | boolean |