if (form.getFieldValue('random') === true) {

var keys = [
  {
    key: 'random-label',
    colSpan: 2,
    render() {
      return (
        <fieldset>
          <legend>Random Header</legend>
        </fieldset>
      )
    },
  },
  {
    key: 'random-field', 
    label: 'Random', 
    //required: true 
  },
];

keys.forEach(key => {
  newWizardMeta.steps[1].formMeta.fields.push(key);
});
}

    <Input.Group compact>
      <Input style={{ width: '20%' }} defaultValue="0571" />
      <Input.Search style={{ width: '30%' }} defaultValue="26888888" />
    </Input.Group>

const meta = {
      formItemLayout:[6, 18],
      fields: [{...}]
}

const meta = {
     formItemLayout:{
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
      },
      fields: [{...}]
}

A: {
    B: 'value B',
    C: 'value C`
}

{
    A[0]: {
        B: "value B"
    },
    A[1]: {
        C: 'value C',
    }
}

{
    A: [
        B: "value B",
        C: "value C"
    ]
}

import {useState, useEffect} from "react"
import axios from "axios"
import querystring from 'querystring';

let timeout;
let currentValue;

function QueryFetch(url, value, initialState, callback) {
    const [data, setData] = useState(initialState);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    if (timeout) {
        clearTimeout(timeout);
        timeout = null;
    }
    currentValue = value;

    const str = querystring.encode({
        code: 'utf-8',
        q: value,
    });

    useEffect(() => {
        setLoading(true)

        async function fetchData() {
            try {
                const res = await axios.get(`url?${str}`);
                if (currentValue === value) {
                    console.log(res.data);
                    setData(res.data.results);
                    callback(data);
                }
            } catch (error) {
                setError(error.message);
            } finally {
                setLoading(false);
            }
        }

        timeout = setTimeout(fetchData, 300);
    }, [url, str, data, callback, value])
}

export {QueryFetch}

const [cities, setCities] = useState({})

{
      key: 'city',
      label: 'City',
      widget: 'select',
      options: country ? citites : [],
      placeholder: loading ? 'Loading...' : 'Select city...',
      widgetProps: { loading },
      disabled: loading || !country,
      widgetProps: {
                                options: cities.map(
                                    c => <Option key={f.id} value={f.name}>{f.name}</Option>
                                ),
                                showSearch: true,
                                onSearch: () => {
                                    console.log("Entered search")
                                    QueryFetch(
                                        "http://localhost:8000/cities/",
                                        form.getFieldsValue("country"),
                                        null,
                                        data => setCities(data)
                                    )
                                },
                            }
    },

{
  "private": true,
  "scripts": {
    "start": "umi dev",
    "build": "umi build",
    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
    "test": "umi-test",
    "test:coverage": "umi-test --coverage"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,less,md,json}": [
      "prettier --write"
    ],
    "*.ts?(x)": [
      "prettier --parser=typescript --write"
    ]
  },
  "dependencies": {
    "@types/classnames": "^2.2.10",
    "@umijs/preset-react": "1.x",
    "@umijs/test": "^3.0.13",
    "antd-form-builder": "file:./vendors/antd-form-builder",
    "classnames": "^2.2.6",
    "lint-staged": "^10.0.7",
    "prettier": "^1.19.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "umi": "^3.0.13",
    "yorkie": "^2.0.0"
  }
}

import { defineConfig } from 'umi';
import {routes} from './router';

export default defineConfig({
  targets: {
    ie: 11,
  },
  locale: {
    default: 'zh-CN',
    antd: true,
    baseNavigator: true,
    baseSeparator: '-',
  },
  layout: {
    title: 'Da Vinci',
    locale: true,
  },
  antd: {},
  dva: {hmr: true},
  dynamicImport: {
    loading: '@/components/PageLoading',
  },
  routes,
});

import React, { Component } from 'react'
import { Form, Button, Rate, Card, InputNumber, DatePicker } from 'antd'
// @ts-ignore
import FormBuilder from 'antd-form-builder'

export default class App extends Component {
  form = FormBuilder.createForm(this);
  handleFinish = () => {
    console.log('submit: ', this.form.getFieldsValue())
  };

  render() {
    const options = ['Apple', 'Orange', 'Banana']
    const meta = {
      columns: 1,
      dynamicFields: '*',
      fields: [
        {
          key: 'obj.input',
          label: 'Input',
          required: true,
          tooltip: 'This is the tooltip.',
        },
        { key: 'checkbox', label: 'Checkbox', widget: 'checkbox', initialValue: true },
        { key: 'rating', label: 'Rating', widget: Rate, initialValue: 2 },
        { key: 'switch', label: 'Switch', widget: 'switch', initialValue: true },
        { key: 'select', label: 'Select', widget: 'select', options },
        { key: 'checkbox-group', label: 'Checkbox Group', widget: 'checkbox-group', options },
        { key: 'radio-group', label: 'Radio Group', widget: 'radio-group', options },
        {
          key: 'radio-button-group',
          label: 'Radio Button Group',
          widget: 'radio-group',
          buttonGroup: true,
          options,
        },
        { key: 'password', label: 'Password', widget: 'password' },
        { key: 'textarea', label: 'Textarea', widget: 'textarea' },
        { key: 'number', label: 'Number', widget: 'number' },
        { key: 'date-picker', label: 'Date Picker', widget: 'date-picker' },
      ],
    }

    return (
      <Card>
      <Form
        form={this.form}
        layout="horizontal"
        onValuesChange={this.form.handleValuesChange}
        onFinish={this.handleFinish}
      >
        <FormBuilder meta={meta} form={this.form} />
        <Form.Item wrapperCol={{ span: 16, offset: 8 }} className="form-footer">
          <Button htmlType="submit" type="primary" onClick={() => this.forceUpdate()}>
            Submit
          </Button>
        </Form.Item>
      </Form>
      </Card>
    )
  }
}

Type error: Property 'useForceUpdate' does not exist on type 'FC<FormBuilderInterface> & { defineWidget: (key: string, component: any, metaConvertor?: (field: FieldType) => FieldType) => void; }'.

const [form] = Form.useForm();
const forceUpdate = FormBuilder.useForceUpdate();
                               ^

const [form] = Form.useForm();
const forceUpdate = FormBuilder.useForceUpdate();

TypeError
itemRef is not a function

<Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
             placeholder="Username"  />

./node_modules/antd-form-builder/dist/index.es.js
Attempted import error: 'Icon' is not exported from 'antd'.

import ptBR from "antd/lib/locale/pt_BR";

const AdminWrapper = (props) => {
  message.config({ maxCount: 1 });

  return (
    <ConfigProvider locale={ptBR}>
        <NewChildren {...props} />
    </ConfigProvider>
  );
};

<Form
    form={form}
    layout="vertical"
    onFinish={handleFinish}
    validateMessages={validateMessages}
>
    <Tabs tabPosition="top">
       <Tabs.TabPane tab="Usuario" key="1">
          <FormBuilder form={form} meta={meta1} initialValues={...} />
        </Tabs.TabPane>

        <Tabs.TabPane tab="Filiacao" key="2">
           <FormBuilder form={form} meta={meta2} initialValues={...} />
        </Tabs.TabPane>
    </Tabs>
</Form>

export default {
  required: "Campo obrigatorio",

  types: {
    email: "E-mail invalido",
    number: "Numero invalido"
  }
};

import React, {useState, useCallback} from "react";
import FormBuilder from "antd-form-builder";
import {Form, Button, Steps, Select} from 'antd'
import querystring from "querystring";
import axios from "axios";
import {api} from "../api";

const {Option} = Select;
const {Step} = Steps

let timeout;
let currentValue;

function fetch(url, value, query, callback) {
    if (timeout) {
        clearTimeout(timeout);
        timeout = null;
    }
    currentValue = value;

    async function getData() {
        if (currentValue === value) {
            const str = querystring.encode({
                name: value,
                q: query,
            });
            const res = await axios.get(`${url}?${str}`);
            callback(res.data);
        }
    }

    timeout = setTimeout(getData, 500);
}

const SearchInput = ({url, query, ...props}) => {
    const [data, setData] = useState([]);
    const [value, setValue] = useState(props.initialValue);

    const handleSearch = value => {
        if (value) {
            console.log(query)
            fetch(url, value, query, result => {
                setData(result);
            });
        } else {
            setData([]);
        }
    };

    const handleChange = value => {
        setValue(value)
    };

    return (
        <Select
            showSearch
            value={value}
            defaultValue={props.defaultValue? props.defaultValue : undefined}
            disabled={props.disabled}
            showArrow={true}
            style={{fontSize: "large"}}
            filterOption={false}
            onSearch={handleSearch}
            onChange={handleChange}
        >
            {data.map(d => <Option style={{fontSize: "large"}} key={d.id} value={d.name}>{d.name}</Option>)}
        </Select>
    );
}

FormBuilder.defineWidget('search-input', SearchInput)

const OpinionsCreate = () => {
    const [form] = Form.useForm()
    const [currentStep, setCurrentStep] = useState(0)
    const forceUpdate = FormBuilder.useForceUpdate()
    const handleFinish = useCallback(() => {
        console.log('Submit: ', form.getFieldsValue(true))
    }, [form])

    const wizardMeta = {
        steps: [
            {
                title: 'Strona wysyłająca',
                formMeta: {
                    columns: 1,
                    fields: [
                        {
                            key: 'sending_university',
                            required: true,
                            disabled: true,
                            widget: "search-input",
                            widgetProps: {
                                initialValue: 'Some university',
                                url: api.endpoint1,
                                defaultValue: "Some university",
                                onChange: () => {
                                    // Clear sending_faculty value when country is changed
                                    form.setFieldsValue({sending_faculty: undefined})
                                },
                            }
                        },
                        {
                            key: 'sending_faculty',
                            required: true,
                            widget: "search-input",
                            widgetProps: {
                                url: api.endpoint2,
                                query: form.getFieldValue("sending_university"),
                            }
                        },
                    ],
                },
            },
        ]
    }

    // Clone the meta for dynamic change
    const newWizardMeta = JSON.parse(JSON.stringify(wizardMeta))
    // In a wizard, every field should be preserved when swtich steps.
    newWizardMeta.steps.forEach(s => s.formMeta.fields.forEach(f => (f.preserve = true)))

    // Generate a general review step
    const reviewFields = []
    newWizardMeta.steps.forEach((s, i) => {
        reviewFields.push(
            {
                key: 'review' + i,
                colSpan: 2,
                render() {
                    return (
                        <fieldset>
                            <legend>{s.title}</legend>
                        </fieldset>
                    )
                },
            },
            ...s.formMeta.fields,
        )
    })

    newWizardMeta.steps.push({
        key: 'review',
        title: 'Podsumowanie',
        formMeta: {
            columns: 2,
            fields: reviewFields,
        },
    })

    const stepsLength = newWizardMeta.steps.length

    const handleNext = () => {
        form.validateFields().then(() => {
            setCurrentStep(currentStep + 1)
        })
    }
    const handleBack = () => {
        form.validateFields().then(() => {
            setCurrentStep(currentStep - 1)
        })
    }
    const isReview = currentStep === stepsLength - 1

    return (
        <Form
            layout="horizontal"
            form={form}
            onValuesChange={forceUpdate}
            style={{width: '100%'}}
            onFinish={handleFinish}
        >
            <Steps current={currentStep}>
                {newWizardMeta.steps.map(s => (
                    <Step key={s.title} title={s.title}/>
                ))}
            </Steps>
            <div style={{background: '#f7f7f7', padding: '20px', margin: '30px 0'}}>
                <FormBuilder
                    viewMode={currentStep === stepsLength - 1}
                    form={form}
                    meta={newWizardMeta.steps[currentStep].formMeta}
                />
            </div>
            <Form.Item className="form-footer" style={{textAlign: 'right'}}>
                {currentStep > 0 && (
                    <Button onClick={handleBack} style={{float: 'left', marginTop: '5px'}}>
                        Back
                    </Button>
                )}
                <Button>Cancel</Button>&nbsp; &nbsp;
                <Button type="primary" onClick={isReview ? () => form.submit() : handleNext}>
                    {isReview ? 'Submit' : 'Next'}
                </Button>
            </Form.Item>
        </Form>
    )
}

export default OpinionsCreate;

    const personalInfo = {
      name: { first: 'Nate', last: 'Wang' },
      email: '[email protected]',
      gender: 'Male',
      dateOfBirth: moment('2100-01-01'),
      phone: '15988888888',
      city: 'Shanghai',
      address: 'No.1000 Some Road, Zhangjiang Park, Pudong New District',
    }

    const meta = {
      columns: 2,
      fields: [
        { key: 'name.first', label: 'First Name' },
        { key: 'name.last', label: 'Last Name' },
        { key: 'gender', label: 'Gender' },
        {
          key: 'dateOfBirth',
          label: 'Date of Birth',
        },
        { key: 'email', label: 'Email' },
        { key: 'phone', label: 'Phone' },
        { key: 'address', label: 'Address', colSpan: 2 },
        { key: 'city', label: 'City' },
        { key: 'zipCode', label: 'Zip Code' },
      ],
    }

render () {

return (
 <Drawer
        visible={true}
        footer={
          <div style={{ textAlign: 'left' }}>
            <Button onClick={onClose} style={{ marginRight: 8 }}>
              Close
            </Button>
          </div>
        }
      >
        <div>
          <FormBuilder meta={meta} form={this.formRef} initialValues={personalInfo} viewMode />

        </div>

      </Drawer>
    );

  }

import memoize from 'lodash/memoize;
import isArray from 'lodash/isArray;
import pick from 'lodash/pick;
import capitalize from 'lodash/capitalize;
import has from 'lodash/has;
import get from 'lodash/get;
import find from 'lodash/find;