Merge pull request #273 from data-driven-forms/deleted-value-prop

Cleared value prop

Author: rvsia

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

@@ -135,6 +135,7 @@ exports[`FieldArray should render array field correctly 1`] = `
                     "blur": [Function],
                     "change": [Function],
                     "clearOnUnmount": false,
+                    "clearedValue": undefined,
                     "concat": [Function],
                     "destroyOnUnregister": false,
                     "focus": [Function],
@@ -196,6 +197,7 @@ exports[`FieldArray should render array field correctly 1`] = `
                       "blur": [Function],
                       "change": [Function],
                       "clearOnUnmount": false,
+                      "clearedValue": undefined,
                       "concat": [Function],
                       "destroyOnUnregister": false,
                       "focus": [Function],
@@ -251,6 +253,7 @@ exports[`FieldArray should render array field correctly 1`] = `
                         "blur": [Function],
                         "change": [Function],
                         "clearOnUnmount": false,
+                        "clearedValue": undefined,
                         "concat": [Function],
                         "destroyOnUnregister": false,
                         "focus": [Function],
@@ -307,6 +310,7 @@ exports[`FieldArray should render array field correctly 1`] = `
                           "blur": [Function],
                           "change": [Function],
                           "clearOnUnmount": false,
+                          "clearedValue": undefined,
                           "concat": [Function],
                           "destroyOnUnregister": false,
                           "focus": [Function],
@@ -400,6 +404,7 @@ exports[`FieldArray should render array field correctly 1`] = `
                             "blur": [Function],
                             "change": [Function],
                             "clearOnUnmount": false,
+                            "clearedValue": undefined,
                             "concat": [Function],
                             "destroyOnUnregister": false,
                             "focus": [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,21 @@ const FormButtons = props => {
 const App = () => (
     <div style={{ padding: 20 }}>
         <FormRenderer
+            initialValues={{
+                text_box_1: 'hue',
+                text_box_3: 'initial'
+            }}
+            clearedValue={'bla'}
             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/demo/sandbox.js

@@ -36,6 +36,7 @@ const output = {
       label: 'Text Box 3',
       isRequired: true,
       component: components.TEXT_FIELD,
+      clearedValue: 'override',
       validate: [
         { type: validators.MIN_LENGTH, treshold: 12, message: 'bar' },
       ],

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,40 @@ 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 false;
+  }
+
+  if (typeof value === 'string' && value.length > 0) {
+    return false;
+  }
+
+  if (!isEmpty(value)) {
+    return false;
+  }
+
+  return true;
+};
+
 /**
  * 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} 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, clearedValue, dirty, ...rest }, 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 (checkEmpty(result) && typeof initial !== 'undefined') {
+    return onChange(clearedValue, ...args);
+  }
+
+  return onChange(result, ...args);
+};
 
 export default enhancedOnChange;

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

@@ -21,37 +21,58 @@ class FieldProvider extends Component{
 
   render(){
     const { clearOnUnmount, component, render, dataType, children, ...props } = this.props;
+    const fieldClearedValue = props.hasOwnProperty('clearedValue') ? props.clearedValue : props.formOptions.clearedValue;
+    const { clearedValue, ...fieldProps } = props;
     if (component) {
       const FieldComponent = component;
-      return <Field { ...props } render={ ({ input: { onChange, ...input }, ...fieldsProps }) => (
+      return <Field { ...fieldProps } render={ ({ input: { onChange, ...input }, ...fieldsProps }) => (
         <FieldComponent
           { ...fieldsProps }
           input={{
             ...input,
-            onChange: (...args) => enhancedOnChange(dataType, onChange, ...args),
+            onChange: (...args) => {
+              enhancedOnChange({
+                ...fieldsProps.meta,
+                dataType,
+                onChange,
+                clearedValue: fieldClearedValue,
+              }, ...args);
+            },
           }}
         />
       ) } />;
     }
 
     if (render) {
-      return <Field { ...props } render={ ({ input: { onChange, ...input }, ...fieldsProps }) => render({
+      return <Field { ...fieldProps } render={ ({ input: { onChange, ...input }, ...fieldsProps }) => render({
         ...fieldsProps,
         input: {
           ...input,
-          onChange: (...args) => enhancedOnChange(dataType, onChange, ...args),
+          onChange: (...args) =>
+            enhancedOnChange({
+              ...fieldsProps.meta,
+              dataType,
+              onChange,
+              clearedValue: fieldClearedValue,
+            }, ...args),
         },
       }) } />;
     }
 
     const ChildComponent = children;
     return (
-      <Field { ...props }>
+      <Field { ...fieldProps }>
         { ({ input: { onChange, ...input }, ...fieldsProps }) =>
           Children.only(
             <ChildComponent
               { ...fieldsProps }
-              input={{ ...input, onChange: (...args) => enhancedOnChange(dataType, onChange, ...args)  }}
+              input={{ ...input, onChange: (...args) =>
+                enhancedOnChange({
+                  ...fieldsProps.meta,
+                  dataType,
+                  onChange,
+                  clearedValue: fieldClearedValue,
+                }, ...args)  }}
             />
           ) }
       </Field>
@@ -64,6 +85,7 @@ FieldProvider.propTypes = {
     clearOnUnmount: PropTypes.bool,
     change: PropTypes.func,
     getFieldState: PropTypes.func,
+    clearedValue: 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,
+  clearedValue,
 }) => {
   const inputSchema = schemaMapper(schemaType)(schema, uiSchema);
   let schemaError;
@@ -80,6 +81,7 @@ const FormRenderer = ({
             onCancel,
             getState,
             valid,
+            clearedValue,
             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 }),
+  clearedValue: PropTypes.any,
 };
 
 FormRenderer.defaultProps = {