feat(app-headless-cms): create bind component on field config change

[Pavel910]

Changes

This PR improves the useBind hook in the Headless CMS, and ensures that the Bind component is recreated in case field definition changes at runtime. This allows use cases like conditional help texts, conditional validation, altering validation rules depending on related form fields, etc.

Example

import React from "react";
import { Admin } from "@webiny/app-serverless-cms";
import { Cognito } from "@webiny/app-admin-users-cognito";
import { useParentField, ContentEntryEditorConfig } from "@webiny/app-headless-cms";
import "./App.scss";

const { FieldElement } = ContentEntryEditorConfig;

const lowValidator = [
    {
        name: "lte",
        message: "Value is too high! Enter value lower than 100.",
        settings: {
            value: 99
        }
    }
];

const mediumValidator = [
    {
        name: "gte",
        message: "Value is too low! Enter value between 100 and 500.",
        settings: {
            value: 100
        }
    },
    {
        name: "lte",
        message: "Value is too high! Enter value between 100 and 500.",
        settings: {
            value: 500
        }
    }
];

const highValidator = [
    {
        name: "gte",
        message: "Value is too low! Enter value above 500.",
        settings: {
            value: 500
        }
    }
];

const ConditionalRendering = FieldElement.createDecorator(Original => {
    return function ConditionalRender(props) {
        const parent = useParentField();

        if (!parent || !parent.value) {
            return <Original {...props} />;
        }

        const field = props.field;
        if (field.fieldId === "price") {
            if (parent.value["pricingClass"] === "low") {
                return (
                    <Original
                        {...props}
                        field={{
                            ...field,
                            helpText: "Enter value up to 100.",
                            validation: lowValidator
                        }}
                    />
                );
            }

            if (parent.value["pricingClass"] === "medium") {
                return (
                    <Original
                        {...props}
                        field={{
                            ...field,
                            helpText: "Enter value between 100 and 500.",
                            validation: mediumValidator
                        }}
                    />
                );
            }

            if (parent.value["pricingClass"] === "high") {
                return (
                    <Original
                        {...props}
                        field={{
                            ...field,
                            helpText: "Enter value above 500.",
                            validation: highValidator
                        }}
                    />
                );
            }
        }

        return <Original {...props} />;
    };
});

export const App = () => {
    return (
        <Admin>
            <Cognito />
            <ContentEntryEditorConfig>
                <ConditionalRendering modelIds={["conditionalValidation"]} />
            </ContentEntryEditorConfig>
        </Admin>
    );
};

How Has This Been Tested?

Manually.