Add action mapper documentation

Author: rvsia

packages/react-renderer-demo/src/app/pages/renderer/action-mapper.md

@@ -0,0 +1,77 @@
+import Grid from '@material-ui/core/Grid'
+import RouterLink from 'next/link';
+import Link from '@material-ui/core/Link';
+import ListOfContents from '../../src/helpers/list-of-contents';
+
+<Grid container item>
+<Grid item xs={12} md={10}>
+
+# Action Mapper
+
+The <RouterLink href="/renderer/renderer-api#optionalprops"><Link href="/renderer/renderer-api#optionalprops">ActionMapper</Link></RouterLink> allows you to map schema props to functions. This is useful when your schema is not written in JavaScript and you cannot use function inside of it, especially for schemas stored in databases.
+
+## Mapper
+
+```jsx
+{
+    [actionName]: (...args) => {}
+}
+```
+
+## Schema
+
+```jsx
+{
+    component: component,
+    name: name,
+    actions: {
+        [props]: [actionName, ...args]
+    }
+}
+```
+
+Do not forget to keep order of args or use object with keys as named arguments.
+
+# Example
+
+So, let's say you need to translate labels of fields using your translate function `translate(id)` and the schema has no access to use JavaScript code.
+
+Firstly, define a action mapper object.
+
+```jsx
+const actionMapper = {
+    translateLabel: (id) => translate(id)
+}
+```
+
+Add this object as a prop to FormRenderer.
+
+```jsx
+<FormRenderer
+  {...props}
+  schema={schema}
+  actionMapper={actionMapper}
+/>
+```
+
+Then, in your schema you can map `translateLabel` action to a prop:
+
+```js
+{
+    "fields": [
+        {
+            "component": "text-field",
+            "name": "translate-me",
+            "actions": {
+                "label": ["translateLabel", "translate_label_id"]
+            }
+        }
+    ]
+}
+```
+
+</Grid>
+<Grid item xs={false} md={2}>
+  <ListOfContents file="renderer/action-mapper" />
+</Grid>
+</Grid>

packages/react-renderer-demo/src/app/pages/renderer/renderer-api.md

@@ -17,14 +17,15 @@ Form Renderer provides a lot of customization via props.
 |Prop|Type|Description|
 |----|:--:|----------:|
 |<RouterLink href="/renderer/component-mapping"><Link href="/renderer/component-mapping">componentMapper</Link></RouterLink>|object|Defines types of form field components. Field components can change the state of the form.|
-|<RouterLink href="/renderer/component-mapping"><Link href="/renderer/component-mapping">FormTemplate</Link></RouterLink>|Component|Components which defines a template of the form. This component receives two props from the renderer: `formFields` and `schema`. `formFields` is the content of the form. You should wrap this content into your `<form>` component and add form buttons.|
+|<RouterLink href="/renderer/form-template"><Link href="/renderer/component-mapping">FormTemplate</Link></RouterLink>|Component|Components which defines a template of the form. This component receives two props from the renderer: `formFields` and `schema`. `formFields` is the content of the form. You should wrap this content into your `<form>` component and add form buttons.|
 |onSubmit|func|A submit callback which receives two arguments: `values` and `formApi`.|
 |schema|object|A schema which defines structure of the form.|
 
 ## Optional props
 
 |Prop|Type|Description|Default|
 |----|:--:|----------:|------:|
+|<RouterLink href="/renderer/action-mapper"><Link href="/renderer/action-mapper">actionMapper</Link></RouterLink>|object|Action mapper allows to map props to functions.||
 |<RouterLink href="/renderer/unmounting"><Link href="/renderer/unmounting">clearOnUnmount</Link></RouterLink>|bool|Will clear values of unmounted components. You can also set this to specific component in the form schema.|false|
 |<RouterLink href="/renderer/cleared-value"><Link>clearedValue</Link></RouterLink>|any|Value that will be set to field with **initialValue** after deleting it. Useful for forms while editing.|undefined|
 |onReset|func|A reset callback. You don't need to manually clear the form values!||

packages/react-renderer-demo/src/app/src/components/navigation/documentation-pages.js

@@ -23,6 +23,10 @@ export const docs = [
     component: 'component-api',
     linkText: 'Components API'
   },
+  {
+    component: 'form-template',
+    linkText: 'Form Template'
+  },
   {
     component: 'condition',
     linkText: 'Conditional fields'
@@ -52,11 +56,11 @@ export const docs = [
     linkText: 'Custom components'
   },
   {
-    component: 'field-array',
-    linkText: 'FieldArray Provider'
+    component: 'action-mapper',
+    linkText: 'Action mapper'
   },
   {
-    component: 'form-template',
-    linkText: 'Form Template'
+    component: 'field-array',
+    linkText: 'FieldArray Provider'
   }
 ];