fix:antdVersion配置化显示传递

Author: 昔梦

docs/xflow/api.md

@@ -18,6 +18,7 @@ title: API
 | globalConfig | 全局的面板和节点配置 |     {nodePanel:[TNodePanel](#tnodepanel),nodeView:[TNodeView](#tnodeview),edge:[TEdge](#tedge)}                                            |    |
 | logPanel | 日志面板配置 |    [TLogPanel](#tlogpanel)                                         |    |
 | onNodeClick | 节点点击事件 |   `NodeMouseHandler`                                        |    |
+| antdVersion | antd 的版本 |   `V4 \| V5`                                        |  `V4`  |
 
 ## TNodePanel
 

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

@@ -1,9 +1,10 @@
 import { PlusOutlined } from '@ant-design/icons';
 import { Handle } from '@xyflow/react';
 import { Tooltip } from 'antd';
-import React, { memo, useMemo, useRef, useState } from 'react';
-import { getAntdVersion } from '../../utils';
+import React, { memo, useContext, useMemo, useRef, useState } from 'react';
 import NodeSelectPopover from '../NodesPopover';
+import { ConfigContext } from '../../models/context';
+
 
 export default memo((props: any) => {
   const {
@@ -18,10 +19,11 @@ export default memo((props: any) => {
   const [isShowTooltip, setIsShowTooltip] = useState(false);
   const [openNodeSelectPopover, setOpenNodeSelectPopover] = useState(false);
   const popoverRef = useRef(null);
+   const { antdVersion }: any = useContext(ConfigContext);
+
 
   const toolTipVersionProps = useMemo(() => {
-    const version = getAntdVersion();
-    if (version === 'V5') {
+    if (antdVersion === 'V5') {
       return {
         open: isShowTooltip,
       };

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

@@ -11,7 +11,7 @@ import React, {
 } from 'react';
 import { useStore } from '../../hooks/useStore';
 import { ConfigContext } from '../../models/context';
-import { getAntdVersion, uuid } from '../../utils';
+import { uuid } from '../../utils';
 import NodesMenu from '../NodesMenu';
 import './index.less';
 
@@ -24,7 +24,7 @@ export default forwardRef((props: any, popoverRef) => {
   const closeRef: any = useRef<HTMLButtonElement>(null);
   const [open, setOpen] = useState(false);
 
-  const { settings, nodeSelector }: any = useContext(ConfigContext);
+  const { settings, nodeSelector, antdVersion }: any = useContext(ConfigContext);
   const { showSearch, popoverProps = { placement: 'top' } } =
     nodeSelector || {};
 
@@ -61,8 +61,7 @@ export default forwardRef((props: any, popoverRef) => {
   };
 
   const popoverVersionProps = useMemo(() => {
-    const version = getAntdVersion();
-    if (version === 'V5') {
+    if (antdVersion === 'V5') {
       return {
         open,
         onOpenChange: openChange,

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

@@ -5,7 +5,7 @@ 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 { getAntdVersion, safeJsonStringify } from '../../utils';
+import {  safeJsonStringify } from '../../utils';
 import createIconFont from '../../utils/createIconFont';
 import IconView from '../IconView';
 import './index.less';
@@ -41,7 +41,7 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
     openLogPanel,
   } = props;
   // 1.获取节点配置信息
-  const { settingMap, iconFontUrl, globalConfig }: any =
+  const { settingMap, iconFontUrl, globalConfig, antdVersion }: any =
     useContext(ConfigContext);
   const nodeSetting = settingMap[nodeType] || {};
   const { nodes, setNodes } = useStore(
@@ -86,8 +86,7 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
   const Icon = useMemo(() => createIconFont(iconFontUrl), [iconFontUrl]);
 
   const drawerVersionProps = useMemo(() => {
-    const version = getAntdVersion();
-    if (version === 'V5') {
+    if (antdVersion === 'V5') {
       return {
         rootClassName: 'custom-node-panel',
         open: true,

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

@@ -2,7 +2,6 @@ import { Drawer, Popover } from 'antd';
 import classNames from 'classnames';
 import React, { FC, useContext, useMemo } from 'react';
 import { ConfigContext } from '../../models/context';
-import { getAntdVersion } from '../../utils';
 import createIconFont from '../../utils/createIconFont';
 import IconView from '../IconView';
 import TitleMenuTooltip from '../NodeContainer/TitleMenuTooltip';
@@ -19,7 +18,7 @@ interface IPanelProps {
 const PanelStatusLogContainer: FC<IPanelProps> = (props: IPanelProps) => {
   const { onClose, children, nodeType } = props;
   // 1.获取节点配置信息
-  const { settingMap, iconFontUrl, globalConfig, logPanel, widgets }: any =
+  const { settingMap, iconFontUrl, globalConfig, logPanel, widgets, antdVersion }: any =
     useContext(ConfigContext);
   const nodeSetting = settingMap[nodeType] || {};
   const { nodePanel, iconSvg } = nodeSetting;
@@ -29,8 +28,7 @@ const PanelStatusLogContainer: FC<IPanelProps> = (props: IPanelProps) => {
   const isCustomWidget = !Boolean(logPanel?.logWidget && CustomWidget);
 
   const drawerVersionProps = useMemo(() => {
-    const version = getAntdVersion();
-    if (version === 'V5') {
+    if (antdVersion === 'V5') {
       return {
         rootClassName: classNames('node-log-panel', {
           'no-header-line': isCustomWidget,

packages/x-flow/src/utils/index.ts

@@ -1,12 +1,10 @@
-// import { version as antdVersion } from 'antd';
 import { customAlphabet } from 'nanoid';
 import tinycolor from 'tinycolor2';
 export const uuid = customAlphabet('0123456789abcdefghijklmnopqrstuvwxyz', 16);
 export const uuid4 = customAlphabet('0123456789abcdefghijklmnopqrstuvwxyz', 4);
 
 import { isMatch, some, set, get, cloneDeep, has as _has, merge, mergeWith, isUndefined, omitBy } from 'lodash-es';
 
-const antdVersion = "5.22.6"
 export const _set = set;
 export const _get = get;
 export const _cloneDeep = cloneDeep;
@@ -173,16 +171,17 @@ 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';
-  }
-};
+// 废弃：
+// export const getAntdVersion = () => {
+//   const majorVersion = parseInt(antdVersion?.split('.')?.[0], 10);
+//   if (majorVersion >= 5) {
+//     return 'V5';
+//   } else if (majorVersion === 4) {
+//     return 'V4';
+//   } else {
+//     return 'V4';
+//   }
+// };
 
 // 安全的JSON.stringify
 export function safeJsonStringify(obj: Object) {

packages/x-flow/src/withProvider.tsx

@@ -28,6 +28,7 @@ export default function withProvider<T>(
       iconFontUrl,
       globalConfig,
       logPanel,
+      antdVersion='V4',
       ...restProps
     } = props;
     const settingMap = useMemo(() => {
@@ -52,6 +53,7 @@ export default function withProvider<T>(
       iconFontUrl,
       globalConfig,
       logPanel,
+      antdVersion,
       widgets: {
         ...defaultWidgets,
         ...widgets,