ReviewAnnotationForm

Type: React component

How to get ReviewAnnotationForm?

JavaScript

import ReviewAnnotationForm from 'fontoxml-feedback/src/ReviewAnnotationForm.jsx'

Useful if you intend to render a form with a submit and cancel/reset button. This is a helper for when using FDS based form fields for your custom CardContentComponent.

It standardizes the moment feedback is (not) shown to only appear after an initial submit has been made. By default FDS form(-field)s show their feedback as soon the input becomes invalid, including if the input is invalid during the first initial render. For fontoxml-feedback we wanted to show the feedback only after the initial submit for the add and edit forms displayed within the cards. This is a helper to do that more easily consistently.

Props

  1. children

    (Required)

    Type: Function

    A render function that should return the contents of the form, usually FormRow elements (or other layout containers) with FDS form field components in them.

    This function is called with a parameter object with the following properties:

    • isSubmitDisabled: A boolean that indicates the submit button should be disabled (because the form has visible feedback that needs to be processed/fixed by the user),

    • onFieldChange: A callback that should be called whenever an (FDS) form field changes, you need to provide an object with { name, value, feedback } keys,

    • onFocusableRef: A callback that should be passed to the onRef/ref property of the first field that you want to have focused when the form is mounted,

    • onSubmit: A callback that should be called whenever the form is submitted, this automatically allows feedback to be shown by the FDS form fields.

    • valueByName: The current values in the form for all fields. Useful if you want to change something based on the value of a field (like the label of a FormRow).

  2. initialValueByName

    (Optional)

    Type: Object<String, FDS~Value>

    Form values keyed by name (corresponds with the "name" prop on form components).

    Default value

  3. onSubmit

    (Required)

    Type: Function

    The callback to actually submit the form, this is called automatically only if the form does not have any feedback. Usually coupled to something like onReviewAnnotationFormSubmit or onReplyFormSubmit.

  4. onReset

    (Required)

    Default value