Added docs for deleted value.

Author: Hyperkid123

packages/react-renderer-demo/src/app/pages/renderer/deleted-value.md

@@ -0,0 +1,20 @@
+import Grid from '@material-ui/core/Grid'
+import RawComponent from '@docs/raw-component';
+
+import ListOfContents from '../../src/helpers/list-of-contents';
+
+<Grid container item>
+<Grid item xs={12} md={10}>
+
+# Deleted value
+
+If you required a specific value for a field which had **initialValue** to set it to some specific value. For instance if you have a form which edits some entity and you need to delete some attribute, APIs usually require the value to be set to `null` to register the change.
+
+
+<RawComponent source="deleted-value" />
+
+</Grid>
+<Grid item xs={false} md={2}>
+  <ListOfContents file="renderer/deleted-value" />
+</Grid>
+</Grid>

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

@@ -31,6 +31,7 @@ Form Renderer provides a lot of customization via props.
 |<RouterLink href="/renderer/form-controls"><Link>renderFormButtons</Link></RouterLink>|one of `[node, element, func]`|You can provide your own form buttons component. This component will receive all needed props.||
 |<RouterLink href="/renderer/unmounting"><Link>clearOnUnmount</Link></RouterLink>|bool|Will clear values of unmounted components. You can also set this to specific component in the form schema.|false|
 |canReset|bool|Show/hide reset button.|false|
+|<RouterLink href="/renderer/deleted-value"><Link>deletedValue</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!||
 |onCancel|func|A cancel callback, which receives `values` as the first argument.||
 |onStateUpdate|func|A function which will be called with every form update, i.e. `({ values }) => setValues(values)`||

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

@@ -31,6 +31,9 @@ export const docs = [{
 }, {
   component: 'data-types',
   linkText: 'Data types',
+}, {
+  component: 'deleted-value',
+  linkText: 'Empty field value',
 }, {
   component: 'field-provider',
   linkText: 'Custom components',

packages/react-renderer-demo/src/app/src/doc-components/deleted-value.js

@@ -0,0 +1,42 @@
+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.TEXT_FIELD,
+    name: 'field-with-initial-value',
+    label: 'Will be set to null when you delete value from input',
+  }, {
+    component: componentTypes.TEXT_FIELD,
+    name: 'field-withouth-initial-value',
+    label: 'Value will be undefined when field is empty',
+  }],
+};
+
+const DataTypesExample = () => {
+  const [ values, setValues ] = useState({});
+  return (
+    <div className="pf4">
+      <FormRenderer
+        initialValues={{
+          'field-with-initial-value': 'Delete me!',
+        }}
+        deletedValue={ null }
+        layoutMapper={ layoutMapper }
+        formFieldsMapper={ formFieldsMapper }
+        schema={ schema }
+        onSubmit={ console.log }
+        onStateUpdate={ ({ values }) => setValues(values) }
+      />
+      <div style={{ marginTop: 16 }}>
+        <Title size="md">Form values</Title>
+        <pre>
+          { JSON.stringify(values, null, 2) }
+        </pre>
+      </div>
+    </div>
+  );};
+
+export default DataTypesExample;