feat(renderer): added deleted value prop

Author: Hyperkid123

packages/pf4-component-mapper/src/tests/field-array/__snapshots__/field-array.test.js.snap

@@ -136,6 +136,7 @@ exports[`FieldArray should render array field correctly 1`] = `
                     "change": [Function],
                     "clearOnUnmount": false,
                     "concat": [Function],
+                    "deletedValue": undefined,
                     "destroyOnUnregister": false,
                     "focus": [Function],
                     "getFieldState": [Function],
@@ -197,6 +198,7 @@ exports[`FieldArray should render array field correctly 1`] = `
                       "change": [Function],
                       "clearOnUnmount": false,
                       "concat": [Function],
+                      "deletedValue": undefined,
                       "destroyOnUnregister": false,
                       "focus": [Function],
                       "getFieldState": [Function],
@@ -252,6 +254,7 @@ exports[`FieldArray should render array field correctly 1`] = `
                         "change": [Function],
                         "clearOnUnmount": false,
                         "concat": [Function],
+                        "deletedValue": undefined,
                         "destroyOnUnregister": false,
                         "focus": [Function],
                         "getFieldState": [Function],
@@ -308,6 +311,7 @@ exports[`FieldArray should render array field correctly 1`] = `
                           "change": [Function],
                           "clearOnUnmount": false,
                           "concat": [Function],
+                          "deletedValue": undefined,
                           "destroyOnUnregister": false,
                           "focus": [Function],
                           "getFieldState": [Function],
@@ -401,6 +405,7 @@ exports[`FieldArray should render array field correctly 1`] = `
                             "change": [Function],
                             "clearOnUnmount": false,
                             "concat": [Function],
+                            "deletedValue": undefined,
                             "destroyOnUnregister": false,
                             "focus": [Function],
                             "getFieldState": [Function],

packages/react-form-renderer/demo/index.js

@@ -4,9 +4,7 @@ import ReactDOM from "react-dom";
 import FormRenderer from '../src';
 import layoutMapper from './layout-mapper';
 import formFieldsMapper from './form-fields-mapper';
-import miqSchema from '../src/demo-schemas/miq-schemas/input';
 import sandboxSchema from './sandbox'
-import { conditionalSchema, widgetSchema, uiWidgetSchema, arraySchema, uiArraySchema } from '../src/demo-schemas/mozilla-schemas';
 
 const submitTest = (...args) => new Promise(resolve => {
     setTimeout(() => {
@@ -26,18 +24,20 @@ const FormButtons = props => {
 const App = () => (
     <div style={{ padding: 20 }}>
         <FormRenderer
+            initialValues={{
+                text_box_1: 'hue'
+            }}
+            deletedValue={null}
             layoutMapper={layoutMapper}
             formFieldsMapper={formFieldsMapper}
-            onSubmit={submitTest}
+            onSubmit={console.log}
             onCancel={console.log}
             canReset
             onReset={() => console.log('i am resseting')}
             schemaType="default"
             schema={sandboxSchema}
-            uiSchema={uiArraySchema}
             buttonOrder={['cancel', 'reset', 'submit']}
             buttonClassName="Foo"
-            onStateUpdate={console.log}
             renderFormButtons={FormButtons}
         />
     </div>

packages/react-form-renderer/src/form-renderer/enhanced-on-change.js

@@ -1,3 +1,4 @@
+import isEmpty from 'lodash/isEmpty';
 import { dataTypes } from '../constants';
 
 /**
@@ -40,19 +41,45 @@ const convertType = (dataType, value) => ({
   [dataTypes.BOOLEAN]: castToBoolean(value),
 })[dataType] || value;
 
+/**
+ * Checks the value and returns undefined if its empty. Converst epmtry strings, arrays and objects.
+ * If value is empty its overriden to undefined for further processing.
+ * @param {Any} value Any JS variable to be check if is empty
+ */
+const checkEmpty = value => {
+  if (typeof value === 'number') {
+    return value;
+  }
+
+  if (typeof value === 'string' && value.length > 0) {
+    return value;
+  }
+
+  if (!isEmpty(value)) {
+    return value;
+  }
+
+  return undefined;
+};
+
 /**
  * Casts input value into selected data type
  * @param {FieldDataTypes} dataType intended data type of output value
  * @param {Function} onChange original function to be modified
+ * @param {Any} initial initial value of field
  * @param {Any} value value to be type casted
  * @param  {...any} args rest of orininal function arguments
  */
-const enhancedOnChange = (dataType, onChange, value, ...args) => {
+const enhancedOnChange = (dataType, onChange, initial, deletedValue, value, ...args) => {
   const sanitizedValue = sanitizeValue(value);
-  return onChange(
-    Array.isArray(sanitizedValue)
-      ? sanitizedValue.map(item => convertType(dataType, sanitizeValue(item)))
-      : convertType(dataType, sanitizedValue),
-    ...args);};
+  const result = Array.isArray(sanitizedValue)
+    ? sanitizedValue.map(item => convertType(dataType, sanitizeValue(item)))
+    : convertType(dataType, sanitizedValue);
+  if (typeof checkEmpty(result) === 'undefined' && typeof initial !== 'undefined') {
+    return onChange(deletedValue, ...args);
+  }
+
+  return onChange(result, ...args);
+};
 
 export default enhancedOnChange;

packages/react-form-renderer/src/form-renderer/field-provider.js

@@ -28,7 +28,9 @@ class FieldProvider extends Component{
           { ...fieldsProps }
           input={{
             ...input,
-            onChange: (...args) => enhancedOnChange(dataType, onChange, ...args),
+            onChange: (...args) => {
+              enhancedOnChange(dataType, onChange, fieldsProps.meta.initial, this.props.formOptions.deletedValue, ...args);
+            },
           }}
         />
       ) } />;
@@ -39,7 +41,7 @@ class FieldProvider extends Component{
         ...fieldsProps,
         input: {
           ...input,
-          onChange: (...args) => enhancedOnChange(dataType, onChange, ...args),
+          onChange: (...args) => enhancedOnChange(dataType, onChange, fieldsProps.meta.initial, this.props.formOptions.deletedValue, ...args),
         },
       }) } />;
     }
@@ -51,7 +53,7 @@ class FieldProvider extends Component{
           Children.only(
             <ChildComponent
               { ...fieldsProps }
-              input={{ ...input, onChange: (...args) => enhancedOnChange(dataType, onChange, ...args)  }}
+              input={{ ...input, onChange: (...args) => enhancedOnChange(dataType, onChange, fieldsProps.meta.initial, this.props.formOptions.deletedValue, ...args)  }}
             />
           ) }
       </Field>
@@ -64,6 +66,7 @@ FieldProvider.propTypes = {
     clearOnUnmount: PropTypes.bool,
     change: PropTypes.func,
     getFieldState: PropTypes.func,
+    deletedValue: PropTypes.any,
   }),
   component: PropTypes.oneOfType(PropTypes.node, PropTypes.element, PropTypes.func),
   render: PropTypes.func,

packages/react-form-renderer/src/form-renderer/index.js

@@ -42,6 +42,7 @@ const FormRenderer = ({
   onStateUpdate,
   renderFormButtons,
   subscription,
+  deletedValue,
 }) => {
   const inputSchema = schemaMapper(schemaType)(schema, uiSchema);
   let schemaError;
@@ -80,6 +81,7 @@ const FormRenderer = ({
             onCancel,
             getState,
             valid,
+            deletedValue,
             submit,
             handleSubmit,
             reset,
@@ -139,6 +141,7 @@ FormRenderer.propTypes = {
   onStateUpdate: PropTypes.func,
   renderFormButtons: PropTypes.oneOfType([ PropTypes.node, PropTypes.element, PropTypes.func ]),
   subscription: PropTypes.shape({ [PropTypes.string]: PropTypes.bool }),
+  deletedValue: PropTypes.any,
 };
 
 FormRenderer.defaultProps = {