From ba41627cde784bb02327640cb81aa009a72ef5bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=98=94=E6=A2=A6?= Date: Thu, 5 Dec 2024 14:09:49 +0800 Subject: [PATCH 01/23] =?UTF-8?q?fix:=E6=9B=B4=E6=96=B0=E5=B7=A5=E5=85=B7?= =?UTF-8?q?=E6=A0=8F=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/x-flow/src/components/IconView/index.tsx | 2 +- packages/x-flow/src/operator/ZoomInOut/index.tsx | 4 ++-- packages/x-flow/src/utils/createIconFont.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/x-flow/src/components/IconView/index.tsx b/packages/x-flow/src/components/IconView/index.tsx index 2ef5d36df..0a1c30c8c 100644 --- a/packages/x-flow/src/components/IconView/index.tsx +++ b/packages/x-flow/src/components/IconView/index.tsx @@ -7,7 +7,7 @@ import { createFromIconfontCN } from '@ant-design/icons'; */ const Icon = createFromIconfontCN({ - scriptUrl: '//at.alicdn.com/t/a/font_4069358_ihlwbi6uipk.js', + scriptUrl: '//at.alicdn.com/t/a/font_4069358_v078lmxskn.js', }); export default Icon; diff --git a/packages/x-flow/src/operator/ZoomInOut/index.tsx b/packages/x-flow/src/operator/ZoomInOut/index.tsx index b951a20d6..ff6904818 100644 --- a/packages/x-flow/src/operator/ZoomInOut/index.tsx +++ b/packages/x-flow/src/operator/ZoomInOut/index.tsx @@ -107,7 +107,7 @@ const ZoomInOut: FC = () => { { configPanelWidth={410} hideLineInsertBtn={true} /> + + ) +} + +export default () => { + return ( +
+ + +
); }; diff --git a/packages/x-flow/src/components/FlowProvider/index.tsx b/packages/x-flow/src/components/FlowProvider/index.tsx index 0cd915895..69a630da0 100644 --- a/packages/x-flow/src/components/FlowProvider/index.tsx +++ b/packages/x-flow/src/components/FlowProvider/index.tsx @@ -1,11 +1,11 @@ +import { ReactFlowProvider } from '@xyflow/react'; +import React, { memo, ReactNode, useContext, useEffect, useState } from 'react'; + import { useStore } from '../../hooks/useStore'; import StoreContext, { Provider } from '../../models/context'; import { createStore } from '../../models/store'; import { transformNodes } from '../../utils'; -import type { ReactNode } from 'react'; -import React, { memo, useContext, useEffect, useState } from 'react'; - export const FlowProvider = memo<{ initialNodes?: any[]; initialEdges?: any[]; @@ -18,7 +18,11 @@ export const FlowProvider = memo<{ }) ); - return {children}; + return ( + + {children} + + ); }); const InitialProvider = ({ nodes, edges, layout, children }) => { diff --git a/packages/x-flow/src/hooks/useFlow.ts b/packages/x-flow/src/hooks/useFlow.ts index 22151e36e..eac2cb450 100644 --- a/packages/x-flow/src/hooks/useFlow.ts +++ b/packages/x-flow/src/hooks/useFlow.ts @@ -1,15 +1,31 @@ -import { Edge } from '@xyflow/react'; +import { Edge, useReactFlow } from '@xyflow/react'; import { useMemoizedFn } from 'ahooks'; import { useMemo } from 'react'; import { FlowNode } from '../models/store'; import { useStoreApi } from './useStore'; +// useFlow 维护原则 +// 1. 尽量复用 reactflow 已有的方法，不要重复造轮子 +// 2. 非必要不暴露新的方法和状态 export const useFlow = () => { const storeApi = useStoreApi(); const instance = storeApi.getState(); - - const getNodes = useMemoizedFn(() => storeApi.getState().nodes); - const getEdges = useMemoizedFn(() => storeApi.getState().edges); + const { + zoomIn, + zoomOut, + zoomTo, + getZoom, + setViewport, + getViewport, + fitView, + setCenter, + fitBounds, + toObject, + getNodes, + getEdges, + screenToFlowPosition, + flowToScreenPosition + } = useReactFlow(); const setNodes = useMemoizedFn((nodes: FlowNode[]) => { storeApi.getState().setNodes(nodes); }); @@ -31,6 +47,18 @@ export const useFlow = () => { addEdges, getNodes, getEdges, + toObject, + zoomIn, + zoomOut, + zoomTo, + getZoom, + setViewport, + getViewport, + fitView, + setCenter, + fitBounds, + screenToFlowPosition, + flowToScreenPosition }), [instance] ); diff --git a/packages/x-flow/src/withProvider.tsx b/packages/x-flow/src/withProvider.tsx index 4f3e3d5e0..f7833966d 100644 --- a/packages/x-flow/src/withProvider.tsx +++ b/packages/x-flow/src/withProvider.tsx @@ -1,4 +1,3 @@ -import { ReactFlowProvider } from '@xyflow/react'; import { ConfigProvider } from 'antd'; import React, { useMemo } from 'react'; import { FlowProviderWrapper } from './components/FlowProvider'; @@ -62,21 +61,19 @@ export default function withProvider( return ( - - - - - - - + + + + + ); }; From 13e333486fd0cd30b7923492ae05735c14e25657 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=B4=AB=E5=8D=87?= Date: Mon, 16 Dec 2024 14:12:19 +0800 Subject: [PATCH 17/23] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=20FlowProvide?= =?UTF-8?q?r=20=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/xflow/FlowProvider.md | 37 ++++++++++++++++++++++++++++++++++--- 1 file changed, 34 insertions(+), 3 deletions(-) diff --git a/docs/xflow/FlowProvider.md b/docs/xflow/FlowProvider.md index 91399eec5..a64bb2581 100644 --- a/docs/xflow/FlowProvider.md +++ b/docs/xflow/FlowProvider.md @@ -1,18 +1,49 @@ --- order: 3 -title: '多实例画布' +title: '' mobile: false group: title: 最佳展示 order: 4 --- -# 基础交互 +## 基础交互 -`` 组件是一个 Context Provider，使得在 `` 组件之外访问流的内部状态成为可能。我们提供的 `useFlow()`、`useNodes()` 钩子依赖于这个组件才能工作。 +`` 组件是一个 Context Provider，使得在 `` 组件之外访问流的内部状态成为可能。我们提供的 `useFlow()`、`useNodes()` 和 `useEdges()` 钩子依赖于这个组件才能工作。 +## useFlow + +`useFlow()` 钩子返回 XFlow 实例，包含了一些实用的内部方法。 + +- setNodes：设置节点 +- addNodes：添加一个或多个节点 +- setEdges：设置边 +- addEdges：添加一个或多个边 +- getNodes：获取节点数据 +- getEdges：获取边数据 +- toObject：将画布数据转换为对象返回 +- zoomIn：放大画布 +- zoomOut：缩小画布 +- zoomTo：缩放画布 +- getZoom：获取缩放比例 +- setViewport：设置视口 +- getViewport：获取视口 +- fitView：适应画布 +- setCenter：设置画布中心 +- fitBounds：适应边界 +- screenToFlowPosition：将屏幕坐标转换为画布坐标 +- flowToScreenPosition：将画布坐标转换为屏幕坐标 + +## useNodes + +`useFlow` 的 `getNodes` 是瞬时值。想要监听节点状态，请使用 `useNodes` 钩子来返回实时 nodes 状态。 + +## useEdges + +`useFlow` 的 `getEdges` 是瞬时值。想要监听节点状态，请使用 `useEdges` 钩子来返回实时 edges 状态。 + ## 注意 - 如果你正在使用路由器并且希望流程的状态在不同路由之间保持持久，那么将 `` 组件放置在路由器外部是至关重要的。 From 6a2537beb38cad9b189776adec51492c03c07f58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=B4=AB=E5=8D=87?= Date: Mon, 16 Dec 2024 16:26:14 +0800 Subject: [PATCH 18/23] =?UTF-8?q?chore:=20=E8=A7=A3=E5=86=B3=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E8=8A=82=E7=82=B9=E8=B7=9F=E6=89=8B=E6=80=A7=E8=83=BD?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/x-flow/src/XFlow.tsx | 5 +++++ .../src/components/CandidateNode/index.tsx | 22 ++++++++++--------- .../src/components/NodesPopover/index.tsx | 6 ++++- packages/x-flow/src/models/store.ts | 6 +++++ 4 files changed, 28 insertions(+), 11 deletions(-) diff --git a/packages/x-flow/src/XFlow.tsx b/packages/x-flow/src/XFlow.tsx index afac57dfe..8d15fb39c 100644 --- a/packages/x-flow/src/XFlow.tsx +++ b/packages/x-flow/src/XFlow.tsx @@ -52,6 +52,7 @@ const XFlow: FC = memo(() => { onEdgesChange, onConnect, setCandidateNode, + isAddingNode, setMousePosition, } = useStore( s => ({ @@ -62,6 +63,7 @@ const XFlow: FC = memo(() => { layout: s.layout, panOnDrag: s.panOnDrag, setMousePosition: s.setMousePosition, + isAddingNode: s.isAddingNode, setCandidateNode: s.setCandidateNode, onNodesChange: s.onNodesChange, onEdgesChange: s.onEdgesChange, @@ -101,6 +103,9 @@ const XFlow: FC = memo(() => { elementY: e.clientY - containerClientRect.top, }); } + }, { + target: workflowContainerRef.current, + enable: isAddingNode }); const { eventEmitter } = useEventEmitterContextContext(); diff --git a/packages/x-flow/src/components/CandidateNode/index.tsx b/packages/x-flow/src/components/CandidateNode/index.tsx index 5eec81604..b116fc0dd 100644 --- a/packages/x-flow/src/components/CandidateNode/index.tsx +++ b/packages/x-flow/src/components/CandidateNode/index.tsx @@ -8,16 +8,17 @@ import CustomNode from '../CustomNode'; const CandidateNode = () => { const { zoom } = useViewport(); const reactflow = useReactFlow(); - const { candidateNode, mousePosition, setCandidateNode, addNodes } = useStore( - (state: any) => ({ - nodes: state.nodes, - edges: state.edges, - addNodes: state.addNodes, - candidateNode: state.candidateNode, - mousePosition: state.mousePosition, - setCandidateNode: state.setCandidateNode, - onNodesChange: state.onNodesChange, - onEdgesChange: state.onEdgesChange, + const { candidateNode, mousePosition, setIsAddingNode, setCandidateNode, addNodes } = useStore( + (s: any) => ({ + nodes: s.nodes, + edges: s.edges, + addNodes: s.addNodes, + candidateNode: s.candidateNode, + setIsAddingNode: s.setIsAddingNode, + mousePosition: s.mousePosition, + setCandidateNode: s.setCandidateNode, + onNodesChange: s.onNodesChange, + onEdgesChange: s.onEdgesChange, }), shallow ); @@ -42,6 +43,7 @@ const CandidateNode = () => { position: { x, y }, }; addNodes(newNodes); + setIsAddingNode(false) setCandidateNode(null); }); diff --git a/packages/x-flow/src/components/NodesPopover/index.tsx b/packages/x-flow/src/components/NodesPopover/index.tsx index 229e5ec9f..7a33c7c6c 100644 --- a/packages/x-flow/src/components/NodesPopover/index.tsx +++ b/packages/x-flow/src/components/NodesPopover/index.tsx @@ -8,12 +8,15 @@ import React, { useRef, useState, } from 'react'; +import { useStore } from '../../hooks/useStore'; import { ConfigContext } from '../../models/context'; import NodesMenu from '../NodesMenu'; export default forwardRef((props: any, popoverRef) => { const { addNode, children, onNodeSelectPopoverChange } = props; - + const { setIsAddingNode } = useStore(s => ({ + setIsAddingNode: s.setIsAddingNode, + })); const ref = useRef(null); const closeRef: any = useRef(null); const [open, setOpen] = useState(false); @@ -53,6 +56,7 @@ export default forwardRef((props: any, popoverRef) => { open={open} onOpenChange={() => { setTimeout(() => { + setIsAddingNode(true); closeRef.current = true; setOpen(true); }, 50); diff --git a/packages/x-flow/src/models/store.ts b/packages/x-flow/src/models/store.ts index 2f4833308..9e730a839 100644 --- a/packages/x-flow/src/models/store.ts +++ b/packages/x-flow/src/models/store.ts @@ -28,6 +28,7 @@ export type FlowState = { nodes?: FlowNode[]; edges?: Edge[]; panOnDrag?: boolean; + isAddingNode?: boolean; candidateNode: any; mousePosition: any; onNodesChange: OnNodesChange; @@ -38,6 +39,7 @@ export type FlowState = { addNodes: (nodes: FlowNode[]) => void; addEdges: (edges: Edge[]) => void; setLayout: (layout: 'LR' | 'TB') => void; + setIsAddingNode: (payload: boolean) => void; setCandidateNode: (candidateNode: any) => void; setMousePosition: (mousePosition: any) => void; }; @@ -55,6 +57,7 @@ const createStore = (initProps?: Partial) => { (set, get) => ({ ...DEFAULT_PROPS, ...initProps, + isAddingNode: false, candidateNode: null, // nodeMenus: [], mousePosition: { pageX: 0, pageY: 0, elementX: 0, elementY: 0 }, @@ -95,6 +98,9 @@ const createStore = (initProps?: Partial) => { // setNodeMenus: (nodeMenus: any) => { // set({ nodeMenus }); // }, + setIsAddingNode: payload => { + set({ isAddingNode: payload }); + }, setCandidateNode: candidateNode => { set({ candidateNode }); }, From b6b81c84f5f60df0674383e8c1db2e027cb629db Mon Sep 17 00:00:00 2001 From: "zhanbo.lh" Date: Mon, 16 Dec 2024 23:17:15 +0800 Subject: [PATCH 19/23] feat: git pull --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7eeca4617..638e0a7d9 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "@vitest/coverage-c8": "^0.25.8", "@vitest/ui": "^0.25.7", "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7", - "antd": "^5.x", + "antd": "^4.x", "babel-jest": "^27.4.4", "babel-plugin-import": "^1.13.0", "babel-plugin-no-debugger": "^0.0.1", From 2521810f2f7b390ca5d6a4081cf3b865ab4df366 Mon Sep 17 00:00:00 2001 From: "zhanbo.lh" Date: Tue, 17 Dec 2024 00:15:39 +0800 Subject: [PATCH 20/23] =?UTF-8?q?feat:=20=E5=85=BC=E5=AE=B9=20antd4=20?= =?UTF-8?q?=E7=89=88=E6=9C=AC=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/NodesPopover/index.less | 5 +++ .../src/components/NodesPopover/index.tsx | 2 + .../src/components/PanelContainer/index.less | 10 ++++- .../src/components/PanelContainer/index.tsx | 40 +++++++++++++------ packages/x-flow/src/utils/index.ts | 19 ++++++--- 5 files changed, 56 insertions(+), 20 deletions(-) create mode 100644 packages/x-flow/src/components/NodesPopover/index.less diff --git a/packages/x-flow/src/components/NodesPopover/index.less b/packages/x-flow/src/components/NodesPopover/index.less new file mode 100644 index 000000000..17ec2d559 --- /dev/null +++ b/packages/x-flow/src/components/NodesPopover/index.less @@ -0,0 +1,5 @@ +.nodes-popover { + .ant-popover-inner-content { + padding: 0; + } +} \ No newline at end of file diff --git a/packages/x-flow/src/components/NodesPopover/index.tsx b/packages/x-flow/src/components/NodesPopover/index.tsx index 7a33c7c6c..46cd8e24d 100644 --- a/packages/x-flow/src/components/NodesPopover/index.tsx +++ b/packages/x-flow/src/components/NodesPopover/index.tsx @@ -11,6 +11,7 @@ import React, { import { useStore } from '../../hooks/useStore'; import { ConfigContext } from '../../models/context'; import NodesMenu from '../NodesMenu'; +import './index.less'; export default forwardRef((props: any, popoverRef) => { const { addNode, children, onNodeSelectPopoverChange } = props; @@ -47,6 +48,7 @@ export default forwardRef((props: any, popoverRef) => { return ( document.getElementById('xflow-container')} zIndex={2000} arrow={false} diff --git a/packages/x-flow/src/components/PanelContainer/index.less b/packages/x-flow/src/components/PanelContainer/index.less index 7f5f55b82..cef206332 100644 --- a/packages/x-flow/src/components/PanelContainer/index.less +++ b/packages/x-flow/src/components/PanelContainer/index.less @@ -26,10 +26,18 @@ display: flex; align-items: center; justify-content: space-between; - .ant-input-outlined { + .ant-input { border-color: #fff; font-weight: 600; } + + .ant-input:focus { + border-color: #40a9ff; + } + + .ant-input-outlined:focus { + border-color: #3b82f6; + } } .icon-box { diff --git a/packages/x-flow/src/components/PanelContainer/index.tsx b/packages/x-flow/src/components/PanelContainer/index.tsx index 0e6529113..5e8efafcd 100644 --- a/packages/x-flow/src/components/PanelContainer/index.tsx +++ b/packages/x-flow/src/components/PanelContainer/index.tsx @@ -1,11 +1,12 @@ +import React, { FC, useContext, useEffect, useMemo, useState } from 'react'; import { Divider, Drawer, Input, Space } from 'antd'; import produce from 'immer'; import { debounce } from 'lodash'; -import React, { FC, useContext, useEffect, useMemo, useState } from 'react'; import { shallow } from 'zustand/shallow'; import { useStore } from '../../hooks/useStore'; import { ConfigContext } from '../../models/context'; import createIconFont from '../../utils/createIconFont'; +import { getAntdVersion } from '../../utils'; import IconView from '../IconView'; import './index.less'; @@ -25,8 +26,7 @@ const Panel: FC = (props: IPanelProps) => { const { onClose, children, nodeType, disabled, node, description, id, data } = props; // 1.获取节点配置信息 - const { settingMap, iconFontUrl, configPanelWidth } = - useContext(ConfigContext); + const { settingMap, iconFontUrl, configPanelWidth }: any = useContext(ConfigContext); const nodeSetting = settingMap[nodeType] || {}; const { nodes, setNodes } = useStore( (state: any) => ({ @@ -67,21 +67,35 @@ const Panel: FC = (props: IPanelProps) => { const Icon = useMemo(() => createIconFont(iconFontUrl), [iconFontUrl]); + const drawerVersionProps = useMemo(() => { + const version = getAntdVersion(); + if (version === 'V5') { + return { + rootClassName: 'custom-node-panel', + open: true, + }; + } + // V4 + return { + className: 'custom-node-panel', + visible: true, + }; + }, []) + return ( 全局的width> 默认 400 mask={false} onClose={onClose} headerStyle={{ paddingBottom: '12px' }} title={ <> -
+
{iconSvg ? ( @@ -106,17 +120,17 @@ const Panel: FC = (props: IPanelProps) => { /> )}
-
+
{!isDisabled && ( <> - - + + )} {/* */} @@ -124,12 +138,12 @@ const Panel: FC = (props: IPanelProps) => {
{!hideDesc && ( -
+
{isDisabled ? ( description ) : ( { diff --git a/packages/x-flow/src/utils/index.ts b/packages/x-flow/src/utils/index.ts index d61561934..97734f605 100644 --- a/packages/x-flow/src/utils/index.ts +++ b/packages/x-flow/src/utils/index.ts @@ -1,8 +1,7 @@ +import { version as antdVersion } from 'antd'; import { customAlphabet } from 'nanoid'; export const uuid = customAlphabet('0123456789abcdefghijklmnopqrstuvwxyz', 16); - - import { isMatch, some, set, get, cloneDeep, has as _has, merge, mergeWith, isUndefined, omitBy } from 'lodash-es'; export const _set = set; @@ -127,10 +126,6 @@ export const safeGet = (object: any, path: string, defaultValue: any) => { return get(object, path, defaultValue) ?? defaultValue; }; - - - - export const isMac = () => { return navigator.userAgent.toUpperCase().includes('MAC') } @@ -168,3 +163,15 @@ export const transformNodes = (nodes: any[]) => { } }) } + + +export const getAntdVersion = () => { + const majorVersion = parseInt(antdVersion.split('.')[0], 10); + if (majorVersion >= 5) { + return 'V5' + } else if (majorVersion === 4) { + return 'V4'; + } else { + return 'V4' + } +} \ No newline at end of file From 28f1c5da4d62d4134dacde3e865ee37b4ba7d2b4 Mon Sep 17 00:00:00 2001 From: "zhanbo.lh" Date: Tue, 17 Dec 2024 00:27:38 +0800 Subject: [PATCH 21/23] =?UTF-8?q?feat:=20=E5=85=BC=E5=AE=B9=20antd4=20?= =?UTF-8?q?=E7=89=88=E6=9C=AC=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CustomNode/sourceHandle.tsx | 2 +- .../src/components/NodeContainer/index.tsx | 28 +++++------ .../x-flow/src/components/NodesMenu/index.tsx | 2 +- .../src/components/NodesPopover/index.tsx | 21 +++++++-- .../src/components/PanelContainer/index.tsx | 2 +- .../x-flow/src/operator/Control/index.tsx | 46 +++++++++---------- .../x-flow/src/operator/UndoRedo/index.tsx | 4 +- .../x-flow/src/operator/ZoomInOut/index.tsx | 24 +++++----- packages/x-flow/src/utils/index.ts | 2 +- 9 files changed, 73 insertions(+), 58 deletions(-) diff --git a/packages/x-flow/src/components/CustomNode/sourceHandle.tsx b/packages/x-flow/src/components/CustomNode/sourceHandle.tsx index 6e69e54d9..8940e1eed 100644 --- a/packages/x-flow/src/components/CustomNode/sourceHandle.tsx +++ b/packages/x-flow/src/components/CustomNode/sourceHandle.tsx @@ -54,7 +54,7 @@ export default memo((props: any) => { fontSize: '12px', }} open={isShowTooltip} - getPopupContainer={() => document.getElementById('xflow-container')} + getPopupContainer={() => document.getElementById('xflow-container') as HTMLElement} > diff --git a/packages/x-flow/src/components/NodeContainer/index.tsx b/packages/x-flow/src/components/NodeContainer/index.tsx index 6140f248b..55dd2a8b9 100644 --- a/packages/x-flow/src/components/NodeContainer/index.tsx +++ b/packages/x-flow/src/components/NodeContainer/index.tsx @@ -28,25 +28,25 @@ export default memo((props: any) => { })} onClick={onClick} > -
+
} - placement="bottomLeft" - trigger="click" - getPopupContainer={() => document.getElementById('xflow-container')} + placement='bottomLeft' + trigger='click' + getPopupContainer={() => document.getElementById('xflow-container') as HTMLElement} > document.getElementById('xflow-container')} + getPopupContainer={() => document.getElementById('xflow-container') as HTMLElement} > - + {iconSvg ? iconSvg : } @@ -62,7 +62,7 @@ export default memo((props: any) => { color: '#354052', fontSize: '12px', }, - getPopupContainer:() => document.getElementById('xflow-container') + getPopupContainer:() => document.getElementById('xflow-container') as HTMLElement }, }} > @@ -70,8 +70,8 @@ export default memo((props: any) => {
-
{children}
- {NodeWidget &&
{NodeWidget}
} +
{children}
+ {NodeWidget &&
{NodeWidget}
} {!hideDesc && !!desc && ( { color: '#354052', fontSize: '12px', }, - getPopupContainer: () => document.getElementById('xflow-container') + getPopupContainer: () => document.getElementById('xflow-container') as HTMLElement }, }} - className="node-desc" + className='node-desc' > {desc} diff --git a/packages/x-flow/src/components/NodesMenu/index.tsx b/packages/x-flow/src/components/NodesMenu/index.tsx index 588cecc07..53ad88b99 100644 --- a/packages/x-flow/src/components/NodesMenu/index.tsx +++ b/packages/x-flow/src/components/NodesMenu/index.tsx @@ -66,7 +66,7 @@ const MenuItem = (props: any) => { title={} placement='right' arrow={false} - getPopupContainer={() => document.getElementById('xflow-container')} + getPopupContainer={() => document.getElementById('xflow-container') as HTMLElement} >
{ @@ -22,7 +24,7 @@ export default forwardRef((props: any, popoverRef) => { const closeRef: any = useRef(null); const [open, setOpen] = useState(false); - const { settings, nodeSelector } = useContext(ConfigContext); + const { settings, nodeSelector }: any = useContext(ConfigContext); const { showSearch, popoverProps = { placement: 'top' } } = nodeSelector || {}; @@ -46,6 +48,19 @@ export default forwardRef((props: any, popoverRef) => { onNodeSelectPopoverChange && onNodeSelectPopoverChange(false); }, []); + const popoverVersionProps = useMemo(() => { + const version = getAntdVersion(); + if (version === 'V5') { + return { + open, + }; + } + // V4 + return { + visible: open, + }; + }, [open]); + return ( { arrow={false} overlayInnerStyle={{ padding: '12px 6px' }} {...popoverProps} - trigger="click" - open={open} + trigger='click' + {...popoverVersionProps} onOpenChange={() => { setTimeout(() => { setIsAddingNode(true); diff --git a/packages/x-flow/src/components/PanelContainer/index.tsx b/packages/x-flow/src/components/PanelContainer/index.tsx index 5e8efafcd..3c848950d 100644 --- a/packages/x-flow/src/components/PanelContainer/index.tsx +++ b/packages/x-flow/src/components/PanelContainer/index.tsx @@ -80,7 +80,7 @@ const Panel: FC = (props: IPanelProps) => { className: 'custom-node-panel', visible: true, }; - }, []) + }, []); return ( { }; return ( -
+
- document.getElementById('xflow-container')}> + document.getElementById('xflow-container') as HTMLElement}>
- document.getElementById('xflow-container')}> + document.getElementById('xflow-container') as HTMLElement}>