fix(renderer): convert initialValue dataType

Author: Hyperkid123

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

@@ -0,0 +1,22 @@
+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),

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

@@ -3,15 +3,23 @@ import PropTypes from 'prop-types';
 
 import componentTypes from '../components/component-types';
 import composeValidators from '../components/compose-validators';
+import convertInitialValue from './convert-initial-value';
 
 const shouldAssignFormOptions = (componentType) => componentTypes.FIELD_ARRAY === componentType;
 const assignSpecialType = (componentType) => ([componentTypes.CHECKBOX, componentTypes.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),
-    ...rest
+    ...props
   };
+
   if (shouldAssignFormOptions(componentType)) {
     componentProps.arrayValidator = (value = []) => {
       if (!Array.isArray(value)) {
@@ -38,7 +46,8 @@ FieldWrapper.propTypes = {
   componentType: PropTypes.string,
   validate: PropTypes.arrayOf(PropTypes.func),
   component: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element]).isRequired,
-  dataType: PropTypes.string
+  dataType: PropTypes.string,
+  initialValue: PropTypes.any
 };
 
 export default FieldWrapper;

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

@@ -127,4 +127,58 @@ 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: componentTypes.TEXT_FIELD,
+            name: 'initial-convert',
+            initialValue: '5',
+            dataType: 'integer'
+          }
+        ]
+      };
+      const wrapper = mount(<FormRenderer {...initialProps} schema={schema} onSubmit={(values) => onSubmit(values)} />);
+      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: componentTypes.TEXT_FIELD,
+            name: 'initial-convert',
+            initialValue: ['5', 3, '11', '999'],
+            dataType: 'integer'
+          }
+        ]
+      };
+      const wrapper = mount(<FormRenderer {...initialProps} schema={schema} onSubmit={(values) => onSubmit(values)} />);
+      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: componentTypes.TEXT_FIELD,
+            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)} />);
+
+      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

@@ -44,7 +44,12 @@ 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;