Add documentation page for resolve props

Author: rvsia

packages/react-renderer-demo/src/components/navigation/schemas/schema.schema.js

@@ -28,6 +28,10 @@ const schemaNav = [
     component: 'constants',
     linkText: 'Constants'
   },
+  {
+    component: 'resolve-props',
+    linkText: 'Resolve props'
+  },
   {
     subHeader: true,
     title: 'Validation',

packages/react-renderer-demo/src/examples/components/resolve-props.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
+import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
+
+import TextField from '@data-driven-forms/mui-component-mapper/dist/cjs/text-field';
+import FormTemplate from '@data-driven-forms/mui-component-mapper/dist/cjs/form-template';
+
+const schema = {
+  fields: [
+    {
+      component: componentTypes.TEXT_FIELD,
+      name: 'name',
+      label: 'Validate me',
+      isRequired: true,
+      validate: [{ type: 'required' }],
+      helperText: 'This field will indicate successful validation after onBlur event',
+      resolveProps: (props, { meta, input }, formOptions) => {
+        if (meta.valid && meta.touched) {
+          return {
+            helperText: 'Validated',
+            style: {
+              background: 'greenyellow'
+            }
+          };
+        }
+
+        return {};
+      }
+    }
+  ]
+};
+
+const componentMapper = {
+  [componentTypes.TEXT_FIELD]: TextField
+};
+
+const ResolveProps = () => <FormRenderer FormTemplate={FormTemplate} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />;
+
+export default ResolveProps;

packages/react-renderer-demo/src/pages/schema/introduction.md

@@ -31,7 +31,8 @@ Other attribues, such as title or description, can be used in [form templates](/
     dataType: 'string',
     hideField: true,
     initializeOnMount: true,
-    initialValue: 'default-login'
+    initialValue: 'default-login',
+    resolveProps: (props) => ({ label: props.label || 'default label' }),
     validate: [ ... ],
     // + component specific attributes
     ...componentSpecificAttributes
@@ -155,6 +156,16 @@ Sets an initial value of the field. Read more [here](https://final-form.org/docs
 
 ---
 
+### resolveProps
+
+*function (props, {meta, input}, formOptions) => props*
+
+**Only applicable for fields connected to the form state.**
+
+A function allowing to compute field properties from the current state of the field. Read more [here](/schema/resolve-props).
+
+---
+
 ### validate
 
 *array*

packages/react-renderer-demo/src/pages/schema/resolve-props.md

@@ -0,0 +1,73 @@
+import DocPage from '@docs/doc-page';
+import InputMeta from '../input-meta.md';
+import CodeExample from '@docs/code-example';
+
+<DocPage>
+
+# Resolve props
+
+*function (props, {meta, input}, formOptions) => props*
+
+**Only applicable for fields connected to the form state.**
+
+A function allowing to compute field properties from the current state of the field.
+
+## Schema
+
+```jsx
+const schema = {
+    fields: [{
+        component: 'text-field',
+        resolveProps: (props, {meta, input}, formOptions) => ({ helperText: input.value ? 'You set a value' : 'No value' })
+    }]
+}
+```
+
+## Arguments
+
+### Props
+
+All field props passed in the schema.
+
+### Meta and input
+
+<InputMeta />
+
+### FormOptions
+
+Object containing access to the form state. Read more [here](/hooks/use-form-api).
+
+## Rules
+
+I. `resolveProps` cannot return `actions`. You can access `actions`'s code in the `resolveProps` prop if you need it.
+
+II. Do not use `async` functions to get the props.
+
+III. Do not trigger any side effects, as it could introduce bugs.
+
+IV. `resolveProps` are merged together with following priority: `actions.resolveProps` (highest) > `field.resolveProps` > `mapper.resolveProps` (lowest)
+
+## Global resolveProps
+
+You can modify behavior for all components of the same type in your `componentMapper` via [global component props](/mappers/global-component-props).
+
+```jsx
+const componentMapper = {
+    'text-field': {
+        component: TextField,
+        resolveProps: () => { ... }
+    }
+}
+```
+
+## Change props according to state of other components
+
+You can get states of all other fields in the form via functions from `formOptions`. Don't forget to set the right [subscription](/components/renderer#optionalprops) to trigger `resolveProps` functions from changing other fields.
+
+## Example
+
+Following example shows how can be a behavior of components changed using `resolveProps`. In this example, the component will have different color and helper text after it is validated.
+
+<CodeExample mode="preview" source="components/resolve-props" />
+
+</DocPage>