Add docs for initializeOnMount

Author: rvsia

packages/react-renderer-demo/src/app/pages/renderer/initialize-mount.md

@@ -0,0 +1,47 @@
+import Grid from '@material-ui/core/Grid'
+import RouterLink from 'next/link';
+import Link from '@material-ui/core/Link';
+import RawComponent from '@docs/raw-component';
+
+import ListOfContents from '../../src/helpers/list-of-contents';
+
+<Grid container item>
+<Grid item xs={12} md={10}>
+
+# Initialize On Mount
+
+Data Driven Forms provides a way how you can easily initialized a field when the field is mounted (re-mounted).
+
+Just pass a `initializeOnMount` prop and set it to `true`.
+
+The field will use the `initialValue` set in the schema (<RouterLink href="/renderer/component-api#formgroupwrappedcomponents"><Link>initialValue</Link></RouterLink>) or in the renderer (<RouterLink href="/renderer/renderer-api#optionalprops"><Link>initialValues</Link></RouterLink>).
+
+`initialValue` has higher priority than a value from `initialValues`.
+
+## Example
+
+
+```jsx
+{
+  component: componentTypes.TEXT_FIELD,
+  name: 'name',
+  initializeOnMount: true,
+  initialValue: 'this value will be set'
+}
+```
+
+## When to use it?
+
+This feature comes handy if you need change a value when an user traverses a form, which shows and hides fields, and the value is not set by the user. Very useful case is used it wizard forms, where you can set different value for the same input according the way the user went in the wizard form by using this option combined with <RouterLink href="/renderer/component-api#commonpropsforallformfields"><Link>hideField</Link></RouterLink> prop.
+
+<RawComponent source="initialize-mount" />
+
+## Clear the value
+
+If you need clear the value after unmounting, you can do it by using <RouterLink href="/renderer/unmounting"><Link>clearOnUnmount</Link></RouterLink>.
+
+</Grid>
+<Grid item xs={false} md={2}>
+  <ListOfContents file="renderer/initialize-mount" />
+</Grid>
+</Grid>

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

@@ -22,6 +22,9 @@ export const docs = [{
 }, {
   component: 'unmounting',
   linkText: 'Clear On Unmount',
+}, {
+  component: 'initialize-mount',
+  linkText: 'Initialize On Mount',
 }, {
   component: 'validators',
   linkText: 'Validators',

packages/react-renderer-demo/src/app/src/doc-components/initialize-mount.js

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
+import { layoutMapper, formFieldsMapper } from '@data-driven-forms/pf4-component-mapper';
+import { Title } from '@patternfly/react-core';
+
+const schema = {
+  fields: [{
+    component: componentTypes.WIZARD,
+    name: 'wizard',
+    fields: [
+      {
+        title: 'Choose your way',
+        name: 'step-1',
+        stepKey: 1,
+        nextStep: {
+          when: 'selection',
+          stepMapper: {
+            'way-1': 'way-1',
+            'way-2': 'way-2',
+          },
+        },
+        fields: [
+          {
+            component: componentTypes.SELECT,
+            name: 'selection',
+            label: 'Select your way',
+            isRequired: true,
+            options: [
+              { label: 'Please choose your way' },
+              { value: 'way-1', label: 'way-1' },
+              { value: 'way-2', label: 'way-2' },
+            ],
+            validate: [{ type: 'required-validator' }],
+          },
+        ],
+      },
+      {
+        title: 'Way 1',
+        stepKey: 'way-1',
+        fields: [
+          {
+            component: componentTypes.TEXT_FIELD,
+            initializeOnMount: true,
+            hideField: true,
+            name: 'chosen-way',
+            initialValue: 'User chose the first way',
+          },
+        ],
+      },
+      {
+        title: 'Way 2',
+        stepKey: 'way-2',
+        fields: [
+          {
+            component: componentTypes.TEXT_FIELD,
+            initializeOnMount: true,
+            hideField: true,
+            name: 'chosen-way',
+            initialValue: 'User chose the second way',
+          },
+        ],
+      },
+    ]},
+  ],
+};
+
+const InitializeOnMountWizardExample = () => {
+  const [ values, setValues ] = useState({});
+  return (
+    <div className="pf4">
+      <FormRenderer
+        layoutMapper={ layoutMapper }
+        formFieldsMapper={ formFieldsMapper }
+        schema={ schema }
+        onSubmit={ console.log }
+        onStateUpdate={ ({ values }) => setValues(values) }
+        showFormControls={ false }
+      />
+      <div style={{ marginTop: 16 }}>
+        <Title size="md">Form values</Title>
+        <pre>
+          { JSON.stringify(values, null, 2) }
+        </pre>
+      </div>
+    </div>
+  );};
+
+export default InitializeOnMountWizardExample;