Migration guide to version 2

The release of version 2 brings many new features, that as we hope you will find useful and you will like them. Also, we took this release as an opportunity to fix mistakes we did during the initial development and to remove some obsolete stuff, that is no longer useful. Major themes are using of React hooks, so update your React before you will continue, and giving more freedom to you how to customize the form. There are also major enhancements bringing more features to schemas not stored in JavaScript, as the action mapper and validator mapper. Thank you for your understanding.

• All JSON schemas should remain almost the same

• formFieldsMapper was renamed to componentMapper
• Components can be imported separately to create only a subset of full component mapper

• Due to a typo, it was possible to use key treshold as an option in some validators, this option is now disabled. Use only threshold.

• layoutMapper removed - instead of it use FormTemplate

• All props related to form buttons are now removed, use them in your FormTemplate

  • showFormControls
  • buttonOrder
  • disableSubmit
  • buttonClassName
  • renderFormButtons
  • submitLabel
  • cancelLabel
  • resetLabel
  • canReset

• => All these props are now managed by mapper's form templates!

• FormTemplate receives these props:

  • formFields : form fields
  • schema : provides access to schema.title, schema.description and everything else

• Default templates (it is a function!):

import FormTemplate from '@data-driven-forms/pf4-component-mapper/form-template';

<FormRenderer {...} FormTemplate={props => <FormTemplate {...props} showFormControls={false} />

• Options - see removed props above

• layoutComponents constants have been removed. Please do not use them.

• formOptions as a prop was removed, instead of it use useFormApi hook or you can get formOptions from the rendererContext

import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';

const  Component  = (props) => {
    const  formOptions  =  useFormApi();
    ...
}

• formSpyProvider is no longer provided as a prop.
• Use direct import instead of it:

import FormSpy from '@data-driven-forms/react-form-renderer/form-spy';

• fieldArrayProvider is no longer provided as a prop.
• Use direct import instead of it:

import FieldArray from '@data-driven-forms/react-form-renderer/field-array';

• onStateUpdate prop is removed from the renderer, instead of it use debug (please see <https://final-form.org/docs/react-final-form/types/FormProps#debug&#62;)

<FormRenderer {...} debug={console.log} />

• In custom component, simulate this prop with using of formSpy

    import FormSpy from '@data-driven-forms/react-form-renderer/form-spy';

{onStateUpdate &&  <FormSpy  onChange={onStateUpdate} />}

• FieldProvider is no longer wrapping basic components and you cannot access it through props, instead of it use hook:

import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';

...

const { input, isDisabled, label, helperText, description, meta } =  useFieldApi(props);

• This hook accepts all props and returns them with input and meta included.
• Don't forget to pass a type, for special types as 'checkbox'

• There is no formFieldsMapper anymore, please use componentMapper

import componentMapper from '@data-driven-forms/pf4-component-mapper/component-mapper';

<FormRenderer {...} componentMapper={componentMapper} />

• Removed the "-field" affix from the constants values
• "select-field" -> "select"
• removed duplicate constants SELECT_COMPONENT etc.

• Failed async validator must now throw an error. Error must be a string! Thrown string will be shown as a validation message in form.
• Succesfully resolved promise with message is ignored.

• stepKey prop is replaced by name

• predictSteps prop is now removed, wizard always predicts steps

• use isMulti instead

• word "validator" is removed from all validator strings, constants
• i.e.: pattern-validator > pattern