兼容antd4 tooltip+popover

Author: 昔梦

packages/x-flow/src/components/CustomNode/sourceHandle.tsx

@@ -1,7 +1,8 @@
 import { PlusOutlined } from '@ant-design/icons';
 import { Handle } from '@xyflow/react';
 import { Tooltip } from 'antd';
-import React, { memo, useRef, useState } from 'react';
+import React, { memo, useMemo, useRef, useState } from 'react';
+import { getAntdVersion } from '../../utils';
 import NodeSelectPopover from '../NodesPopover';
 
 export default memo((props: any) => {
@@ -18,6 +19,19 @@ export default memo((props: any) => {
   const [openNodeSelectPopover, setOpenNodeSelectPopover] = useState(false);
   const popoverRef = useRef(null);
 
+  const toolTipVersionProps = useMemo(() => {
+    const version = getAntdVersion();
+    if (version === 'V5') {
+      return {
+        open: isShowTooltip,
+      };
+    }
+    // V4
+    return {
+      visible: isShowTooltip,
+    };
+  }, [isShowTooltip]);
+
   return (
     <Handle
       type="source"
@@ -53,8 +67,11 @@ export default memo((props: any) => {
                   color: '#354052',
                   fontSize: '12px',
                 }}
-                open={isShowTooltip}
-                getPopupContainer={() => document.getElementById('xflow-container') as HTMLElement}
+                color='#fff'
+                {...toolTipVersionProps}
+                getPopupContainer={() =>
+                  document.getElementById('xflow-container') as HTMLElement
+                }
               >
                 <PlusOutlined style={{ color: '#fff', fontSize: 10 }} />
               </Tooltip>

packages/x-flow/src/components/NodesPopover/index.tsx

@@ -1,18 +1,18 @@
-import { useMemo } from 'react';
 import { useClickAway } from 'ahooks';
 import { Popover } from 'antd';
 import React, {
   forwardRef,
   useCallback,
   useContext,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react';
 import { useStore } from '../../hooks/useStore';
 import { ConfigContext } from '../../models/context';
+import { getAntdVersion } from '../../utils';
 import NodesMenu from '../NodesMenu';
-import { getAntdVersion  } from '../../utils';
 import './index.less';
 
 export default forwardRef((props: any, popoverRef) => {
@@ -29,9 +29,7 @@ export default forwardRef((props: any, popoverRef) => {
     nodeSelector || {};
 
   useImperativeHandle(popoverRef, () => ({
-    changeOpen: val => {
-      setOpen(val);
-    },
+    changeOpen: openChange,
   }));
 
   useClickAway(() => {
@@ -48,36 +46,39 @@ export default forwardRef((props: any, popoverRef) => {
     onNodeSelectPopoverChange && onNodeSelectPopoverChange(false);
   }, []);
 
+  const openChange = () => {
+    setTimeout(() => {
+      setIsAddingNode(true);
+      closeRef.current = true;
+      setOpen(true);
+    }, 50);
+  };
+
   const popoverVersionProps = useMemo(() => {
     const version = getAntdVersion();
     if (version === 'V5') {
       return {
         open,
+        onOpenChange: openChange,
       };
     }
     // V4
     return {
       visible: open,
+      onVisibleChange: openChange,
     };
   }, [open]);
 
   return (
     <Popover
-      overlayClassName='nodes-popover'
+      overlayClassName="nodes-popover"
       getPopupContainer={() => document.getElementById('xflow-container')}
       zIndex={2000}
       arrow={false}
       overlayInnerStyle={{ padding: '12px 6px' }}
       {...popoverProps}
-      trigger='click'
+      trigger="click"
       {...popoverVersionProps}
-      onOpenChange={() => {
-        setTimeout(() => {
-          setIsAddingNode(true);
-          closeRef.current = true;
-          setOpen(true);
-        }, 50);
-      }}
       content={
         <NodesMenu
           ref={ref}