v1-v2.md

order
1

从 v1 到 v2

主要变化

• v2 版本不再强依赖 antd 组件库。
• 增加 DrawerComponent 属性，代替 v1 版本 sdk 内部使用 antd Drawer 的地方
• 增加 PopoverComponent 属性，代替 v1 版本 sdk 内部使用 antd Popover 的地方
• 增加 PopconfirmComponent 属性，代替 v1 版本 sdk 内部使用 antd Popconfirm 的地方
• 增加 createUuid 属性，自定义节点的 uuid
• div.flow-builder-node__content 元素外层增加 div.flow-builder-node__content-wrap 元素，修复 Popconfirm 内容区域的 click 误触发节点的点击事件

移除了 antd 样式

.flow-builder {
  display: flex;
  align-items: center;

- .ant-popover-inner-content {
-   white-space: nowrap;
- }
}

.flow-builder-addable-nodes {
- .ant-popover-inner-content {
-   padding: 8px 0;
- }
}

若遇到 Popover 内容区域样式错乱，可以尝试添加 white-space: nowrap; 样式。

使用 antd v3 或者 v4

直接将 antd 的 Drawer, Popover 和 Popconfirm 组件分别传给 DrawerComponent, PopoverComponent 和 PopconfirmComponent 属性。

import FlowBuilder from 'react-flow-builder';
+ import { Drawer, Popover, Popconfirm } from 'antd';

export default () => (
  <FlowBuilder
+   DrawerComponent={Drawer}
+   PopoverComponent={Popover}
+   PopconfirmComponent={Popconfirm}
  />
);

使用 antd v5

由于 antd v5 版本 api 的差异，react-flow-builder v1 版本中内置的 antd 组件用法不能兼容，需要进行少量的属性调整。

import FlowBuilder from 'react-flow-builder';
+ import { Drawer, Popover, Popconfirm } from 'antd';

+ const DrawerComponent = (props) => {
+   const { visible, children, ...restProps } = props;
+   return (
+     <Drawer
+       open={visible}
+       {...restProps}
+     >
+       {children}
+     </Drawer>
+   );
+ };

+ const PopoverComponent = (props) => {
+   const { visible, onVisibleChange, children, ...restProps } = props;
+   return (
+     <Popover
+       open={visible}
+       onOpenChange={onVisibleChange}
+       {...restProps}
+     >
+       {children}
+     </Popover>
+   );
+ };

+ const PopconfirmComponent = (props) => {
+   const { children, ...restProps } = props;
+   return (
+     <Popconfirm
+       {...restProps}
+     >
+       {children}
+     </Popconfirm>
+   );
+ };

export default () => (
  <FlowBuilder
+   DrawerComponent={DrawerComponent}
+   PopoverComponent={PopoverComponent}
+   PopconfirmComponent={PopconfirmComponent}
  />
);

其他组件库（例如 @arco-design/web-react）

import FlowBuilder from 'react-flow-builder';
+ import { Drawer, Popover, Popconfirm } from '@arco-design/web-react';

+ const DrawerComponent = (props) => {
+   const { destroyOnClose, onClose, children, ...restProps } = props;
+   return (
+     <Drawer
+       onCancel={onClose}
+       footer={null}
+       {...restProps}
+     >
+       {children}
+     </Drawer>
+   );
+ };

+ const PopoverComponent = (props) => {
+   const {  visible, children, overlayClassName, placement, getPopupContainer, ...restProps } = props;
+   return (
+     <Popover
+       popupVisible={visible}
+       position='rt'
+       className={overlayClassName}
+       {...restProps}
+     >
+       {children}
+     </Popover>
+   );
+ };

+ const PopconfirmComponent = (props) => {
+   const { onConfirm, children, ...restProps } = props;
+   return (
+     <Popconfirm
+       onOk={onConfirm}
+       {...restProps}
+     >
+       {children}
+     </Popconfirm>
+   );
+ };

export default () => (
  <FlowBuilder
+   DrawerComponent={DrawerComponent}
+   PopoverComponent={PopoverComponent}
+   PopconfirmComponent={PopconfirmComponent}
  />
);