alibaba / x-render

🚴‍♀️ 阿里 - 很易用的中后台「表单 / 表格 / 图表」解决方案
https://xrender.fun
7.06k stars 1k forks source link

form-render 1.13.21 版本自定义组件的 props 里面没有 addons了 #1322

Closed liushasha0012 closed 1 year ago

liushasha0012 commented 1 year ago

1.依赖仓库的版本(Dependencies versions)

2.问题描述(Bug description): 自定义组件的 props 里面没有 addons 属性了,且因为业务的原因,无法升级至 antd5,不能使用更高版本的xrender 3.出现问题的 schema demo(Reproduction schema demo)

import React from 'react';
import { Button, InputNumber, Layout, Radio, Switch, Input } from 'antd';
import Generator from 'fr-generator';
import mexp from 'math-expression-evaluator';

const settings = [
  {
    title: '展示组件',
    widgets: [
      {
        text: '计算值',
        name: 'formula',
        schema: {
          title: '标题',
          type: 'string',
          widget: 'FormulaRenderer',
        },
        setting: {
          formula: {
            title: '计算公式',
            type: 'string',
          },
        },
      },
    ],
  },
  {
    title: '基础组件',
    widgets: [
      {
        text: '输入数字',
        name: 'number',
        schema: {
          title: '数字标题',
          type: 'number',
          widget: 'NumberInputRenderer'
        },
        setting: {
          min: {
            title: '最小值',
            type: 'number',
          },
          max: {
            title: '最大值',
            type: 'number',
          },
          prefix: {
            title: '前缀',
            type: 'string'
          },
          suffix: {
            title: '后缀',
            type: 'string'
          },
          precision: {
            title: '小数点后保留位数',
            type: 'number'
          }
        },
      },

    ],
  },
];

const commonSettings = {
  $id: {
    title: 'ID',
    description: '字段名称/英文',
    type: 'string',
    widget: 'idInput',
    require: true,
    rules: [
      {
        pattern: '^#/.+$',
        message: 'ID 必填',
      },
    ],
  },
  title: {
    title: '标题',
    type: 'string',
  },
  required: {
    title: '是否必填',
    type: 'boolean',
  },
  description: {
    title: '说明',
    type: 'string',
  },
};

const Editor: React.FC<{
  value: Object;
  onChange: (value: Object) => void;
}> = (props) => {
  const { value, onChange } = props;
  return (
    <Generator
      defaultValue={value}
      onSchemaChange={(data) => onChange(data)}
      settings={settings}
      commonSettings={commonSettings}
      globalSettings={{
        type: 'object',
        properties: {
          labelWidth: {
            title: '标签宽度',
            type: 'number',
            widget: 'slider',
            max: 300,
            default: 120,
            props: {
              hideNumber: true,
            },
          },
          displayType: {
            title: '标签展示模式',
            type: 'string',
            default: 'row',
            enum: ['row', 'column'],
            enumNames: ['同行', '单独一行'],
            widget: 'radio',
          },
        },
      }}
      widgets={{  FormulaRenderer, NumberInputRenderer }}
    />
  );
};

export const FormulaRenderer = (props, data) => {
  console.log('FormulaRenderer:', props, data);
  const { addons, schema } = props;
  const { formula = '' } = schema;
  if (addons) {  // 因为找不到 addons,这里没有起到作用
    const { dataPath, getValues } = addons;
    const data = getValues();
    let express = formula;
    console.log('data', data);
    Object.keys(data).forEach((key) => {
      express = express.replace(new RegExp(key, 'g'), data[key] || 0);
    });
    console.log(data, express);
    try {
      return <Input value={mexp.eval(express)} readOnly {...props} />;
    } catch (e) {
      return '';
    }
  } else {
    return '';
  }
};

export const NumberInputRenderer = (props, data) => {
  const { suffix, prefix, max, min, precision } = props.schema;
  console.log('NumberInputRenderer===', props, data);
  return <>
    <span>{prefix}</span><InputNumber {...props} max={max} min={min} precision={precision} /><span>{suffix}</span>
  </>;
};

export default Editor;

4.最小复现 demo(Reproduction demo)

lhbxs commented 1 year ago

1.x 版本目前最新是 1.14.17,试试看