docs/xflow/custom-node-setting.md

metadata

order: 3
title: 自定义节点配置面板
mobile: false
group:
  title: 高级用法
  order: 2

自定义节点配置面板

节点配置面板支持以下两种渲染方式：

• Schema 方式: 适用于节点配置较为简单的场景。通过 FormRender 配置 schema 来实现快速渲染。
• Widget 方式: 针对复杂的配置需求，schema 无法满足时，可以通过配置settingWidget自定义组件进行灵活渲染。

Schema 方式

通过配置节点的 settingSchema 属性，实现节点数据配置项的自定义渲染。Schema方式适合快速实现简单的配置面板。

:::info 注意：使用 FormRender 的 schema方式配置，只能用{{ }} 函数表达式和dependencies方式实现简单联动，不能使用watch监听的形式实现复杂联动，如果需要使用watch监听的形式请使用settingWidget自定义组件
:::

基础示例

如果schema中设置了required:true必填项，则无法关闭和切换节点配置面板。如下方：开始节点中的必填项，试下点击开始节点后直接关闭配置面板的效果。

import { Input } from 'antd';
import React from 'react';
import XFlow from '@xrenders/xflow';
import settings from './schema/custom-settings.ts';

const customWidget = ({ value, onChange }) => {
  return <Input value={value} onChange={e => onChange(e.target.value)} />
}

export default () => {
  const nodes = [
    {
      id: '1',
      type: 'Start',
      data: {
        inputVal: '我是自定义组件'
      },
      position: {
        x: 40,
        y: 240,
      }
    },
    {
      id: '2',
      type: 'End',
      data: {},
      position: {
        x: 500,
        y: 240,
      }
    }
  ];

  const edges = [
    { source: '1', target: '2', id: '234123' }
  ]

  return (
    <div style={{ height: '600px' }}>
      <XFlow
        initialValues={{ nodes, edges }}
        settings={settings}
        widgets={{ customWidget }}
      />
    </div>
  );
}

Widget 方式

通过配置节点的 settingWidget 属性，实现节点数据配置项的自定义渲染。Widget 方式提供了更大的灵活性，可以实现复杂的交互和样式需求。

使用方法

1. 创建自定义配置组件，组件参数见自定义组件接收到的props

const customWidget = ({ value, onChange,...rest }) => {
  return (
    <Input
      value={value?.inputVal}
      onChange={e => onChange({ inputVal: e.target.value })}
    />
  );
};

1. 在widgets中注册自定义组件

       <XFlow
        initialValues={{ nodes, edges }}
        settings={settings}
        widgets={{ customWidget }}
       />

3. 在settings属性使用

{
    title: '开始',
    type: 'Start',
    hidden: true,
    targetHandleHidden: true,
    icon: {
      type: 'icon-start',
      bgColor: '#17B26A',
    },
    settingWidget: "customWidget",  // 使用自定义组件customWidget
    settingWidgetProps: {  // 给自定义组件传递参数
      params: "test"
    }
}

自定义组件接收到的props

默认情况下 Widget 会接收到如下的 props：

value

• 类型：any
• 描述：当前组件的值，用于 settingWidget 的受控

onChange

• 类型：(value: any) => void
• 描述：当前 组件的值变化时的回调用于 settingWidget 的受控

readOnly

• 类型：boolean
• 描述：当前组件是否为只读状态

others

接收settingWidgetProps传入的所有值

基础示例

复杂联动示例

以下示例了如何在settingWidget中使用复杂联动，以及如何在弹窗关闭时增加必填校验。

需要暴露validateForm方法，以便关闭弹窗时进行必填校验。

export const AdvancedSettingWidget = forwardRef<
  AdvancedSettingWidgetRef,
  AdvancedSettingWidgetProps
>(({ value, onChange, readOnly }, ref) => {
  // ...组件实现
  useImperativeHandle(ref, () => ({
  validateForm: async () => {
    return await form
      .validateFields()
      .then(() => true)
      .catch(() => false);
  },
}));
});

完整案例

这个示例适用于以下场景：

• 需要根据不同配置类型显示不同表单项的场景
• 表单项之间存在复杂联动关系的场景
• 需要动态添加表单项的场景
• 需要实现严格表单验证的场景

通过这个示例，你可以了解如何使用 settingWidget 方式实现复杂的表单交互，以及如何处理表单验证、数据联动等高级需求。这种方式比简单的 Schema 方式更灵活，能够满足更复杂的业务需求。