Merge pull request #377 from data-driven-forms/data-conversion-of-initial-value

fix(renderer): convert initialValue dataType

Author: rvsia

packages/react-form-renderer/src/form-renderer/convert-initial-value.js

@@ -0,0 +1,18 @@
+import { convertType } from './enhanced-on-change';
+
+const convertInitialValue = (initialValue, dataType) => {
+  if (initialValue === undefined || !dataType) {
+    return initialValue;
+  }
+
+  if (Array.isArray(initialValue)) {
+    return initialValue.map(value => typeof value === 'object' ? ({
+      ...value,
+      value: Object.prototype.hasOwnProperty.call(value, 'value') ? convertType(dataType, value.value) : value,
+    }) : convertType(dataType, value));
+  }
+
+  return convertType(dataType, initialValue);
+};
+
+export default convertInitialValue;

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

@@ -34,7 +34,7 @@ const castToBoolean = value => {
  * @param {FieldDataTypes} dataType type for value conversion
  * @param {Any} value value to be converted
  */
-const convertType = (dataType, value) => ({
+export const convertType = (dataType, value) => ({
   [dataTypes.INTEGER]: !isNaN(Number(value)) && parseInt(value),
   [dataTypes.FLOAT]: !isNaN(Number(value)) && parseFloat(value),
   [dataTypes.NUMBER]: Number(value),

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

@@ -2,22 +2,30 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormSpy } from 'react-final-form';
 
-import { components } from '../constants';
+import { components, dataTypes } from '../constants';
 import FieldProvider from './field-provider';
 import { FieldArray } from 'react-final-form-arrays';
 import { shouldWrapInField, composeValidators } from './helpers';
+import convertInitialValue from './convert-initial-value';
 
 const shouldAssignFormOptions = componentType => components.FIELD_ARRAY === componentType;
 const assignSpecialType = componentType => [ components.CHECKBOX, components.RADIO ].includes(componentType) ? componentType : undefined;
 
 const FieldWrapper = ({ componentType, validate, component, ...rest }) => {
+  const props = rest;
+
+  if (Object.prototype.hasOwnProperty.call(rest, 'initialValue') && Object.prototype.hasOwnProperty.call(rest, 'dataType')) {
+    props.initialValue = convertInitialValue(rest.initialValue, rest.dataType);
+  }
+
   const componentProps = {
     type: assignSpecialType(componentType),
     FieldProvider,
     FieldArrayProvider: FieldArray,
-    ...rest,
+    ...props,
     component,
   };
+
   if (shouldAssignFormOptions(componentType)) {
     componentProps.arrayValidator = (value = []) => {
       if (!Array.isArray(value)) {
@@ -39,17 +47,25 @@ const FieldWrapper = ({ componentType, validate, component, ...rest }) => {
   const Component = component;
   return shouldWrapInField(componentType)
     ? <FieldProvider { ...componentProps } />
-    : <Component validate={ composeValidators(validate) } { ...rest } FieldProvider={ FieldProvider } FormSpyProvider={ FormSpy } />;
+    : (
+      <Component
+        validate={ composeValidators(validate) }
+        { ...props }
+        FieldProvider={ FieldProvider }
+        FormSpyProvider={ FormSpy }
+      />);
 };
 
 FieldWrapper.propTypes = {
   componentType: PropTypes.string,
   validate: PropTypes.arrayOf(PropTypes.func),
+  initialValue: PropTypes.any,
   component: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.func,
     PropTypes.element,
   ]).isRequired,
+  dataType: PropTypes.oneOf(dataTypes),
 };
 
 export default FieldWrapper;

packages/react-form-renderer/src/tests/form-renderer/__snapshots__/form-renderer.test.js.snap

@@ -81,7 +81,9 @@ exports[`<FormRenderer /> should render form from schema 1`] = `
     <Component
       onSubmit={[Function]}
     >
-      <form>
+      <form
+        onSubmit={[Function]}
+      >
         <FormConditionWrapper>
           <FormFieldHideWrapper
             hideField={false}
@@ -897,7 +899,9 @@ exports[`<FormRenderer /> should render hidden field 1`] = `
     <Component
       onSubmit={[Function]}
     >
-      <form>
+      <form
+        onSubmit={[Function]}
+      >
         <FormConditionWrapper>
           <FormFieldHideWrapper
             hideField={false}

packages/react-form-renderer/src/tests/form-renderer/form-renderer.test.js

@@ -31,7 +31,7 @@ describe('<FormRenderer />', () => {
     layoutMapper = {
       [layoutComponents.BUTTON_GROUP]: ({ children }) => <div>{ children }</div>,
       [layoutComponents.BUTTON]: ({ label, bsStyle, ...rest }) => <button { ...rest }>{ label }</button>,
-      [layoutComponents.FORM_WRAPPER]: ({ children }) => <form>{ children }</form>,
+      [layoutComponents.FORM_WRAPPER]: ({ children, ...props }) => <form { ...props }>{ children }</form>,
       [layoutComponents.TITLE]: ({ children }) => <div>{ children }</div>,
       [layoutComponents.DESCRIPTION]: ({ children }) => <div>{ children }</div>,
     };
@@ -150,5 +150,67 @@ describe('<FormRenderer />', () => {
     />);
     expect(toJson(wrapper)).toMatchSnapshot();
   });
+
+  describe('Initial value data types', () => {
+    it('should convert string to integer', () => {
+      const onSubmit = jest.fn();
+      const schema = {
+        fields: [{
+          component: components.TEXT_FIELD,
+          name: 'initial-convert',
+          initialValue: '5',
+          dataType: 'integer',
+        }],
+      };
+      const wrapper = mount(<FormRenderer
+        { ...initialProps }
+        schema={ schema }
+        onSubmit={ values => onSubmit(values) }
+        renderFormButtons={ FormControls }
+      />);
+      wrapper.find('form').simulate('submit');
+      expect(onSubmit).toHaveBeenCalledWith({ 'initial-convert': 5 });
+    });
+
+    it('should convert individual values in array of literals as initial value', () => {
+      const onSubmit = jest.fn();
+      const schema = {
+        fields: [{
+          component: components.TEXT_FIELD,
+          name: 'initial-convert',
+          initialValue: [ '5', 3, '11', '999' ],
+          dataType: 'integer',
+        }],
+      };
+      const wrapper = mount(<FormRenderer
+        { ...initialProps }
+        schema={ schema }
+        onSubmit={ values => onSubmit(values) }
+        renderFormButtons={ FormControls }
+      />);
+      wrapper.find('form').simulate('submit');
+      expect(onSubmit).toHaveBeenCalledWith({ 'initial-convert': [ 5, 3, 11, 999 ]});
+    });
+
+    it('should convert individual values in array of objects as initial value', () => {
+      const onSubmit = jest.fn();
+      const schema = {
+        fields: [{
+          component: components.SELECT,
+          name: 'initial-convert',
+          initialValue: [{ value: '5' }, { value: 3 }, { value: '11' }, { value: '999' }],
+          dataType: 'integer',
+        }],
+      };
+      const wrapper = mount(<FormRenderer
+        { ...initialProps }
+        schema={ schema }
+        onSubmit={ values => onSubmit(values) }
+        renderFormButtons={ FormControls }
+      />);
+      wrapper.find('form').simulate('submit');
+      expect(onSubmit).toHaveBeenCalledWith({ 'initial-convert': [{ value: 5 }, { value: 3 }, { value: 11 }, { value: 999 }]});
+    });
+  });
 });
 

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

@@ -52,7 +52,9 @@ export const pattern = memoize(({ pattern, message, flags } = {}) => {
 
     if (Array.isArray(value)) {
       const error = value.find(item => {
-        const parsedValue = typeof item === 'string' ? item : item.toString();
+        const parsedValue = typeof item === 'object' && Object.prototype.hasOwnProperty.call(item, 'value')
+          ? item.value.toString()
+          : typeof item === 'string' ? item : item.toString();
         return pattern && !parsedValue.match(verifiedPattern);
       });
       const msg = prepareMsg(message, 'pattern').defaultMessage;