Prevent dragging a component

[tuthanhoancanh012]

I have some questions. Please help me check them.

1. I want to prevent dragging a component into a specific container node. Is there a way to do this?

2. The context is that I have a render form schema with onFormSchemaChange, and I want to implement some logic to update the schema and then render it back to the form. However, there is a problem: when I use setState(newFormSchema), the form updates, but all components inside the form builder unmount and remount, causing a flickering effect in the layout.
   Is there any other way to update formSchema without triggering the unmounting of all components inside FormView?

import { useState } from 'react';
import { FormBuilderSchema, FormComponent } from 'types/form-builder';
import { FormBuilder } from '@react-form-builder/designer';
import FormBuilderView from './FormBuilderView/FormBuilderView';

const ReportBuilderForm = () => {
  const [form, setForm] = useState<FormComponent[]>([
    {
      key: 'Header',
      type: 'RsContainer',
      props: {
        dragable: false,
      },
    },
    {
      key: 'Body',
      type: 'RsContainer',
      props: {},
    },
    {
      key: 'Footer',
      type: 'RsContainer',
      props: {},
    },
  ]);

  return (
    <div className='form-builder-container'>
      <FormBuilder
        view={FormBuilderView}
        onFormSchemaChange={(schema) => {
          const result = JSON.parse(schema) as FormBuilderSchema;
          if (JSON.stringify(result.form.children) !== JSON.stringify(form)) {
            // example update neuForm logic
            setForm([
              {
                key: 'Header',
                type: 'RsContainer',
                props: {
                  dragable: false,
                },
              },
            ]);
          }
        }}
        getForm={() =>
          JSON.stringify({
            version: '1',
            form: {
              key: 'Screen',
              type: 'Screen',
              props: { value: { value: 1 } },
              children: form,
            },
            localization: {},
            languages: [
              {
                code: 'en',
                dialect: 'US',
                name: 'English',
                description: 'American English',
                bidi: 'ltr',
              },
            ],
            defaultLanguage: 'en-US',
          })
        }
      />
    </div>
  );
};

export default ReportBuilderForm;

Thank you

[optimajet]

I want to prevent dragging a component into a specific container node. Is there a way to do this?

1. In a future release, we plan to add the ability to limit Drag'n'Drop with a custom function, example:

    children: nodeArray
      .withInsertRestriction((_, child) => {
        return child.model.type === RsWizardStepComponentType
      }),

2. The context is that I have a render form schema with onFormSchemaChange, and I want to implement some logic to update the schema and then render it back to the form. However, there is a problem: when I use setState(newFormSchema), the form updates, but all components inside the form builder unmount and remount, causing a flickering effect in the layout.
   Is there any other way to update formSchema without triggering the unmounting of all components inside FormView?

This is because onFormSchemaChange is called twice, first creating an empty form, then calling the form load via getForm. Try it like this:

const App = () => {
  const [form, setForm] = useState<ComponentStore[]>([
    {
      key: 'Header',
      type: 'RsContainer',
      props: {
        dragable: {value: false},
      },
    },
    {
      key: 'Body',
      type: 'RsContainer',
      props: {},
    },
    {
      key: 'Footer',
      type: 'RsContainer',
      props: {},
    },
  ])

  const schemaChangeCount = useRef(0)

  const getForm = useCallback(() => {
    console.info('getForm', JSON.stringify(form))
    return JSON.stringify({
      version: '1',
      form: {
        key: 'Screen',
        type: 'Screen',
        props: {
          value: {value: 1},
        },
        children: form,
      },
      localization: {},
      languages: [
        {
          code: 'en',
          dialect: 'US',
          name: 'English',
          description: 'American English',
          bidi: 'ltr',
        },
      ],
      defaultLanguage: 'en-US',
    })
  }, [form])

  const onFormSchemaChange = useCallback((schema: string) => {
    const result = JSON.parse(schema) as PersistedForm

    if (typeof result.form.children === 'undefined') {
      return
    }

    if (JSON.stringify(result.form.children) !== JSON.stringify(form)) {

      console.info('result.form.children', JSON.stringify(result.form.children))
      console.info('form', JSON.stringify(form))

      // example update neuForm logic
      setForm([
        {
          key: 'Header',
          type: 'RsContainer',
          props: {
            dragable: {
              value: false,
            }
          },
        },
      ])
    }
  }, [form])

  return (
    <div className="form-builder-container">
      <FormBuilder
        view={view}
        onFormSchemaChange={onFormSchemaChange}
        getForm={getForm}
      />
    </div>
  )
}

[tuthanhoancanh012]

Thank you so much. It work for me.
Another question. When I switch to preview mode, all my custom components are unmounted and remounted. Is there a way to prevent this?

const MyModule =()=>{
  // The component is mounted and unmounted when switching to preview mode
  useEffect(()=>{
    console.log("mount");
    return ()=>{
      console.log("unmount");
    }
  },[])
  return <div></div>
}
export const RFBModule = define(MyModule, 'MyModule')
  .name('Module')
  .props({
    value: object.valued.default({}),
  })
  .icon(() => <ModuleIcon width={16} height={16})/>

[tuthanhoancanh012]

This is because onFormSchemaChange is called twice, first creating an empty form, then calling the form load via getForm. Try it like this:

Sorry, I ran your code again, but whenever the form changes, my myCustomComponent always mounts and unmounts. I expected it to only re-render instead of remounting the entire component.

[optimajet]

Sorry, I ran your code again, but whenever the form changes, my myCustomComponent always mounts and unmounts. I expected it to only re-render instead of remounting the entire component.

Mounting and unmounting when switching between view and design modes is expected behavior. The form is also re-rendered in its entirety when changing the JSON of the form.

[tuthanhoancanh012]

Thank you so much for your information.

If possible, we should update and only re-render the component instead of unmounting and remounting the entire child-defined component. This is because I have some custom components that work with an API to fetch image URLs and then render the images on the screen. When I change the schema or switch to preview mode, the component unmounts, causing all previously set up images to refetch and unmount, leading to a flickering effect on the UI.