Merge pull request #1585 from alibaba/xflow

Xflow

Author: lhbxs

.gitignore

@@ -11,6 +11,8 @@
 
 .yarn
 .turbo/cookies
+.turbo/daemon
+.turbo
 
 # turbo
 */*/.turbo

.turbo/daemon/9af73f40ad414c73-turbo.log.2024-12-04

@@ -13,7 +13,9 @@ title: API
 | layout        | 节点布局的方向                       | `LR \| TB`                                                  | LR     | - |
 | widgets       | 自定义组件                           | `Record<string, ReactNode>`                                 | -      | - |
 | settings      | 节点配置，定义页面中可拖动的节点配置 | ( [TNodeGroup](#tnodegroup) \| [TNodeItem](#tnodeitem) )[ ] |        |
-| nodeSelector  | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector`                                             |        |
+| nodeSelector  | 节点选择器配置，可控制节点的可搜索性 | `TNodeSelector`      
+| iconFontUrl   | iconfont url，用于配置图标渲染 | `String`                                             |        |
+                                       |        |
 
 ### TNodeGroup
 

docs/xflow/api.md

@@ -162,7 +162,7 @@ export default [
     type: 'Switch',
     description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',
     icon: {
-      type: 'icon-switch',
+      type: 'icon-fenzhi',
       bgColor: '#06AED4',
     },
     settingSchema: {

docs/xflow/demo/basic/setting.tsx

@@ -74,7 +74,7 @@ export default [
     type: 'Switch',
     description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',
     icon: {
-      type: 'icon-switch',
+      type: 'icon-fenzhi',
       bgColor: '#06AED4',
     },
   },

docs/xflow/demo/custom-flow/setting.tsx

@@ -132,7 +132,7 @@ export default [
     type: 'Switch',
     description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',
     icon: {
-      type: 'icon-switch',
+      type: 'icon-fenzhi',
       bgColor: '#06AED4',
     },
   },

docs/xflow/demo/flow-provider/setting.tsx

@@ -132,7 +132,7 @@ export default [
     type: 'Switch',
     description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',
     icon: {
-      type: 'icon-switch',
+      type: 'icon-fenzhi',
       bgColor: '#06AED4',
     },
   },

docs/xflow/demo/layout/LR/setting.tsx

@@ -132,7 +132,7 @@ export default [
     type: 'Switch',
     description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',
     icon: {
-      type: 'icon-switch',
+      type: 'icon-fenzhi',
       bgColor: '#06AED4',
     },
   },

docs/xflow/demo/layout/TB/setting.tsx

@@ -132,7 +132,7 @@ export default [
     type: 'Switch',
     description: '允许你根据 if/else 条件将 workflow 拆分成两个分支',
     icon: {
-      type: 'icon-switch',
+      type: 'icon-fenzhi',
       bgColor: '#06AED4',
     },
   },

docs/xflow/demo/nodeSetting/setting.tsx

@@ -0,0 +1,33 @@
+import XFlow from '@xrenders/xflow';
+import settings from './setting';
+import React from 'react';
+
+const customWidget = ({ data, key, item }) => {
+  return <p style={{ wordWrap: 'break-word' }}>{item?.value}</p>;
+};
+
+export default () => {
+  const nodes = [
+    {
+      type: 'Switch',
+      id: '2',
+      position: { x: 171.25, y: 218.75 },
+      data: { switchData:[{value:"条件1"}]}
+    },
+  ];
+
+  const edges = [];
+
+  return (
+    <div style={{ height: '600px' }}>
+      <XFlow
+        initialValues={{ nodes, edges }}
+        settings={settings}
+        nodeSelector={{
+          showSearch: true,
+        }}
+        widgets={{ customWidget }}
+      />
+    </div>
+  );
+};