Kiho / react-form-builder

A complete react form builder that interfaces with a json endpoint to load and save generated forms. The toolbox contains 16 items for gathering data. Everything from star ratings to signature boxes!
MIT License
467 stars 347 forks source link

Dragging custom element into multi column element: Element type is invalid #131

Closed kishortrimal closed 3 years ago

kishortrimal commented 3 years ago

image

Check my code:

import React, { useState, useEffect} from 'react';
import { ReactFormBuilder, ElementStore, Registry } from 'react-form-builder2';
import { Form, Button, Input, Card } from 'antd'
import 'react-form-builder2/dist/app.css';

const form_builder = () => {

  const TestComponent = () => <h2>Hello</h2>;

  const [flag, setFlag] = useState(false);

  const AntDesignInput = React.forwardRef((props, ref) => {
    const { name, defaultValue, disabled } = props;
    return <Input ref={ref} name={name} defaultValue={defaultValue} disabled={disabled} />;
  });
  console.log(AntDesignInput);

  useEffect(() => {
    Registry.register('AntInput', AntDesignInput);
    setFlag(true);
  }, []);

   const items = [{
      key: 'Header',
    }, {
      key: 'TextInput',
    }, {
      key: 'TextArea',
    }, {
      key: 'RadioButtons',
    }, {
      key: 'Checkboxes',
    }, {
      key: 'Image',
    },
    {
      key: 'TwoColumnRow'
    },
    {
      key: 'ThreeColumnRow'
    },
    {
      key: 'FourColumnRow'
    },
    {
      key: 'TestComponent',
      element: 'CustomElement',
      component: TestComponent,
      type: 'custom',
      field_name: 'test_component',
      name: 'Something You Want',
      icon: 'fa fa-cog',
      static: true,
      props: { test: 'test_comp' },
      label: 'Label Test',
    },
    {
      key: 'AntInput',
      element: 'CustomElement',
      component: AntDesignInput,
      forwardRef: true,
      type: 'custom',
      field_name: 'my_input_',
      name: 'Ant Design Input',
      icon: 'fa fa-cog',
      label: 'Label Input',
    }
   ];

   return(
     (flag) && (
      <ReactFormBuilder toolbarItems={items}/>
     )

   )
}
export default form_builder;

In above code, I have used custom element and custom element working properly but when, I am trying to drag my custom element into multi column row element. getting above error.

check snapshot of UI screens:

image

image

image

image

kishortrimal commented 3 years ago

Hello kiho, Drag issue is solved but when, I drag custom element not able to edit or delete custom element in multi element row. please refer below snap short.

image

Kiho commented 3 years ago

It should be fixed in v 0.8.5