import React from "react";
import "./styles.css";
import ScalableForm from "scalable-form-antd";

// 这个例子，使用scalable-form-antd渲染了一个表单
export default class FormExample extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      formData: {
        name: ""
      }
    };

    // 规则jsonSchema，用于描述表单字段信息，包括字段类型，长度等
    this.jsonSchema = {
      title: "Scalable Form render sdk with Ant Design components",
      description: "",
      type: "object",
      required: ["name"],
      properties: {
        name: {
          type: "string",
          title: "名称",
          default: "",
          maxLength: 15
        }
      }
    };

    // 规则uiSchema，用于描述表单UI组件信息，包括输入框的placeholder等字段
    this.uiSchema = {
      name: {
        "ui:help": '关于"名称"字段的帮助说明',
        "ui:options": {
          placeholder: "请输入名称"
        }
      }
    };
  }

  // 用户输入表单数据变化时的回调，会返回用户当前填写的表单数据formData
  handleChanged = (formData) => {
    console.log("ScalableForm Changed!", formData);
    this.setState({
      formData: { ...formData }
    });
  };

  // 用户点击提交时的回调，会返回用户填写的表单数据formData
  handleSubmit = (formData) => {
    console.log("ScalableForm Submitted!", formData);
  };

  render() {
    return (
      <div className="scalable-form-demo-element">
        <ScalableForm
          jsonSchema={this.jsonSchema}
          uiSchema={this.uiSchema}
          formData={this.state.formData}
          onChange={this.handleChanged}
          onSubmit={this.handleSubmit}
        />
      </div>
    );
  }
}

import React from "react";
import "./styles.css";
import ScalableFormEditor from "scalable-form-editor";

class FormEditorExample extends Component {
  constructor(...args) {
    super(...args);
    this.state = {
        uiSchema: {},
        jsonSchema: {},
        bizData: {},
        sequence: []
        formData: {}
    };
  }

  handleSubmit = (formCode, {jsonSchema,uiSchema, formData, bizData, sequence}) => {
    console.log('submit by editor', jsonSchema, uiSchema, formData, bizData, sequence);
  };

  render() {
    return (
      <ScalableFormEditor
        jsonSchema={this.state.jsonSchema}
        uiSchema={this.state.uiSchema}
        formData={this.state.formData}
        bizData={this.state.bizData}
        sequence={this.state.sequence}
        onSubmit={this.handleSubmit}
      />
    );
  }
}