feat:增加settingWidgetProps用于自定义组件参数传递

alibaba · Jan 3, 2025 · 9f6125d · 9f6125d
1 parent a518cca
commit 9f6125d
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 6 deletions.
diff --git a/docs/xflow/api.md b/docs/xflow/api.md
@@ -19,6 +19,8 @@ title: API
 | logPanel | 日志面板配置 |    [TLogPanel](#tlogpanel)                                         |    |
 | onNodeClick | 节点点击事件 |   `NodeMouseHandler`                                        |    |
 | antdVersion | antd 的版本 |   `V4 \| V5`                                        |  `V5`  |
+| readOnly |只读模式 |   `boolean`                                        |  `false`  |
+
 
 ## TNodePanel
 
@@ -95,6 +97,7 @@ title: API
 | iconSvg                | 节点的图标配置Svg格式                                                                                                                                   | `SVGSVGElement`                                                                                                                                  |        |
 | settingSchema        | 节点的业务配置信息，详见[form-render 文档](/form-render/api-schema)。同时设置`settingSchema`和`settingWidget`只生效`settingWidget`               | <a target="_blank" href="https://github.com/alibaba/x-render/blob/e2feff8fdb3bef5537b92a2157dbbf40b9d4eb17/packages/form-render/src/type.ts#L32">SchemaBase</a> |        |
 | settingWidget        | 自定义节点的业务配置组件，在弹窗中展示。同时设置`settingSchema`和`settingWidget`只生效`settingWidget`。定义之后需要在`widgets`中引入自定义组件。 | `string`                                                                                                                                                        |        |
+| settingWidgetProps        | 用于向`settingWidget`自定义组件中传递自定义参数 | `object`                                                                                                                                                        |        |
 | nodeWidget           | 自定义节点的业务配置信息展示组件，在节点内部展示业务配置信息。定义之后需要在`widgets`中引入自定义组件。                                          | `string`                                                                                                                                                        |        |
 | nodePanel | 自定义节点的面板配置信息                                                                                                                         | [TNodePanel](#tnodepanel)                                                                                                                                                        |     |
 

diff --git a/docs/xflow/demo/custom-flow/customWidget.tsx b/docs/xflow/demo/custom-flow/customWidget.tsx
@@ -1,7 +1,7 @@
 import { Input } from 'antd';
 
-const customWidget = ({ value, onChange }) => {
-
+const customWidget = ({ value, onChange,...rest }) => {
+  console.log("参数", rest)
   return (
     <Input
       value={value?.inputVal}

diff --git a/docs/xflow/demo/custom-flow/setting.tsx b/docs/xflow/demo/custom-flow/setting.tsx
@@ -8,7 +8,10 @@ export default [
       type: 'icon-start',
       bgColor: '#17B26A',
     },
-    settingWidget:"customWidget"
+    settingWidget: "customWidget",
+    settingWidgetProps: {
+      params: "test"
+    }
   },
   {
     title: '结束',

diff --git a/packages/x-flow/src/components/NodeEditor/index.tsx b/packages/x-flow/src/components/NodeEditor/index.tsx
@@ -18,7 +18,7 @@ const NodeEditor: FC<INodeEditorProps> = (props: any) => {
   const { data, onChange, nodeType, id } = props;
   const form = useForm();
   // // 1.获取节点配置信息
-  const { settingMap, widgets,readOnly} = useContext(ConfigContext);
+  const { settingMap, widgets, readOnly } = useContext(ConfigContext);
   const nodeSetting = settingMap[nodeType] || {};
   const [customVal, setCustomVal] = useState(data);
   const CustomSettingWidget = widgets[`${nodeType}NodeSettingWidget`]; // 内置setting组件
@@ -58,7 +58,7 @@ const NodeEditor: FC<INodeEditorProps> = (props: any) => {
       if (node) {
         // 更新节点的 data
         if (node?.data?._nodeType === 'Switch' && data?.list?.length) {
-          data['list'] = (data?.list||[])?.map((item, index) => {
+          data['list'] = (data?.list || [])?.map((item, index) => {
             if (item?._conditionId) {
               return item;
             } else {
@@ -95,7 +95,7 @@ const NodeEditor: FC<INodeEditorProps> = (props: any) => {
       }
     });
 
-    setNodes(newNodes,false);
+    setNodes(newNodes, false);
   }, 100);
 
   const watch = {
@@ -107,6 +107,7 @@ const NodeEditor: FC<INodeEditorProps> = (props: any) => {
   if (nodeSetting?.settingWidget && NodeWidget) {
     return (
       <NodeWidget
+        {...nodeSetting?.settingWidgetProps}
         value={customVal}
         onChange={values => {
           setCustomVal(values);

diff --git a/packages/x-flow/src/types.ts b/packages/x-flow/src/types.ts
@@ -15,6 +15,7 @@ export interface TNodeItem {
   };
   settingSchema?: Schema; // 节点的配置schema（弹窗） string为自定义组件
   settingWidget?: string; // 自定义组件
+  settingWidgetProps?: object;// 自定义组件参数
   hideDesc?: boolean; // 隐藏业务描述
   nodePanel?: {
     // 配置面板属性设置