feat(renderer): allow definition of global props in component mapper.

Author: Hyperkid123

packages/react-form-renderer/demo/form-fields-mapper.js

@@ -82,7 +82,11 @@ const mapper = {
   [componentTypes.TAB_ITEM]: (props) => <div>tab item</div>,
   [componentTypes.DATE_PICKER]: (props) => <div>date picker</div>,
   [componentTypes.TIME_PICKER]: (props) => <div>time picker</div>,
-  dataShower: AsyncComponent
+  dataShower: AsyncComponent,
+  'composite-mapper-field': {
+    component: TextField,
+    className: 'composite-component-class'
+  }
 };
 
 export default mapper;

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

@@ -32,6 +32,11 @@ const validatorMapper = {
 
 const asyncValidatorSchema = {
   fields: [
+    {
+      component: 'composite-mapper-field',
+      name: 'composite-field',
+      label: 'Componsite field'
+    },
     {
       component: 'text-field',
       name: 'async-validation-field',

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

@@ -55,7 +55,7 @@ const SingleField = ({ component, condition, hideField, validate, ...rest }) =>
 
   const validation = validate || rest.dataType ? getValidate(validate, rest.dataType, validatorMapper) : undefined;
 
-  const componentProps = {
+  let componentProps = {
     type: assignSpecialType(component),
     ...rest,
     ...(Object.prototype.hasOwnProperty.call(rest, 'initialValue') && Object.prototype.hasOwnProperty.call(rest, 'dataType')
@@ -67,8 +67,15 @@ const SingleField = ({ component, condition, hideField, validate, ...rest }) =>
         : { validate: composeValidators(validation) }
       : {})
   };
-
-  const Component = componentMapper[component];
+  const componentBinding = componentMapper[component];
+  let Component;
+  if (typeof componentBinding === 'object' && Object.prototype.hasOwnProperty.call(componentBinding, 'component')) {
+    const { component, ...mapperProps } = componentBinding;
+    Component = component;
+    componentProps = { ...mapperProps, ...componentProps };
+  } else {
+    Component = componentBinding;
+  }
 
   return (
     <FormConditionWrapper condition={condition}>
@@ -84,7 +91,7 @@ SingleField.propTypes = {
   condition: PropTypes.object,
   hideField: PropTypes.bool,
   dataType: PropTypes.string,
-  validate: PropTypes.arrayOf(PropTypes.func),
+  validate: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object])),
   initialValue: PropTypes.any
 };
 

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

@@ -13,10 +13,10 @@ import useFieldApi from '../../files/use-field-api';
 import FieldProvider from '../../files/field-provider';
 
 const TextField = (props) => {
-  const { input, meta } = useFieldApi(props);
+  const { input, meta, ...rest } = useFieldApi(props);
   return (
     <div>
-      <input {...input} />
+      <input {...input} {...rest} />
       {meta.error && <div id="error">{meta.error}</div>}
     </div>
   );
@@ -1498,4 +1498,34 @@ describe('renderForm function', () => {
         .text()
     ).toEqual('standard label');
   });
+
+  describe('composite mapper component', () => {
+    const schema = {
+      fields: [
+        {
+          component: 'text-field',
+          name: 'props-from-mapper',
+          label: 'Number field',
+          type: 'number'
+        }
+      ]
+    };
+    const wrapper = mount(
+      <FormRenderer
+        FormTemplate={FormTemplate}
+        schema={schema}
+        onSubmit={() => {}}
+        componentMapper={{
+          'text-field': {
+            component: TextField,
+            className: 'composite-class',
+            type: 'text'
+          }
+        }}
+      />
+    );
+    const { className, type } = wrapper.find('input').props();
+    expect(className).toEqual('composite-class');
+    expect(type).toEqual('number');
+  });
 });