自定义 setter

自定义 Setter 只负责编辑单个物料字段，并通过 onValueChange 把新值交给 Engine。它不应直接改页面 Schema、组件实例或外部 React state。

最短链路

1. 编写 CSetter 组件，接收 value 和 onValueChange。
2. 在 RightPanel 的 customPropertySetterMap 注册名称和组件。
3. 在物料 props[].setters 中引用该名称。
4. 拖入组件、修改字段、导出 Schema，确认保存值符合真实组件 props 类型。

Setter 定义

import { ConfigProvider, Switch } from 'antd';
import { CSetter, CSetterProps } from '@chamn/engine';

type CustomSetterProps = {
  a?: string;
};

export const CustomSetter: CSetter<CustomSetterProps> = ({
  onValueChange,
  setterContext,
  ...props
}: CSetterProps<CustomSetterProps>) => {
  return (
    <ConfigProvider
      theme={{
        token: {
          borderRadius: 4,
        },
      }}
    >
      <Switch
        {...props}
        checked={props.value as boolean}
        onChange={(open, e) => {
          // 将数据同步给 engine
          onValueChange?.(open);
        }}
      />
    </ConfigProvider>
  );
};

CustomSetter.setterName = '自定义设置器';

注册

return (
  <Engine
    plugins={DEFAULT_PLUGIN_LIST}
    schema={page as any}
    // 传入组件物料
    material={[...InnerComponentMeta, ...Material]}
    // 组件物料对应的 js 运行库，只能使用 umd 模式的 js
    assetPackagesList={assetPackagesList}
    beforePluginRun={({ pluginManager }) => {
      pluginManager.customPlugin('RightPanel', (pluginInstance) => {
        pluginInstance.ctx.config.customPropertySetterMap = {
          CustomSetter: CustomSetter,
        };
        return pluginInstance;
      });
    }}
    onReady={onReady}
  />
);

使用

在物料协议中即可使用该设置器:

export const ButtonMeta: CMaterialType = {
  componentName: 'Button',
  title: '按钮',
  props: [
    {
      name: 'text',
      title: '文本',
      valueType: 'string',
      setters: ['StringSetter', 'CustomSetter'],
    },
  ],
  npm: {
    package: __PACKAGE_NAME__ || '',
    version: __PACKAGE_VERSION__,
    destructuring: true,
    exportName: 'Button',
  },
  snippets: [],
};